Add unread UI implementation #539

cacheung · 2025-10-02T18:13:13Z

Add unread UI implementation
Update the dist files, so a lot of files are changed. You can ignore the dist files.

Description

Example:

Light mode with image icon set - use image and unread background color

Dark mode with no image url for icon - default to dot and unread background color

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

Add unread UI implementation

update the unread icon mock example

Use useContainerSettigs hook and update the dist files

update unreadIcon for error handling

packages/messaging/src/ui/components/ContentCardView/ContentCardView.tsx

dsoffiantini · 2025-10-03T20:43:04Z

packages/messaging/src/ui/components/ContentCardView/ContentCardView.tsx

            : styles.container,
-          styleOverrides?.container
+          styleOverrides?.container,
+          getUnreadBackgroundColor() && { backgroundColor: getUnreadBackgroundColor() }


These functions cannot be memoized by react, so Id either memoize them or just handle them inline, which reads much cleaner

dsoffiantini · 2025-10-03T20:44:41Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+}
+
+// Helper function to convert placement from settings to component position
+const convertPlacement = (placement: 'topleft' | 'topright' | 'bottomleft' | 'bottomright'): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' => {


not sure we really need this, also Id create a type for the placement if you want to keep it

dsoffiantini · 2025-10-03T20:45:42Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+
+    switch (displayPosition) {
+      case 'top-left':
+        return { ...baseStyle, top: 6, left: 6 };


since baseStyle is applied everywhere, you can just keep it in the styles of the component its applied to, Id also just add these styles in StyleSheet.create so they can be optimized

dsoffiantini · 2025-10-03T20:46:33Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+    }
+  };
+
+  const getDotColor = () => {


this doesnt need to be a function, you can just do
const dotColor = useMemo(() => colorScheme === 'dark'...

dsoffiantini · 2025-10-03T20:47:49Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+  const unreadSettings = settings.content.unread_indicator;
+
+  // Use settings from context with fallbacks to props
+  const displaySize = size;


This just reassigns the variable and then it isnt really used differently?

dsoffiantini · 2025-10-03T20:48:36Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+    }
+
+    // If image failed to load, fallback to dot
+    if (renderType === 'image' && imageLoadError) {


Good logic 👍

dsoffiantini · 2025-10-03T20:49:03Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+    // If image failed to load, fallback to dot
+    if (renderType === 'image' && imageLoadError) {
+      return (
+        <View


But here i'd make this a separate component since its the same as below.

Maybe <Dot /> ?

dsoffiantini · 2025-10-03T20:50:13Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+    }
+
+    if (renderType === 'image' && (imageSource || darkImageSource)) {
+      const finalImageSource = colorScheme === 'dark' && darkImageSource ? darkImageSource : imageSource;


id memoize this above

Update with review comments

…ct-native into unreadIcon

fix the building errors for sample app and update the sample app

dsoffiantini · 2025-10-07T20:08:36Z

packages/messaging/src/ui/components/ContentCardView/ContentCardView.tsx

+  const containerSettings = useContainerSettings();
+
+  // Support both controlled and uncontrolled modes
+  const isRead = isReadProp !== undefined ? isReadProp : internalIsRead;


Do we want to support isRead via prop? Or should it be a container settings prop? Something like enableUnread which defaults to true? I don't have strong opinions either way

I made it to use the container settings Prop to match what Android is doing.

dsoffiantini · 2025-10-07T20:10:43Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.test.tsx

@@ -0,0 +1,325 @@
+// /*


This test should be able to be re-enabled with the latest updates

dsoffiantini · 2025-10-07T20:11:13Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+  type?: 'dot' | 'image';
+}
+
+const Dot = ({ size, backgroundColor }: { size: number; backgroundColor: string }) => (


can you make an interface above for this?

dsoffiantini · 2025-10-07T20:12:38Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+  const darkImageSource = unreadSettings?.unread_icon?.image?.darkUrl ? 
+    { uri: unreadSettings.unread_icon.image.darkUrl } : darkSource;
+
+  const getPositionStyle = () => {


instead of a function, you can do a useMemo to return the styles, and then apply it below. Optimizes it a tiny bit :)

dsoffiantini · 2025-10-07T20:13:35Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+
+  const renderContent = () => {
+    // Check if we should show dot instead of image based on URL availability
+    const shouldShowDot = 


I think for dark mode we might also want to check if the default image url is empty?

dsoffiantini · 2025-10-07T20:13:50Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+    }
+
+    // If image failed to load, fallback to dot
+    if (renderType === 'image' && imageLoadError) {


❤️ love this

dsoffiantini · 2025-10-07T20:14:35Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+        getPositionStyle(),
+        { minWidth: size, minHeight: size },
+        containerStyle,
+        typeof style === 'object' ? style : undefined


I think here you can just pass style and not check its type. If its an invalid value it should be stripped.

dsoffiantini · 2025-10-07T20:15:18Z

packages/messaging/src/ui/components/UnreadIcon/UnreadIcon.tsx

+    [colorScheme, darkImageSource, imageSource]
+  );
+
+  const renderContent = () => {


if youd like to do this as a function, id wrap it in a useCallback

update with review comments

dsoffiantini · 2025-10-08T16:05:28Z

packages/messaging/src/ui/providers/ContentCardContainerProvider.tsx

@@ -1,4 +1,5 @@
 import React, { createContext } from "react";
+import { SettingsPlacement } from "../components/UnreadIcon/UnreadIcon";


I'd probably invert these, put the SettingsPlacement in this file and consume it inside the component.

dsoffiantini · 2025-10-08T16:06:40Z

packages/messaging/src/models/ContentCard.ts

 }
 export class ContentCard extends PropositionItem {
  data: ContentCardData['data'];
+  read: boolean = false;


lets name this isRead

dsoffiantini · 2025-10-08T16:09:31Z

packages/messaging/src/ui/components/ContentCardView/ContentCardView.tsx

            {...DismissButtonProps}
          />
        )}
+        {(containerSettings?.content?.isUnreadEnabled ?? true) && !isRead && (


you can use isUnreadEnabled since its the same logic

dsoffiantini · 2025-10-08T16:10:22Z

packages/messaging/src/ui/components/ContentCardView/ContentCardView.tsx

+    // Mark as read when interacted with (matches Android behavior)
+    template.read = true;
+    // Trigger re-render to update unread indicator
+    forceUpdate({});


hmmm this likely means something isnt being reflected in the state probably, we should look for a fix.

update for the new comments

Update test

Update metro.config and dist files

Update few UI color in the sample app

update the code to automatically refetch the content card

This reverts commit f8e1f1a.

update read status from native

dsoffiantini · 2025-10-09T19:22:27Z

packages/messaging/src/Messaging.ts

-      return new ContentTemplate(card, type);
+      const read = card.data?.read;
+      const contentTemplate = new ContentTemplate(card, type);
+      contentTemplate.isRead = read ?? false;


you probably want to take this as a parameter inside the constructor for contentTemplate

Add isRead to contentTemplate constructor

cacheung added 2 commits October 2, 2025 11:01

Add unread UI implementation

3b548a8

Add unread UI implementation

update the unread icon mock example

a597945

update the unread icon mock example

cacheung requested review from dsoffiantini and jkartoshka October 2, 2025 18:13

cacheung added 2 commits October 3, 2025 07:32

Use useContainerSettigs hook

d5949ba

Use useContainerSettigs hook and update the dist files

update unreadIcon for error handling

40d88fd

update unreadIcon for error handling

dsoffiantini reviewed Oct 3, 2025

View reviewed changes

packages/messaging/src/ui/components/ContentCardView/ContentCardView.tsx Show resolved Hide resolved

dsoffiantini requested changes Oct 3, 2025

View reviewed changes

dsoffiantini force-pushed the content-card-containers branch 6 times, most recently from 6997afe to 81521eb Compare October 4, 2025 18:20

Update with review comments

870204f

Update with review comments

dsoffiantini force-pushed the content-card-containers branch from 81521eb to 00e7269 Compare October 6, 2025 16:25

cacheung added 2 commits October 6, 2025 15:48

Merge branch 'content-card-containers' of github.com:adobe/aepsdk-rea…

5e17234

…ct-native into unreadIcon

fix the building errors for sample app and update the sample app

801fc00

fix the building errors for sample app and update the sample app

dsoffiantini requested changes Oct 7, 2025

View reviewed changes

update with review comments

31d68ad

update with review comments

dsoffiantini requested changes Oct 8, 2025

View reviewed changes

cacheung added 4 commits October 8, 2025 10:17

update for new comments

80d6595

update for the new comments

Update test

cdd17d7

Update test

Update metro.config and dist files

2fada50

Update metro.config and dist files

Update few UI color in the sample app

4fc5efc

Update few UI color in the sample app

dsoffiantini approved these changes Oct 8, 2025

View reviewed changes

cacheung added 3 commits October 8, 2025 18:27

update the code to automatically refetch the content card

f8e1f1a

update the code to automatically refetch the content card

Revert "update the code to automatically refetch the content card"

06f5a5f

This reverts commit f8e1f1a.

update read status from native

52314bb

update read status from native

dsoffiantini reviewed Oct 9, 2025

View reviewed changes

Add isRead to contentTemplate constructor

91cb1d7

Add isRead to contentTemplate constructor

dsoffiantini approved these changes Oct 9, 2025

View reviewed changes

cacheung merged commit 041318a into adobe:content-card-containers Oct 9, 2025
5 checks passed

		@@ -1,4 +1,5 @@
		import React, { createContext } from "react";
		import { SettingsPlacement } from "../components/UnreadIcon/UnreadIcon";

Add unread UI implementation #539

Add unread UI implementation #539

Uh oh!

Conversation

cacheung commented Oct 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Motivation and Context

How Has This Been Tested?

Screenshots (if appropriate):

Types of changes

Checklist:

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cacheung commented Oct 2, 2025 •

edited

Loading