feat: CategoryHeader in Notifications screen

Author: kirillzyusko

app/component-library/components-temp/FilterTabBar/FilterTabBar.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import {
+  Box,
+  ButtonFilter,
+  ButtonSize,
+} from '@metamask/design-system-react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+
+import { FilterTabBarProps } from './FilterTabBar.types';
+
+/**
+ * A horizontally scrollable row of filter pills built on the design-system
+ * `ButtonFilter`. Renders a single active tab driven by `selectedKey` and
+ * reports presses through `onSelect`.
+ */
+const FilterTabBar = ({
+  tabs,
+  selectedKey,
+  onSelect,
+  style,
+  testID,
+}: FilterTabBarProps) => {
+  const tw = useTailwind();
+
+  return (
+    <Box twClassName="py-1" style={style} testID={testID}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={tw.style('flex-grow-0')}
+        contentContainerStyle={tw.style('flex-row items-center gap-2 px-4')}
+      >
+        {tabs.map((tab) => (
+          <ButtonFilter
+            key={tab.key}
+            isActive={tab.key === selectedKey}
+            size={ButtonSize.Sm}
+            onPress={() => onSelect(tab.key)}
+            testID={tab.testID}
+          >
+            {tab.label}
+          </ButtonFilter>
+        ))}
+      </ScrollView>
+    </Box>
+  );
+};
+
+export default FilterTabBar;

app/component-library/components-temp/FilterTabBar/FilterTabBar.types.ts

@@ -0,0 +1,46 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * A single selectable tab rendered inside the {@link FilterTabBar}.
+ */
+export interface FilterTab {
+  /**
+   * Stable, unique identifier for the tab. Returned via `onSelect` and compared
+   * against `selectedKey` to determine the active state.
+   */
+  key: string;
+  /**
+   * Visible label rendered inside the filter button.
+   */
+  label: string;
+  /**
+   * Optional test identifier applied to the underlying button.
+   */
+  testID?: string;
+}
+
+/**
+ * FilterTabBar component props.
+ */
+export interface FilterTabBarProps {
+  /**
+   * Ordered list of tabs to render.
+   */
+  tabs: FilterTab[];
+  /**
+   * Key of the currently selected tab.
+   */
+  selectedKey: string;
+  /**
+   * Called with the tab key when a tab is pressed.
+   */
+  onSelect: (key: string) => void;
+  /**
+   * Optional style applied to the scrollable wrapper.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Optional test identifier applied to the wrapper.
+   */
+  testID?: string;
+}

app/component-library/components-temp/FilterTabBar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FilterTabBar';
+export type { FilterTab, FilterTabBarProps } from './FilterTabBar.types';

app/components/Views/Notifications/NotificationsCategory/NotificationsCategory.testIds.ts

@@ -0,0 +1,8 @@
+export const NotificationsCategorySelectorsIDs = {
+  CONTAINER: 'notifications-category',
+  ALL: 'notifications-category-all',
+  WALLET_ACTIVITY: 'notifications-category-wallet-activity',
+  PERPS: 'notifications-category-perps',
+  SOCIAL_AI: 'notifications-category-social-ai',
+  MARKETING: 'notifications-category-marketing',
+} as const;

