@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/social/features/chat/features/home/components/ChannelList/ChannelList.tsx

@@ -0,0 +1,209 @@
+// ChannelList — ported from AmityUiKitWeb v4/chat/features/home/components/ChannelList.
+// Renders a live list of channels for the given types via an RN FlatList.
+//
+// RN adaptations from web:
+//   - Web's IntersectionObserver sentinel → FlatList `onEndReached`.
+//   - Web's SwipeToLeft (framer-motion) swipe-to-archive → react-native-gesture-handler
+//     `Swipeable` (renderRightActions + onSwipeableWillOpen → archiveChannel); needs
+//     GestureHandlerRootView at the app root. Web also passes excludeArchives:true so
+//     archived channels drop out of the main list — mirrored here.
+//   - The empty-state illustration (web-only) is replaced by an AmityIcon glyph.
+//   - Navigation is delegated to `onChannelPress(channelId)` from the page.
+//   - Mark-as-read on row tap: web's canonical mark-read happens on conversation
+//     OPEN (message-level `Amity.Message#markRead()` via useChatMessage/useMarkAsRead,
+//     already wired for the RN Chat/GroupChat screens). To clear the list's unread
+//     count immediately on tap, we additionally call
+//     `SubChannelRepository.startMessageReceiptSync(defaultSubChannelId)` here — the
+//     SDK marks all messages in the sub-channel read. Fire-and-forget; failures are
+//     non-fatal (the conversation-open path still marks read).
+
+// 1. React / RN imports
+import { FlatList, View } from 'react-native';
+
+// 2. Third-party imports
+import { Swipeable } from 'react-native-gesture-handler';
+import { SvgXml } from 'react-native-svg';
+import { SubChannelRepository } from '@amityco/ts-sdk-react-native';
+
+// 3. Internal imports (relative)
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { Button } from '../../../../../../../core/design/atoms/Button';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useAmityTheme } from '../../../../../../../core/design/theme/AmityThemeProvider';
+import { emptyCommunity2 } from '../../../../../../../core/assets/icons/emptyCommunity2';
+import { useString } from '../../../../../../../core/localization';
+import { AmityChatListItem } from '../../../../components/AmityChatListItem';
+import { useChannelsCollection } from '../../../../hooks/collections/useChannelsCollection';
+import { useChannelArchiveQuery } from '../../../../hooks/queries';
+import { useStyles } from './styles';
+
+const SKELETON_ROW_COUNT = 9;
+const ACTION_ICON_SIZE = 28;
+
+// 3. Types
+export type ChannelListProps = {
+  types?: Amity.ChannelType[];
+  /**
+   * When false, the "Push notifications have been disabled by admin" banner is
+   * shown above the list (ported from AmityUIKitIOS). Defaults to true (hidden).
+   */
+  isPushNotificationEnabled?: boolean;
+  /** Called with the pressed channel id + display name + type — the page wires navigation. */
+  onChannelPress?: (
+    channelId: string,
+    displayName?: string,
+    type?: Amity.ChannelType
+  ) => void;
+  /** Called when the empty-state create button is pressed. */
+  onCreatePress?: () => void;
+};
+
+// 4. Named function component
+export function ChannelList({
+  types,
+  isPushNotificationEnabled = true,
+  onChannelPress,
+  onCreatePress,
+}: ChannelListProps) {
+  const { styles } = useStyles();
+  const { channels, loading, hasNextPage, loadMore } = useChannelsCollection({
+    types,
+    excludeArchives: true,
+  });
+  const { archiveChannel } = useChannelArchiveQuery();
+  const archiveLabel = useString('amity_chat_archive');
+
+  const renderArchiveAction = () => (
+    <View style={styles.action}>
+      <View style={styles.actionContent}>
+        <AmityIcon
+          name="archive-r"
+          size={ACTION_ICON_SIZE}
+          tokenColor={AmityColorToken.IconSquareButtonDefaultSecondaryDefault}
+        />
+        <Typography variant="captionBold" style={styles.actionLabel}>
+          {archiveLabel}
+        </Typography>
+      </View>
+    </View>
+  );
+
+  // Mark the tapped channel read (clear its unread count) before navigating.
+  // Uses the channel's default sub-channel; the SDK marks all its messages read.
+  const handleRowPress = (channel: Amity.Channel) => {
+    if (channel.defaultSubChannelId) {
+      SubChannelRepository.startMessageReceiptSync(
+        channel.defaultSubChannelId
+      ).catch(() => {
+        // Non-fatal: unread also clears when the conversation is opened.
+      });
+    }
+    onChannelPress?.(channel.channelId, channel.displayName, channel.type);
+  };
+
+  const isInitialLoading = loading && channels.length === 0;
+
+  if (isInitialLoading) {
+    return (
+      <View style={styles.list}>
+        {Array.from({ length: SKELETON_ROW_COUNT }).map((_, i) => (
+          <AmityChatListItem.Skeleton key={i} />
+        ))}
+      </View>
+    );
+  }
+
+  // iOS AmityChatListComponent renders the push-disabled banner above BOTH the
+  // empty state and the populated list (but not the loading skeleton).
+  return (
+    <View style={styles.root}>
+      {!isPushNotificationEnabled ? <PushDisabledBanner /> : null}
+      {channels.length === 0 ? (
+        <EmptyChannelList onCreatePress={onCreatePress} />
+      ) : (
+        <FlatList
+          style={styles.list}
+          contentContainerStyle={styles.listContent}
+          data={channels}
+          keyExtractor={(channel) => channel.channelId}
+          renderItem={({ item }) => (
+            <Swipeable
+              renderRightActions={renderArchiveAction}
+              onSwipeableWillOpen={() =>
+                archiveChannel({ channelId: item.channelId })
+              }
+            >
+              <View style={styles.row}>
+                <AmityChatListItem
+                  channel={item}
+                  onPress={() => handleRowPress(item)}
+                />
+              </View>
+            </Swipeable>
+          )}
+          onEndReachedThreshold={0.7}
+          onEndReached={() => {
+            if (hasNextPage) loadMore();
+          }}
+          ListFooterComponent={
+            hasNextPage ? <AmityChatListItem.Skeleton /> : null
+          }
+        />
+      )}
+    </View>
+  );
+}
+
+// Push-notifications-disabled banner — ported from AmityUIKitIOS
+// AmityChatListComponent.pushNotificationsBanner: a bell-slash glyph + caption on
+// the subdue-banner surface, shown when push is disabled at the network/admin
+// or chat-module level.
+function PushDisabledBanner() {
+  const { styles } = useStyles();
+  const label = useString('amity_chat_notifications_disabled');
+  return (
+    <View style={styles.pushBanner}>
+      <AmityIcon
+        name="bell-slash-r"
+        size={18}
+        tokenColor={AmityColorToken.IconBannerSubdueDescriptionGeneral}
+      />
+      <Typography variant="caption" style={styles.pushBannerText}>
+        {label}
+      </Typography>
+    </View>
+  );
+}
+
+function EmptyChannelList({ onCreatePress }: { onCreatePress?: () => void }) {
+  const { styles } = useStyles();
+  const { mode } = useAmityTheme();
+  const emptyTitle = useString('amity_chat_home_empty_title');
+  const emptyDescription = useString('amity_chat_home_empty_description');
+  const createNewChatLabel = useString('amity_chat_create_new_chat');
+
+  return (
+    <View style={styles.empty}>
+      {/* Web renders the EmptyCommunity2 160×160 illustration here, not a flat
+          glyph — theme-aware (Light/Dark). */}
+      <SvgXml xml={emptyCommunity2(mode === 'dark')} width={160} height={160} />
+      <View style={styles.emptyContent}>
+        <View style={styles.emptyText}>
+          <Typography variant="titleBold" style={styles.emptyTitle}>
+            {emptyTitle}
+          </Typography>
+          <Typography variant="caption" style={styles.emptySubtitle}>
+            {emptyDescription}
+          </Typography>
+        </View>
+        <Button
+          label={createNewChatLabel}
+          icon="plus-r"
+          style={styles.createButton}
+          onPress={onCreatePress}
+        />
+      </View>
+    </View>
+  );
+}

