feat(native-app): add app widgets to home screen #15902
Conversation
WalkthroughThe changes introduce a Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant HomeOptionsScreen
User->>App: Navigate to Home Options
App->>HomeOptionsScreen: Load Home Options Screen
HomeOptionsScreen-->>App: Display Widget Configuration Options
User->>HomeOptionsScreen: Toggle Widget Settings
HomeOptionsScreen->>App: Update Preferences Store
App-->>User: Reflect Changes on Home Screen
Possibly related PRs
Suggested labels
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
Datadog ReportAll test runs ✅ 2 Total Test Services: 0 Failed, 2 Passed Test Services
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 19
Outside diff range, codebase verification and nitpick comments (10)
apps/native/app/src/ui/lib/skeleton/general-card-skeleton.tsx (1)
5-5: Recommendation: Add a component description.Adding a brief comment describing the purpose and usage of the
GeneralCardSkeletoncomponent would enhance code readability and maintainability, especially for new developers or when revisiting the code after some time.+/** + * GeneralCardSkeleton is a React component that renders a skeleton screen card + * with customizable height based on the theme. It is used to display a loading + * placeholder for general card components. + */ export const GeneralCardSkeleton = ({ height }: { height: number }) => {apps/native/app/src/ui/lib/card/vehicle-card.tsx (1)
Line range hint
8-24: Refactor suggestion forminHeighthandling in styled component.The implementation of
minHeightin theHoststyled component is correct and functional. However, it can be optimized by directly using template literals for CSS values, which might improve readability and reduce the complexity of the expression.Consider refactoring the
min-heightproperty to directly append 'px' in the template string:- min-height: ${({ minHeight }) => (minHeight ? minHeight + 'px' : 'auto')}; + min-height: ${({ minHeight }) => `${minHeight}px` || 'auto'};This change ensures that
minHeightis treated as a pixel value directly, and 'auto' is used as a fallback whenminHeightis not provided.apps/native/app/src/screens/home/hello-module.tsx (1)
Line range hint
26-102: Main functionality is sound, but improvements can be made for clarity.The logic for handling images and conditional rendering based on preferences is implemented correctly. However, the code could benefit from more comments explaining the process, especially around caching and error handling.
Consider adding more detailed comments to improve code clarity and maintainability, especially around the image handling and caching logic.
apps/native/app/src/stores/preferences-store.ts (1)
Line range hint
1-65: General review of the entire file.The file is well-organized and adheres to TypeScript best practices. The use of Zustand for state management is implemented correctly, and the persistence layer with AsyncStorage is appropriately configured. The functions
setLocale,setAppearanceMode,setUseBiometrics, anddismissare well-implemented, providing robust functionality for managing user preferences.However, there are a couple of areas that could be improved:
- Error Handling: The error message in
setLocalecould be more descriptive. Instead of just "Not supported locale", it could specify which locale was attempted.- Type Safety: The use of
as PreferencesStorein the reset function and the initial spread ofdefaultPreferencescould potentially hide type mismatches or errors. It would be safer to explicitly define the expected properties.Consider enhancing the error message and reviewing the type safety of state assignments to ensure robustness and clarity.
apps/native/app/src/screens/home/inbox-module.tsx (1)
13-13: Add documentation for ApolloError import.The import of
ApolloErrorfrom@apollo/clientis crucial for error handling in this module. Consider adding a comment explaining its use, especially for developers unfamiliar with Apollo.apps/native/app/src/screens/home/applications-module.tsx (2)
16-23: Ensure consistent import grouping and ordering.The imports from various libraries and local files are mixed together. Grouping and ordering imports can improve readability and maintainability. Consider separating third-party imports from local imports and grouping them logically.
Line range hint
55-184: Review of the main componentApplicationsModule.
- Error Handling: The component gracefully handles the error state by returning
nullwhen there is an error and no data, which is a good practice to prevent rendering with incomplete data.- UI Logic: Limiting the number of displayed applications to three is a significant UI change. Ensure that this change is documented or communicated to the stakeholders as it affects the user interface directly.
- Accessibility: The use of
TouchableOpacitywith adisabledprop is a good practice for enhancing UI accessibility, preventing users from interacting with elements that would have no effect.- Performance Consideration: Using
React.memois appropriate here to avoid unnecessary re-renders of the component, which is crucial in a potentially frequently updated area like a home screen.Overall, the component is well-constructed with clear handling of various states (loading, error, empty, and normal cases). However, consider adding comments to complex logic sections to enhance maintainability, especially for other developers who might work on this code in the future.
apps/native/app/src/screens/home/air-discount-module.tsx (1)
16-16: Consider using a more descriptive file name for the illustration.The illustration file
le-jobs-s2.pngis imported and used in this module. Consider renaming it to something more relevant to its usage here, such asair-discount-illustration.png, to improve readability and maintainability.apps/native/app/src/screens/applications/applications.tsx (1)
Line range hint
1-250: Adherence to NextJS and React best practices with suggestions for improvement.The file generally adheres to React and NextJS best practices, including the use of hooks for state and effects management, and performance optimizations through
useMemoanduseCallback. However, consider enhancing type safety with more explicit TypeScript interfaces for props and state to prevent potential type mismatches and improve maintainability.Enhance type definitions for props and state to ensure robust type checking and to facilitate easier maintenance and debugging.
apps/native/app/src/screens/home/home.tsx (1)
76-79: Optimization of navigation options and right buttons.The use of
getRightButtonswithincreateNavigationOptionHooksto dynamically set the right buttons based on the initialization state is a clever use of React's context features and hooks. This approach ensures that the UI elements are only rendered when they are relevant, which can improve the performance of the app on slower devices.However, consider adding a comment explaining why the
themeis cast toanyin line 78. Usinganycan potentially lead to type safety issues, and it might be beneficial for future maintenance to either define a proper type or document the reason for this workaround.Also applies to: 224-225
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (19)
apps/native/app/src/assets/icons/options.pngis excluded by!**/*.pngapps/native/app/src/assets/icons/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/icons/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-company-s2x.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-jobs-s2.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-moving-s4.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-retirement-s3-large.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-retirement-s3.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/moving.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.png
Files selected for processing (34)
- apps/native/app/src/messages/en.ts (3 hunks)
- apps/native/app/src/messages/is.ts (3 hunks)
- apps/native/app/src/screens/applications/applications.tsx (1 hunks)
- apps/native/app/src/screens/home/air-discount-module.tsx (1 hunks)
- apps/native/app/src/screens/home/applications-module.tsx (4 hunks)
- apps/native/app/src/screens/home/hello-module.tsx (2 hunks)
- apps/native/app/src/screens/home/home-options.tsx (1 hunks)
- apps/native/app/src/screens/home/home.tsx (6 hunks)
- apps/native/app/src/screens/home/inbox-module.tsx (2 hunks)
- apps/native/app/src/screens/home/licenses-module.tsx (1 hunks)
- apps/native/app/src/screens/home/onboarding-module.tsx (1 hunks)
- apps/native/app/src/screens/home/vehicles-module.tsx (1 hunks)
- apps/native/app/src/screens/settings/settings.tsx (2 hunks)
- apps/native/app/src/screens/vehicles/components/vehicle-item.tsx (4 hunks)
- apps/native/app/src/screens/vehicles/vehicles-detail.tsx (3 hunks)
- apps/native/app/src/screens/vehicles/vehicles.tsx (6 hunks)
- apps/native/app/src/screens/wallet/components/wallet-item.tsx (4 hunks)
- apps/native/app/src/screens/wallet/wallet.tsx (4 hunks)
- apps/native/app/src/stores/auth-store.ts (1 hunks)
- apps/native/app/src/stores/notifications-store.ts (1 hunks)
- apps/native/app/src/stores/preferences-store.ts (2 hunks)
- apps/native/app/src/ui/index.ts (1 hunks)
- apps/native/app/src/ui/lib/card/air-discount-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/card/license-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/card/vehicle-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/empty-state/empty-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/skeleton/general-card-skeleton.tsx (1 hunks)
- apps/native/app/src/ui/lib/tableview/tableview-cell.tsx (6 hunks)
- apps/native/app/src/utils/component-registry.ts (2 hunks)
- apps/native/app/src/utils/get-main-root.ts (2 hunks)
- apps/native/app/src/utils/lifecycle/setup-components.tsx (2 hunks)
- apps/native/app/src/utils/lifecycle/setup-event-handlers.ts (1 hunks)
- apps/native/app/src/utils/lifecycle/setup-routes.ts (3 hunks)
- apps/native/app/src/utils/test-ids.ts (1 hunks)
Files skipped from review due to trivial changes (3)
- apps/native/app/src/screens/home/onboarding-module.tsx
- apps/native/app/src/screens/vehicles/vehicles-detail.tsx
- apps/native/app/src/ui/index.ts
Additional context used
Path-based instructions (31)
apps/native/app/src/ui/lib/skeleton/general-card-skeleton.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/ui/lib/empty-state/empty-card.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/ui/lib/card/vehicle-card.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/vehicles/components/vehicle-item.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/wallet/components/wallet-item.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/hello-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/utils/test-ids.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/stores/preferences-store.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/utils/component-registry.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/ui/lib/tableview/tableview-cell.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/ui/lib/card/air-discount-card.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/inbox-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/stores/notifications-store.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/applications-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/vehicles-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/utils/get-main-root.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/air-discount-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/utils/lifecycle/setup-components.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/utils/lifecycle/setup-event-handlers.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/vehicles/vehicles.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/home-options.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/applications/applications.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/licenses-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/stores/auth-store.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/wallet/wallet.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/utils/lifecycle/setup-routes.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/ui/lib/card/license-card.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/home.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/settings/settings.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/messages/en.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/messages/is.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (64)
apps/native/app/src/ui/lib/skeleton/general-card-skeleton.tsx (2)
5-26: Well-structured and themed React component.The
GeneralCardSkeletoncomponent is well-implemented using functional component best practices and effective theming withstyled-components/native. The use of TypeScript for props enhances type safety.
5-5: Suggestion: Add PropTypes for runtime type checking.Although TypeScript is used for compile-time type checking, adding PropTypes can provide additional runtime type safety, which is beneficial especially when integrating with non-TypeScript codebases.
+import PropTypes from 'prop-types'; +GeneralCardSkeleton.propTypes = { + height: PropTypes.number.isRequired, +};Likely invalid or redundant comment.
apps/native/app/src/ui/lib/empty-state/empty-card.tsx (2)
12-12: Approved: Addition ofmin-heighttoHoststyled component.The addition of a
min-heightof 130px ensures visual consistency and may improve the layout on various devices. This change is well-aligned with the PR's objectives to enhance user interface elements.
40-40: Approved: Simplification by usingTypographydirectly.Removing the intermediary
Messagestyled component and usingTypographydirectly simplifies the component structure, making it easier to maintain and potentially improving performance by reducing the rendering complexity.apps/native/app/src/ui/lib/card/vehicle-card.tsx (3)
53-53: Add TypeScript type annotations for optional props.The
minHeightproperty inVehicleCardPropsis correctly marked as optional with?, which is good practice for optional props in TypeScript. This allows for better type safety and ensures that the component can be used flexibly in various contexts without providing aminHeight.No changes are necessary here, but it's good to acknowledge the proper use of TypeScript features to enhance component flexibility and maintainability.
57-63: Ensure consistency in destructuring props in theVehicleCardfunction.The destructuring of props in the
VehicleCardfunction is done correctly. Each prop is individually extracted fromVehicleCardProps, which makes the component easier to read and maintain. This approach also aligns with best practices in React component development by clearly showing which props are used in the component.No changes are necessary here, but it's important to maintain this level of clarity and consistency in prop handling across all components.
65-65: Validate the dynamic rendering logic in theHostcomponent.The
Hostcomponent correctly receives theminHeightprop and applies it as a style. This dynamic styling based on props is a powerful feature of styled-components and is implemented correctly here.Ensure that during integration testing, the
minHeightprop is tested with various values, including boundary cases like very small or very large numbers, to verify that the UI behaves as expected without breaking the layout.Verification successful
Dynamic Rendering Logic for
minHeightinHostComponent VerifiedThe
Hostcomponent invehicle-card.tsxcorrectly implements theminHeightprop as part of its styling logic. The dynamic rendering logic is consistent with the intended design, confirming the review comment's accuracy. No issues were found with the implementation.
Hostcomponent definition and usage invehicle-card.tsxconfirms correct application ofminHeight.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the dynamic rendering logic for `minHeight` in the `Host` component. # Test: Check if the `minHeight` prop is correctly applied to the `Host` component. rg --type typescript -A 5 $'minHeight={minHeight}'Length of output: 166
Script:
#!/bin/bash # Corrected script to verify the dynamic rendering logic for `minHeight` in the `Host` component. # Search for the usage of `minHeight` in the `Host` component. rg --type typescript -A 5 'minHeight=\{minHeight\}'Length of output: 88
Script:
#!/bin/bash # Search for the definition or implementation of the `Host` component to verify how `minHeight` is applied. ast-grep --lang typescript --pattern $'const Host = styled.$_(props => $$$)'Length of output: 77
Script:
#!/bin/bash # Retry the search for the usage of `minHeight` in the `Host` component without specifying the file type. rg -A 5 'minHeight=\{minHeight\}'Length of output: 1138
Script:
#!/bin/bash # Broaden the search pattern to find any styled component named `Host`. ast-grep --lang typescript --pattern $'const Host = styled.$$_'Length of output: 64
Script:
#!/bin/bash # Directly search in the `vehicle-card.tsx` file for `Host` component usage. rg 'Host' apps/native/app/src/ui/lib/card/vehicle-card.tsx -A 5Length of output: 502
apps/native/app/src/screens/vehicles/components/vehicle-item.tsx (4)
20-26: Review of new props and their usage inVehicleItem.The addition of
minHeightandstyleprops enhances the component's flexibility in terms of layout and styling. These props are optional, which is appropriate for customization without breaking existing usages. The use of TypeScript for prop type definitions is consistent with best practices for type safety.
38-38: Simplification of mileage registration logic.The logic for determining whether mileage registration is required has been simplified by directly accessing
item.requiresMileageRegistration. This change removes unnecessary complexity and dependencies on other props, aligning with the PR's objective to streamline component logic.
41-49: Updated inline styles to utilize theme values.The use of theme values for
paddingHorizontal,marginBottom, andborderRadiusenhances the consistency of the component with the overall design system. This approach not only makes the styles more maintainable but also ensures that the component adheres to the design guidelines set by the theme.
62-62: Proper handling of theminHeightprop inVehicleCard.The
minHeightprop is passed correctly to theVehicleCardcomponent, ensuring that the customization provided by the new prop is effectively utilized. This change allows for better layout control based on external specifications, which is a positive enhancement.apps/native/app/src/screens/wallet/components/wallet-item.tsx (3)
23-29: Review the updated function signature and destructuring forWalletItem.The function signature has been correctly updated to include the new
styleprop with an optional typeViewStyle. This change allows for more flexible styling of theWalletItemcomponent by passing custom styles. The destructuring is done properly, and TypeScript is used effectively to ensure type safety.
39-39: Ensure consistent application of thestyleprop.The
styleprop is applied to both theContainerandPressablecomponents within the render method. This ensures that any custom styles passed to theWalletItemare appropriately utilized in the layout. However, it's important to ensure that this does not lead to any unintended layout issues, especially sincestyleis applied directly without any merging with existing styles.Consider verifying the visual layout in various scenarios to ensure that the addition of the
styleprop does not cause any visual regressions or layout shifts. Testing should include scenarios wherestyleis not provided to ensure that default styling is applied correctly.Also applies to: 45-45, 72-72
39-45: Check the dynamic handling ofcardHeightwithin theonLayoutcallback.The
cardHeightvariable is dynamically updated based on the layout height of theContainer. This is a good use of theonLayoutevent to adjust the layout dynamically based on content size. However, ensure that this dynamic sizing is tested thoroughly, especially in scenarios where thestyleprop might affect the height of theContainer.It would be beneficial to add unit tests or integration tests that verify the correct calculation and usage of
cardHeightin various scenarios, including differentstyleinputs that could affect the height.Also applies to: 72-72
apps/native/app/src/screens/home/hello-module.tsx (2)
Line range hint
1-15: Imports and setup are appropriate.The imports and initial setup are correctly aligned with the functionality of the
HelloModulecomponent.
102-102: Conditional rendering logic is correctly implemented.The conditional rendering based on
homeScreenEnableGraphicWidgetandimageSrcaligns well with the PR objectives to allow user customization and enhance user experience by preventing unnecessary rendering.apps/native/app/src/utils/test-ids.ts (1)
15-15: Approved: Addition ofTOPBAR_HOME_OPTIONS_BUTTONidentifier.The addition of the
TOPBAR_HOME_OPTIONS_BUTTONidentifier is correctly implemented and follows the established naming conventions for test IDs. This change enhances the testability of the new home options button, aligning with the PR objectives.apps/native/app/src/stores/preferences-store.ts (2)
22-28: Addition of new properties to PreferencesStore interface.The new boolean properties added to the
PreferencesStoreinterface (homeScreenEnableGraphicWidget,homeScreenEnableInboxWidget,homeScreenEnableApplicationsWidget,homeScreenEnableLicensesWidget,homeScreenEnableVehiclesWidget,homeScreenEnableAirDiscountWidget,homeScreenWidgetsInitialised) are well-defined and align with the PR objectives to enhance user customization on the home screen. Each property is clearly named, indicating its purpose and the widget it controls. The addition ofhomeScreenWidgetsInitialisedis particularly noteworthy as it tracks the initialization state of the widgets, which is crucial for managing the setup process.
59-65: Initialization of new properties in defaultPreferences.The initialization of the new properties in the
defaultPreferencesobject sets all widget enablement flags totrueandhomeScreenWidgetsInitialisedtofalse. This setup implies that all widgets are enabled by default but not yet initialized, which is a sensible default state that allows for immediate visibility upon first use while still requiring an initialization process. This approach supports the PR's goal of providing a customizable and user-centric interface right from the first launch.apps/native/app/src/utils/component-registry.ts (2)
18-18: New component registration is consistent and well-formed.The addition of
HomeOptionsScreentoComponentRegistryfollows the established pattern and correctly uses theprefixfor namespace consistency. This ensures that the component can be dynamically referenced in the application based on the configuration.
69-69: New button registration is consistent and well-formed.The addition of
HomeScreenOptionsButtontoButtonRegistryis consistent with other entries and correctly uses theprefixfor namespace consistency. This addition will facilitate the implementation of new functionalities related to home screen customization.apps/native/app/src/ui/lib/tableview/tableview-cell.tsx (4)
6-6: Approved: Import of Typography component.The addition of the
Typographycomponent from../typography/typographyis consistent with the changes made to theTitlecomponent, allowing for more flexible typography styling.
68-68: Approved: Responsive padding adjustment.The
padding-rightproperty in theCenterstyled component now uses a value from the theme's spacing array, enhancing responsiveness and consistency with the theme.
84-89: Approved: Consistent margin usage for Title and Subtitle.The
TitleandSubtitlestyled components have been modified to include a left margin based on the theme's spacing. This ensures better alignment and spacing within the layout, aligning with the PR's objectives to enhance the component's adaptability to different themes.
139-139: Approved: Integration of Typography component in Title.The
Typographycomponent is now used to render the title text, replacing the previousTitleTextstyled component. This change simplifies the component structure and allows for more flexible typography styling.apps/native/app/src/ui/lib/card/air-discount-card.tsx (4)
9-9: Approved: Import of ViewStyle.The import of
ViewStylefromreact-nativeis correctly placed and necessary for the newstyleprop in theAirDiscountPropsinterface.
88-88: Approved: Addition of style prop to AirDiscountProps.The addition of the optional
styleprop to theAirDiscountPropsinterface is correctly typed and follows TypeScript best practices for optional properties.
97-97: Approved: Usage of style prop in Host component.The
styleprop is correctly passed to theHoststyled component, allowing for dynamic styling based on the prop. This change effectively utilizes the flexibility of styled-components with conditional styling.Also applies to: 103-103
Line range hint
88-103: Approved: Overall component logic and structure.The
AirDiscountCardcomponent is well-structured and follows React and TypeScript best practices. The use of internationalization, theming, and conditional rendering is appropriately implemented, enhancing the component's functionality and user experience.apps/native/app/src/screens/home/inbox-module.tsx (3)
33-35: Refine the InboxModuleProps interface.The
InboxModulePropsinterface now includesdata,loading, anderrorproperties. This is a significant change as it directly affects how the component handles state and error management. Ensure that the types are correct and that they are used consistently throughout the component.Verification successful
InboxModuleProps Interface Usage Verified
The
InboxModulePropsinterface, includingdata,loading, anderrorproperties, is used consistently and correctly within theInboxModulecomponent. The properties are destructured and utilized in the component logic, ensuring proper state and error management. No issues found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of InboxModuleProps in the module. # Test: Search for InboxModuleProps usage. Expect: Consistent and correct usage. rg --type typescript -A 5 $'InboxModuleProps' apps/native/app/src/screens/home/inbox-module.tsxLength of output: 129
Script:
#!/bin/bash # Description: Verify the usage of InboxModuleProps in the module. # Test: Search for InboxModuleProps usage. Expect: Consistent and correct usage. rg -A 5 'InboxModuleProps' apps/native/app/src/screens/home/inbox-module.tsxLength of output: 422
18-20: Review GraphQL imports and usage.The imports from
../../graphql/types/schemaincludeListDocumentsQueryanduseListDocumentsQuery. Ensure these are used consistently and correctly throughout the module. It's good practice to keep GraphQL operations and types well-documented and aligned with the backend schema.Verification successful
GraphQL Import Usage Verified
The
ListDocumentsQuerytype is used consistently in type definitions within the module. However,useListDocumentsQueryis imported and exported without internal usage. If the intention was to use it within this module, please verify its necessity. Otherwise, its current usage is consistent with re-exporting practices.
ListDocumentsQueryis used in type definitions.useListDocumentsQueryis not used internally but is exported.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of GraphQL types and queries in the module. # Test: Search for GraphQL types and queries usage. Expect: Consistent and correct usage. rg --type typescript -A 5 $'ListDocumentsQuery|useListDocumentsQuery' apps/native/app/src/screens/home/inbox-module.tsxLength of output: 155
Script:
#!/bin/bash # Description: Verify the usage of GraphQL types and queries in the module. # Test: Search for GraphQL types and queries usage in the specified file. rg -A 5 'ListDocumentsQuery|useListDocumentsQuery' apps/native/app/src/screens/home/inbox-module.tsxLength of output: 652
Script:
#!/bin/bash # Description: Verify the specific usage of `useListDocumentsQuery` in the module. # Test: Search for the usage of `useListDocumentsQuery` in the specified file. rg 'useListDocumentsQuery' apps/native/app/src/screens/home/inbox-module.tsxLength of output: 173
145-145: Confirm exports are correctly used.The export statement includes
InboxModule,useListDocumentsQuery, andvalidateInboxInitialData. Ensure these are used elsewhere in the application as intended, especially the hooks and validation functions which are critical for the module's functionality.Verification successful
Exports are correctly used.
The exported entities
InboxModule,useListDocumentsQuery, andvalidateInboxInitialDataare utilized in the codebase as intended. They are used in contexts appropriate to their functionality, confirming their correct usage.
useListDocumentsQueryis used in a query context.validateInboxInitialDatais used for validation.InboxModuleis used as a component.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of exported entities in the application. # Test: Search for exported entities usage. Expect: Correct and intended usage. rg --type typescript -A 5 $'InboxModule|useListDocumentsQuery|validateInboxInitialData' apps/native/app/srcLength of output: 143
Script:
#!/bin/bash # Description: Verify the usage of exported entities in the application. # Find all TypeScript files and search for the usage of the exported entities. fd --extension ts --extension tsx --exec rg 'InboxModule|useListDocumentsQuery|validateInboxInitialData' {}Length of output: 644
apps/native/app/src/stores/notifications-store.ts (1)
122-122: Approve the addition of the 'options' icon.The addition of the 'options' icon to the
iconsarray enhances the functionality of the notifications store by providing additional user interface capabilities. This change aligns with the PR's objectives to enhance user customization and relevance.Please ensure that the integration of the new 'options' icon with the UI is tested, particularly how it behaves when interacted with and its impact on the layout and accessibility.
apps/native/app/src/screens/home/applications-module.tsx (3)
30-32: Updated interface to accommodate new data structure.The change from
applications: Application[]todata: ListApplicationsQuery | undefinedreflects a shift towards using a more complex data structure directly from a GraphQL query. This is a positive change as it likely simplifies the handling of data by working with the query result directly.
38-53: Introduction of a new validation function.The
validateApplicationsInitialDatafunction encapsulates the logic for determining the initial visibility of the applications widget. This is a good practice as it abstracts complex conditions away from the main component logic, enhancing readability and maintainability.
180-184: Updated exports to include new utilities.Exporting the new
validateApplicationsInitialDatafunction alongside the existing ones is a good practice. It allows other parts of the application to reuse this logic, promoting modularity and maintainability.apps/native/app/src/screens/home/vehicles-module.tsx (1)
1-24: Check for unused imports.The imports are appropriate for the module's functionality. However, ensure that all imported entities are used within the file to avoid unnecessary overhead.
apps/native/app/src/utils/get-main-root.ts (1)
13-13: Type definition expanded to include 'options'.The expansion of the
Iconstype to include'options'aligns with the PR objectives to enhance user interface functionality by allowing more customization. This change is straightforward and correctly implemented.apps/native/app/src/utils/lifecycle/setup-components.tsx (2)
103-103: Approve the registration ofHomeOptionsScreen.The registration of
HomeOptionsScreenwith the identifierCR.HomeOptionsScreenis correctly implemented. This addition enhances the application's navigation capabilities by allowing for more comprehensive user interactions within the app.
16-16: Verify the import path forHomeOptionsScreen.Ensure that the import path
../../screens/home/home-optionscorrectly resolves to theHomeOptionsScreencomponent. This is crucial for maintaining the integrity of the application's module resolution and navigation capabilities.Verification successful
Import path for
HomeOptionsScreenis verified.The import path
../../screens/home/home-optionscorrectly resolves to theHomeOptionsScreencomponent, ensuring proper module resolution and navigation within the application. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the import path for `HomeOptionsScreen`. # Test: Check if the file exists at the specified path. Expect: The file should exist. if [ -f "apps/native/app/src/screens/home/home-options.tsx" ]; then echo "Import path verified." else echo "Import path does not exist." fiLength of output: 115
apps/native/app/src/utils/lifecycle/setup-event-handlers.ts (1)
167-168: Approve the addition of the HomeScreenOptionsButton case.The new case for navigating to
/home-optionswhenHomeScreenOptionsButtonis clicked is correctly implemented within theregisterNavigationButtonPressedListener. This enhances the application's navigation capabilities by providing users with direct access to home screen options.Please ensure that the
/home-optionsroute is correctly configured in the application's routing setup. This can be verified by checking the route definitions or by navigating to the route in a development environment.apps/native/app/src/screens/vehicles/vehicles.tsx (5)
1-1: Update import statements to reflect new dependencies.The import statement has been updated to include
GeneralCardSkeletonfrom the@uilibrary, replacing the previous skeleton component. This change aligns with the PR's objective to enhance the UI consistency.
72-72: Refactor to useGeneralCardSkeletonfor loading states.The skeleton loading state has been refactored to use
GeneralCardSkeletonfrom the@uilibrary. This change should provide a more consistent and visually appealing loading experience across the app. Ensure that the skeleton is appropriately sized and styled to match the vehicle items.Also applies to: 123-127
132-132: Ensure robust key extraction logic.The
keyExtractorfunction uses a combination of vehicle VIN and index for items that are not skeletons. This approach ensures unique keys for React list rendering, which is crucial for performance optimization. However, ensure that all vehicle items have a VIN to avoid potential key conflicts.
14-14: Updated illustration source.The source for the illustration used in the
Emptycomponent has been updated. Ensure that the new illustration is correctly displayed and aligns with the intended visual design of the app.Verification successful
Illustration source update verified.
The illustration source
le-moving-s4.pngis correctly imported and used in the component, ensuring it is displayed as intended. No further action is required.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the new illustration file exists and is correctly referenced. # Test: Check if the new illustration file exists. fd --type file 'le-moving-s4.png'Length of output: 91
Script:
#!/bin/bash # Description: Verify the usage of the illustrationSrc variable in the Empty component. # Search for the usage of illustrationSrc in the vehicles.tsx file. rg 'illustrationSrc' -A 10 apps/native/app/src/screens/vehicles/vehicles.tsxLength of output: 795
130-130: Simplified rendering logic inrenderItem.The
renderItemfunction has been simplified by removing checks for the mileage feature flag. This change should streamline the rendering process but requires verification to ensure it aligns with the intended functionality, especially since the feature flag related to mileage display has been removed.Verification successful
No remaining references to
mileageFeatureFlagfound.The removal of the mileage feature flag has been verified, and no references to it exist in the codebase. This confirms that the change does not affect other parts of the application.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the removal of the mileage feature flag does not affect other parts of the app. # Test: Search for any remaining references to the mileage feature flag. rg --type python 'mileageFeatureFlag'Length of output: 68
Script:
#!/bin/bash # Description: Verify that the removal of the mileage feature flag does not affect other parts of the app. # Test: Search for any remaining references to the mileage feature flag in TypeScript and JavaScript files. rg 'mileageFeatureFlag' --type js --type ts --type tsxLength of output: 82
Script:
#!/bin/bash # Description: Verify that the removal of the mileage feature flag does not affect other parts of the app. # Test: Search for any remaining references to the mileage feature flag across all files. rg 'mileageFeatureFlag'Length of output: 23
apps/native/app/src/screens/home/home-options.tsx (2)
1-2: Review of imports and basic setupThe imports and basic setup are correctly implemented. Using
react-intlfor internationalization andstyled-componentsfor theming aligns with modern React practices. The import ofNavigationFunctionComponentfromreact-native-navigationis appropriate for typing the component, which is good for maintaining type safety.Also applies to: 4-6
8-25: Review of navigation options setupThe custom hook
createNavigationOptionHooksis used to configure navigation options dynamically based on theme and internationalization settings. This is a good practice as it keeps the navigation configuration clean and maintainable. However, ensure that thethemeandintlobjects are properly typed to avoid any runtime errors and maintain type safety.apps/native/app/src/screens/applications/applications.tsx (1)
200-200: Simplify prop passing by using object spread.The change to spread the
applicationsResobject directly into theApplicationsModuleenhances code readability and maintainability. However, it's crucial to ensure thatApplicationsModuleis equipped to handle all properties ofapplicationsReseffectively.Please verify that all properties of
applicationsResare appropriately handled in theApplicationsModule. This may involve checking the component's propTypes or TypeScript interfaces to ensure compatibility.apps/native/app/src/screens/home/licenses-module.tsx (1)
1-8: Imports and Initial Setup: ApprovedThe imports and initial setup are correctly aligned with the functionality required for the licenses module. All components and utilities are appropriately used, supporting internationalization and styled components.
Also applies to: 10-15, 17-24
apps/native/app/src/screens/wallet/wallet.tsx (3)
18-18: Verify updated illustration source.The illustration source has been updated from
le-moving-s6.pngtole-retirement-s3.png. This change should be reflected in any related documentation or tests that might display or reference the old image.Verification successful
Illustration source update verified.
The old illustration source
le-moving-s6.pngis not present in the codebase, indicating that the update tole-retirement-s3.pnghas been applied consistently across all files. No further action is required.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify that the old illustration source is updated in related documentation or tests. # Test: Search for the old illustration source usage. Expect: No occurrences. rg --type markdown -A 5 $'le-moving-s6.png'Length of output: 42
Script:
#!/bin/bash # Description: Verify that the old illustration source is updated across the entire codebase. # Test: Search for the old illustration source usage in all files. Expect: No occurrences. rg 'le-moving-s6.png' -A 5Length of output: 26
208-209: Refined UI component for loading state.The use of
GeneralCardSkeletonfor rendering the loading state in theWalletScreenis a specific enhancement. This change likely provides a more tailored visual representation for the loading state, improving the user experience. Ensure that theGeneralCardSkeletoncomponent is adequately tested to handle various loading scenarios.
1-1: Update import statement for consistency and clarity.The import statement at the top of the file has been modified to include
GeneralCardSkeletoninstead of the previousSkeleton. This change aligns with the PR's objective to refine the UI components. Ensure that all references to the oldSkeletoncomponent are updated throughout the project to maintain consistency.apps/native/app/src/utils/lifecycle/setup-routes.ts (2)
71-81: Review of the new route/home-options.This new route is well-implemented with asynchronous handling to ensure that all navigation actions are completed in the correct order. The use of
awaitwithNavigation.popToRootandNavigation.pushensures that the navigation stack is correctly managed before moving to the new screen. This is crucial for preventing navigation issues in a mobile application where state management can often become complex.The route handler correctly dismisses all modals before navigating, which is a good practice to ensure that no previous screens interfere with the new navigation context.
Overall, this addition aligns with the PR's objective to enhance user customization by providing a dedicated entry point for home options.
222-225: Review of the updated route/vehicle/:id.The modification to this route introduces asynchronous handling, which is a significant improvement over the previous synchronous version. This change ensures that all modals are dismissed and the navigation stack is cleared before proceeding with the new navigation action. This is particularly important in mobile applications where navigation actions need to be managed carefully to avoid leaving the user in an unexpected state.
The use of
awaitwithNavigation.dismissAllModals,Navigation.popToRoot, andNavigation.pushensures that each step of the navigation process is completed before the next begins, which helps in maintaining a clean and predictable navigation flow.This update is a good example of adopting more robust and reliable navigation patterns in the application.
apps/native/app/src/ui/lib/card/license-card.tsx (2)
41-41: Adjustments toHoststyled component for better alignment and spacing.The changes to the
Hoststyled component include:
- Reduction in
min-heightfrom 112px to 104px.- Addition of
justify-content: center;.These adjustments enhance the visual alignment and spacing within the card, contributing to a more centered and compact layout. The reduction in height might affect how content is perceived, so it's important to verify that this change integrates well with the rest of the UI without causing any overflow or clipping issues.
Also applies to: 46-46
134-135: Consistency in image dimensions across styled components and inline styles.The changes ensure that the image dimensions are consistent across different parts of the component:
ImgWrapstyled component now explicitly sets both height and width to 72px.- Inline styles for the
Imagecomponent withinImgWrapalso specify the same dimensions.This consistency is crucial for maintaining a uniform appearance of images across the license card. It prevents discrepancies in image rendering which can lead to a less cohesive design. Ensuring that these dimensions are respected across all instances of image rendering within the component is a good practice for maintaining layout integrity.
Also applies to: 346-346
apps/native/app/src/screens/home/home.tsx (3)
30-59: Review of new hooks and modules.The addition of new hooks and modules (
useListApplicationsQuery,useListDocumentsQuery,useListVehiclesQuery,useGetAirDiscountQuery,useGetLicensesData) is well-aligned with the PR objectives to enhance the home screen with new widgets. Each hook is used to fetch data conditionally based on the widget's visibility, which is a good practice to optimize network requests and load data relevant to the user's preferences.However, ensure that these hooks handle errors appropriately and that there are fallbacks or error states in the UI components that consume these hooks. This is crucial for maintaining a good user experience in cases where data fetching fails.
292-321: Conditional rendering of widgets based on user preferences.The conditional rendering logic for each widget (Inbox, Licenses, Applications, Vehicles, Air Discount) from lines 292 to 321 is well-implemented. It ensures that widgets are only rendered if they are enabled, which aligns with the PR's objectives of enhancing user customization.
This approach not only improves the user experience by loading only relevant content but also optimizes the performance by avoiding unnecessary rendering and data fetching. The use of the spread operator to pass props to the widgets enhances readability and maintainability of the code.
255-260: Review of refetch logic in therefetchfunction.The
refetchfunction is designed to refetch data for all enabled widgets, which is a necessary feature to ensure that the data displayed is up to date. However, there is a potential issue with line 258 wherelicensesRes.refetchPassport()is called. It's unclear from the provided context whetherrefetchPassportis a valid method onlicensesRes. If this method does not exist, it could lead to runtime errors.Please verify that
refetchPassportis a defined and correctly implemented method within thelicensesResobject. If it is not, either implement it or remove the call to avoid errors.Verification successful
refetchPassportmethod is valid and implemented.The
refetchPassportmethod is defined and utilized within thelicenses-module.tsxfile, confirming its existence and implementation. This should prevent any runtime errors related to its usage inhome.tsx. No further action is required regarding this method.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence and implementation of `refetchPassport` method in `licensesRes`. # Test: Search for the method definition in the project. Expect: Definition and correct implementation. rg --type typescript -A 5 $'refetchPassport'Length of output: 78
Script:
#!/bin/bash # Description: Verify the existence and implementation of `refetchPassport` method in `licensesRes`. # Test: Search for the method definition in the project. Expect: Definition and correct implementation. rg --type ts -A 5 $'refetchPassport'Length of output: 1389
apps/native/app/src/messages/en.ts (2)
113-113: New translation key added for app lock timeout.The addition of
'settings.security.appLockTimeoutSeconds': 'sec.'provides clarity on the unit of time used in the app lock timeout settings. This is a straightforward and useful addition for enhancing user understanding in the settings menu.
188-197: Review of new home screen options translations.The addition of multiple new keys under the
homeOptionsnamespace significantly enhances the customization capabilities of the home screen. These keys include:
'homeOptions.screenTitle': 'Home screen''homeOptions.heading.title': 'Configure home screen''homeOptions.heading.subtitle': 'Here you can configure what is displayed on the home screen.''homeOptions.graphic': 'Display graphic''homeOptions.inbox': 'Latest in inbox''homeOptions.licenses': 'Licenses''homeOptions.applications': 'Applications''homeOptions.vehicles': 'Vehicles''homeOptions.airDiscount': 'Air discount scheme'These additions align well with the PR objectives of enhancing user customization and relevance. Each key is clearly named and the values are descriptive, which should help in providing a clear user interface for configuring the home screen.
apps/native/app/src/messages/is.ts (2)
112-112: New localization string for app lock timeout.The addition of
'settings.security.appLockTimeoutSeconds': 'sek.'provides clarity by specifying the unit of time (seconds) for the app lock timeout feature. This is a good practice as it enhances user understanding of the security settings.
187-198: Review of new localization strings for home options.The addition of new localization strings from lines 187 to 198 supports the new home screen customization features introduced in this PR. These strings are well-defined and cover various aspects of the home options, such as titles, subtitles, and specific features like inbox and licenses. This aligns well with the PR's objectives to enhance user customization and relevance.
'homeOptions.screenTitle': 'Heimaskjár'sets the title for the home options screen.'homeOptions.heading.title': 'Stilla heimaskjá'and'homeOptions.heading.subtitle': 'Hér er hægt að stilla hvað birtist á heimaskjá.'provide clear instructions for customization.- Strings for
'homeOptions.graphic': 'Birta myndskreytingu','homeOptions.inbox': 'Nýjast í pósthólfinu', and others, define the toggle options available to the user.These additions are crucial for supporting the new functionality and ensuring that the app remains user-friendly and adaptable to individual preferences.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- apps/native/app/src/screens/home/applications-module.tsx (5 hunks)
- apps/native/app/src/screens/home/vehicles-module.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (2)
- apps/native/app/src/screens/home/applications-module.tsx
- apps/native/app/src/screens/home/vehicles-module.tsx
There was a problem hiding this comment.
Actionable comments posted: 5
Outside diff range, codebase verification and nitpick comments (2)
apps/native/app/src/screens/home/hello-module.tsx (1)
Line range hint
23-101: Approve the use of hooks and new conditional rendering logic. Suggest refactor for image handling.The integration of
graphicWidgetEnabledfor conditional rendering is well-implemented and aligns with the PR objectives to enhance user customization. The use of hooks is optimized and follows best practices.However, the image handling logic within
handleImageis quite complex and could benefit from a refactor to improve clarity and maintainability. Consider breaking down the function into smaller, more focused functions or using more descriptive variable names.apps/native/app/src/screens/home/home.tsx (1)
78-78: Type safety improvement suggestion.The use of
theme as anyat line 78 could potentially lead to type safety issues. Consider refining the type definitions to avoid usingany, which would enhance the robustness and maintainability of the code by leveraging TypeScript's type-checking features.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (7)
- apps/native/app/src/screens/home/hello-module.tsx (2 hunks)
- apps/native/app/src/screens/home/home-options.tsx (1 hunks)
- apps/native/app/src/screens/home/home.tsx (6 hunks)
- apps/native/app/src/screens/home/vehicles-module.tsx (1 hunks)
- apps/native/app/src/screens/wallet/wallet.tsx (3 hunks)
- apps/native/app/src/stores/auth-store.ts (1 hunks)
- apps/native/app/src/stores/preferences-store.ts (4 hunks)
Files skipped from review as they are similar to previous changes (3)
- apps/native/app/src/screens/home/home-options.tsx
- apps/native/app/src/screens/wallet/wallet.tsx
- apps/native/app/src/stores/preferences-store.ts
Additional context used
Path-based instructions (4)
apps/native/app/src/screens/home/hello-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/vehicles-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/stores/auth-store.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/home.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (2)
apps/native/app/src/stores/auth-store.ts (1)
204-206: Approve the integration of home screen widget reset in the logout process.The addition of
resetHomeScreenWidgetsin the logout process is well-implemented and enhances the user experience by ensuring a consistent interface post-authentication. This change aligns with the PR objectives and is integrated effectively within theauthStore.apps/native/app/src/screens/home/home.tsx (1)
225-225: Verify loading indicator behavior.As suggested by
snaerseljan, verifying that the loading indicator in the navigation is triggered by the refetching logic is crucial. This ensures that the UI reflects the current state accurately, especially during data fetching operations.
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (1)
apps/native/app/src/screens/home/home.tsx (1)
78-79: Ensure proper typing for theme usage.The usage of
themeasanyin line 78 could lead to potential type safety issues. Consider specifying a more precise type or enhancing the existing type definitions to ensure better type safety and to take full advantage of TypeScript's capabilities.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- apps/native/app/src/screens/home/home-options.tsx (1 hunks)
- apps/native/app/src/screens/home/home.tsx (6 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/native/app/src/screens/home/home-options.tsx
Additional context used
Path-based instructions (1)
apps/native/app/src/screens/home/home.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (2)
apps/native/app/src/screens/home/home.tsx (2)
265-274: Parallelize refetch operations for efficiency.The current implementation of refetch operations in lines 265-274 could be optimized by executing them in parallel. This approach would reduce the overall time taken for these operations, improving the responsiveness of the application.
Consider implementing the following change to parallelize the refetch operations:
- const promises = [ - applicationsWidgetEnabled && applicationsRes.refetch(), - inboxWidgetEnabled && inboxRes.refetch(), - licensesWidgetEnabled && licensesRes.refetch(), - licensesWidgetEnabled && licensesRes.refetchPassport(), - airDiscountWidgetEnabled && airDiscountRes.refetch(), - vehiclesWidgetEnabled && vehiclesRes.refetch(), - ].filter(Boolean) - await Promise.all(promises) + const promises = [ + applicationsWidgetEnabled ? applicationsRes.refetch() : null, + inboxWidgetEnabled ? inboxRes.refetch() : null, + licensesWidgetEnabled ? licensesRes.refetch() : null, + licensesWidgetEnabled ? licensesRes.refetchPassport() : null, + airDiscountWidgetEnabled ? airDiscountRes.refetch() : null, + vehiclesWidgetEnabled ? vehiclesRes.refetch() : null, + ].filter(Boolean) + await Promise.all(promises)Likely invalid or redundant comment.
131-148: Optimize state management for re-rendering efficiency.As noted by previous comments, extracting each preference individually from the store can prevent unnecessary re-renders of the component. This is particularly important in a React application where performance can be impacted by excessive rendering.
Consider refactoring the state management to pick out each state individually:
- const { - inboxWidgetEnabled, - licensesWidgetEnabled, - applicationsWidgetEnabled, - vehiclesWidgetEnabled, - airDiscountWidgetEnabled, - widgetsInitialised, - } = usePreferencesStore() + const inboxWidgetEnabled = usePreferencesStore(state => state.inboxWidgetEnabled) + const licensesWidgetEnabled = usePreferencesStore(state => state.licensesWidgetEnabled) + const applicationsWidgetEnabled = usePreferencesStore(state => state.applicationsWidgetEnabled) + const vehiclesWidgetEnabled = usePreferencesStore(state => state.vehiclesWidgetEnabled) + const airDiscountWidgetEnabled = usePreferencesStore(state => state.airDiscountWidgetEnabled) + const widgetsInitialised = usePreferencesStore(state => state.widgetsInitialised)Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range, codebase verification and nitpick comments (1)
apps/native/app/src/screens/home/vehicles-module.tsx (1)
91-111: Review hardcoded values and improve responsiveness inVehicleItemstyle.The styling for
VehicleItemincludes hardcoded values and conditional styles based on the count of items. Consider defining these values as constants or retrieving them from a theme or configuration to enhance maintainability and responsiveness.Suggested improvements for better maintainability and responsiveness:
- minHeight={176} - style={ - count > 1 - ? { - width: screenWidth - theme.spacing[2] * 3, - paddingHorizontal: 0, - paddingLeft: theme.spacing[2], - minHeight: 176, - } - : { - width: '100%', - paddingHorizontal: 0, - } - } + style={getItemStyle(count, theme)}And define
getItemStylein a more central location to handle these styles based oncountandtheme, which can be reused across different components if needed.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (4)
- apps/native/app/src/screens/home/air-discount-module.tsx (1 hunks)
- apps/native/app/src/screens/home/applications-module.tsx (5 hunks)
- apps/native/app/src/screens/home/licenses-module.tsx (1 hunks)
- apps/native/app/src/screens/home/vehicles-module.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- apps/native/app/src/screens/home/air-discount-module.tsx
Files skipped from review as they are similar to previous changes (2)
- apps/native/app/src/screens/home/applications-module.tsx
- apps/native/app/src/screens/home/licenses-module.tsx
Additional context used
Path-based instructions (1)
apps/native/app/src/screens/home/vehicles-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range, codebase verification and nitpick comments (1)
apps/native/app/src/stores/auth-store.ts (1)
Line range hint
1-400: Suggestions for improving code structure and error handling.The file
auth-store.tshandles a lot of responsibilities, including user authentication, session management, and UI interactions. Consider the following improvements to enhance modularity and maintainability:
Separation of Concerns: Separate the UI logic (like alerts) from the authentication logic. This can be achieved by moving the UI-related code to a different module or layer that handles UI interactions, making the auth store purely for authentication and session management.
Error Handling: Enhance error handling by centralizing it or using a more sophisticated method to handle different types of authentication errors. This could involve creating a utility function or service that handles all errors and decides whether to show alerts, log errors, or perform other actions.
Type Safety: Ensure that all possible types are handled correctly, especially in asynchronous operations and where optional chaining is used. TypeScript can help prevent runtime errors due to unexpected types.
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (1)
- apps/native/app/src/stores/auth-store.ts (1 hunks)
Additional context used
Path-based instructions (1)
apps/native/app/src/stores/auth-store.ts (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
There was a problem hiding this comment.
Actionable comments posted: 3
Outside diff range, codebase verification and nitpick comments (1)
apps/native/app/src/screens/home/applications-module.tsx (1)
Line range hint
55-184: Approve changes with suggestions for maintainability.The
ApplicationsModulecomponent has been significantly improved to handle new props and improve user interaction effectively. The handling of loading and error states, as well as the conditional rendering based on the presence of applications, aligns well with the PR objectives.Suggestions:
- Consider adding more detailed comments explaining the logic, especially for the conditional rendering sections, to improve maintainability.
- Ensure that the
navigateTofunction is properly tested, especially since it's used in multiple places with different parameters.Would you like me to help by writing some unit tests for this component or improving the documentation?
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (5)
- apps/native/app/src/screens/home/air-discount-module.tsx (1 hunks)
- apps/native/app/src/screens/home/applications-module.tsx (6 hunks)
- apps/native/app/src/screens/home/inbox-module.tsx (2 hunks)
- apps/native/app/src/screens/home/licenses-module.tsx (1 hunks)
- apps/native/app/src/screens/home/vehicles-module.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- apps/native/app/src/screens/home/air-discount-module.tsx
Files skipped from review as they are similar to previous changes (1)
- apps/native/app/src/screens/home/licenses-module.tsx
Additional context used
Path-based instructions (3)
apps/native/app/src/screens/home/inbox-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/applications-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/vehicles-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
thoreyjona
force-pushed
the
feat/app-widgets-home-screen
branch
from
b4f8644 to
ecdfedc
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (19)
apps/native/app/src/assets/icons/options.pngis excluded by!**/*.pngapps/native/app/src/assets/icons/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/icons/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-company-s2x.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-jobs-s2.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-moving-s4.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-retirement-s3-large.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/le-retirement-s3.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/moving.pngis excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.pngapps/native/app/src/assets/illustrations/[email protected]is excluded by!**/*.png
Files selected for processing (34)
- apps/native/app/src/messages/en.ts (3 hunks)
- apps/native/app/src/messages/is.ts (3 hunks)
- apps/native/app/src/screens/applications/applications.tsx (1 hunks)
- apps/native/app/src/screens/home/air-discount-module.tsx (1 hunks)
- apps/native/app/src/screens/home/applications-module.tsx (6 hunks)
- apps/native/app/src/screens/home/hello-module.tsx (2 hunks)
- apps/native/app/src/screens/home/home-options.tsx (1 hunks)
- apps/native/app/src/screens/home/home.tsx (6 hunks)
- apps/native/app/src/screens/home/inbox-module.tsx (2 hunks)
- apps/native/app/src/screens/home/licenses-module.tsx (1 hunks)
- apps/native/app/src/screens/home/onboarding-module.tsx (1 hunks)
- apps/native/app/src/screens/home/vehicles-module.tsx (1 hunks)
- apps/native/app/src/screens/settings/settings.tsx (2 hunks)
- apps/native/app/src/screens/vehicles/components/vehicle-item.tsx (4 hunks)
- apps/native/app/src/screens/vehicles/vehicles-detail.tsx (3 hunks)
- apps/native/app/src/screens/vehicles/vehicles.tsx (6 hunks)
- apps/native/app/src/screens/wallet/components/wallet-item.tsx (4 hunks)
- apps/native/app/src/screens/wallet/wallet.tsx (3 hunks)
- apps/native/app/src/stores/auth-store.ts (1 hunks)
- apps/native/app/src/stores/notifications-store.ts (1 hunks)
- apps/native/app/src/stores/preferences-store.ts (4 hunks)
- apps/native/app/src/ui/index.ts (1 hunks)
- apps/native/app/src/ui/lib/card/air-discount-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/card/license-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/card/vehicle-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/empty-state/empty-card.tsx (3 hunks)
- apps/native/app/src/ui/lib/skeleton/general-card-skeleton.tsx (1 hunks)
- apps/native/app/src/ui/lib/tableview/tableview-cell.tsx (6 hunks)
- apps/native/app/src/utils/component-registry.ts (2 hunks)
- apps/native/app/src/utils/get-main-root.ts (2 hunks)
- apps/native/app/src/utils/lifecycle/setup-components.tsx (2 hunks)
- apps/native/app/src/utils/lifecycle/setup-event-handlers.ts (1 hunks)
- apps/native/app/src/utils/lifecycle/setup-routes.ts (3 hunks)
- apps/native/app/src/utils/test-ids.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- apps/native/app/src/screens/applications/applications.tsx
- apps/native/app/src/screens/home/onboarding-module.tsx
Files skipped from review as they are similar to previous changes (29)
- apps/native/app/src/messages/en.ts
- apps/native/app/src/messages/is.ts
- apps/native/app/src/screens/home/applications-module.tsx
- apps/native/app/src/screens/home/hello-module.tsx
- apps/native/app/src/screens/home/home-options.tsx
- apps/native/app/src/screens/home/licenses-module.tsx
- apps/native/app/src/screens/home/vehicles-module.tsx
- apps/native/app/src/screens/settings/settings.tsx
- apps/native/app/src/screens/vehicles/components/vehicle-item.tsx
- apps/native/app/src/screens/vehicles/vehicles-detail.tsx
- apps/native/app/src/screens/vehicles/vehicles.tsx
- apps/native/app/src/screens/wallet/components/wallet-item.tsx
- apps/native/app/src/screens/wallet/wallet.tsx
- apps/native/app/src/stores/auth-store.ts
- apps/native/app/src/stores/notifications-store.ts
- apps/native/app/src/stores/preferences-store.ts
- apps/native/app/src/ui/index.ts
- apps/native/app/src/ui/lib/card/air-discount-card.tsx
- apps/native/app/src/ui/lib/card/license-card.tsx
- apps/native/app/src/ui/lib/card/vehicle-card.tsx
- apps/native/app/src/ui/lib/empty-state/empty-card.tsx
- apps/native/app/src/ui/lib/skeleton/general-card-skeleton.tsx
- apps/native/app/src/ui/lib/tableview/tableview-cell.tsx
- apps/native/app/src/utils/component-registry.ts
- apps/native/app/src/utils/get-main-root.ts
- apps/native/app/src/utils/lifecycle/setup-components.tsx
- apps/native/app/src/utils/lifecycle/setup-event-handlers.ts
- apps/native/app/src/utils/lifecycle/setup-routes.ts
- apps/native/app/src/utils/test-ids.ts
Additional context used
Path-based instructions (3)
apps/native/app/src/screens/home/inbox-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/air-discount-module.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
apps/native/app/src/screens/home/home.tsx (1)
Pattern
apps/**/*: "Confirm that the code adheres to the following:
- NextJS best practices, including file structure, API routes, and static generation methods.
- Efficient state management and server-side rendering techniques.
- Optimal use of TypeScript for component and utility type safety."
Additional comments not posted (1)
apps/native/app/src/screens/home/air-discount-module.tsx (1)
35-57: Refactor the validation function for clarity and efficiency.The function
validateAirDiscountInitialDatachecks if the user has any air discount rights. The logic can be simplified and made more efficient:
- Combine the conditions to return early.
- Use
everyinstead offilterandlengthfor checking conditions across all items.-const noRights = - data?.airDiscountSchemeDiscounts?.filter( - (item) => item.user.fund?.credit === 0 && item.user.fund.used === 0, - ).length === data?.airDiscountSchemeDiscounts?.length - -if (!noRights) { - return true -} -return false +return data?.airDiscountSchemeDiscounts?.every( + (item) => item.user.fund?.credit !== 0 || item.user.fund.used !== 0 +)Likely invalid or redundant comment.
* feat: first version of vehicle module for home screen * feat: add base for air discount module on home screen * feat: first version of license widget * feat: fix routing to vehicles and air discount * feat: allow override styling for walletItems * fix: correct size for all modules based on screensize * feat: first version of home-options * fix: better coordination for sizes of licenses * feat: UI for home options screen ready * feat: add empty states for home screen widgets * feat: add loading states for cards * chore: remove unused illustration * feat: temp adding another illustration for card until better solution * fix: finalize empty states for home screen widgets * feat: show mileage vehicles first in vehicles module * feat: disable pressable heading if no data, move inbox query into widget * chore: rename singular to plural to match applications name * feat: add minHeight for vehicle cards in vehicle module * fix: add seconds to appLock label in settings * feat: move all data fetching and validation to home screen * fix: should be plural for licenses and vehicles everywhere * feat: skip fetching data on home screen if widgets are disabled * fix: remove duplicate translations * fix: update feature flags to be plural in all places * fix: don't set initializedWidget until queries have loaded * fix: inbox check * fix: spelling of initialised * feat: resetting homescreen preferences on logout * fix: final touches * fix: rename preferences flags to be shorter * fix: import preferences separately * fix: renaming children to items * feat: remove reset call even later * fix: see all in widgets should be variant heading5 --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
What
Add licenses, vehicles and air discount to home screen. Also adding an options screen that users can use to show/hide widgets on their home screen. When opening the app for the first time we do initialisation of the widgets based on the users data. The criteria is as follows:
We only do the initialisation once. After that the user can turn on/off the widgets as he pleases and then we show an empty state if he does not have data to show but turned it on. On logout I set all the preferences that all widgets should be shown and they have not been initialised so it gets triggered again on next login.
When pulling down to refresh we only refetch data for the modules that are visible.
I also updated TableViewCell component to match new design changes. In relation to that I added
sec.after the app lock configuration in the settings screen so it would look better.Why
Show what is relevant for each and every user and allow for more customisation.
Caveats to discuss
Screenshots / Gifs
Here you can see different users with different widgets shown after initialisation.
Screen.Recording.2024-09-05.at.10.17.22.mov
Checklist:
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Improvements
Bug Fixes