app/components/Views/Notifications/NotificationsCategory/NotificationsCategory.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import { strings } from '../../../../../locales/i18n';
+import { selectIsMetamaskNotificationsEnabled } from '../../../../selectors/notifications';
+import { selectSocialLeaderboardEnabled } from '../../../../selectors/featureFlagController/socialLeaderboard';
+import FilterTabBar, {
+  FilterTab,
+} from '../../../../component-library/components-temp/FilterTabBar';
+
+import {
+  NotificationCategoryId,
+  NotificationsCategoryProps,
+} from './NotificationsCategory.types';
+import { NotificationsCategorySelectorsIDs } from './NotificationsCategory.testIds';
+
+/**
+ * Horizontally scrollable category filter for the notifications list. The set
+ * of categories is gated by feature flags: the activity-related categories only
+ * appear when MetaMask notifications are enabled, and "Trading Signals" only
+ * when the social leaderboard flag is on.
+ */
+const NotificationsCategory = ({
+  onSelect,
+  testID,
+}: NotificationsCategoryProps) => {
+  const isMetamaskNotificationsEnabled = useSelector(
+    selectIsMetamaskNotificationsEnabled,
+  );
+  const isSocialLeaderboardEnabled = useSelector(
+    selectSocialLeaderboardEnabled,
+  );
+
+  const [selectedCategory, setSelectedCategory] =
+    useState<NotificationCategoryId>(NotificationCategoryId.All);
+
+  const tabs = useMemo<FilterTab[]>(() => {
+    const items: FilterTab[] = [
+      {
+        key: NotificationCategoryId.All,
+        label: strings('app_settings.notifications_opts.all_title'),
+        testID: NotificationsCategorySelectorsIDs.ALL,
+      },
+    ];
+
+    if (isMetamaskNotificationsEnabled) {
+      items.push(
+        {
+          key: NotificationCategoryId.WalletActivity,
+          label: strings(
+            'app_settings.notifications_opts.wallet_activity_title',
+          ),
+          testID: NotificationsCategorySelectorsIDs.WALLET_ACTIVITY,
+        },
+        {
+          key: NotificationCategoryId.Perps,
+          label: strings('app_settings.notifications_opts.perps_title'),
+          testID: NotificationsCategorySelectorsIDs.PERPS,
+        },
+      );
+
+      if (isSocialLeaderboardEnabled) {
+        items.push({
+          key: NotificationCategoryId.SocialAI,
+          label: strings('app_settings.notifications_opts.social_ai_title'),
+          testID: NotificationsCategorySelectorsIDs.SOCIAL_AI,
+        });
+      }
+
+      items.push({
+        key: NotificationCategoryId.Marketing,
+        label: strings('app_settings.notifications_opts.marketing_title'),
+        testID: NotificationsCategorySelectorsIDs.MARKETING,
+      });
+    }
+
+    return items;
+  }, [isMetamaskNotificationsEnabled, isSocialLeaderboardEnabled]);
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      const category = key as NotificationCategoryId;
+      setSelectedCategory(category);
+      onSelect(category);
+    },
+    [onSelect],
+  );
+
+  return (
+    <FilterTabBar
+      tabs={tabs}
+      selectedKey={selectedCategory}
+      onSelect={handleSelect}
+      testID={testID ?? NotificationsCategorySelectorsIDs.CONTAINER}
+    />
+  );
+};
+
+export default NotificationsCategory;

app/components/Views/Notifications/NotificationsCategory/NotificationsCategory.types.ts

@@ -0,0 +1,25 @@
+/**
+ * Identifiers for the notification categories surfaced in the
+ * {@link NotificationsCategory} tab bar.
+ */
+export enum NotificationCategoryId {
+  All = 'all',
+  WalletActivity = 'wallet-activity',
+  Perps = 'perps',
+  SocialAI = 'social-ai',
+  Marketing = 'marketing',
+}
+
+/**
+ * NotificationsCategory component props.
+ */
+export interface NotificationsCategoryProps {
+  /**
+   * Called with the selected category whenever the user picks a tab.
+   */
+  onSelect: (category: NotificationCategoryId) => void;
+  /**
+   * Optional test identifier applied to the tab bar wrapper.
+   */
+  testID?: string;
+}

app/components/Views/Notifications/NotificationsCategory/index.ts

@@ -0,0 +1,3 @@
+export { default } from './NotificationsCategory';
+export { NotificationCategoryId } from './NotificationsCategory.types';
+export type { NotificationsCategoryProps } from './NotificationsCategory.types';

app/components/Views/Notifications/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '@metamask/design-system-react-native';
 
 import DisabledNotifications from './DisabledNotifications';
+import NotificationsCategory from './NotificationsCategory';
 import { strings } from '../../../../locales/i18n';
 import Routes from '../../../constants/navigation/Routes';
 import {
@@ -143,6 +144,11 @@ const NotificationsView = ({
       >
         {isNotificationEnabled ? (
           <>
+            <NotificationsCategory
+              onSelect={() => {
+                // TODO: filter the notifications list by the selected category
+              }}
+            />
             <Notifications
               navigation={navigation}
               allNotifications={allNotifications}

locales/languages/de.json

@@ -3437,6 +3437,7 @@
     "enable_push_notifications": "Push-Benachrichtigungen aktivieren",
     "allow_notifications_desc": "Bestimmen Sie, worüber Sie benachrichtigt werden und wie.",
     "notifications_opts": {
+      "all_title": "Alle",
       "preferences_title": "Einstellungen",
       "push_recommended": "Push",
       "in_app": "In-App",

locales/languages/el.json

@@ -3437,6 +3437,7 @@
     "enable_push_notifications": "Ενεργοποίηση ειδοποιήσεων ώθησης",
     "allow_notifications_desc": "Επιλέξτε τι ειδοποιήσεις θα λαμβάνετε και πώς.",
     "notifications_opts": {
+      "all_title": "Όλα",
       "preferences_title": "Προτιμήσεις",
       "push_recommended": "Ειδοποιήσεις push",
       "in_app": "Εντός εφαρμογής",