@droppii-org/chat-mobile 0.2.50 → 0.2.52

package/src/hooks/useChatCompose.ts

@@ -13,9 +13,6 @@ import {
   generateAndUploadVideoThumbnails,
   type VideoWithUploadStatus,
 } from '../utils/videoThumbnailUpload';
-import { useConversationStore } from '../store';
-import { DChatCategory } from '../types/chat';
-import { useChatContext } from '../context';
 
 export function useChatCompose() {
   const [text, setText] = useState('');
@@ -25,7 +22,6 @@ export function useChatCompose() {
   const linkPreview = useLinkPreview(text);
   const { send: sendAttachments } = useSendAttachment();
   const { sendMessage } = useSendMessage();
-  const { applicationType } = useChatContext();
 
   const isUploading = useMemo(
     () =>
@@ -53,20 +49,6 @@ export function useChatCompose() {
     const { selectedImages, clearAllImages } = imageAttachment;
     const { selectedFiles, clearAllFiles } = fileAttachment;
     const urlMeta = linkPreview.isVisible ? linkPreview.metadata : undefined;
-    const currentConversationId =
-      useConversationStore.getState().currentConversationId;
-    const targetUserId = useConversationStore.getState().currentUserId;
-    const isCreatingConversation =
-      useConversationStore.getState().isCreatingConversation;
-
-    if (targetUserId && !currentConversationId && !isCreatingConversation) {
-      await useConversationStore.getState().createConversation({
-        chatType: 'SINGLE',
-        chatCategory: DChatCategory.BIZ_BIZ,
-        applicationType,
-        peerUserId: targetUserId,
-      });
-    }
 
     // --- Attachments ---
     if (selectedImages.length > 0 || selectedFiles.length > 0) {
@@ -179,7 +161,6 @@ export function useChatCompose() {
     sendAttachments,
     sendMessage,
     text,
-    applicationType,
   ]);
 
   return {

package/src/hooks/useImageAttachment.ts

@@ -171,8 +171,7 @@ export const useImageAttachment = (): UseImageAttachmentReturn => {
           const maxSize = isVideoFromPicker(item)
             ? UPLOAD_LIMITS.video
             : UPLOAD_LIMITS.image;
-          console.log('maxSize', maxSize);
-          console.log('item.size', item.size);
+
           return (item.size || 0) <= maxSize;
         };
 

package/src/hooks/useMediaViewer.ts

@@ -5,11 +5,20 @@ export interface MediaItem {
   isVideo?: boolean;
 }
 
+export interface ShowMediaViewerOptions {
+  pagination?: boolean;
+}
+
 export interface UseMediaViewerReturn {
   visible: boolean;
   mediaList: MediaItem[];
   initIndex: number;
-  show: (items: MediaItem[], index?: number) => void;
+  pagination: boolean;
+  show: (
+    items: MediaItem[],
+    index?: number,
+    options?: ShowMediaViewerOptions
+  ) => void;
   hide: () => void;
 }
 
@@ -17,16 +26,21 @@ export function useMediaViewer(): UseMediaViewerReturn {
   const [visible, setVisible] = useState(false);
   const [mediaList, setMediaList] = useState<MediaItem[]>([]);
   const [initIndex, setInitIndex] = useState(0);
+  const [pagination, setPagination] = useState(true);
 
-  const show = useCallback((items: MediaItem[], index = 0) => {
-    setMediaList(items);
-    setInitIndex(index);
-    setVisible(true);
-  }, []);
+  const show = useCallback(
+    (items: MediaItem[], index = 0, options?: ShowMediaViewerOptions) => {
+      setMediaList(items);
+      setInitIndex(index);
+      setPagination(options?.pagination ?? true);
+      setVisible(true);
+    },
+    []
+  );
 
   const hide = useCallback(() => {
     setVisible(false);
   }, []);
 
-  return { visible, mediaList, initIndex, show, hide };
+  return { visible, mediaList, initIndex, pagination, show, hide };
 }

package/src/hooks/useSendAttachment.ts

@@ -2,6 +2,7 @@ import { useCallback, useState } from 'react';
 import { AttachmentOrchestratorService } from '../services/attachmentOrchestrator';
 import type { Attachment, AttachmentSendOptions } from '../types/attachment';
 import { getMimeType } from '../utils/imageUtils';
+import { useChatContext } from '../context';
 
 export interface ImageItem {
   type: 'image';
@@ -70,6 +71,7 @@ export interface UseSendAttachmentReturn {
 export function useSendAttachment(): UseSendAttachmentReturn {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const applicationType = useChatContext().applicationType;
 
   const send = useCallback(
     async (
@@ -242,6 +244,7 @@ export function useSendAttachment(): UseSendAttachmentReturn {
             uploadedUrls,
             {
               strategy: 'individual',
+              applicationType,
               ...options,
             }
           );
@@ -278,7 +281,7 @@ export function useSendAttachment(): UseSendAttachmentReturn {
         console.log('[useSendAttachment] Finished');
       }
     },
-    []
+    [applicationType]
   );
 
   const clearError = useCallback(() => setError(null), []);

package/src/index.tsx

@@ -28,6 +28,8 @@ export { AttachmentPreview } from './components/AttachmentPreview';
 export { MediaViewerModal } from './components/MediaViewerModal';
 export { Inbox } from './screens/inbox';
 export { default as MediaViewerScreen } from './screens/MediaView';
+export { default as ResourceCenterScreen } from './screens/ResourceCenter';
+export type { ResourceCenterScreenProps } from './screens/ResourceCenter/types';
 export * from './screens/chat-detail';
 
 export type {

package/src/screens/MediaView/index.tsx

@@ -1,14 +1,18 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import type { ComponentType } from 'react';
 import {
+  ActivityIndicator,
   BackHandler,
   Platform,
   StyleSheet,
-  FlatList,
-  type ListRenderItemInfo,
   type ViewToken,
   StatusBar,
 } from 'react-native';
+import {
+  LegendList,
+  type LegendListRef,
+  type LegendListRenderItemProps,
+} from '@legendapp/list/react-native';
 
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
@@ -19,6 +23,9 @@ import Animated, {
 } from 'react-native-reanimated';
 import { Pagination } from 'react-native-snap-carousel';
 import PhotoView from 'react-native-photo-view';
+import RNFS from 'react-native-fs';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { saveDocuments } from '@react-native-documents/picker';
 import {
   KColors,
   KContainer,
@@ -29,6 +36,9 @@ import {
   KSpacingValue,
 } from '@droppii/libs';
 import VideoPlayer from './VideoPlayer';
+import { UIUtils } from '../../utils/UIUtils';
+import { trans } from '../../translation';
+import { getMimeType } from '../../utils/imageUtils';
 
 interface MediaViewerParams {
   images: any[];
@@ -49,15 +59,62 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
     onDismiss,
   } = props;
 
-  const listRef = useRef<FlatList>(null);
+  const insets = useSafeAreaInsets();
+  const listRef = useRef<LegendListRef>(null);
   const [index, setIndex] = useState(initIndex);
   const [isScrolling, setIsScrolling] = useState(false);
+  const [isDownloading, setIsDownloading] = useState(false);
 
   const dismiss = useCallback(() => {
     onDismiss?.();
   }, [onDismiss]);
 
-  const onDownload = useCallback(() => {}, []);
+  // Downloads the currently-viewed image/video, mirroring `useFileDownload`'s
+  // RNFS-download + Save-As-document pattern (no gallery/CameraRoll dependency
+  // exists in this repo — Save As is the only working "download" mechanism here).
+  const onDownload = useCallback(async () => {
+    const item = images[index];
+    if (!item?.url || isDownloading) return;
+
+    setIsDownloading(true);
+    try {
+      const urlPath = item.url.split('?')[0];
+      const fallbackExt = item.isVideo ? 'mp4' : 'jpg';
+      const fileName =
+        urlPath.split('/').pop() ||
+        `${item.isVideo ? 'video' : 'image'}-${index}.${fallbackExt}`;
+      const destPath = `${RNFS.CachesDirectoryPath}/${fileName}`;
+
+      const exists = await RNFS.exists(destPath);
+      if (!exists) {
+        const result = await RNFS.downloadFile({
+          fromUrl: item.url,
+          toFile: destPath,
+        }).promise;
+        if (result.statusCode < 200 || result.statusCode >= 300) {
+          throw new Error(`HTTP ${result.statusCode}`);
+        }
+      }
+
+      await saveDocuments({
+        sourceUris: [`file://${destPath}`],
+        mimeType: getMimeType(fileName),
+        fileName,
+        copy: true,
+      });
+      UIUtils.toast.open({
+        title: trans('chat:file_downloaded_success', { fileName }),
+        theme: 'info',
+      });
+    } catch {
+      UIUtils.toast.open({
+        title: trans('chat:file_download_failed'),
+        theme: 'warning',
+      });
+    } finally {
+      setIsDownloading(false);
+    }
+  }, [images, index, isDownloading]);
 
   useEffect(() => {
     StatusBar.setHidden(true);
@@ -79,22 +136,6 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   const onMomentumScrollBegin = useCallback(() => setIsScrolling(true), []);
   const onMomentumScrollEnd = useCallback(() => setIsScrolling(false), []);
 
-  const onScrollToIndexFailed = useCallback(
-    (info: any) => {
-      const len = images.length;
-      const wait = new Promise((resolve) => setTimeout(() => resolve(true), 0));
-      wait.then(() => {
-        if (info.index > -1 && info.index < len) {
-          listRef.current?.scrollToIndex({
-            index: info.index,
-            animated: false,
-          });
-        }
-      });
-    },
-    [images]
-  );
-
   const onViewableItemsChanged = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] }) => {
       const i = viewableItems[0]?.index;
@@ -105,7 +146,7 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   const keyEx = useCallback((item: any, i: number) => `${item.url}-${i}`, []);
 
   const renderItem = useCallback(
-    ({ item, index: itemIndex }: ListRenderItemInfo<any>) => (
+    ({ item, index: itemIndex }: LegendListRenderItemProps<any>) => (
       <KContainer.Touchable center activeOpacity={1}>
         <KContainer.VisibleView visible={!!item.isVideo}>
           <VideoPlayer
@@ -130,9 +171,21 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
   );
 
   const renderFooter = useMemo(() => {
-    if (pagination === false) return null;
+    // `pagination` only toggles the dot indicator (noisy on large sets like
+    // Resource Center grids) — the current-index counter should always show.
+    if (images.length <= 1) return null;
     return (
-      <KContainer.View style={styles.footer}>
+      <KContainer.View
+        style={[
+          styles.footer,
+          {
+            bottom:
+              insets.bottom > 0
+                ? insets.bottom + KSpacingValue['0.5rem']
+                : KSpacingValue['2rem'],
+          },
+        ]}
+      >
         <KLabel.Text
           typo="TextNmNormal"
           color={KColors.white}
@@ -140,18 +193,20 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
         >
           {index + 1}/{images.length}
         </KLabel.Text>
-        <Pagination
-          dotContainerStyle={styles.dotContainerStyle}
-          dotStyle={styles.dot}
-          inactiveDotStyle={styles.inactiveDot}
-          inactiveDotScale={0.6}
-          dotsLength={images.length > 1 ? images.length : 3}
-          activeDotIndex={images.length > 1 ? index : 1}
-          inactiveDotOpacity={images.length > 1 ? 0.5 : 0}
-        />
+        <KContainer.VisibleView visible={pagination !== false}>
+          <Pagination
+            dotContainerStyle={styles.dotContainerStyle}
+            dotStyle={styles.dot}
+            inactiveDotStyle={styles.inactiveDot}
+            inactiveDotScale={0.6}
+            dotsLength={images.length}
+            activeDotIndex={index}
+            inactiveDotOpacity={0.5}
+          />
+        </KContainer.VisibleView>
       </KContainer.View>
     );
-  }, [pagination, images.length, index]);
+  }, [pagination, images.length, index, insets.bottom]);
   return (
     <Animated.View
       style={styles.wrapper}
@@ -166,7 +221,7 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
         {/* Top gradient overlay */}
         <LinearGradient
           colors={['rgba(0,0,0,0.9)', 'rgba(0,0,0,0)']}
-          style={[styles.topOverlay]}
+          style={[styles.topOverlay, { paddingTop: insets.top }]}
           pointerEvents="box-none"
         >
           {/* Header first row — matches Figma: [close] [flex-1 spacer] [action-group] */}
@@ -184,22 +239,33 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
             <KContainer.View flex />
 
             {/* Download button */}
-            {download && (
+            <KContainer.VisibleView visible={!!download}>
               <KContainer.Touchable
                 style={styles.headerBtn}
-                onPress={onDownload}
+                onPress={isDownloading ? undefined : onDownload}
+                disabled={isDownloading}
               >
-                <KImage.VectorIcons
-                  name="download-o"
-                  size={24}
-                  color={KColors.white}
-                />
+                <KContainer.VisibleView visible={isDownloading}>
+                  <ActivityIndicator size="small" color={KColors.white} />
+                </KContainer.VisibleView>
+                <KContainer.VisibleView visible={!isDownloading}>
+                  <KImage.VectorIcons
+                    name="download-o"
+                    size={24}
+                    color={KColors.white}
+                  />
+                </KContainer.VisibleView>
               </KContainer.Touchable>
-            )}
+            </KContainer.VisibleView>
           </KContainer.View>
         </LinearGradient>
-        {/* Media content */}
-        <FlatList
+        {/* Media content. `recycleItems` intentionally NOT set — `VideoPlayer`
+            wraps a native player instance keyed off mount, not just the `url`
+            prop, so reusing a recycled cell across a video/image swap risks
+            stale playback state. Dataset here is always small (one message's
+            attachments or a Resource Center snapshot), so the perf win isn't
+            worth that risk. */}
+        <LegendList
           ref={listRef}
           initialScrollIndex={
             initIndex >= images?.length ? images?.length - 1 : initIndex
@@ -207,17 +273,14 @@ const MediaViewerScreen = (props: MediaViewerParams) => {
           data={images}
           renderItem={renderItem}
           keyExtractor={keyEx}
+          estimatedItemSize={KDims.width}
           pagingEnabled
           horizontal
           showsHorizontalScrollIndicator={false}
           onViewableItemsChanged={onViewableItemsChanged}
           viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
-          onScrollToIndexFailed={onScrollToIndexFailed}
           onMomentumScrollBegin={onMomentumScrollBegin}
           onMomentumScrollEnd={onMomentumScrollEnd}
-          removeClippedSubviews
-          maxToRenderPerBatch={2}
-          windowSize={3}
           style={styles.flex}
         />
 
@@ -244,13 +307,14 @@ const styles = StyleSheet.create({
     height: KDims.height,
   },
   topOverlay: {
-    // position: 'absolute',
+    // `paddingTop` is overridden inline with `useSafeAreaInsets().top` (real
+    // notch/status-bar inset, both platforms).
+    position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     zIndex: 100,
     minHeight: 100,
-    paddingTop: 30,
   },
   // Figma: Header-First-Row — flex row, padding 8, alignItems center
   headerRow: {
@@ -303,11 +367,10 @@ const styles = StyleSheet.create({
     letterSpacing: 0.12,
   },
   footer: {
+    // `bottom` is overridden inline with `useSafeAreaInsets()` (real device
+    // inset, both platforms) — `KDims.bottomSafeHeight` only covers iPhone
+    // notch/Dynamic Island and misses Android gesture-nav insets.
     position: 'absolute',
-    bottom:
-      KDims.bottomSafeHeight > 0
-        ? KDims.bottomSafeHeight + KSpacingValue['0.5rem']
-        : KSpacingValue['2rem'],
     alignSelf: 'center',
     alignItems: 'center',
     zIndex: 10,

package/src/screens/ResourceCenter/FileResourceRow.tsx

@@ -0,0 +1,99 @@
+import { memo, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import { useFileDownload } from '../../hooks/useFileDownload';
+import {
+  getFileIcon,
+  getMimeType,
+  formatFileSize,
+} from '../../utils/imageUtils';
+import { trans } from '../../translation';
+import type { DThreadResource } from '../../types/chat';
+
+interface Props {
+  item: DThreadResource;
+}
+
+export const FileResourceRow = memo(({ item }: Props) => {
+  const fileName = item.fileName || '[File]';
+  const url = item.sourceUrl || '';
+  const { state, handleView } = useFileDownload(fileName, url);
+
+  const mimeType = useMemo(
+    () => item.mimeType || getMimeType(fileName),
+    [item.mimeType, fileName]
+  );
+  const iconSource = useMemo(() => getFileIcon(mimeType), [mimeType]);
+
+  const subtitle = useMemo(() => {
+    if (state.status === 'downloading') {
+      return trans('chat:file_downloading', {
+        received: state.receivedMB ?? 0,
+        total: state.totalMB ?? 0,
+      });
+    }
+    if (state.status === 'error') {
+      return state.error ?? trans('chat:file_download_failed');
+    }
+    return formatFileSize(item.fileSize ?? 0);
+  }, [state, item.fileSize]);
+
+  const subtitleColor =
+    state.status === 'error'
+      ? (KColors.palette.danger?.w400 ?? '#FF3B30')
+      : KColors.palette.gray.w400;
+
+  // Figma's File-Item component carries a trailing "Close-Button" (X in a dark
+  // circle) layer, but it's `visible: false` in every real row — the rendered
+  // design has NO trailing icon at all. Confirmed by product decision: no
+  // separate download button — the whole row is tappable (`handleView`, same
+  // cache-then-open behavior the in-chat `FileMessage` bubble's eye icon uses).
+  return (
+    <KContainer.Touchable
+      style={styles.row}
+      br="3x"
+      background={KColors.opacity.grayLighter[20]}
+      onPress={handleView}
+    >
+      <KImage.Base uri={iconSource} style={styles.icon} resizeMode="contain" />
+      <KContainer.View flexS={1}>
+        <KLabel.Text
+          typo="TextMdMedium"
+          color={KColors.palette.gray.w900}
+          numberOfLines={1}
+          ellipsizeMode="middle"
+        >
+          {fileName}
+        </KLabel.Text>
+        <KLabel.Text
+          typo="TextSmNormal"
+          color={subtitleColor}
+          numberOfLines={1}
+        >
+          {subtitle}
+        </KLabel.Text>
+      </KContainer.View>
+    </KContainer.Touchable>
+  );
+});
+
+const styles = StyleSheet.create({
+  // Figma File-Item (`14208:88679`): 12px padding all sides, 8px gap, 40x40 icon.
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    padding: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.5rem'],
+  },
+  icon: {
+    width: 40,
+    height: 40,
+  },
+});

package/src/screens/ResourceCenter/GridRenderer.tsx

@@ -0,0 +1,104 @@
+import { memo, useCallback, useMemo } from 'react';
+import type { ReactElement } from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  useWindowDimensions,
+} from 'react-native';
+import { LegendList } from '@legendapp/list/react-native';
+import { KContainer, KSpacingValue, KColors } from '@droppii/libs';
+import { GridThumbnail } from './GridThumbnail';
+import type { DThreadResource } from '../../types/chat';
+
+const COLUMNS = 3;
+const GRID_GAP = KSpacingValue['0.5rem']; // 8px
+const CONTAINER_PADDING = KSpacingValue['0.75rem']; // 12px
+
+interface Props {
+  items: DThreadResource[];
+  onEndReached: () => void;
+  isFetchingNextPage: boolean;
+  onPressItem: (index: number) => void;
+  onRefresh: () => void;
+  isRefetching: boolean;
+  emptyComponent: ReactElement;
+}
+
+export const GridRenderer = memo(
+  ({
+    items,
+    onEndReached,
+    isFetchingNextPage,
+    onPressItem,
+    onRefresh,
+    isRefetching,
+    emptyComponent,
+  }: Props) => {
+    // Reactive — do NOT use KDims.width (static snapshot, stale on rotation/resize).
+    const { width } = useWindowDimensions();
+    const cellSize = useMemo(() => {
+      const raw =
+        (width - CONTAINER_PADDING * 2 - GRID_GAP * (COLUMNS - 1)) / COLUMNS;
+      // Floor against a degenerate width (extremely narrow split-screen, or a
+      // not-yet-measured `0` on first paint) — a <= 0 `estimatedItemSize` would
+      // feed LegendList's internal layout math a divide-by-zero/negative size.
+      return Number.isFinite(raw) && raw > 0 ? raw : 1;
+    }, [width]);
+
+    const renderItem = useCallback(
+      ({ item, index }: { item: DThreadResource; index: number }) => (
+        <GridThumbnail
+          item={item}
+          index={index}
+          size={cellSize}
+          onPress={onPressItem}
+        />
+      ),
+      [cellSize, onPressItem]
+    );
+
+    const keyExtractor = useCallback((item: DThreadResource) => item.id, []);
+    return (
+      <LegendList
+        data={items}
+        numColumns={COLUMNS}
+        estimatedItemSize={cellSize}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        // `GridThumbnail` is stateless/presentational (derives everything from
+        // props, no internal `useState`) — safe to recycle cell instances
+        // instead of remounting on scroll. Without this, LegendList defaults to
+        // `false` and logs its own dev warning recommending exactly this.
+        recycleItems
+        contentContainerStyle={styles.content}
+        columnWrapperStyle={styles.row}
+        onEndReached={onEndReached}
+        onEndReachedThreshold={0.5}
+        onRefresh={onRefresh}
+        refreshing={isRefetching}
+        ListEmptyComponent={emptyComponent}
+        ListFooterComponent={
+          <KContainer.VisibleView visible={isFetchingNextPage}>
+            <ActivityIndicator
+              style={styles.footer}
+              color={KColors.palette.primary.w400}
+            />
+          </KContainer.VisibleView>
+        }
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  content: {
+    padding: CONTAINER_PADDING,
+    gap: GRID_GAP,
+  },
+  row: {
+    gap: GRID_GAP,
+  },
+  footer: {
+    paddingVertical: KSpacingValue['1rem'],
+  },
+});