fix(js): Fix checkmark for selected value and localize text (novuhq#6104

)

.cspell.json

@@ -774,5 +774,6 @@
     "pnpm-lock.yaml",
     "apps/web/env.sh",
     "packages/js/src/ui/index.directcss",
+    "unreadRead"
   ]
 }

packages/js/src/ui/components/elements/Header/Header.tsx

@@ -1,6 +1,6 @@
 import { cn, useStyle } from '../../../helpers';
+import { StatusDropdown } from '../InboxStatus/InboxStatusDropdown';
 import { ActionsContainer } from './ActionsContainer';
-import { StatusDropdown } from './StatusDropdown';
 
 type HeaderProps = {
   updateScreen: (screen: 'inbox' | 'settings') => void;

packages/js/src/ui/components/elements/Header/StatusDropdown.tsx → packages/js/src/ui/components/elements/InboxStatus/InboxStatusDropdown.tsx

@@ -1,42 +1,32 @@
-import { useInboxStatusContext } from '../../../context';
+import { useInboxStatusContext, useLocalization } from '../../../context';
 import { useStyle } from '../../../helpers';
 import { ArrowDropDown } from '../../../icons';
-import { NotificationStatus } from '../../../types';
 import { Button, buttonVariants, Dropdown } from '../../primitives';
-import { StatusOptions } from './StatusOptions';
-
-const getStatusLabel = (status?: NotificationStatus) => {
-  switch (status) {
-    case NotificationStatus.UNREAD_READ:
-      return 'Inbox';
-    case NotificationStatus.UNREAD:
-      return 'Unread';
-    case NotificationStatus.ARCHIVED:
-      return 'Archived';
-    default:
-      return 'Inbox';
-  }
-};
+import { inboxStatusLocalizationKeys } from './constants';
+import { StatusOptions } from './InboxStatusOptions';
 
 export const StatusDropdown = () => {
   const style = useStyle();
   const { status, setStatus } = useInboxStatusContext();
+  const { t } = useLocalization();
 
   return (
     <Dropdown.Root fallbackPlacements={['bottom', 'top']} placement="bottom">
       <Dropdown.Trigger
         class={style('inboxStatus__dropdownTrigger', buttonVariants({ variant: 'unstyled', size: 'none' }))}
         asChild={(triggerProps) => (
           <Button variant="unstyled" size="none" {...triggerProps}>
-            <span class={style('inboxStatus__title', 'nt-text-xl nt-font-semibold')}>{getStatusLabel(status())}</span>
+            <span class={style('inboxStatus__title', 'nt-text-xl nt-font-semibold')}>
+              {t(inboxStatusLocalizationKeys[status()])}
+            </span>
             <span class={style('inboxStatus__dropdownItemRightIcon', 'nt-text-foreground-alpha-600')}>
               <ArrowDropDown />
             </span>
           </Button>
         )}
       />
       <Dropdown.Content appearanceKey="inboxStatus__dropdownContent">
-        <StatusOptions setStatus={setStatus} />
+        <StatusOptions setStatus={setStatus} status={status()} />
       </Dropdown.Content>
     </Dropdown.Root>
   );

packages/js/src/ui/components/elements/Header/StatusOptions.tsx → packages/js/src/ui/components/elements/InboxStatus/InboxStatusOptions.tsx

@@ -1,38 +1,46 @@
-import { Show } from 'solid-js';
+import { For, Show } from 'solid-js';
 import { JSX } from 'solid-js/jsx-runtime';
-import { NotificationStatus } from '../../../types';
+import { useLocalization } from '../../../context';
 import { cn, useStyle } from '../../../helpers';
 import { Archived, Check, Inbox, Unread } from '../../../icons';
+import { NotificationStatus } from '../../../types';
 import { Dropdown, dropdownItemVariants } from '../../primitives/Dropdown';
+import { notificationStatusOptionsLocalizationKeys } from './constants';
+
+const cases = [
+  {
+    status: NotificationStatus.UNREAD_READ,
+    icon: Inbox,
+  },
+  {
+    status: NotificationStatus.UNREAD,
+    icon: Unread,
+  },
+  {
+    status: NotificationStatus.ARCHIVED,
+    icon: Archived,
+  },
+] satisfies { status: NotificationStatus; icon: () => JSX.Element }[];
+
+export const StatusOptions = (props: {
+  setStatus: (status: NotificationStatus) => void;
+  status: NotificationStatus;
+}) => {
+  const { t } = useLocalization();
 
-export const StatusOptions = (props: { setStatus: (status: NotificationStatus) => void }) => {
   return (
-    <>
-      <StatusItem
-        label={NotificationStatus.UNREAD_READ}
-        onClick={() => {
-          props.setStatus(NotificationStatus.UNREAD_READ);
-        }}
-        isSelected={true}
-        icon={Inbox}
-      />
-      <StatusItem
-        label={NotificationStatus.UNREAD}
-        onClick={() => {
-          props.setStatus(NotificationStatus.UNREAD);
-        }}
-        isSelected={false}
-        icon={Unread}
-      />
-      <StatusItem
-        label={NotificationStatus.ARCHIVED}
-        onClick={() => {
-          props.setStatus(NotificationStatus.ARCHIVED);
-        }}
-        isSelected={false}
-        icon={Archived}
-      />
-    </>
+    <For each={cases}>
+      {(c) => (
+        <StatusItem
+          label={t(notificationStatusOptionsLocalizationKeys[c.status])}
+          onClick={() => {
+            props.setStatus(c.status);
+          }}
+          isSelected={props.status === c.status}
+          icon={c.icon}
+        />
+      )}
+    </For>
   );
 };
 

packages/js/src/ui/components/elements/InboxStatus/constants.ts

@@ -0,0 +1,14 @@
+import { LocalizationKey } from '../../../context';
+import { NotificationStatus } from '../../../types';
+
+export const notificationStatusOptionsLocalizationKeys = {
+  unreadRead: 'inbox.status.options.unreadRead',
+  unread: 'inbox.status.options.unread',
+  archived: 'inbox.status.options.archived',
+} as const satisfies Record<NotificationStatus, LocalizationKey>;
+
+export const inboxStatusLocalizationKeys = {
+  unreadRead: 'inbox.status.unreadRead',
+  unread: 'inbox.status.unread',
+  archived: 'inbox.status.archived',
+} as const satisfies Record<NotificationStatus, LocalizationKey>;

packages/js/src/ui/config/defaultLocalization.ts

@@ -1,4 +1,10 @@
 export const defaultLocalization = {
   'inbox.title': 'Inbox',
   'notifications.emptyNotice': 'No notifications',
-};
+  'inbox.status.options.unread': 'Unread only',
+  'inbox.status.options.unreadRead': 'Unread & read',
+  'inbox.status.options.archived': 'Archived',
+  'inbox.status.unread': 'Unread',
+  'inbox.status.unreadRead': 'Inbox',
+  'inbox.status.archived': 'Archived',
+} as const;

packages/js/src/ui/context/LocalizationContext.tsx

@@ -3,6 +3,7 @@ import { defaultLocalization } from '../config/defaultLocalization';
 import { Path } from '../helpers/types';
 
 export type Localization = Partial<Record<keyof typeof defaultLocalization, string>>;
+export type LocalizationKey = keyof typeof defaultLocalization;
 
 type LocalizationPath = Path<Localization>;
 

packages/js/src/ui/types.ts

@@ -8,7 +8,7 @@ export type NovuProviderProps = {
 };
 
 export enum NotificationStatus {
-  UNREAD_READ = 'Unread & read',
-  UNREAD = 'Unread only',
-  ARCHIVED = 'Archived',
+  UNREAD_READ = 'unreadRead',
+  UNREAD = 'unread',
+  ARCHIVED = 'archived',
 }