@multiplatform.one/components 6.7.0 → 7.0.0

package/src/layouts/attachments.tsx

@@ -2,31 +2,41 @@ import {
   DownloadSimpleIcon,
   EyeIcon,
   FileIcon,
+  FileTextIcon,
   ImageIcon,
   PaperclipIcon,
+  PlusIcon,
   TrashIcon,
-  UploadIcon,
   XIcon,
 } from "@phosphor-icons/react";
 import { downloadFile } from "@multiplatform.one/platform";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  ensureFocusVisibleRing,
+  ensureKeyboardModalityTracking,
+  getGroupPosition,
+  hairline,
+  stackRadiusProps,
+  useResolvedKnobs,
+  wasKeyboardFocus,
+} from "@multiplatform.one/theme";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import {
-  Button,
   Dialog,
   Image,
-  isWeb,
   Label,
-  ListItem,
+  Separator,
   Text,
   XStack,
   YStack,
+  isWeb,
   type YStackProps,
 } from "tamagui";
-import { DialogOverlay } from "../surfaces";
+import { Button } from "../Button";
+import { DialogContent, DialogOverlay } from "../surfaces";
 import { componentColors, sectionHeading } from "../componentColors";
 import { Skeleton } from "../Skeleton";
+import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose";
 import { AsyncBoundary, resolveAsyncStatus } from "./AsyncBoundary";
 
 // ---------------------------------------------------------------------------
@@ -125,6 +135,7 @@ export interface AttachmentsProps extends Omit<YStackProps, "children"> {
     close?: string;
     fileTooLarge?: string;
     loadFailed?: string;
+    previewUnavailable?: string;
   };
 }
 
