@droppii-org/chat-mobile 0.2.51 → 0.2.52

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

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