feat(native-app): Notifications final improvements

[thoreyjona]

What

• Fallback icon for notifications if no logo is received from server
• Empty state if there are no notifications
• Buttons at the top of notifications are not sticky any more
• Small fix for unreadCount for inbox

Checklist:

• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• Formatting passes locally with my changes
• I have rebased against main before asking for a review

Summary by CodeRabbit

• New Features

  • Added messages for an empty notification list, which will display when no notifications are present.

• Enhancements

  • Improved the display logic to show a custom empty state with an image for the notification list.
  • Updated styling for empty state messages using Typography components for a consistent look.

• UI Adjustments

  • Adjusted layout to move button rendering to the header of the notification list.
  • Added a fallback URL for notification icons to ensure consistent display.

[coderabbitai]

Walkthrough

The changes across the files in this update primarily introduce enhanced notification handling for the native app. Specifically, new messages and translations for empty notification lists are added, logic is implemented to display custom empty state visuals in the notifications screen, and minor UI improvements are applied. The alterations include message updates, rendering adjustments for empty states, and styling enhancements for uniformity and improved user experience.

Changes

Files	Change Summary
apps/native/app/src/messages/en.ts	Added English translations for empty notification lists.
apps/native/app/src/messages/is.ts	Added Icelandic translations for empty notification lists.
apps/native/app/src/screens/inbox/inbox.tsx	Modified useInboxQuery to include unreadCount based on data.documentsV2.
apps/native/app/src/screens/notifications/...	Enhanced notification screen to handle and display a custom empty state with image and improved icon fallback logic.
apps/native/app/src/ui/lib/empty-state/...	Updated empty-list.tsx to use styled Typography components and added margin-top to the Host component.

Sequence Diagram(s)

Below is a high-level sequence diagram visualizing the new notification flow when the notification list is empty.

sequenceDiagram
    participant User
    participant App
    participant NotificationsScreen
    participant API
    participant UIComponents

    User ->> App: Opens Notification Screen
    App ->> API: Fetch notifications
    API -->> App: Returns notifications (empty)
    App ->> NotificationsScreen: Pass empty notifications data
    NotificationsScreen ->> UIComponents: Request to render empty state
    UIComponents -->> NotificationsScreen: Render empty state with message and image
    NotificationsScreen -->> User: Display empty notification screen

Loading

This diagram demonstrates the new control flow, detailing how the app handles an empty notification list by fetching data through the API and rendering a customized empty state in the UI.

---

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?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

Outside diff range and nitpick comments (1)

apps/native/app/src/screens/inbox/inbox.tsx (1)

Line range hint 51-51: The redeclaration of ListItem could lead to confusion and potential bugs. It's important to ensure that each type or component has a unique name unless they are explicitly intended to override each other.

- type ListItem =
-   | { id: string; type: 'skeleton' | 'empty' }
-   | (DocumentV2 & { type: undefined });
+ type InboxListItem =
+   | { id: string; type: 'skeleton' | 'empty' }
+   | (DocumentV2 & { type: undefined });

Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 223783c and 3ee087d.

Files selected for processing (5)

• apps/native/app/src/messages/en.ts (1 hunks)
• apps/native/app/src/messages/is.ts (1 hunks)
• apps/native/app/src/screens/inbox/inbox.tsx (1 hunks)
• apps/native/app/src/screens/notifications/notifications.tsx (8 hunks)
• apps/native/app/src/ui/lib/empty-state/empty-list.tsx (4 hunks)

Additional context used

Path-based instructions (5)

apps/native/app/src/ui/lib/empty-state/empty-list.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/notifications/notifications.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/inbox/inbox.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."

Biome

apps/native/app/src/screens/inbox/inbox.tsx

[error] 51-51: Shouldn't redeclare 'ListItem'. Consider to delete it or rename it. (lint/suspicious/noRedeclare)

'ListItem' is defined here:

Additional comments not posted (17)

apps/native/app/src/ui/lib/empty-state/empty-list.tsx (4)

6-6: Importing Typography from the typography module is a good practice as it ensures consistency across the UI components.

---

15-15: The use of a theme-based margin-top is a good approach for maintaining consistent spacing across different themes.

---

40-41: The styling of Title and Description using Typography ensures that text elements adhere to the overall design system. The centralized text alignment is a typical requirement for empty states, enhancing readability.

Also applies to: 45-45

---

69-69: Using the variant prop to specify typography styles is a best practice as it leverages the typographic scale for consistency.

apps/native/app/src/screens/notifications/notifications.tsx (10)

7-7: Introducing EmptyList is appropriate for handling scenarios where there are no notifications to display.

---

15-20: The addition of ActivityIndicator, FlatList, SafeAreaView, View, and Image from 'react-native' supports the new features in the notifications screen, such as displaying loading indicators and handling empty states.

---

47-47: Proper management of asset paths ensures that resources are correctly resolved and used within the app.

---

58-58: Adjusting the margin-bottom to use theme spacing ensures consistent spacing across different themes and screen sizes.

---

63-65: Defining a constant for the fallback icon URL is good practice for maintainability and reusability.

---

77-80: Defining a new type EmptyItem helps in handling empty states more explicitly within the notifications list.

---

143-146: Handling an empty state by returning an array with a single EmptyItem is a clear and explicit approach to indicate no notifications.

---

209-227: Rendering an empty state using the EmptyList component when there are no notifications enhances the user experience by providing clear visual feedback.

---

236-240: The use of a fallback URL for notification icons is a robust approach to ensure that a default icon is displayed when the sender's logo is unavailable.

---

275-310: Moving the button rendering to ListHeaderComponent is a logical change that improves the structure and readability of the component.

apps/native/app/src/screens/inbox/inbox.tsx (1)

220-220: Adding unreadCount to the state in useInboxQuery is necessary for managing the unread count functionality accurately.

apps/native/app/src/messages/en.ts (1)

284-286: Adding localized messages for the empty notifications list is essential for internationalization and improves the user experience by providing context-specific information in the user's language.

apps/native/app/src/messages/is.ts (1)

418-420: Translations for the empty notifications state are correctly added and seem to align with the feature's requirements.

[snaerseljan]

LGTM. Great job.

[datadog-island-is]

Datadog Report

Branch report: feat/notifications-follow-up-fixes
Commit report: 1d87ec5
Test service: judicial-system-backend

✅ 0 Failed, 20254 Passed, 0 Skipped, 18m 7.25s Total Time
➡️ Test Sessions change in coverage: 1 no change

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 37.10%. Comparing base (34c0031) to head (5fa595a).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #15240   +/-   ##
=======================================
  Coverage   37.10%   37.10%           
=======================================
  Files        6448     6448           
  Lines      131455   131455           
  Branches    37574    37574           
=======================================
  Hits        48781    48781           
  Misses      82674    82674           

Flag	Coverage Δ
judicial-system-backend	55.79% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 34c0031...5fa595a. Read the comment docs.