Unify attachment display and enable file uploads on all platforms (#1501)

Attachment pills were drawn by four separate style sets, so files,
images, GitHub items, and reviews rendered at different heights in the
same tray. Move the frame, the two-line label, and the image thumbnail
into shared components so every attachment lines up at one height,
across both the composer and sent messages.

Sent-message images now open the lightbox, and file uploads work on
iOS and Android via expo-document-picker instead of being gated to
desktop.

packages/app/src/hooks/use-file-picker.ts

@@ -1,4 +1,6 @@
 import { useCallback, useRef } from "react";
+import * as DocumentPicker from "expo-document-picker";
+import { File } from "expo-file-system";
 import { getDesktopHost, isElectronRuntime } from "@/desktop/host";
 import { copyDesktopAttachmentFile } from "@/desktop/attachments/desktop-file-commands";
 import { readDesktopFileBase64 } from "@/desktop/attachments/desktop-preview-url";
@@ -113,6 +115,25 @@ function pickFilesWithWebInput(): Promise<PickedFile[] | null> {
   });
 }
 
+async function pickFilesWithDocumentPicker(): Promise<PickedFile[] | null> {
+  const result = await DocumentPicker.getDocumentAsync({
+    multiple: true,
+    copyToCacheDirectory: true,
+  });
+
+  if (result.canceled || result.assets.length === 0) {
+    return null;
+  }
+
+  return await Promise.all(
+    result.assets.map(async (asset) => ({
+      fileName: asset.name,
+      mimeType: asset.mimeType ?? getMimeTypeFromPath(asset.name),
+      bytes: await new File(asset.uri).bytes(),
+    })),
+  );
+}
+
 export function useFilePicker() {
   const isPickingRef = useRef(false);
 
@@ -131,8 +152,7 @@ export function useFilePicker() {
         return await pickFilesWithWebInput();
       }
 
-      // Native not supported yet
-      return null;
+      return await pickFilesWithDocumentPicker();
     } catch (error) {
       console.error("[FilePicker] Failed to pick files:", error);
       throw error;