@oxyhq/services 22.9.0 → 22.11.0

package/src/ui/components/oxyAuthChooserStyles.ts

@@ -4,7 +4,7 @@ import { StyleSheet } from 'react-native';
 const QR_PLATE_BG = '#FFFFFF';
 
 /**
- * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialog`
+ * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialogScreen`
  * so both the Dialog-wrapped host and any bare host (e.g. a future
  * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
  */
@@ -42,28 +42,90 @@ export const authChooserStyles = StyleSheet.create({
     fontSize: 12.5,
     marginTop: 1,
   },
-  addRow: {
-    flexDirection: 'row',
+  /**
+   * Animated-collapse container for the account switch list — the outer clip and
+   * the inner measuring wrapper. Style-based (NOT NativeWind): the container
+   * carries the animated `height`/`opacity` off a reanimated style, and the
+   * measuring wrapper must stay className-free so its `onLayout` fires on RN-Web.
+   */
+  collapse: {
+    overflow: 'hidden',
+  },
+  collapseMeasure: {
+    width: '100%',
+  },
+  /**
+   * The HERO block that opens the account menu: the current account's large
+   * avatar, a greeting, and the "Manage your Oxy account" pill — centred and
+   * deliberately chrome-free (no card, no grouped-section surface) so the
+   * grouped cards below read as the menu proper. The account's email sits above
+   * it in the Dialog's own nav bar, not here.
+   */
+  hero: {
     alignItems: 'center',
+    paddingTop: 4,
+    paddingBottom: 20,
     gap: 12,
-    borderWidth: StyleSheet.hairlineWidth,
-    borderStyle: 'dashed',
-    borderRadius: 16,
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-    marginTop: 8,
   },
-  addBadge: {
-    width: 40,
-    height: 40,
+  /**
+   * The current account's accent ring in the switch list, drawn OUTSIDE its
+   * avatar as an overlay so it adds no width to the row — every avatar in the
+   * list keeps the same footprint and the same content line. The 3px offset is
+   * the ring's 2px stroke plus a 1px gap.
+   */
+  currentAvatarRing: {
+    position: 'absolute',
+    top: -3,
+    left: -3,
+    right: -3,
+    bottom: -3,
+    borderWidth: 2,
     borderRadius: 9999,
-    borderWidth: StyleSheet.hairlineWidth,
+  },
+  /**
+   * The hero avatar's pressable wrapper — the "change your photo" entry point.
+   * `relative` so the accent ring + camera badge (both absolutely positioned)
+   * anchor to the avatar box.
+   */
+  heroAvatarPressable: {
+    position: 'relative',
+  },
+  /** The hero avatar's accent ring — an overlay, like the row-level one. */
+  heroAvatarRing: {
+    position: 'absolute',
+    top: -4,
+    left: -4,
+    right: -4,
+    bottom: -4,
+    borderWidth: 3,
+    borderRadius: 9999,
+  },
+  /** Greeting + address stacked tight, centred (the hero's own 12px gap sits
+   *  between this block and the avatar / manage pill, not between these lines). */
+  heroNameBlock: {
     alignItems: 'center',
-    justifyContent: 'center',
+    gap: 2,
+  },
+  heroGreeting: {
+    fontSize: 22,
+    fontWeight: '600',
+    textAlign: 'center',
   },
-  footerLinks: {
+  /** The account address (`username@oxy.so` / `@handle`) under the greeting. */
+  heroAddress: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  /**
+   * The switch row's disclosure affordance — a filled circle around the chevron,
+   * right-aligned to the same 12px row inset every other trailing element uses.
+   */
+  chevronCircle: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     alignItems: 'center',
-    marginTop: 16,
+    justifyContent: 'center',
   },
   footerLink: {
     alignSelf: 'center',

package/src/ui/components/photogrid/JustifiedPhotoGrid.tsx

@@ -1,12 +1,70 @@
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
-import { View, Text, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import React, { useMemo, useState, useCallback } from 'react';
+import { View, Text, Image, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import type { FileMetadata } from '@oxyhq/core';
 
+type PhotoSize = { width: number; height: number };
+
+/** Stable empty map so an unresolved query yields a referentially-stable value. */
+const EMPTY_DIMENSIONS: Record<string, PhotoSize> = {};
+
+/**
+ * Measure the intrinsic size of every photo whose thumbnail URL has resolved,
+ * via `Image.getSize`. Pure/async (no React state) so it can be a React Query
+ * `queryFn`. Photos without a resolved URL are skipped and re-measured on the
+ * next signature change; a load error falls back to 1×1 (→ the 4/3 default).
+ */
+async function measurePhotoDimensions(
+    photos: FileMetadata[],
+    getThumbUrl: (photo: FileMetadata) => string | undefined,
+): Promise<Record<string, PhotoSize>> {
+    const measured: Record<string, PhotoSize> = {};
+    await Promise.all(
+        photos.map(
+            (photo) =>
+                new Promise<void>((resolve) => {
+                    const url = getThumbUrl(photo);
+                    if (!url) {
+                        resolve();
+                        return;
+                    }
+                    Image.getSize(
+                        url,
+                        (width, height) => {
+                            measured[photo.id] = { width, height };
+                            resolve();
+                        },
+                        () => {
+                            measured[photo.id] = { width: 1, height: 1 };
+                            resolve();
+                        },
+                    );
+                }),
+        ),
+    );
+    return measured;
+}
+
+/** Fixed photos-per-row for the justified grid (Apple Photos-style trio). */
+export const PHOTOS_PER_ROW = 3;
+
+/** Chunk a photo list into fixed-length rows (last row may be short). */
+export function chunkPhotos(photos: FileMetadata[], perRow: number): FileMetadata[][] {
+    const rows: FileMetadata[][] = [];
+    for (let i = 0; i < photos.length; i += perRow) {
+        rows.push(photos.slice(i, i + perRow));
+    }
+    return rows;
+}
+
 export interface JustifiedPhotoGridProps {
     photos: FileMetadata[];
-    photoDimensions: { [key: string]: { width: number; height: number } };
-    loadPhotoDimensions: (photos: FileMetadata[]) => Promise<void>;
-    createJustifiedRows: (photos: FileMetadata[], containerWidth: number) => FileMetadata[][];
+    /**
+     * Resolve a private-safe thumbnail URL for a photo (or `undefined` while the
+     * URL is still resolving). The grid measures each photo's intrinsic size from
+     * this URL and re-measures automatically once a pending URL resolves.
+     */
+    getThumbUrl: (photo: FileMetadata) => string | undefined;
     renderJustifiedPhotoItem: (photo: FileMetadata, width: number, height: number, isLast: boolean) => React.ReactElement;
     textColor: string;
     /**
@@ -22,12 +80,15 @@ export interface JustifiedPhotoGridProps {
 /**
  * Responsive justified photo grid that stretches to the provided containerWidth.
  * Uses flex rows with proportional children widths instead of absolute pixel widths so it always fills.
+ *
+ * Owns its own intrinsic-dimension measurement: it calls `Image.getSize` on each
+ * photo's resolved thumbnail URL and reflows once real aspect ratios are known
+ * (falling back to 4/3 until then). Measurement re-runs whenever a photo is added
+ * OR its (asynchronously-resolved) private-safe URL first appears.
  */
 const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
     photos,
-    photoDimensions,
-    loadPhotoDimensions,
-    createJustifiedRows,
+    getThumbUrl,
     renderJustifiedPhotoItem,
     textColor,
     containerWidth: explicitWidth,
@@ -52,11 +113,27 @@ const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
         const w = e.nativeEvent.layout.width;
         setMeasuredWidth(prev => (prev === w ? prev : w));
     }, [resolvedExplicitWidth]);
-    // Ensure dimensions are loaded for displayed photos
-    useEffect(() => {
-        loadPhotoDimensions(photos);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [photos.map(p => p.id).join(',')]);
+
+    // Signature of every photo id + its currently-resolved URL — the measurement
+    // query key. A private tile's URL resolves asynchronously after it enters the
+    // list, so keying on THIS (not just the photo set) re-measures the moment a
+    // URL lands, not just when photos are added.
+    const urlSignature = useMemo(
+        () => photos.map((p) => `${p.id}:${getThumbUrl(p) ?? ''}`).join('|'),
+        [photos, getThumbUrl],
+    );
+
+    // Intrinsic dimensions via React Query (no effect): re-runs when the signature
+    // changes and reflows the justified rows. `keepPreviousData` holds the last
+    // measured map during a re-measure so tiles never flash back to the 4/3 default.
+    const dimensionsQuery = useQuery({
+        queryKey: ['justifiedPhotoDimensions', urlSignature],
+        queryFn: () => measurePhotoDimensions(photos, getThumbUrl),
+        placeholderData: keepPreviousData,
+        staleTime: Number.POSITIVE_INFINITY,
+        gcTime: 5 * 60 * 1000,
+    });
+    const photoDimensions = dimensionsQuery.data ?? EMPTY_DIMENSIONS;
 
     // Group photos by date first
     const photosByDate = useMemo(() => {
@@ -80,77 +157,74 @@ const JustifiedPhotoGrid: React.FC<JustifiedPhotoGridProps> = ({
         <View style={{ width: '100%' }} onLayout={onLayoutContainer}>
             {sortedDates.map((date: string) => {
                 const dayPhotos = photosByDate[date];
-                        // createJustifiedRows should build rows such that the "ideal" height (availableWidth / totalAspect) stays within min/max.
-                        // We pass the effective container width.
-                        const dateWidth = dateWidths[date] ?? effectiveWidth; // fallback to overall width until measured
-                        const rows = dateWidth > 0 ? createJustifiedRows(dayPhotos, dateWidth) : [];
-                        return (
-                            <View
-                                key={date}
-                                style={{ marginBottom: 24, width: '100%' }}
-                                onLayout={e => onLayoutDate(date, e.nativeEvent.layout.width)}
-                            >
-                                <Text style={{ fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }}>
-                                    {new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
-                                </Text>
-                                <View style={{ width: '100%' }}>
-                                    {rows.map((row, rowIndex) => {
-                                        // Compute total aspect ratios using loaded dimensions (fallback 4/3)
-                                        const aspects = row.map(p => {
-                                            const dims = photoDimensions[p.id];
-                                            return dims ? dims.width / dims.height : 4 / 3;
-                                        });
-                                        const totalAspect = aspects.reduce((a, b) => a + b, 0);
-                                        const gapsTotal = gap * (row.length - 1);
-                                        const availableWidth = dateWidth - gapsTotal;
-                                        // Ideal height that perfectly fills width when preserving aspect ratios
-                                        const idealHeight = availableWidth / totalAspect;
-                                        // We rely on row construction keeping idealHeight within min/max bounds; if not, clamp but then distribute leftover/overflow.
-                                        let rowHeight = idealHeight;
-                                        let widthAdjustment = 0; // difference to distribute if clamped
-                                        if (idealHeight < minRowHeight) {
-                                            rowHeight = minRowHeight;
-                                            widthAdjustment = availableWidth - rowHeight * totalAspect; // negative means overflow
-                                        } else if (idealHeight > maxRowHeight) {
-                                            rowHeight = maxRowHeight;
-                                            widthAdjustment = availableWidth - rowHeight * totalAspect;
-                                        }
-
-                                        // Pre-compute widths maintaining aspect ratios
-                                        let widths = aspects.map(ar => ar * rowHeight);
-                                        // If we have widthAdjustment (due to clamping) distribute proportionally so row still fills exactly
-                                        if (widthAdjustment !== 0) {
-                                            const widthSum = widths.reduce((a, b) => a + b, 0);
-                                            widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
-                                        }
-
-                                        // To combat rounding issues, adjust last item width to fill precisely
-                                        const widthSumRounded = widths.reduce((a, b) => a + b, 0);
-                                        const roundingDiff = availableWidth - widthSumRounded;
-                                        if (Math.abs(roundingDiff) > 0.5) {
-                                            widths[widths.length - 1] += roundingDiff; // minimal correction
-                                        }
-
-                                        return (
-                                            <View key={rowIndex} style={{ flexDirection: 'row', width: '100%', marginBottom: 4 }}>
-                                                {row.map((p, i) => {
-                                                    const photoWidth = widths[i];
-                                                    return (
-                                                        <View
-                                                            key={p.id}
-                                                            style={{ width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }}
-                                                        >
-                                                            {renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1)}
-                                                        </View>
-                                                    );
-                                                })}
-                                            </View>
-                                        );
-                                    })}
-                                </View>
-                            </View>
-                        );
-                    })}
+                // Fall back to the overall width until this section is measured.
+                const dateWidth = dateWidths[date] ?? effectiveWidth;
+                const rows = dateWidth > 0 ? chunkPhotos(dayPhotos, PHOTOS_PER_ROW) : [];
+                return (
+                    <View
+                        key={date}
+                        style={{ marginBottom: 24, width: '100%' }}
+                        onLayout={e => onLayoutDate(date, e.nativeEvent.layout.width)}
+                    >
+                        <Text style={{ fontSize: 14, fontWeight: '600', marginBottom: 12, color: textColor }}>
+                            {new Date(date).toLocaleDateString(dateFormatLocale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+                        </Text>
+                        <View style={{ width: '100%' }}>
+                            {rows.map((row, rowIndex) => {
+                                // Total aspect ratio of the row, using measured dims (fallback 4/3).
+                                const aspects = row.map(p => {
+                                    const dims = photoDimensions[p.id];
+                                    return dims ? dims.width / dims.height : 4 / 3;
+                                });
+                                const totalAspect = aspects.reduce((a, b) => a + b, 0);
+                                const gapsTotal = gap * (row.length - 1);
+                                const availableWidth = dateWidth - gapsTotal;
+                                // Ideal height that perfectly fills width when preserving aspect ratios.
+                                const idealHeight = availableWidth / totalAspect;
+                                // Clamp to min/max, then distribute the leftover/overflow proportionally.
+                                let rowHeight = idealHeight;
+                                let widthAdjustment = 0;
+                                if (idealHeight < minRowHeight) {
+                                    rowHeight = minRowHeight;
+                                    widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                } else if (idealHeight > maxRowHeight) {
+                                    rowHeight = maxRowHeight;
+                                    widthAdjustment = availableWidth - rowHeight * totalAspect;
+                                }
+
+                                let widths = aspects.map(ar => ar * rowHeight);
+                                if (widthAdjustment !== 0) {
+                                    const widthSum = widths.reduce((a, b) => a + b, 0);
+                                    widths = widths.map(w => w + (w / widthSum) * widthAdjustment);
+                                }
+
+                                // Correct any rounding drift on the last tile so the row fills exactly.
+                                const widthSumRounded = widths.reduce((a, b) => a + b, 0);
+                                const roundingDiff = availableWidth - widthSumRounded;
+                                if (Math.abs(roundingDiff) > 0.5) {
+                                    widths[widths.length - 1] += roundingDiff;
+                                }
+
+                                return (
+                                    <View key={row[0]?.id ?? rowIndex} style={{ flexDirection: 'row', width: '100%', marginBottom: 4 }}>
+                                        {row.map((p, i) => {
+                                            const photoWidth = widths[i];
+                                            return (
+                                                <View
+                                                    key={p.id}
+                                                    style={{ width: photoWidth, height: rowHeight, marginRight: i === row.length - 1 ? 0 : gap }}
+                                                >
+                                                    {renderJustifiedPhotoItem(p, photoWidth, rowHeight, i === row.length - 1)}
+                                                </View>
+                                            );
+                                        })}
+                                    </View>
+                                );
+                            })}
+                        </View>
+                    </View>
+                );
+            })}
         </View>
     );
 };

package/src/ui/components/photogrid/__tests__/chunkPhotos.test.ts

@@ -0,0 +1,51 @@
+import type { FileMetadata } from '@oxyhq/core';
+import { chunkPhotos, PHOTOS_PER_ROW } from '../JustifiedPhotoGrid';
+
+// `chunkPhotos` is the row-building logic the justified photo grid owns (moved
+// out of FileManagementScreen's former `createJustifiedRows`). It is pure, so it
+// is unit-testable — unlike the grid's intrinsic-dimension measurement, which
+// depends on native `Image.getSize`.
+const photo = (id: string): FileMetadata => ({
+    id,
+    filename: `${id}.jpg`,
+    contentType: 'image/jpeg',
+    length: 1,
+    chunkSize: 0,
+    uploadDate: '2026-01-01T00:00:00.000Z',
+    metadata: {},
+    variants: [],
+});
+
+const ids = (rows: FileMetadata[][]): string[][] => rows.map((row) => row.map((p) => p.id));
+
+describe('chunkPhotos', () => {
+    it('returns no rows for an empty list', () => {
+        expect(chunkPhotos([], PHOTOS_PER_ROW)).toEqual([]);
+    });
+
+    it('groups photos into full rows of the given size', () => {
+        const photos = ['a', 'b', 'c', 'd', 'e', 'f'].map(photo);
+        expect(ids(chunkPhotos(photos, PHOTOS_PER_ROW))).toEqual([
+            ['a', 'b', 'c'],
+            ['d', 'e', 'f'],
+        ]);
+    });
+
+    it('leaves the final row short when the count is not a multiple of the row size', () => {
+        const photos = ['a', 'b', 'c', 'd'].map(photo);
+        expect(ids(chunkPhotos(photos, PHOTOS_PER_ROW))).toEqual([
+            ['a', 'b', 'c'],
+            ['d'],
+        ]);
+    });
+
+    it('preserves order and never drops or duplicates a photo', () => {
+        const photos = Array.from({ length: 10 }, (_, i) => photo(`p${i}`));
+        const flat = chunkPhotos(photos, PHOTOS_PER_ROW).flat().map((p) => p.id);
+        expect(flat).toEqual(photos.map((p) => p.id));
+    });
+
+    it('defaults to a trio per row', () => {
+        expect(PHOTOS_PER_ROW).toBe(3);
+    });
+});

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -0,0 +1,98 @@
+import type React from 'react';
+import { Text, View } from 'react-native';
+import { Button } from '@oxyhq/bloom/button';
+import { useTheme } from '@oxyhq/bloom/theme';
+import { surfaces, type SurfaceControls } from '@oxyhq/bloom/surfaces';
+
+/**
+ * A single choice in an {@link ActionSheetSurface} — a labelled button that
+ * resolves the surface with `value` when pressed.
+ */
+export interface ActionSheetOption<T extends string> {
+    label: string;
+    value: T;
+    /** Render as a destructive (negative) button. */
+    destructive?: boolean;
+}
+
+export interface ActionSheetSurfaceProps<T extends string> {
+    /** The presenting surface's controls (from `surfaces.present`). */
+    surface: SurfaceControls;
+    /** Headline. */
+    title: string;
+    /** Optional supporting copy. */
+    message?: string;
+    /** The choices; each dismisses the surface with its `value`. */
+    options: ActionSheetOption<T>[];
+    /** Cancel button label — dismisses with `undefined`. */
+    cancelLabel: string;
+}
+
+const TITLE_STYLE = { fontSize: 22, fontWeight: '600' as const, lineHeight: 30 };
+const MESSAGE_STYLE = { fontSize: 16, lineHeight: 22 };
+
+/**
+ * A multi-choice action sheet rendered as a shared-stack surface — the
+ * many-option counterpart to Bloom's two-way `surfaces.confirm`. Each option
+ * button resolves the surface's `present()` promise with that option's `value`;
+ * cancel / backdrop / Escape resolve `undefined`. Presented via
+ * {@link presentActionSheet}.
+ */
+export function ActionSheetSurface<T extends string>({
+    surface,
+    title,
+    message,
+    options,
+    cancelLabel,
+}: ActionSheetSurfaceProps<T>): React.ReactElement {
+    const theme = useTheme();
+
+    return (
+        <View>
+            <Text
+                style={[
+                    TITLE_STYLE,
+                    { color: theme.colors.text, paddingBottom: message ? 4 : 16 },
+                ]}
+            >
+                {title}
+            </Text>
+            {message ? (
+                <Text
+                    style={[
+                        MESSAGE_STYLE,
+                        { color: theme.colors.textSecondary, paddingBottom: 16 },
+                    ]}
+                >
+                    {message}
+                </Text>
+            ) : null}
+            <View style={{ gap: 8 }}>
+                {options.map((option) => (
+                    <Button
+                        key={option.value}
+                        variant={option.destructive ? 'destructive' : 'primary'}
+                        onPress={() => surface.dismiss(option.value)}
+                    >
+                        {option.label}
+                    </Button>
+                ))}
+                <Button variant="secondary" onPress={() => surface.dismiss(undefined)}>
+                    {cancelLabel}
+                </Button>
+            </View>
+        </View>
+    );
+}
+
+/**
+ * Present an {@link ActionSheetSurface} on the shared stack and resolve with the
+ * chosen option `value`, or `undefined` if cancelled/dismissed.
+ */
+export function presentActionSheet<T extends string>(
+    options: Omit<ActionSheetSurfaceProps<T>, 'surface'>,
+): Promise<T | undefined> {
+    return surfaces.present<T | undefined>((surface) => (
+        <ActionSheetSurface surface={surface} {...options} />
+    ));
+}