@droppii-org/chat-mobile 0.2.51 → 0.2.53

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'],
+  },
+});

package/src/screens/ResourceCenter/GridThumbnail.tsx

@@ -0,0 +1,98 @@
+import { memo, useCallback, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { formatDuration } from '../../utils/dateTimeUtils';
+import ChatImageDimens from '../../utils/chatImageDimens';
+import { DThreadResourceContentType } from '../../types/chat';
+import type { DThreadResource } from '../../types/chat';
+
+interface Props {
+  item: DThreadResource;
+  index: number;
+  size: number;
+  onPress: (index: number) => void;
+}
+
+export const GridThumbnail = memo(({ item, index, size, onPress }: Props) => {
+  const isVideo = item.contentType === DThreadResourceContentType.VIDEO;
+  const showDuration = isVideo && item.duration != null;
+  const durationLabel =
+    item.duration != null ? formatDuration(item.duration) : '';
+
+  // First mount of a cell has nothing painted yet — a bare `KImage.Base` on a
+  // white screen flashes as an empty gap until the (possibly not-yet-cached)
+  // thumbnail decodes. Same skeleton-over-gray-fallback pattern as
+  // `MergedImageGrid.tsx`'s chat-bubble grid.
+  const [isLoading, setIsLoading] = useState(true);
+  const onLoadEnd = useCallback(() => setIsLoading(false), []);
+
+  // Never request the original full-resolution asset for a grid cell — run
+  // whichever URL we end up with (BE's own resized `thumbnailUrl`, or a
+  // fallback to full-res `sourceUrl` if BE didn't provide one) through the
+  // same CDN resize+webp pipeline `imageMessage.tsx` uses for chat bubbles.
+  // `size` is included in deps since it changes on rotation/window resize.
+  const thumbnailUri = useMemo(() => {
+    // `size` is a sub-pixel float (screen-width / 3 columns) — round it, since
+    // the resize dimensions baked into the URL should be whole pixels.
+    const roundedSize = Math.round(size);
+    return ChatImageDimens.getOptimizedImageUrlWithDimensions(
+      item.thumbnailUrl ?? item.sourceUrl,
+      roundedSize,
+      roundedSize
+    );
+  }, [item.thumbnailUrl, item.sourceUrl, size]);
+
+  return (
+    <KContainer.Touchable
+      style={[styles.cell, { width: size, height: size }]}
+      onPress={() => onPress(index)}
+      accessibilityLabel={item.fileName || (isVideo ? 'Video' : 'Image')}
+    >
+      <KImage.Base
+        uri={thumbnailUri}
+        width={size}
+        height={size}
+        br="2x"
+        transition="fade"
+        onLoadEnd={onLoadEnd}
+      />
+      <KContainer.VisibleView visible={isLoading}>
+        <KContainer.View
+          style={[styles.skeleton, { width: size, height: size }]}
+        />
+      </KContainer.VisibleView>
+      <KContainer.VisibleView visible={showDuration}>
+        <KContainer.View style={styles.durationBadge}>
+          <KLabel.Text typo="Text2XsNormal" color={KColors.white}>
+            {durationLabel}
+          </KLabel.Text>
+        </KContainer.View>
+      </KContainer.VisibleView>
+    </KContainer.Touchable>
+  );
+});
+
+const styles = StyleSheet.create({
+  // Fallback background so a cell is never a stark blank/white gap while its
+  // thumbnail is still decoding.
+  cell: {
+    backgroundColor: KColors.palette.gray.w50,
+    overflow: 'hidden',
+  },
+  skeleton: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    backgroundColor: KColors.palette.gray.w50,
+    borderRadius: 8,
+  },
+  // Figma: Video-Time — black pill, bottom-right overlay, cornerRadius 12 (KRadius '3x')
+  durationBadge: {
+    position: 'absolute',
+    right: 4,
+    bottom: 4,
+    borderRadius: 12,
+    paddingHorizontal: 4,
+    backgroundColor: 'rgba(0,0,0,1)',
+  },
+});

package/src/screens/ResourceCenter/LinkResourceRow.tsx