package/src/social/features/chat/features/home/components/ChannelList/index.ts

@@ -0,0 +1,2 @@
+export { ChannelList } from './ChannelList';
+export type { ChannelListProps } from './ChannelList';

package/src/social/features/chat/features/home/components/ChannelList/styles.ts

@@ -0,0 +1,102 @@
+// Styles for ChannelList — ported from AmityUiKitWeb ChannelList.module.css.
+// Empty-state geometry mirrors the web CSS (rem → px ×16); colours resolve
+// through design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    // Wraps the push-disabled banner + the list/empty content (banner pinned on top).
+    root: {
+      flex: 1,
+    },
+    // iOS pushNotificationsBanner: HStack (icon + caption), full width, padding
+    // 12/16, subdue-banner surface. iOS spacing 2 → 4 (RN AmityIcon has no image
+    // insets, so a slightly larger gap matches the iOS look).
+    pushBanner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
+    },
+    pushBannerText: {
+      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
+    },
+    list: {
+      flex: 1,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+    },
+    listContent: {
+      flexGrow: 1,
+    },
+    // Swipe-to-archive visuals (web SwipeToLeft.module.css):
+    // row over the action layer; action bg/icon/label via squarebutton tokens;
+    // action content 5rem→80 wide, gap 0.25rem→4, padding 1rem/0.5rem→16/8.
+    row: {
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    action: {
+      justifyContent: 'center',
+      alignItems: 'flex-end',
+      backgroundColor: token(
+        AmityColorToken.SurfaceSquareButtonDefaultSecondaryDefault
+      ),
+    },
+    actionContent: {
+      width: 80,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      paddingVertical: 16,
+      paddingHorizontal: 8,
+    },
+    actionLabel: {
+      color: token(AmityColorToken.TextSquareButtonDefaultSecondaryDefault),
+    },
+    // web channelList__empty: column, centered, gap 0.25rem, padding 1rem.
+    empty: {
+      flexGrow: 1,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      padding: 16,
+      backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault),
+    },
+    // web channelList__emptyContent: gap 1rem, full width.
+    emptyContent: {
+      flexDirection: 'column',
+      alignItems: 'center',
+      gap: 16,
+      width: '100%',
+    },
+    emptyText: {
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    emptyTitle: {
+      textAlign: 'center',
+      color: token(AmityColorToken.TextEmptyStateTitleDefault),
+    },
+    emptySubtitle: {
+      textAlign: 'center',
+      color: token(AmityColorToken.TextEmptyStateDescriptionDefault),
+    },
+    // Web's Button.Main here is auto-width (inline-flex), centered by the
+    // emptyContent's align-items:center — NOT full-width. RN's Button defaults to
+    // alignSelf:flex-start, so centre it explicitly (compact, not full-screen).
+    createButton: {
+      alignSelf: 'center',
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/home/components/Header/Header.tsx

@@ -0,0 +1,38 @@
+// Header — ported from AmityUiKitWeb v4/chat/features/home/components/Header.
+// The web header hosts a title, the offline indicator, then a right-aligned actions
+// group (SearchButton / CreateChatMenu / ChatHomeMenu), in that order. The chat-list
+// header is the ONLY place web surfaces WaitingForNetwork.
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { useString } from '../../../../../../../core/localization';
+import { WaitingForNetwork } from '../../../../elements/WaitingForNetwork';
+import { SearchButton } from '../../elements/SearchButton';
+import { CreateChatMenu } from '../../elements/CreateChatMenu';
+import { ChatHomeMenu } from '../../elements/ChatHomeMenu';
+import { useStyles } from './styles';
+
+// 3. Named function component
+export function Header() {
+  const { styles } = useStyles();
+  const title = useString('amity_chat_home_title');
+
+  return (
+    <View style={styles.header}>
+      <Typography variant="headline" style={styles.title} numberOfLines={1}>
+        {title}
+      </Typography>
+      <View style={styles.networkSlot}>
+        <WaitingForNetwork />
+      </View>
+      <View style={styles.actions}>
+        <SearchButton />
+        <CreateChatMenu enabledChannelTypes={['conversation', 'community']} />
+        <ChatHomeMenu />
+      </View>
+    </View>
+  );
+}

package/src/social/features/chat/features/home/components/Header/index.ts

@@ -0,0 +1 @@
+export { Header } from './Header';

package/src/social/features/chat/features/home/components/Header/styles.ts

@@ -0,0 +1,50 @@
+// Styles for Header — ported from AmityUiKitWeb Header.module.css.
+// Geometry mirrors the web CSS (padding 0.75rem 1rem, gap 0.5rem → px ×16);
+// colours resolve through design tokens.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceListDefaultDefault),
+    },
+    // Web gives the title and the actions `flex: 1 0 0` each and lets the offline
+    // indicator between them take its natural width — fine on a desktop header.
+    // On a phone the two halves claim everything and the indicator (flexShrink: 0)
+    // overflowed under the action buttons, so RN sizes both sides to their content
+    // and gives the middle slot the slack instead.
+    title: {
+      flexShrink: 1,
+      minWidth: 0,
+      color: token(AmityColorToken.TextListHeaderDefaultDefault),
+    },
+    /** Centres WaitingForNetwork between the title and the actions. */
+    networkSlot: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    // web header__actions: justify-content flex-end, gap 0.75rem→12
+    actions: {
+      flexShrink: 0,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: 12,
+    },
+  });
+
+  return { styles };
+};