@@ -132,6 +143,8 @@ export interface AttachmentsProps extends Omit<YStackProps, "children"> {
 // Helpers
 // ---------------------------------------------------------------------------
 
+type FileKind = "image" | "pdf" | "doc" | "sheet" | "archive" | "file";
+
 function formatFileSize(bytes: number): string {
   if (bytes === 0) return "0 B";
   const k = 1024;
@@ -152,11 +165,52 @@ function isImageFile(attachment: AttachmentItem): boolean {
   return imageExtensions.includes(ext);
 }
 
-function getFileIcon(attachment: AttachmentItem): React.ReactNode {
-  if (isImageFile(attachment)) {
-    return <ImageIcon size={20} />;
+function getFileExtension(attachment: AttachmentItem): string {
+  const name = attachment.fileName || "";
+  const dot = name.lastIndexOf(".");
+  if (dot > 0 && dot < name.length - 1) return name.slice(dot + 1).toUpperCase();
+  const mime = attachment.fileType?.split("/")[1];
+  return mime ? mime.toUpperCase() : "";
+}
+
+function getFileKind(attachment: AttachmentItem): FileKind {
+  if (isImageFile(attachment)) return "image";
+  const ext = getFileExtension(attachment).toLowerCase();
+  const mime = (attachment.fileType || "").toLowerCase();
+  if (ext === "pdf" || mime.includes("pdf")) return "pdf";
+  if (
+    ["doc", "docx", "odt", "rtf", "txt", "md"].includes(ext) ||
+    mime.includes("word") ||
+    mime.includes("text")
+  ) {
+    return "doc";
+  }
+  if (
+    ["xls", "xlsx", "csv", "ods"].includes(ext) ||
+    mime.includes("spreadsheet") ||
+    mime.includes("excel")
+  ) {
+    return "sheet";
   }
-  return <FileIcon size={20} />;
+  if (["zip", "rar", "7z", "tar", "gz"].includes(ext) || mime.includes("zip")) return "archive";
+  return "file";
+}
+
+/** Notion-style type scan: the well hue IS the file class, not a decoration. */
+const FILE_KIND_TONE: Record<FileKind, { bg: string; fg: string }> = {
+  image: { bg: "$color3", fg: "$color11" },
+  pdf: { bg: "$red3", fg: "$red11" },
+  doc: { bg: "$blue3", fg: "$blue11" },
+  sheet: { bg: "$green3", fg: "$green11" },
+  archive: { bg: "$orange3", fg: "$orange11" },
+  file: { bg: "$color3", fg: "$color11" },
+};
+
+function getFileIcon(attachment: AttachmentItem, size: number): React.ReactNode {
+  const kind = getFileKind(attachment);
+  if (kind === "image") return <ImageIcon size={size} />;
+  if (kind === "pdf" || kind === "doc") return <FileTextIcon size={size} />;
+  return <FileIcon size={size} />;
 }
 
 interface AttachmentThumbnailProps {
@@ -191,34 +245,241 @@ function AttachmentThumbnail({ attachment, size, fallback }: AttachmentThumbnail
 /**
  * Skeleton twin of the attachment rows (LC-20 / DG-ST-02): the media square
  * and the name + size text column mirror the live row anatomy so the layout
- * doesn't jump when data lands.
+ * doesn't jump when data lands. Hairlines sit BETWEEN placeholders only
+ * (LC-72).
  */
 function AttachmentsSkeleton({
   thumbSize,
   loadingLabel,
+  rowPad,
 }: {
   thumbSize: number;
   loadingLabel: string;
+  rowPad: string | number | undefined;
 }) {
   return (
+    <YStack width="100%" data-async-skeleton="attachments" aria-busy aria-label={loadingLabel}>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <YStack key={i}>
+          {i > 0 ? <Separator {...hairline.line} /> : null}
+          <XStack
+            gap="$3"
+            alignItems="center"
+            paddingVertical="$2"
+            paddingHorizontal={rowPad}
+            minHeight={44}
+          >
+            <Skeleton variant="rounded" width={thumbSize} height={thumbSize} />
+            <YStack flex={1} gap="$1">
+              <Skeleton width="55%" height={14} />
+              <Skeleton width="25%" height={12} />
+            </YStack>
+          </XStack>
+        </YStack>
+      ))}
+    </YStack>
+  );
+}
+
+interface AttachmentRowProps {
+  attachment: AttachmentItem;
+  index: number;
+  count: number;
+  compact: boolean;
+  disabled: boolean;
+  thumbSize: number;
+  rowPad: string | number | undefined;
+  enablePreview: boolean;
+  enableDownload: boolean;
+  enableRemove: boolean;
+  previewLabel: string;
+  downloadLabel: string;
+  removeLabel: string;
+  onAttachmentClick?: (attachment: AttachmentItem) => void;
+  onPreview: (attachment: AttachmentItem) => void;
+  onDownload: (attachment: AttachmentItem) => void;
+  onRemove?: (attachment: AttachmentItem) => void;
+  renderAttachment?: AttachmentsProps["renderAttachment"];
+}
+
+/**
+ * One flush stacked row (LC-72): first rounds leading corners, last trailing,
+ * interiors square. Hover/press/focus inherit that geometry. Desk = filename
+ * as the subject + inline actions; Notion = type well / image thumb + size.
+ */
+function AttachmentRow({
+  attachment,
+  index,
+  count,
+  compact,
+  disabled,
+  thumbSize,
+  rowPad,
+  enablePreview,
+  enableDownload,
+  enableRemove,
+  previewLabel,
+  downloadLabel,
+  removeLabel,
+  onAttachmentClick,
+  onPreview,
+  onDownload,
+  onRemove,
+  renderAttachment,
+}: AttachmentRowProps) {
+  const { knobProps, control } = useResolvedKnobs({ compact });
+  const [kbFocus, setKbFocus] = useState(false);
+  const isImage = isImageFile(attachment);
+  const kind = getFileKind(attachment);
+  const tone = FILE_KIND_TONE[kind];
+  const ext = getFileExtension(attachment);
+  const iconSize = compact ? 14 : 16;
+  const position = getGroupPosition(index, count);
+  const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
+
+  const actions = {
+    onPreview: () => onPreview(attachment),
+    onDownload: () => onDownload(attachment),
+    onRemove: () => onRemove?.(attachment),
+  };
+
+  const mediaSlot = (
     <YStack
-      gap="$1"
-      width="100%"
-      data-async-skeleton="attachments"
-      aria-busy
-      aria-label={loadingLabel}
+      width={thumbSize}
+      height={thumbSize}
+      flexShrink={0}
+      overflow="hidden"
+      backgroundColor={tone.bg}
+      borderRadius={knobProps.borderRadius.borderRadius}
+      alignItems="center"
+      justifyContent="center"
+      // `color` sets the icon's inherited color; Tamagui forwards it at runtime
+      // but the RN-flavored View prop type omits it (house Record cast).
+      {...({ color: tone.fg } as Record<string, unknown>)}
     >
-      {Array.from({ length: 3 }).map((_, i) => (
-        <XStack key={i} gap="$3" alignItems="center" paddingVertical="$2">
-          <Skeleton variant="rounded" width={thumbSize} height={thumbSize} />
-          <YStack flex={1} gap="$1">
-            <Skeleton width="55%" height={14} />
-            <Skeleton width="25%" height={12} />
+      {isImage ? (
+        <AttachmentThumbnail
+          attachment={attachment}
+          size={thumbSize}
+          fallback={getFileIcon(attachment, iconSize)}
+        />
+      ) : (
+        getFileIcon(attachment, iconSize)
+      )}
+    </YStack>
+  );
+
+  const actionButtons = (
+    <XStack gap="$1" alignItems="center">
+      {enablePreview && isImage && (
+        <Button
+          size="$2"
+          chromeless
+          nested
+          icon={EyeIcon}
+          aria-label={previewLabel}
+          onPress={(e) => {
+            e.stopPropagation();
+            actions.onPreview();
+          }}
+        />
+      )}
+      {enableDownload && (
+        <Button
+          size="$2"
+          chromeless
+          nested
+          icon={DownloadSimpleIcon}
+          aria-label={downloadLabel}
+          onPress={(e) => {
+            e.stopPropagation();
+            actions.onDownload();
+          }}
+        />
+      )}
+      {enableRemove && !disabled && onRemove && (
+        <Button
+          size="$2"
+          chromeless
+          nested
+          icon={TrashIcon}
+          aria-label={removeLabel}
+          onPress={(e) => {
+            e.stopPropagation();
+            actions.onRemove();
+          }}
+        />
+      )}
+    </XStack>
+  );
+
+  const defaultContent = (
+    <YStack>
+      {index > 0 ? <Separator {...hairline.line} /> : null}
+      <XStack
+        role="listitem"
+        data-stack-position={position}
+        alignItems="center"
+        paddingVertical="$2"
+        paddingHorizontal={rowPad}
+        minHeight={44}
+        overflow="hidden"
+        cursor="pointer"
+        {...corners}
+        transition={knobProps.transition}
+        hoverStyle={{
+          backgroundColor: componentColors.interactive.background,
+          ...control.hoverKnobProps,
+          ...corners,
+        }}
+        pressStyle={{
+          backgroundColor: componentColors.interactive.hover,
+          ...control.pressKnobProps,
+          ...corners,
+        }}
+        {...(kbFocus ? ensureFocusVisibleRing({ outlineOffset: -2 }) : { outlineWidth: 0 })}
+        onPress={() => {
+          onAttachmentClick?.(attachment);
+          if (enablePreview) onPreview(attachment);
+        }}
+        onFocus={() => {
+          if (wasKeyboardFocus()) setKbFocus(true);
+        }}
+        onBlur={() => setKbFocus(false)}
+      >
+        <XStack flex={1} alignItems="center" minWidth={0} gap="$3">
+          {mediaSlot}
+          <YStack flex={1} minWidth={0}>
+            <Text {...knobProps.body} fontSize={compact ? "$3" : "$4"} numberOfLines={1}>
+              {attachment.fileName}
+            </Text>
+            <XStack gap="$2" alignItems="center">
+              <Text fontSize="$2" color={componentColors.text.muted}>
+                {attachment.formattedSize || formatFileSize(attachment.fileSize)}
+              </Text>
+              {ext ? (
+                <>
+                  <Text fontSize="$2" color={componentColors.text.subtle}>
+                    ·
+                  </Text>
+                  <Text fontSize="$2" color={componentColors.text.subtle}>
+                    {ext}
+                  </Text>
+                </>
+              ) : null}
+            </XStack>
           </YStack>
+          {actionButtons}
         </XStack>
-      ))}
+      </XStack>
     </YStack>
   );
+
+  if (renderAttachment) {
+    return renderAttachment(attachment, defaultContent, actions);
+  }
+
+  return defaultContent;
 }
 
 // ---------------------------------------------------------------------------
@@ -227,8 +488,9 @@ function AttachmentsSkeleton({
 
 /**
  * Generic Attachments component for displaying and managing file attachments.
- * Uses Tamagui `ListItem` for each attachment row with native hover/press animations.
- * Fully data-agnostic -- accepts items via props and emits callbacks.
+ * Stacked flush rows (LC-72): outer corners only, hairlines BETWEEN items,
+ * hover/press/focus inherit that geometry. Fully data-agnostic — accepts
+ * items via props and emits callbacks.
  */
 export function Attachments({
   items,
@@ -255,10 +517,13 @@ export function Attachments({
   ...stackProps
 }: AttachmentsProps) {
   const { t } = useTranslation();
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ compact });
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [previewFile, setPreviewFile] = useState<AttachmentItem | null>(null);
   const [uploadError, setUploadError] = useState<string | null>(null);
+  const [dragOver, setDragOver] = useState(false);
+  useReturnFocusOnClose(!!previewFile);
+  if (isWeb) ensureKeyboardModalityTracking();
 
   const {
     upload: uploadLabel = "Upload",
@@ -269,6 +534,7 @@ export function Attachments({
     close: closeLabel = "Close",
     fileTooLarge: fileTooLargeLabel = "File too large",
     loadFailed: loadFailedLabel = t("Couldn't load attachments"),
+    previewUnavailable: previewUnavailableLabel = t("Preview not available for this file type."),
   } = labels;
 
   // Error wins (DG-ST-01): a failed load must never look like "no attachments".
@@ -283,24 +549,28 @@ export function Attachments({
     return true;
   }, [disabled, enableAdd, onAdd, maxAttachments, items.length, hasError]);
 
-  const handleFileSelect = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const file = event.target.files?.[0];
-      if (!file) return;
-
+  const acceptFile = useCallback(
+    (file: File) => {
       if (maxFileSize && file.size > maxFileSize) {
         setUploadError(`${fileTooLargeLabel} (${formatFileSize(maxFileSize)})`);
         return;
       }
-
       setUploadError(null);
       onAdd?.(file);
+    },
+    [maxFileSize, onAdd, fileTooLargeLabel],
+  );
 
+  const handleFileSelect = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+      acceptFile(file);
       if (fileInputRef.current) {
         fileInputRef.current.value = "";
       }
     },
-    [maxFileSize, onAdd, fileTooLargeLabel],
+    [acceptFile],
   );
 
   const handlePreview = useCallback((attachment: AttachmentItem) => {
@@ -322,15 +592,41 @@ export function Attachments({
     fileInputRef.current?.click();
   }, []);
 
+  const dropHandlers =
+    canAdd && isWeb
+      ? {
+          onDragOver: (event: { preventDefault: () => void }) => {
+            event.preventDefault();
+            setDragOver(true);
+          },
+          onDragLeave: () => setDragOver(false),
+          onDrop: (event: { preventDefault: () => void; dataTransfer?: { files?: FileList } }) => {
+            event.preventDefault();
+            setDragOver(false);
+            const file = event.dataTransfer?.files?.[0];
+            if (file) acceptFile(file);
+          },
+        }
+      : undefined;
+
   const emptyState = renderEmpty ? (
     renderEmpty()
   ) : (
     <YStack
       {...(compact ? { padding: "$2" } : knobProps.panelPadding)}
       alignItems="center"
-      opacity={0.5}
+      {...knobProps.borderRadius}
+      borderWidth={canAdd ? 1 : 0}
+      borderStyle={canAdd ? "dashed" : undefined}
+      borderColor={dragOver ? componentColors.interactive.border : componentColors.surface.border}
+      backgroundColor={dragOver ? componentColors.interactive.background : "transparent"}
+      cursor={canAdd ? "pointer" : "default"}
+      opacity={canAdd ? 1 : 0.5}
+      hoverStyle={canAdd ? { backgroundColor: componentColors.interactive.background } : undefined}
+      onPress={canAdd ? handleUploadClick : undefined}
+      {...dropHandlers}
     >
-      <PaperclipIcon size={compact ? 20 : 32} />
+      <PaperclipIcon size={compact ? 20 : 28} />
       <Text color={componentColors.text.muted} fontSize={compact ? "$2" : "$3"} marginTop="$2">
         {noAttachmentsLabel}
       </Text>
@@ -350,123 +646,12 @@ export function Attachments({
       : sz === "$5"
         ? 48
         : 40;
-
-  const renderAttachmentItem = (attachment: AttachmentItem) => {
-    const isImage = isImageFile(attachment);
-    const actions = {
-      onPreview: () => handlePreview(attachment),
-      onDownload: () => handleDownload(attachment),
-      onRemove: () => onRemove?.(attachment),
-    };
-
-    // Shared media slot: icon and thumbnail live in the same fixed-size box so
-    // the text column starts at the same x in every row.
-    const mediaSlot = (
-      <YStack
-        width={thumbSize}
-        height={thumbSize}
-        flexShrink={0}
-        overflow="hidden"
-        {...{ backgroundColor: componentColors.surface.background }}
-        {...knobProps.borderRadius}
-        alignItems="center"
-        justifyContent="center"
-      >
-        {isImage ? (
-          <AttachmentThumbnail
-            attachment={attachment}
-            size={thumbSize}
-            fallback={getFileIcon(attachment)}
-          />
-        ) : (
-          getFileIcon(attachment)
-        )}
-      </YStack>
-    );
-
-    const actionButtons = (
-      <XStack gap="$1">
-        {enablePreview && isImage && (
-          <Button
-            size="$2"
-            chromeless
-            icon={EyeIcon}
-            aria-label={previewLabel}
-            onPress={(e) => {
-              e.stopPropagation();
-              actions.onPreview();
-            }}
-          />
-        )}
-        {enableDownload && (
-          <Button
-            size="$2"
-            chromeless
-            icon={DownloadSimpleIcon}
-            aria-label={downloadLabel}
-            onPress={(e) => {
-              e.stopPropagation();
-              actions.onDownload();
-            }}
-          />
-        )}
-        {enableRemove && !disabled && onRemove && (
-          <Button
-            size="$2"
-            chromeless
-            icon={TrashIcon}
-            aria-label={removeLabel}
-            onPress={(e) => {
-              e.stopPropagation();
-              actions.onRemove();
-            }}
-          />
-        )}
-      </XStack>
-    );
-
-    // Explicit row anatomy (ListItem's icon prop spaces via a cloned style
-    // that function-component media drops, so image rows lost their gap):
-    // media slot + knob-gap + text column + actions, list-row vertical padding.
-    const defaultContent = (
-      <ListItem
-        size={compact ? "$3" : knobProps.sizeToken}
-        paddingVertical="$2"
-        hoverStyle={{ backgroundColor: componentColors.surface.background }}
-        pressStyle={{ backgroundColor: componentColors.interactive.background }}
-        onPress={() => onAttachmentClick?.(attachment)}
-        cursor="pointer"
-      >
-        <XStack flex={1} alignItems="center" {...knobProps.gap}>
-          {mediaSlot}
-          <YStack flex={1} minWidth={0}>
-            <Text
-              {...knobProps.body}
-              fontSize={compact ? "$3" : (knobProps.sizeToken as "$3" | "$4" | "$5")}
-              numberOfLines={1}
-            >
-              {attachment.fileName}
-            </Text>
-            <Text fontSize="$2" color={componentColors.text.muted}>
-              {attachment.formattedSize || formatFileSize(attachment.fileSize)}
-            </Text>
-          </YStack>
-          {actionButtons}
-        </XStack>
-      </ListItem>
-    );
-
-    if (renderAttachment) {
-      return renderAttachment(attachment, defaultContent, actions);
-    }
-
-    return defaultContent;
-  };
+  const rowPad = knobProps.panelPadding.padding;
 
   return (
     <YStack {...knobProps.gap} {...stackProps}>
       {(label || canAdd) && (
-        <XStack alignItems="center" justifyContent="space-between">
+        <XStack alignItems="center" justifyContent={label ? "space-between" : "flex-end"}>
           {label && (
             <Label {...(compact ? { fontSize: "$3", fontWeight: "500" } : sectionHeading)}>
               {label}
@@ -480,7 +665,7 @@ export function Attachments({
             </Label>
           )}
           {canAdd && (
-            <Button size={compact ? "$2" : "$3"} icon={UploadIcon} onPress={handleUploadClick}>
+            <Button size={compact ? "$2" : "$3"} icon={PlusIcon} onPress={handleUploadClick}>
               {uploadLabel}
             </Button>
           )}
@@ -523,16 +708,44 @@ export function Attachments({
         errorTitle={loadFailedLabel}
         loading={
           showSkeleton ? (
-            <AttachmentsSkeleton thumbSize={thumbSize} loadingLabel={t("Loading")} />
+            <AttachmentsSkeleton
+              thumbSize={thumbSize}
+              loadingLabel={t("Loading")}
+              rowPad={rowPad}
+            />
           ) : (
             false
           )
         }
         empty={!hasError && items.length === 0 ? emptyState : false}
       >
-        <YStack gap="$1">
-          {items.map((attachment) => (
-            <React.Fragment key={attachment.id}>{renderAttachmentItem(attachment)}</React.Fragment>
+        <YStack
+          role="list"
+          backgroundColor={dragOver ? componentColors.interactive.background : "transparent"}
+          {...dropHandlers}
+        >
+          {items.map((attachment, index) => (
+            <AttachmentRow
+              key={attachment.id}
+              attachment={attachment}
+              index={index}
+              count={items.length}
+              compact={compact}
+              disabled={disabled}
+              thumbSize={thumbSize}
+              rowPad={rowPad}
+              enablePreview={enablePreview}
+              enableDownload={enableDownload}
+              enableRemove={enableRemove}
+              previewLabel={previewLabel}
+              downloadLabel={downloadLabel}
+              removeLabel={removeLabel}
+              onAttachmentClick={onAttachmentClick}
+              onPreview={handlePreview}
+              onDownload={handleDownload}
+              onRemove={onRemove}
+              renderAttachment={renderAttachment}
+            />
           ))}
         </YStack>
       </AsyncBoundary>
@@ -540,40 +753,35 @@ export function Attachments({
       <Dialog open={!!previewFile} onOpenChange={(open) => !open && setPreviewFile(null)}>
         <Dialog.Portal>
           <DialogOverlay opacity={0.5} />
-          <Dialog.Content
-            borderWidth={1}
-            borderColor="$borderColor"
-            elevation={knobProps.elevation}
-            // LC-24: enter/exit styles are dead code without a resolved token
-            transition={knobProps.transition}
-            enterStyle={{ x: 0, y: -20, opacity: 0, scale: 0.9 }}
-            exitStyle={{ x: 0, y: 10, opacity: 0, scale: 0.95 }}
-            maxWidth={800}
-            maxHeight="80vh"
-          >
+          <DialogContent maxWidth={800} maxHeight="80vh">
             <Dialog.Title>{previewFile?.fileName}</Dialog.Title>
-            {previewFile && (
-              <YStack {...knobProps.panelPadding} alignItems="center">
-                <Image
-                  // src/objectFit, not source/resizeMode (RN-only props leak
-                  // onto the DOM <img> on web; tamagui maps these on native)
-                  src={previewFile.fileUrl}
-                  alt={previewFile.fileName}
-                  width="100%"
-                  height={400}
-                  objectFit="contain"
-                />
-                <XStack gap="$2" marginTop="$4">
-                  <Button icon={DownloadSimpleIcon} onPress={() => handleDownload(previewFile)}>
-                    {downloadLabel}
-                  </Button>
-                  <Dialog.Close asChild>
-                    <Button variant="outlined">{closeLabel}</Button>
-                  </Dialog.Close>
-                </XStack>
+            {previewFile && isImageFile(previewFile) ? (
+              <Image
+                src={previewFile.fileUrl}
+                alt={previewFile.fileName}
+                width="100%"
+                height={320}
+                objectFit="contain"
+              />
+            ) : previewFile ? (
+              <YStack alignItems="center" {...knobProps.gap} paddingVertical="$4">
+                {getFileIcon(previewFile, 40)}
+                <Text color={componentColors.text.muted} textAlign="center">
+                  {previewUnavailableLabel}
+                </Text>
               </YStack>
-            )}
-          </Dialog.Content>
+            ) : null}
+            {previewFile ? (
+              <XStack gap="$2">
+                <Button icon={DownloadSimpleIcon} onPress={() => handleDownload(previewFile)}>
+                  {downloadLabel}
+                </Button>
+                <Button outlined onPress={() => setPreviewFile(null)}>
+                  {closeLabel}
+                </Button>
+              </XStack>
+            ) : null}
+          </DialogContent>
         </Dialog.Portal>
       </Dialog>
     </YStack>