@@ -0,0 +1,96 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  KContainer,
+  KImage,
+  KLabel,
+  KColors,
+  KSpacingValue,
+} from '@droppii/libs';
+import type { DThreadResource } from '../../types/chat';
+
+interface Props {
+  item: DThreadResource;
+  onPressUrl?: (url: string) => void;
+}
+
+export const LinkResourceRow = memo(({ item, onPressUrl }: Props) => (
+  <KContainer.Touchable
+    style={styles.row}
+    br="3x"
+    background={KColors.opacity.grayLighter[20]}
+    onPress={() => item.linkUrl && onPressUrl?.(item.linkUrl)}
+  >
+    <KContainer.View style={styles.thumb}>
+      <KContainer.VisibleView visible={!!item.linkImageUrl}>
+        <KImage.Base
+          uri={item.linkImageUrl ?? ''}
+          width={76}
+          height={76}
+          br="2x"
+          resizeMode="cover"
+        />
+      </KContainer.VisibleView>
+      {/* Figma "Link-No-Img" fallback: gray.w200 background, cornerRadius 12,
+          white generic link icon — NOT the same styling as the image variant.
+          `KContainer.VisibleView` only takes `visible`/`children` (no `style`
+          passthrough — confirmed in its source), so the fallback box needs its
+          own `KContainer.View` wrapper inside it. */}
+      <KContainer.VisibleView visible={!item.linkImageUrl}>
+        <KContainer.View style={styles.thumbFallback}>
+          <KImage.VectorIcons name="link-alt-o" color={KColors.white} />
+        </KContainer.View>
+      </KContainer.VisibleView>
+    </KContainer.View>
+    <KContainer.View flexS={1}>
+      <KContainer.VisibleView visible={!!item.linkDomain}>
+        <KLabel.Text
+          // ⚠️ U7: Figma domain-line color (#5C6366) has no exact @droppii/libs
+          // token match — using closest system token (gray.w500) pending Designer confirm.
+          typo="TextNmNormal"
+          color={KColors.palette.gray.w500}
+          numberOfLines={1}
+        >
+          {item.linkDomain}
+        </KLabel.Text>
+      </KContainer.VisibleView>
+      <KContainer.VisibleView visible={!!item.linkTitle}>
+        <KLabel.Text
+          typo="TextMdMedium"
+          color={KColors.palette.gray.w900}
+          numberOfLines={2}
+        >
+          {item.linkTitle}
+        </KLabel.Text>
+      </KContainer.VisibleView>
+      {/* U8 re-resolved via pixel check against `14208:88701`: the description
+          text layer exists with real content in every sample row, but is
+          `visible: false` in ALL of them — the shipped design never shows it,
+          even though BE provides `linkDescription`. Dropped per pixel-perfect
+          decision (not rendered), despite the field still being populated. */}
+    </KContainer.View>
+  </KContainer.Touchable>
+));
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: KSpacingValue['0.5rem'],
+    padding: KSpacingValue['0.75rem'],
+    marginBottom: KSpacingValue['0.5rem'],
+  },
+  // Figma Link-Item: thumbnail slot is 76x76 (not 56x56).
+  thumb: {
+    width: 76,
+    height: 76,
+  },
+  thumbFallback: {
+    width: 76,
+    height: 76,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: KColors.palette.gray.w200,
+  },
+});

package/src/screens/ResourceCenter/ListRenderer.tsx

@@ -0,0 +1,81 @@
+import { memo, useCallback } from 'react';
+import type { ReactElement } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { LegendList } from '@legendapp/list/react-native';
+import { KContainer, KColors, KSpacingValue } from '@droppii/libs';
+import { FileResourceRow } from './FileResourceRow';
+import { LinkResourceRow } from './LinkResourceRow';
+import { DThreadResourceContentType } from '../../types/chat';
+import type { DThreadResource } from '../../types/chat';
+
+interface Props {
+  items: DThreadResource[];
+  contentType: DThreadResourceContentType;
+  onEndReached: () => void;
+  isFetchingNextPage: boolean;
+  onPressUrl?: (url: string) => void;
+  onRefresh: () => void;
+  isRefetching: boolean;
+  emptyComponent: ReactElement;
+}
+
+const ROW_ESTIMATE = 80;
+
+export const ListRenderer = memo(
+  ({
+    items,
+    contentType,
+    onEndReached,
+    isFetchingNextPage,
+    onPressUrl,
+    onRefresh,
+    isRefetching,
+    emptyComponent,
+  }: Props) => {
+    const isLink = contentType === DThreadResourceContentType.URL_TEXT;
+
+    const renderItem = useCallback(
+      ({ item }: { item: DThreadResource }) =>
+        isLink ? (
+          <LinkResourceRow item={item} onPressUrl={onPressUrl} />
+        ) : (
+          <FileResourceRow item={item} />
+        ),
+      [isLink, onPressUrl]
+    );
+
+    const keyExtractor = useCallback((item: DThreadResource) => item.id, []);
+
+    return (
+      <LegendList
+        data={items}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        estimatedItemSize={ROW_ESTIMATE}
+        contentContainerStyle={styles.content}
+        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: KSpacingValue['0.75rem'],
+  },
+  footer: {
+    paddingVertical: KSpacingValue['1rem'],
+  },
+});