package/src/social/features/chat/features/home/components/NotificationsDisabledBanner/NotificationsDisabledBanner.tsx

@@ -0,0 +1,36 @@
+// NotificationsDisabledBanner — ported from AmityUiKitWeb
+// v4/chat/features/home/components/NotificationsDisabledBanner.
+// A subdued status banner shown when chat push notifications are disabled.
+// (On web this is currently gated off; ChatHome does not mount it for M1.)
+
+// 1. React / RN imports
+import { View } from 'react-native';
+
+// 2. Internal imports (relative)
+import { Typography } from '../../../../../../../core/design/components/Typography';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { useStyles, ICON_SIZE } from './styles';
+
+// 3. Named function component
+export function NotificationsDisabledBanner() {
+  const { styles, token } = useStyles();
+  const text = useString('amity_chat_notifications_disabled');
+
+  return (
+    <View style={styles.banner} accessibilityRole="alert">
+      <AmityIcon
+        name="bell-slash-r"
+        size={ICON_SIZE}
+        // Web uses icon-banner-subdue-description-general; SoT (717) lacks the Subdue
+        // icon variant → color-identical GreyBG variant (same alias {Secondary/400}/
+        // {Secondary/500}). Web slug allowlisted in check-fidelity.
+        color={token(AmityColorToken.IconBannerSubdueDescriptionGeneral)}
+      />
+      <Typography variant="caption" style={styles.text}>
+        {text}
+      </Typography>
+    </View>
+  );
+}

