@droppii-org/chat-mobile 0.2.50 → 0.2.52

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

package/src/screens/ResourceCenter/ResourceCenterTabScene.tsx

@@ -0,0 +1,142 @@
+import { memo, useCallback } from 'react';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import type { RefObject } from 'react';
+import { KContainer, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import { useThreadResources } from '../../hooks/resourceCenter/useThreadResources';
+import { ResourceEmptyState } from './ResourceEmptyState';
+import { GridRenderer } from './GridRenderer';
+import { ListRenderer } from './ListRenderer';
+import { DThreadResourceContentType } from '../../types/chat';
+import type { ResourceCenterLayout } from './types';
+import type { MediaViewerModalHandle } from '../../components/MediaViewerModal';
+
+interface Props {
+  recvID: string;
+  chatType: 'SINGLE' | 'GROUP';
+  contentType: DThreadResourceContentType;
+  layout: ResourceCenterLayout;
+  emptyKey: string;
+  onPressUrl?: (url: string) => void;
+  mediaViewerRef: RefObject<MediaViewerModalHandle | null>;
+}
+
+// One scene per tab — owns its own `useThreadResources` call so react-query
+// caches independently per (recvID, contentType) and `lazy` TabView scenes
+// don't all fetch on mount.
+//
+// Known limitation (deliberate, not an oversight): the shared `MediaViewerModal`
+// is opened with a static snapshot of the currently-loaded page. If the user swipes
+// to the last loaded item while more pages exist server-side, the viewer does not
+// auto-fetch more — they need to close it, scroll the grid to trigger `loadMore`,
+// then reopen. Wiring live pagination into the viewer would require either coupling
+// the shared `MediaView` (used by in-chat bubbles too) to react-query state, or
+// forking its ~230 lines of zoom/video/download logic into a separate component —
+// not worth it for this ticket's scope.
+export const ResourceCenterTabScene = memo(
+  ({
+    recvID,
+    chatType,
+    contentType,
+    layout,
+    emptyKey,
+    onPressUrl,
+    mediaViewerRef,
+  }: Props) => {
+    const {
+      items,
+      isLoading,
+      isError,
+      loadMore,
+      isFetchingNextPage,
+      isRefetching,
+      refetch,
+      refreshFirstPage,
+    } = useThreadResources(recvID, contentType, chatType);
+
+    const onPressGridItem = useCallback(
+      (index: number) => {
+        const mediaItems = items.map((item) => ({
+          url: item.sourceUrl ?? '',
+          isVideo: contentType === DThreadResourceContentType.VIDEO,
+        }));
+        // Resource Center grids (Ảnh/Video tabs) can hold hundreds of items —
+        // the viewer's dot/counter pagination indicator is meant for small,
+        // in-chat message groups and becomes noise at this scale. Hide it here.
+        mediaViewerRef.current?.show(mediaItems, index, { pagination: false });
+      },
+      [items, contentType, mediaViewerRef]
+    );
+
+    if (isLoading) {
+      return (
+        <KContainer.View style={styles.centerFill}>
+          <ActivityIndicator color={KColors.palette.primary.w400} />
+        </KContainer.View>
+      );
+    }
+
+    if (isError) {
+      return (
+        <KContainer.View style={styles.centerFill}>
+          <KLabel.Text
+            typo="TextSmNormal"
+            color={KColors.palette.gray.w400}
+            style={styles.errorText}
+          >
+            {trans('chat:generic_error')}
+          </KLabel.Text>
+          <KContainer.Touchable onPress={() => refetch()}>
+            <KLabel.Text typo="TextNmBold" color={KColors.palette.primary.w400}>
+              {trans('chat:retry')}
+            </KLabel.Text>
+          </KContainer.Touchable>
+        </KContainer.View>
+      );
+    }
+
+    // `ResourceEmptyState` is passed as `ListEmptyComponent` (not an early return)
+    // so the list itself — and its `RefreshControl` — stays mounted even with 0
+    // items, letting pull-to-refresh work on the empty state too.
+    const emptyComponent = <ResourceEmptyState emptyKey={emptyKey} />;
+
+    if (layout === 'grid') {
+      return (
+        <GridRenderer
+          items={items}
+          onEndReached={loadMore}
+          isFetchingNextPage={isFetchingNextPage}
+          onPressItem={onPressGridItem}
+          onRefresh={refreshFirstPage}
+          isRefetching={isRefetching}
+          emptyComponent={emptyComponent}
+        />
+      );
+    }
+
+    return (
+      <ListRenderer
+        items={items}
+        contentType={contentType}
+        onEndReached={loadMore}
+        isFetchingNextPage={isFetchingNextPage}
+        onPressUrl={onPressUrl}
+        onRefresh={refreshFirstPage}
+        isRefetching={isRefetching}
+        emptyComponent={emptyComponent}
+      />
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  centerFill: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  errorText: {
+    textAlign: 'center',
+  },
+});

package/src/screens/ResourceCenter/ResourceEmptyState.tsx

@@ -0,0 +1,39 @@
+import { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import { KContainer, KImage, KLabel, KColors } from '@droppii/libs';
+import { trans } from '../../translation';
+import Images from '../../assets/images';
+
+interface Props {
+  emptyKey: string;
+}
+
+export const ResourceEmptyState = memo(({ emptyKey }: Props) => (
+  <KContainer.View style={styles.wrapper}>
+    <KImage.Base
+      uri={Images.RESOURCE_CENTER_EMPTY_BOX}
+      width={120}
+      height={120}
+    />
+    <KLabel.Text
+      typo="TextSmNormal"
+      color={KColors.palette.gray.w400}
+      style={styles.text}
+    >
+      {trans(emptyKey)}
+    </KLabel.Text>
+  </KContainer.View>
+));
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 60,
+    gap: 12,
+  },
+  text: {
+    textAlign: 'center',
+  },
+});