package/src/screens/ResourceCenter/ResourceCenterTabBar.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import {
+  TabBar,
+  type Route,
+  type TabBarProps,
+  type TabDescriptor,
+} from 'react-native-tab-view';
+import { KLabel, KColors, KSpacingValue } from '@droppii/libs';
+
+// Stable module-level reference — must NOT be defined inside the component body
+// (or inside the `useMemo` below), or React treats it as a new type every render.
+const renderTabLabel: NonNullable<TabDescriptor<Route>['label']> = ({
+  labelText,
+  color,
+}) => (
+  <KLabel.Text typo="TextNmBold" color={color}>
+    {labelText}
+  </KLabel.Text>
+);
+
+// Uses `react-native-tab-view`'s own `TabBar` (animated sliding indicator,
+// built-in accessibility/ripple) instead of a hand-rolled tab row — only the
+// design tokens are custom (colors/indicator/label typography), matching the
+// Figma underline-tab spec via the library's supported customization surface
+// (`activeColor`/`inactiveColor`/`indicatorStyle`/per-route `label`).
+//
+// NOT wrapped in `React.memo`: `TabView` calls `renderTabBar(props)` as a plain
+// function (not `<Comp/>` JSX — see `TabView.js`: `renderTabBar({...})`), and a
+// `memo()`-wrapped component is a React element object, not a callable function.
+// Passing the memoized object here throws `renderTabBar is not a function`.
+export function ResourceCenterTabBar<T extends Route>(props: TabBarProps<T>) {
+  const options = useMemo<Record<string, TabDescriptor<T>>>(
+    () =>
+      Object.fromEntries(
+        props.navigationState.routes.map((route) => [
+          route.key,
+          {
+            labelText: (route as Route & { title?: string }).title,
+            label: renderTabLabel,
+          } satisfies TabDescriptor<T>,
+        ])
+      ),
+    [props.navigationState.routes]
+  );
+
+  return (
+    <TabBar
+      {...props}
+      scrollEnabled
+      options={options}
+      activeColor={KColors.palette.primary.w400}
+      inactiveColor={KColors.palette.gray.w400}
+      pressColor="transparent"
+      style={styles.bar}
+      tabStyle={styles.tab}
+      indicatorStyle={styles.indicator}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  // Figma `Tab-Bar` (14208:92918): solid white background + 1px bottom hairline
+  // (`gray.w25` #EFEFEF) — no shadow/elevation.
+  bar: {
+    backgroundColor: KColors.white,
+    borderBottomWidth: 1,
+    borderBottomColor: KColors.palette.gray.w25,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  // `width: 'auto'` is REQUIRED alongside `scrollEnabled` above — without it,
+  // `TabBar`'s internal `getComputedTabWidth` falls back to `layout.width / 5 * 2`
+  // (40% of screen width per tab) before it has measured anything, rendering
+  // hugely oversized tabs. `'auto'` makes it use each tab's real measured label
+  // width instead (`tabWidths[route.key]`) — matches Figma's hug-content tabs
+  // (widths 53/65/73/81pt), fixed to each tab's own text, not stretched/guessed.
+  tab: {
+    width: 'auto',
+    paddingHorizontal: KSpacingValue['0.75rem'],
+    minHeight: 0,
+  },
+  // Figma: 3px bar, cornerRadius 4, primary blue.
+  indicator: {
+    backgroundColor: KColors.palette.primary.w400,
+    height: 3,
+    borderRadius: 4,
+  },
+});