package/src/social/features/chat/features/home/components/NotificationsDisabledBanner/index.ts

@@ -0,0 +1 @@
+export { NotificationsDisabledBanner } from './NotificationsDisabledBanner';

package/src/social/features/chat/features/home/components/NotificationsDisabledBanner/styles.ts

@@ -0,0 +1,35 @@
+// Styles for NotificationsDisabledBanner — ported from AmityUiKitWeb
+// NotificationsDisabledBanner.module.css. Geometry mirrors the web CSS
+// (padding 0.75rem 1rem, gap 0.25rem, icon 1.125rem → px ×16); colours resolve
+// through design tokens.
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const ICON_SIZE = 18; // web 1.125rem
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    banner: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 4,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: token(AmityColorToken.SurfaceBannerSubdueGeneral),
+    },
+    text: {
+      textAlign: 'center',
+      // Web uses text-banner-subdue-textdescription-general; the cleverden SoT (717)
+      // doesn't ship the Subdue text variant, so use the color-identical GreyBG variant
+      // (same alias chain → same hex). Web slug allowlisted in check-fidelity.
+      color: token(AmityColorToken.TextBannerSubdueTextDescriptionGeneral),
+    },
+  });
+
+  return { styles, token };
+};

package/src/social/features/chat/features/home/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ChannelList';
+export * from './Header';
+export * from './NotificationsDisabledBanner';

