@oxyhq/services 22.5.0 → 22.6.0

package/src/ui/hooks/queries/useAccountQueries.ts

@@ -50,6 +50,15 @@ export const useUserProfiles = (sessionIds: string[], options?: { enabled?: bool
 /**
  * Get current authenticated user.
  *
+ * Hydrates from `GET /users/me` (the bearer identifies the session) rather than
+ * `GET /session/user/:activeSessionId`. Post zero-cookie cutover the bearer is
+ * the single source of session truth, so keying the CURRENT user off a session
+ * id in the URL was a second, independently-updated source that could disagree
+ * with the bearer during an account switch — the request fired under the
+ * previous account's token against the new account's session id and 404'd. The
+ * query KEY stays scoped to the active account so the cache re-scopes (and
+ * refetches) on a switch; only the URL stopped carrying a session id.
+ *
  * The store-mirror effect must NOT overwrite the in-memory user while a
  * write mutation is in flight — otherwise a stale background refetch
  * landing between optimistic update and server-confirmed update would
@@ -67,10 +76,7 @@ export const useCurrentUser = (options?: { enabled?: boolean }) => {
   const query = useQuery({
     queryKey: queryKeys.accounts.current(activeSessionId),
     queryFn: async () => {
-      if (!activeSessionId) {
-        throw new Error('No active session');
-      }
-      return await oxyServices.getUserBySession(activeSessionId);
+      return await oxyServices.getCurrentUser();
     },
     enabled: (options?.enabled !== false) && isAuthenticated && !!activeSessionId,
     staleTime: 1 * 60 * 1000, // 1 minute for current user

package/src/ui/hooks/queries/userCache.ts

@@ -29,6 +29,9 @@
  *     marked stale — it is already managed).
  *   - Nested objects (`name`, `_count`, `relationship`) merge field-by-field, so
  *     a partial `name`/`_count`/`relationship` never replaces a fuller one.
+ *   - `relationship` is written ONLY under the viewer-scoped by-username key —
+ *     the viewer-independent by-id key never stores it (prevents one viewer's
+ *     follow state from leaking into every other viewer's identity cache).
  *   - Anti-degradation: a good `username` / `name.displayName` / `avatar` is
  *     never overwritten by a degraded/empty one (empty username, the
  *     `'Unknown user'` ghost-author sentinel, `null` avatar).
@@ -184,8 +187,17 @@ function mergeRelationship(
 /**
  * Merge a (normalized) incoming user over an existing cache entry: keep every
  * existing field, override only with the meaningful fields of `incoming`.
+ *
+ * When `includeRelationship` is false (the viewer-independent by-id key), the
+ * viewer-relative `relationship` field is never read, written, or preserved —
+ * only the by-username key carries it (`useUserByUsername`).
  */
-function mergeUsers(existing: CachedUser, incoming: CachedUser): CachedUser {
+function mergeUsers(
+  existing: CachedUser,
+  incoming: CachedUser,
+  options?: { includeRelationship?: boolean },
+): CachedUser {
+  const includeRelationship = options?.includeRelationship ?? true;
   const merged: CachedUser = { ...existing };
   for (const [key, value] of Object.entries(incoming)) {
     if (key === 'name' || key === '_count' || key === 'relationship') continue;
@@ -199,8 +211,12 @@ function mergeUsers(existing: CachedUser, incoming: CachedUser): CachedUser {
   if (name !== undefined) merged.name = name;
   const count = mergeCount(existing._count, incoming._count);
   if (count !== undefined) merged._count = count;
-  const relationship = mergeRelationship(existing.relationship, incoming.relationship);
-  if (relationship !== undefined) merged.relationship = relationship;
+  if (includeRelationship) {
+    const relationship = mergeRelationship(existing.relationship, incoming.relationship);
+    if (relationship !== undefined) merged.relationship = relationship;
+  } else {
+    delete merged.relationship;
+  }
   return merged;
 }
 
@@ -209,17 +225,20 @@ function upsertOneKey(
   queryClient: QueryClient,
   key: readonly unknown[],
   incoming: CachedUser,
+  options: { includeRelationship: boolean },
 ): void {
+  const mergeOpts = { includeRelationship: options.includeRelationship };
   const existing = queryClient.getQueryData<CacheableUser>(key);
   if (existing === undefined) {
     // Cold slot: seed the full incoming object, STALE, so react-query refetches
     // the full authoritative profile (relationship, counts, createdAt, …).
-    queryClient.setQueryData<CachedUser>(key, incoming, { updatedAt: 0 });
+    const seeded = mergeUsers({ id: incoming.id }, incoming, mergeOpts);
+    queryClient.setQueryData<CachedUser>(key, seeded, { updatedAt: 0 });
     return;
   }
   // Existing entry: merge and leave its freshness lifecycle untouched. The
   // existing entry is keyed by `incoming.id`, so use it as the fallback id.
-  const merged = mergeUsers(toCachedUser(existing, incoming.id), incoming);
+  const merged = mergeUsers(toCachedUser(existing, incoming.id), incoming, mergeOpts);
   const dataUpdatedAt = queryClient.getQueryState(key)?.dataUpdatedAt ?? 0;
   queryClient.setQueryData<CachedUser>(key, merged, { updatedAt: dataUpdatedAt });
 }
@@ -253,8 +272,12 @@ export function upsertCachedUser(
   const incoming = normalizeIncoming(user);
   if (!incoming) return;
 
-  // By-id identity entry (read by `useUserById`). Not viewer-scoped.
-  upsertOneKey(queryClient, queryKeys.users.detail(incoming.id), incoming);
+  // By-id identity entry (read by `useUserById`). Not viewer-scoped — never store
+  // the viewer-relative `relationship` here or one viewer's follow state leaks
+  // into every other viewer's by-id cache entry.
+  upsertOneKey(queryClient, queryKeys.users.detail(incoming.id), incoming, {
+    includeRelationship: false,
+  });
 
   const username = incoming.username;
   if (typeof username === 'string' && username.trim() !== '') {
@@ -263,7 +286,7 @@ export function upsertCachedUser(
     // the key through the SAME helper the hook uses so username normalization
     // (`trim().toLowerCase()`) matches byte-for-byte.
     const key = queryKeys.users.byUsername(username, resolveViewerId(viewerId));
-    upsertOneKey(queryClient, key, incoming);
+    upsertOneKey(queryClient, key, incoming, { includeRelationship: true });
   }
 }
 

package/src/ui/hooks/useAvatarPicker.ts

@@ -100,11 +100,19 @@ export function useAvatarPicker({
   );
 
   /**
-   * After the user picks a file in the FileManagement sheet, route to the
-   * crop screen with the file's download URL as the source image.
+   * After the user picks a file in the FileManagement sheet, resolve a working
+   * source URL and route to the crop screen.
+   *
+   * The picked file is usually PRIVATE, so the synchronous
+   * `getFileDownloadUrl` (public CDN origin) would 404 and the crop screen's
+   * `Image.getSize` would fail silently. We resolve the authenticated URL via
+   * `assetGetUrl` (which throws on failure — unlike `getFileDownloadUrlAsync`,
+   * which swallows errors and falls back to the broken public URL) so a
+   * failure surfaces a real user-facing error instead of a blank crop canvas.
+   * No variant is requested — cropping needs the original.
    */
   const handleFilePicked = useCallback(
-    (file: FileMetadata) => {
+    async (file: FileMetadata) => {
       if (!file.contentType?.startsWith('image/')) {
         toast.error(
           translate(currentLanguage ?? undefined, 'editProfile.toasts.selectImage') ||
@@ -113,10 +121,22 @@ export function useAvatarPicker({
         return;
       }
 
-      // Use the public download URL of the picked file as the crop source.
-      // The OxyServices file URL endpoints accept image variants, but for
-      // cropping we want the original — passing no variant returns it.
-      const sourceUri = oxyServices.getFileDownloadUrl(file.id);
+      let sourceUri: string;
+      try {
+        const resolved = await oxyServices.assetGetUrl(file.id);
+        if (!resolved?.url) {
+          throw new Error('No download URL returned for the selected image');
+        }
+        sourceUri = resolved.url;
+      } catch (e: unknown) {
+        const message = e instanceof Error ? e.message : undefined;
+        toast.error(
+          message ||
+            translate(currentLanguage ?? undefined, 'editProfile.toasts.cropMeasureFailed') ||
+            'Could not load the selected image',
+        );
+        return;
+      }
 
       showBottomSheet({
         screen: 'AvatarCrop',

package/src/ui/hooks/useFileDownloadUrl.ts

@@ -15,8 +15,9 @@ export interface UseFileDownloadUrlResult {
 /**
  * Hook to resolve a file's download URL asynchronously.
  *
- * Uses `getFileDownloadUrlAsync` first, falling back to the synchronous
- * `getFileDownloadUrl` if the async call fails.
+ * Uses `getFileDownloadUrlAsync`, which returns a scoped media-token stream URL
+ * for private assets. There is no sync CDN fallback — the synchronous
+ * `getFileDownloadUrl` is public-CDN-only and 404s for private uploads.
  */
 export const useFileDownloadUrl = (
   oxyServices: OxyServices | null | undefined,
@@ -54,35 +55,18 @@ export const useFileDownloadUrl = (
       setError(null);
 
       try {
-        let resolvedUrl: string | null = null;
-
-        if (typeof instance.getFileDownloadUrlAsync === 'function') {
-          resolvedUrl = await instance.getFileDownloadUrlAsync(targetFileId, variant, expiresIn);
+        if (typeof instance.getFileDownloadUrlAsync !== 'function') {
+          throw new Error('getFileDownloadUrlAsync is not available on this OxyServices instance');
         }
 
-        if (!resolvedUrl && typeof instance.getFileDownloadUrl === 'function') {
-          resolvedUrl = instance.getFileDownloadUrl(targetFileId, variant, expiresIn);
-        }
+        const resolvedUrl = await instance.getFileDownloadUrlAsync(targetFileId, variant, expiresIn);
 
         if (!cancelled) {
           setUrl(resolvedUrl || null);
         }
       } catch (err: unknown) {
-        // Fallback to sync URL on error where possible
-        try {
-          if (typeof instance.getFileDownloadUrl === 'function') {
-            const fallbackUrl = instance.getFileDownloadUrl(targetFileId, variant, expiresIn);
-            if (!cancelled) {
-              setUrl(fallbackUrl || null);
-              setError(err instanceof Error ? err : new Error(String(err)));
-            }
-            return;
-          }
-        } catch {
-          // Secondary failure: surface the original error below.
-        }
-
         if (!cancelled) {
+          setUrl(null);
           setError(err instanceof Error ? err : new Error(String(err)));
         }
       } finally {

package/src/ui/hooks/useResolvedFileUrls.ts

@@ -0,0 +1,170 @@
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import type { FileMetadata } from '@oxyhq/core';
+
+/**
+ * The variant-aware batch resolver contract (`@oxyhq/core`).
+ *
+ * `getFileDownloadUrls` takes a per-file `{ fileId, variant }` list and returns
+ * a map keyed by `fileId`; ids that are denied or missing are OMITTED (never an
+ * empty string), and PRIVATE assets resolve to a working scoped-media-token
+ * stream URL. Typed here rather than `Pick<OxyServices, …>` so this file states
+ * the exact contract it depends on.
+ */
+export interface AssetUrlBatchResolver {
+  getFileDownloadUrls(
+    requests: Array<{ fileId: string; variant?: string }>,
+    options?: { expiresIn?: number; context?: string },
+  ): Promise<Record<string, string>>;
+}
+
+/**
+ * Private-safe grid/thumbnail URL resolution.
+ *
+ * The synchronous `oxyServices.getFileDownloadUrl(id, variant)` always yields
+ * the public CDN origin (`cloud.oxy.so/<id>`), which 404s for PRIVATE assets —
+ * and uploads default to private. Thumbnails and previews therefore have to be
+ * resolved through the authenticated batch endpoint, which returns a working
+ * `/assets/:id/stream?…&mt=<scoped media token>` URL for private files.
+ *
+ * This hook resolves an ENTIRE page of files in ONE (chunked) batch request
+ * rather than N per-tile calls, and caches the result in React Query keyed by
+ * the (fileId, variant) set. `staleTime` is deliberately shorter than the
+ * server media-token TTL so a tile never renders a URL whose token has already
+ * expired.
+ *
+ * Optimistic (`temp-…` / `uploading`) entries are NEVER resolved here — an
+ * asset URL must never be built from an id the server does not yet know. Their
+ * preview comes from the locally-picked uri (see {@link fileThumbSource}).
+ */
+
+/** Server media-token lifetime we request for each resolved URL (seconds). */
+const ASSET_URL_TTL_SECONDS = 600; // 10 minutes
+/**
+ * Refresh window. Kept below {@link ASSET_URL_TTL_SECONDS} so React Query
+ * re-resolves in the background before a rendered URL's token can die.
+ */
+const ASSET_URL_STALE_MS = 5 * 60 * 1000; // 5 minutes
+const ASSET_URL_GC_MS = 30 * 60 * 1000;
+/** Server-side batch cap for `POST /assets/batch-access` — chunk beyond this. */
+const BATCH_CAP = 100;
+
+/** React Query prefix — scoped media URLs must never leak across accounts. */
+export const ASSET_DOWNLOAD_URLS_QUERY_KEY = 'assetDownloadUrls' as const;
+
+/**
+ * True when a file is an optimistic placeholder that has not been persisted by
+ * the server yet — either its id is still the client-minted `temp-…` id, or it
+ * carries the `uploading` flag. Mirrors the `temp-` id guard precedent in
+ * `@oxyhq/core`'s `avatarUtils.updateAvatarVisibility`.
+ */
+export function isOptimisticFile(file: Pick<FileMetadata, 'id' | 'metadata'>): boolean {
+  if (typeof file.id === 'string' && file.id.startsWith('temp-')) return true;
+  return file.metadata?.uploading === true;
+}
+
+/** Grid thumbnail variant for a file, or `undefined` when it needs no URL. */
+function thumbVariantFor(file: FileMetadata): string | undefined {
+  if (file.contentType.startsWith('video/')) return 'poster';
+  if (file.contentType.startsWith('image/')) return 'thumb';
+  return undefined;
+}
+
+/**
+ * Locally-picked preview uri stashed on an optimistic entry's metadata by the
+ * upload flow, if present.
+ */
+function localPreviewUri(file: FileMetadata): string | undefined {
+  const uri = (file.metadata as Record<string, unknown> | undefined)?.localPreviewUri;
+  return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
+}
+
+/**
+ * Resolve the image source for a grid tile.
+ *
+ * - Optimistic entry → its locally-picked preview uri (never an asset URL).
+ * - Persisted entry → the private-safe URL from {@link useResolvedFileUrls},
+ *   or `undefined` while it is still resolving / was denied (tile shows a
+ *   placeholder instead of a guaranteed-404 CDN URL).
+ */
+export function fileThumbSource(
+  file: FileMetadata,
+  resolved: ReadonlyMap<string, string>,
+): string | undefined {
+  if (isOptimisticFile(file)) {
+    return localPreviewUri(file);
+  }
+  return resolved.get(file.id);
+}
+
+/**
+ * Batch-resolve private-safe thumbnail URLs for the given files.
+ *
+ * Only image/video, non-optimistic files are resolved (documents render an
+ * icon, optimistic entries render their local preview). Returns a stable
+ * `Map<fileId, url>`; missing entries mean "not resolved yet or access denied".
+ */
+export function useResolvedFileUrls(
+  oxyServices: AssetUrlBatchResolver,
+  files: FileMetadata[],
+  /** Active viewer account id — media tokens are minted per user; must be in the query key. */
+  viewerId?: string | null,
+): ReadonlyMap<string, string> {
+  const viewerKey = viewerId ?? '';
+  const requests = useMemo(() => {
+    const list: Array<{ fileId: string; variant?: string }> = [];
+    for (const file of files) {
+      if (isOptimisticFile(file)) continue;
+      const variant = thumbVariantFor(file);
+      if (!variant) continue;
+      list.push({ fileId: file.id, variant });
+    }
+    return list;
+  }, [files]);
+
+  // A content signature so the query key is stable across renders while the
+  // resolvable set is unchanged (the `files` array is a fresh reference every
+  // render). Sorted so ordering churn does not force a refetch.
+  const signature = useMemo(
+    () => requests.map((r) => `${r.fileId}:${r.variant ?? ''}`).sort().join('|'),
+    [requests],
+  );
+
+  const query = useQuery({
+    queryKey: [ASSET_DOWNLOAD_URLS_QUERY_KEY, viewerKey, signature],
+    enabled: requests.length > 0 && viewerKey.length > 0,
+    staleTime: ASSET_URL_STALE_MS,
+    gcTime: ASSET_URL_GC_MS,
+    // Keep previously-resolved URLs on screen while the SAME viewer's file set
+    // grows (pagination), but never carry another account's scoped media tokens
+    // across a switch — `keepPreviousData` alone would do that.
+    placeholderData: (previousData, previousQuery) => {
+      if (!previousData || !previousQuery) return undefined;
+      const prevViewer = previousQuery.queryKey[1];
+      if (prevViewer !== viewerKey) return undefined;
+      return previousData;
+    },
+    queryFn: async (): Promise<Record<string, string>> => {
+      const merged: Record<string, string> = {};
+      for (let i = 0; i < requests.length; i += BATCH_CAP) {
+        const chunk = requests.slice(i, i + BATCH_CAP);
+        const urls = await oxyServices.getFileDownloadUrls(chunk, {
+          expiresIn: ASSET_URL_TTL_SECONDS,
+        });
+        Object.assign(merged, urls);
+      }
+      return merged;
+    },
+  });
+
+  return useMemo(() => {
+    const map = new Map<string, string>();
+    const data = query.data;
+    if (data) {
+      for (const [id, url] of Object.entries(data)) {
+        if (typeof url === 'string' && url.length > 0) map.set(id, url);
+      }
+    }
+    return map;
+  }, [query.data]);
+}

package/src/ui/screens/FileManagementScreen.tsx

@@ -28,8 +28,8 @@ import { useUploadFile } from '../hooks/mutations/useAccountMutations';
 import {
     formatFileSize,
     getFileIcon,
-    getSafeDownloadUrl,
 } from '../utils/fileManagement';
+import { useResolvedFileUrls, fileThumbSource } from '../hooks/useResolvedFileUrls';
 import { FileViewer } from '../components/fileManagement/FileViewer';
 import { FileDetailsModal } from '../components/fileManagement/FileDetailsModal';
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
@@ -356,12 +356,18 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         onClose?.();
     }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
 
-    // Helper to safely request a thumbnail variant only for image mime types.
-    const getSafeDownloadUrlCallback = useCallback(
-        (file: FileMetadata, variant = 'thumb') => {
-            return getSafeDownloadUrl(file, variant, (fileId: string, variant?: string) => oxyServices.getFileDownloadUrl(fileId, variant));
-        },
-        [oxyServices]
+    // Private-safe thumbnail URLs for the currently-shown files, resolved in
+    // ONE batch per page (not N per-tile) and cached by React Query. Uploads
+    // default to private, so the synchronous public-CDN URL would 404 for
+    // every private thumbnail.
+    const resolvedThumbUrls = useResolvedFileUrls(oxyServices, filteredFiles, user?.id);
+
+    // Image source for a grid tile: the resolved private-safe URL for a
+    // persisted file, or the locally-picked preview for an in-flight optimistic
+    // entry. Never builds an asset URL from a `temp-…`/uploading id.
+    const thumbSourceFor = useCallback(
+        (file: FileMetadata): string | undefined => fileThumbSource(file, resolvedThumbUrls),
+        [resolvedThumbUrls],
     );
 
     const bloomTheme = useTheme();
@@ -480,7 +486,14 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             await Promise.all(
                 photosToLoad.map(async (photo) => {
                     try {
-                        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+                        const downloadUrl = thumbSourceFor(photo);
+                        // URL not resolved yet — skip (do NOT record fallback
+                        // dims) so this photo is re-measured once its private-safe
+                        // URL resolves. Measuring the broken public URL is exactly
+                        // the bug we are fixing.
+                        if (!downloadUrl) {
+                            return;
+                        }
 
                         // Unified approach using Image.getSize (works on all platforms)
                         await new Promise<void>((resolve) => {
@@ -515,7 +528,19 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         } finally {
             setLoadingDimensions(false);
         }
-    }, [getSafeDownloadUrlCallback, photoDimensions]);
+    }, [thumbSourceFor, photoDimensions]);
+
+    // Re-measure photo dimensions when their private-safe URLs resolve. The
+    // justified grid's own trigger fires on the photo SET, not on URL
+    // availability, so newly-resolved private tiles would otherwise keep their
+    // skipped (unmeasured) state and render with fallback geometry.
+    useEffect(() => {
+        if (viewMode !== 'photos') return;
+        const photos = filteredFiles.filter((file) => file.contentType.startsWith('image/'));
+        if (photos.length > 0) {
+            loadPhotoDimensions(photos);
+        }
+    }, [resolvedThumbUrls, viewMode, filteredFiles, loadPhotoDimensions]);
 
     // Create justified rows from photos with responsive algorithm
     const createJustifiedRows = useCallback((photos: FileMetadata[], containerWidth: number) => {
@@ -646,9 +671,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     // Unified download function - works on all platforms
     const handleFileDownload = async (fileId: string, filename: string) => {
         try {
-            // Try to use the download URL with a simple approach
-            // On web, this creates a download link. On mobile, it opens the URL.
-            const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
+            // Resolve an authenticated, private-safe URL. The synchronous
+            // `getFileDownloadUrl` yields the public CDN origin, which 404s for
+            // private assets (the default visibility).
+            const downloadUrl = await oxyServices.getFileDownloadUrlAsync(fileId);
 
             // For web platforms, use link download
             if (typeof window !== 'undefined' && window.document) {
@@ -715,8 +741,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         file.contentType.includes('pdf') ||
                         file.contentType.startsWith('video/') ||
                         file.contentType.startsWith('audio/')) {
-                        // For images, PDFs, videos, and audio, we'll use the URL directly
-                        const downloadUrl = oxyServices.getFileDownloadUrl(file.id);
+                        // For images, PDFs, videos, and audio, we render the URL
+                        // directly. Resolve the authenticated, private-safe URL —
+                        // the synchronous public-CDN URL 404s for private assets.
+                        const downloadUrl = await oxyServices.getFileDownloadUrlAsync(file.id);
                         setFileContent(downloadUrl);
                     } else {
                         // For text files, get the content using authenticated request
@@ -755,7 +783,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     };
 
     const renderSimplePhotoItem = useCallback((photo: FileMetadata, index: number) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        const downloadUrl = thumbSourceFor(photo);
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
@@ -803,10 +831,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
             </TouchableOpacity>
         );
-    }, [oxyServices, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
+    }, [thumbSourceFor, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
 
     const renderJustifiedPhotoItem = useCallback((photo: FileMetadata, width: number, height: number, isLast: boolean) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        const downloadUrl = thumbSourceFor(photo);
 
         return (
             <TouchableOpacity
@@ -843,7 +871,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 </View>
             </TouchableOpacity>
         );
-    }, [oxyServices, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
+    }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
 
     // Run initial load once per targetUserId change to avoid accidental loops
     const lastLoadedFor = useRef<string | undefined>(undefined);
@@ -879,7 +907,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                             <View style={fileManagementStyles.filePreview}>
                                 {isImage && (
                                     <ExpoImage
-                                        source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                        source={{ uri: thumbSourceFor(file) }}
                                         style={fileManagementStyles.previewImage}
                                         contentFit="cover"
                                         transition={120}
@@ -899,7 +927,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                 {isVideo && (
                                     <View style={fileManagementStyles.videoPreviewWrapper}>
                                         <ExpoImage
-                                            source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                            source={{ uri: thumbSourceFor(file) }}
                                             style={fileManagementStyles.videoPosterImage}
                                             contentFit="cover"
                                             transition={120}
@@ -919,7 +947,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                                     style={[fileManagementStyles.fallbackIcon, { display: isImage ? 'none' : 'flex' }]}
                                 >
                                     <Ionicons
-                                        name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                                        name={getFileIcon(file.contentType)}
                                         size={32}
                                         color={colors.primary}
                                     />
@@ -934,7 +962,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         ) : (
                             <View style={fileManagementStyles.fileIconContainer}>
                                 <Ionicons
-                                    name={getFileIcon(file.contentType) as React.ComponentProps<typeof Ionicons>['name']}
+                                    name={getFileIcon(file.contentType)}
                                     size={32}
                                     color={colors.primary}
                                 />
@@ -1016,7 +1044,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden' }}>
                             <ExpoImage
-                                source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                source={{ uri: thumbSourceFor(file) }}
                                 style={{ width: 36, height: 36 }}
                                 contentFit="cover"
                                 transition={120}
@@ -1032,7 +1060,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     fileIcon = (
                         <View style={{ width: 36, height: 36, borderRadius: 18, overflow: 'hidden', backgroundColor: '#000000', position: 'relative' }}>
                             <ExpoImage
-                                source={{ uri: getSafeDownloadUrlCallback(file, 'thumb') }}
+                                source={{ uri: thumbSourceFor(file) }}
                                 style={{ width: 36, height: 36 }}
                                 contentFit="cover"
                                 transition={120}
@@ -1102,7 +1130,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 ) : undefined,
             };
         });
-    }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
+    }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
 
     // Scroll to selected file after selection
     useEffect(() => {
@@ -1191,7 +1219,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     }, [lastSelectedFileId]);
 
     const renderPhotoItem = (photo: FileMetadata, index: number) => {
-        const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+        const downloadUrl = thumbSourceFor(photo);
 
         // Calculate photo item width based on actual container size from bottom sheet
         let itemsPerRow = 3; // Default for mobile
@@ -1570,7 +1598,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     hasMore={paging.hasMore}
                     loadingMore={paging.loadingMore}
                     reduceMotion={reduceMotion}
-                    getThumbUrl={getSafeDownloadUrlCallback}
+                    getThumbUrl={thumbSourceFor}
                     primaryColor={colors.primary}
                     isOwner={isOwner}
                     onTogglePhoto={toggleSelect}

package/src/ui/screens/__tests__/photoGridLayout.test.ts

@@ -0,0 +1,57 @@
+import {
+    computePhotoGridLayout,
+    PHOTO_GRID_GUTTER,
+    PHOTO_GRID_WIDE_BREAKPOINT,
+} from '../fileManagement/photoGridLayout';
+
+describe('computePhotoGridLayout', () => {
+    it('uses 3 columns below the wide breakpoint', () => {
+        expect(computePhotoGridLayout(390).columns).toBe(3);
+        expect(computePhotoGridLayout(500).columns).toBe(3);
+        expect(computePhotoGridLayout(PHOTO_GRID_WIDE_BREAKPOINT - 1).columns).toBe(3);
+    });
+
+    it('uses 4 columns at/above the wide breakpoint', () => {
+        expect(computePhotoGridLayout(PHOTO_GRID_WIDE_BREAKPOINT).columns).toBe(4);
+        expect(computePhotoGridLayout(700).columns).toBe(4);
+        expect(computePhotoGridLayout(1024).columns).toBe(4);
+    });
+
+    it('floors the tile size so a full row never exceeds the container', () => {
+        // The whole point of the bug fix: geometry derives from the passed
+        // container width, and a full row of tiles + gutters must fit inside it.
+        for (const width of [320, 375, 390, 428, 500, 599, 600, 768, 834, 1024]) {
+            const { columns, cellSize, gutter } = computePhotoGridLayout(width);
+            const rowWidth = columns * cellSize + (columns - 1) * gutter;
+            expect(rowWidth).toBeLessThanOrEqual(width);
+            // ...and the floor is tight (adding one px per tile would overflow).
+            expect((columns * (cellSize + 1)) + (columns - 1) * gutter).toBeGreaterThan(width);
+        }
+    });
+
+    it('derives smaller tiles from a narrow sheet than from a wide screen', () => {
+        // Regression guard for the original bug: a centered dialog (narrow
+        // container) must NOT size tiles from a wider screen width.
+        const narrowSheet = computePhotoGridLayout(500); // 3 cols
+        const wideScreen = computePhotoGridLayout(1200); // 4 cols
+        expect(narrowSheet.cellSize).toBeLessThan(wideScreen.cellSize);
+        // Cross-check the exact arithmetic against the gutter constant.
+        expect(narrowSheet.cellSize).toBe(
+            Math.floor((500 - PHOTO_GRID_GUTTER * 2) / 3),
+        );
+        expect(wideScreen.cellSize).toBe(
+            Math.floor((1200 - PHOTO_GRID_GUTTER * 3) / 4),
+        );
+    });
+
+    it('returns cellSize 0 for a not-yet-measured (<= 0) width', () => {
+        expect(computePhotoGridLayout(0).cellSize).toBe(0);
+        expect(computePhotoGridLayout(-10).cellSize).toBe(0);
+        // Columns still resolve to the narrow default so callers can render.
+        expect(computePhotoGridLayout(0).columns).toBe(3);
+    });
+
+    it('exposes the gutter it used to derive the tile size', () => {
+        expect(computePhotoGridLayout(500).gutter).toBe(PHOTO_GRID_GUTTER);
+    });
+});