package/src/screens/ResourceCenter/index.tsx

@@ -0,0 +1,129 @@
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { TabView } from 'react-native-tab-view';
+import { KNavigation, KContainer, KColors } from '@droppii/libs';
+import { SessionType } from '@droppii/openim-rn-client-sdk';
+import { trans } from '../../translation';
+import { useConversation } from '../../store';
+import {
+  MediaViewerModal,
+  type MediaViewerModalHandle,
+} from '../../components/MediaViewerModal';
+import { ResourceCenterTabBar } from './ResourceCenterTabBar';
+import { ResourceCenterTabScene } from './ResourceCenterTabScene';
+import { RESOURCE_TABS } from './types';
+import type { ResourceCenterScreenProps, ResourceCenterLayout } from './types';
+import type { DThreadResourceContentType } from '../../types/chat';
+
+interface TabRoute {
+  key: string;
+  title: string;
+  contentType: DThreadResourceContentType;
+  layout: ResourceCenterLayout;
+  emptyKey: string;
+}
+
+const ResourceCenterScreen = memo(
+  ({
+    conversationId,
+    fallbackGroupID,
+    fallbackUserID,
+    initialTab,
+    onBack,
+    onPressUrl,
+  }: ResourceCenterScreenProps) => {
+    // Same derivation every host app previously duplicated: groupID-first
+    // (group/bot threads), userID fallback (1-1 threads), with route-param
+    // fallbacks for the window before `conversationId` lands in the store.
+    const conversation = useConversation(conversationId);
+    const groupID = conversation?.groupID || fallbackGroupID;
+    const recvID = groupID || conversation?.userID || fallbackUserID || '';
+    // `chatType` must reflect the conversation's actual session type, not just
+    // "did a groupID show up somewhere" — `conversationType` (SessionType.Group
+    // === 3, covers WorkingGroup too since it shares the same numeric value) is
+    // the authoritative signal once the conversation is loaded. Only fall back
+    // to the groupID-presence heuristic for the window before it lands in the
+    // store (conversation === undefined).
+    const isGroupConversation = conversation
+      ? conversation?.conversationType === SessionType.Group
+      : !!groupID;
+    const chatType: 'SINGLE' | 'GROUP' = isGroupConversation
+      ? 'GROUP'
+      : 'SINGLE';
+
+    const [routes] = useState<TabRoute[]>(() =>
+      RESOURCE_TABS.map((tab) => ({
+        key: String(tab.contentType),
+        title: trans(tab.labelKey),
+        contentType: tab.contentType,
+        layout: tab.layout,
+        emptyKey: tab.emptyKey,
+      }))
+    );
+
+    const initialIndex = useMemo(() => {
+      const idx = routes.findIndex((r) => r.contentType === initialTab);
+      return idx >= 0 ? idx : 0;
+    }, [routes, initialTab]);
+
+    const [index, setIndex] = useState(initialIndex);
+    const mediaViewerRef = useRef<MediaViewerModalHandle>(null);
+
+    // `renderScene` is a render prop consumed by `TabView` — matching `Inbox.tsx`'s
+    // convention of `useCallback`-wrapping it so it doesn't get a new identity (and
+    // force unnecessary internal re-renders) on every parent render.
+    // `renderTabBar` needs no wrapper: `ResourceCenterTabBar` already implements
+    // `TabView`'s own `renderTabBar` prop contract directly (it wraps the library's
+    // `TabBar`), so its component reference — already stable — is passed as-is.
+    const renderScene = useCallback(
+      ({ route }: { route: TabRoute }) => (
+        <ResourceCenterTabScene
+          recvID={recvID}
+          chatType={chatType}
+          contentType={route.contentType}
+          layout={route.layout}
+          emptyKey={route.emptyKey}
+          onPressUrl={onPressUrl}
+          mediaViewerRef={mediaViewerRef}
+        />
+      ),
+      [recvID, chatType, onPressUrl]
+    );
+
+    return (
+      <KContainer.View style={styles.flex}>
+        <KNavigation.Header
+          title={trans('chat:resource_center_title')}
+          alignment="left"
+          size="small"
+          theme="light"
+          leftButton={{
+            id: 'back',
+            icon: { vectorName: 'arrow-left-o' },
+            onPress: onBack,
+          }}
+        />
+        <TabView<TabRoute>
+          navigationState={{ index, routes }}
+          onIndexChange={setIndex}
+          lazy
+          renderTabBar={ResourceCenterTabBar}
+          renderScene={renderScene}
+        />
+
+        <MediaViewerModal ref={mediaViewerRef} />
+      </KContainer.View>
+    );
+  }
+);
+
+ResourceCenterScreen.displayName = 'Screen.ResourceCenter';
+
+export default ResourceCenterScreen;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+    backgroundColor: KColors.white,
+  },
+});