package/src/social/features/chat/features/home/elements/ChatHomeMenu/ChatHomeMenu.tsx

@@ -0,0 +1,89 @@
+// ChatHomeMenu — the "⋯" chat-home overflow menu, ported from AmityUiKitWeb
+// v4/chat/features/home/elements/ChatHomeMenu.
+//
+// Behaviour (mirrors web): a filled ellipsis icon button opens a Popover with a
+// single "Archived" Menu.Item that navigates to the archived-chats page.
+//
+// RN adaptations from web:
+//   - Web `Button.Icon` (EllipsisV, filled/secondary, size 32) → a Pressable +
+//     AmityIcon on a filled surface (same pattern as CreateChatMenu).
+//   - Web `useChatNavigation().push({ type: ChatPageTypes.ArchivedChatPage })` →
+//     React Navigation. The `AmityArchivedChatPage` route lives in the
+//     orchestrator-owned RouteParamList, so the nav prop is typed `any` (as in
+//     AmityChatHomePage) to avoid coupling this file to the param list.
+//   - Web `forceShowPopUp` is a web-only positioning flag with no RN equivalent.
+
+// 1. React / RN imports
+import { Pressable } from 'react-native';
+
+// 2. Third-party imports
+import { useNavigation } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+
+// 3. Internal imports (relative)
+import { Popover } from '../../../../../../../core/design/components/Popover';
+import { Menu } from '../../../../../../../core/design/components/Menu';
+import { AmityIcon } from '../../../../../../../core/design/icons';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+import { useString } from '../../../../../../../core/localization';
+import { useStyles } from './styles';
+
+// The filled "⋯" trigger button (module-scope so it is not re-created per render).
+type MenuButtonProps = {
+  accessibilityLabel: string;
+  isOpen?: boolean;
+  onPress?: () => void;
+};
+
+function MenuButton({ accessibilityLabel, isOpen, onPress }: MenuButtonProps) {
+  const { styles } = useStyles();
+  return (
+    <Pressable
+      style={styles.iconButton}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityState={{ expanded: isOpen }}
+      onPress={onPress}
+    >
+      <AmityIcon
+        name="ellipsis-v-r"
+        size={24}
+        tokenColor={AmityColorToken.IconIconButtonFilledSecondaryDefault}
+      />
+    </Pressable>
+  );
+}
+
+// 4. Named function component
+export function ChatHomeMenu() {
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+  const archivedLabel = useString('amity_chat_archived');
+
+  return (
+    <Popover
+      placement="bottom right"
+      // eslint-disable-next-line react/no-unstable-nested-components -- Popover's trigger is a render-prop, not a component definition.
+      trigger={({ openPopover, isOpen }) => (
+        <MenuButton
+          accessibilityLabel="Chat menu"
+          isOpen={isOpen}
+          onPress={openPopover}
+        />
+      )}
+    >
+      {({ closePopover }) => (
+        <Menu container="popover">
+          <Menu.Item
+            icon="archive-r"
+            label={archivedLabel}
+            typography="body"
+            onPress={() => {
+              closePopover();
+              navigation.navigate('AmityArchivedChatPage');
+            }}
+          />
+        </Menu>
+      )}
+    </Popover>
+  );
+}

package/src/social/features/chat/features/home/elements/ChatHomeMenu/index.ts

@@ -0,0 +1 @@
+export { ChatHomeMenu } from './ChatHomeMenu';

package/src/social/features/chat/features/home/elements/ChatHomeMenu/styles.ts

@@ -0,0 +1,26 @@
+// Styles for ChatHomeMenu — the filled "⋯" icon button.
+// Web: Button.Icon styleType="filled" hierarchy="secondary" size 32 (EllipsisV).
+// Colours via design tokens (no hardcoded hex).
+
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../../../../../core/design/theme/useToken';
+import { AmityColorToken } from '../../../../../../../core/design/tokens/amity-color-tokens';
+
+export const useStyles = () => {
+  const token = useToken();
+
+  const styles = StyleSheet.create({
+    iconButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: token(
+        AmityColorToken.SurfaceIconButtonFilledSecondaryEnabled
+      ),
+    },
+  });
+
+  return { styles, token };
+};