@oxy.so/services 11.2.0-oxy-one.3 → 11.2.0-oxy-one.5

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

@@ -1,73 +1,69 @@
-import {
-    getLinkTitle,
-    getLinkDescription,
-    linksToListItems,
-} from '../linkFormat';
+import { getLinkTitle, getLinkDescription, linksToListItems } from '../linkFormat';
 
 describe('linkFormat', () => {
-    describe('getLinkTitle', () => {
-        it.each([
-            ['https://example.com', 'example.com'],
-            ['http://example.com/', 'example.com'],
-            ['https://example.com/path/', 'example.com/path'],
-            ['example.com', 'example.com'],
-        ])('strips protocol and trailing slash: %p → %p', (input, expected) => {
-            expect(getLinkTitle(input)).toBe(expected);
-        });
+  describe('getLinkTitle', () => {
+    it.each([
+      ['https://example.com', 'example.com'],
+      ['http://example.com/', 'example.com'],
+      ['https://example.com/path/', 'example.com/path'],
+      ['example.com', 'example.com'],
+    ])('strips protocol and trailing slash: %p → %p', (input, expected) => {
+      expect(getLinkTitle(input)).toBe(expected);
     });
+  });
 
-    describe('getLinkDescription', () => {
-        it('prefixes the url with "Link to "', () => {
-            expect(getLinkDescription('https://example.com')).toBe('Link to https://example.com');
-        });
+  describe('getLinkDescription', () => {
+    it('prefixes the url with "Link to "', () => {
+      expect(getLinkDescription('https://example.com')).toBe('Link to https://example.com');
     });
+  });
 
-    describe('linksToListItems', () => {
-        it('maps a normal string array, preserving valid-link rendering', () => {
-            const result = linksToListItems(['https://example.com/', 'http://oxy.so']);
-            expect(result).toEqual([
-                {
-                    id: 'link-0',
-                    url: 'https://example.com/',
-                    title: 'example.com',
-                    description: 'Link to https://example.com/',
-                },
-                {
-                    id: 'link-1',
-                    url: 'http://oxy.so',
-                    title: 'oxy.so',
-                    description: 'Link to http://oxy.so',
-                },
-            ]);
-        });
+  describe('linksToListItems', () => {
+    it('maps a normal string array, preserving valid-link rendering', () => {
+      const result = linksToListItems(['https://example.com/', 'http://oxy.so']);
+      expect(result).toEqual([
+        {
+          id: 'link-0',
+          url: 'https://example.com/',
+          title: 'example.com',
+          description: 'Link to https://example.com/',
+        },
+        {
+          id: 'link-1',
+          url: 'http://oxy.so',
+          title: 'oxy.so',
+          description: 'Link to http://oxy.so',
+        },
+      ]);
+    });
 
-        it.each([
-            [null, 'null'],
-            [undefined, 'undefined'],
-            [42, 'a number'],
-            [{ href: 'x' }, 'an object'],
-            [['nested'], 'an array'],
-        ])('does not throw on a non-string element (%s)', (bad) => {
-            // Regression: `links.map(getLinkTitle)` called `.replace` on a
-            // non-string element and crashed the editor. The coercion guard must
-            // yield a string url/title/description instead.
-            const run = () => linksToListItems([bad]);
-            expect(run).not.toThrow();
-            const [item] = run();
-            expect(typeof item.url).toBe('string');
-            expect(typeof item.title).toBe('string');
-            expect(typeof item.description).toBe('string');
-        });
+    it.each([
+      [null, 'null'],
+      [undefined, 'undefined'],
+      [42, 'a number'],
+      [{ href: 'x' }, 'an object'],
+      [['nested'], 'an array'],
+    ])('does not throw on a non-string element (%s)', (bad) => {
+      // Regression: `links.map(getLinkTitle)` called `.replace` on a
+      // non-string element and crashed the editor. The coercion guard must
+      // yield a string url/title/description instead.
+      const run = () => linksToListItems([bad]);
+      expect(run).not.toThrow();
+      const [item] = run();
+      expect(typeof item.url).toBe('string');
+      expect(typeof item.title).toBe('string');
+      expect(typeof item.description).toBe('string');
+    });
 
-        it('coerces null / undefined to an empty-string url', () => {
-            const result = linksToListItems([null, undefined]);
-            expect(result[0].url).toBe('');
-            expect(result[0].title).toBe('');
-            expect(result[1].url).toBe('');
-        });
+    it('coerces null / undefined to an empty-string url', () => {
+      const result = linksToListItems([null, undefined]);
+      expect(result[0].url).toBe('');
+      expect(result[0].title).toBe('');
+      expect(result[1].url).toBe('');
+    });
 
-        it('returns an empty array for an empty input', () => {
-            expect(linksToListItems([])).toEqual([]);
-        });
+    it('returns an empty array for an empty input', () => {
+      expect(linksToListItems([])).toEqual([]);
     });
+  });
 });

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

@@ -1,57 +1,53 @@
 import {
-    computePhotoGridLayout,
-    PHOTO_GRID_GUTTER,
-    PHOTO_GRID_WIDE_BREAKPOINT,
+  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 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('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('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('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('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);
-    });
+  it('exposes the gutter it used to derive the tile size', () => {
+    expect(computePhotoGridLayout(500).gutter).toBe(PHOTO_GRID_GUTTER);
+  });
 });

package/src/ui/screens/fileManagement/FileLibraryError.tsx

@@ -5,14 +5,14 @@ import { Text } from '@oxy.so/bloom/typography';
 import Ionicons from '../../icons/Ionicons';
 
 export interface FileLibraryErrorProps {
-    title: string;
-    description: string;
-    retryLabel: string;
-    onRetry: () => void;
-    /** Failure icon tint. */
-    iconColor: string;
-    titleColor: string;
-    descriptionColor: string;
+  title: string;
+  description: string;
+  retryLabel: string;
+  onRetry: () => void;
+  /** Failure icon tint. */
+  iconColor: string;
+  titleColor: string;
+  descriptionColor: string;
 }
 
 /**
@@ -23,26 +23,32 @@ export interface FileLibraryErrorProps {
  * color props so it fits both the browse chrome and the dark picker backdrop.
  */
 const FileLibraryError: React.FC<FileLibraryErrorProps> = ({
-    title,
-    description,
-    retryLabel,
-    onRetry,
-    iconColor,
-    titleColor,
-    descriptionColor,
+  title,
+  description,
+  retryLabel,
+  onRetry,
+  iconColor,
+  titleColor,
+  descriptionColor,
 }) => (
-    <View className="items-center py-[40px] px-[24px]">
-        <Ionicons name="cloud-offline-outline" size={64} color={iconColor} />
-        <Text className="text-[24px] font-bold mt-[16px] mb-[8px] text-center" style={{ color: titleColor }}>
-            {title}
-        </Text>
-        <Text className="text-[16px] text-center leading-[24px] mb-[32px]" style={{ color: descriptionColor }}>
-            {description}
-        </Text>
-        <Button onPress={onRetry} accessibilityLabel={retryLabel}>
-            {retryLabel}
-        </Button>
-    </View>
+  <View className="items-center py-[40px] px-[24px]">
+    <Ionicons name="cloud-offline-outline" size={64} color={iconColor} />
+    <Text
+      className="text-[24px] font-bold mt-[16px] mb-[8px] text-center"
+      style={{ color: titleColor }}
+    >
+      {title}
+    </Text>
+    <Text
+      className="text-[16px] text-center leading-[24px] mb-[32px]"
+      style={{ color: descriptionColor }}
+    >
+      {description}
+    </Text>
+    <Button onPress={onRetry} accessibilityLabel={retryLabel}>
+      {retryLabel}
+    </Button>
+  </View>
 );
 
 export default FileLibraryError;

package/src/ui/screens/fileManagement/FileListSection.tsx

@@ -11,28 +11,28 @@ type ThemeColors = ReturnType<typeof useTheme>['colors'];
 
 /** A pre-built list row descriptor (produced by the orchestrator's memo). */
 export interface FileListItem {
-    id: string;
-    icon?: React.ReactNode;
-    title: string;
-    description?: string;
-    onPress: () => void;
-    rightElement?: React.ReactNode;
+  id: string;
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  onPress: () => void;
+  rightElement?: React.ReactNode;
 }
 
 export interface FileListSectionProps {
-    scrollViewRef: React.RefObject<ScrollView | null>;
-    filteredFiles: FileMetadata[];
-    searchQuery: string;
-    items: FileListItem[];
-    paging: { loadingMore: boolean; hasMore: boolean };
-    refreshing: boolean;
-    colors: ThemeColors;
-    t: (key: string, vars?: Record<string, string | number>) => string;
-    onRefresh: () => void;
-    onLoadMore: () => void;
-    onClearSearch: () => void;
-    /** Rendered when there are no files at all (not a search miss). */
-    renderEmptyState: () => React.ReactNode;
+  scrollViewRef: React.RefObject<ScrollView | null>;
+  filteredFiles: FileMetadata[];
+  searchQuery: string;
+  items: FileListItem[];
+  paging: { loadingMore: boolean; hasMore: boolean };
+  refreshing: boolean;
+  colors: ThemeColors;
+  t: (key: string, vars?: Record<string, string | number>) => string;
+  onRefresh: () => void;
+  onLoadMore: () => void;
+  onClearSearch: () => void;
+  /** Rendered when there are no files at all (not a search miss). */
+  renderEmptyState: () => React.ReactNode;
 }
 
 /**
@@ -41,75 +41,84 @@ export interface FileListSectionProps {
  * still owns the item construction and pagination logic and threads them in.
  */
 const FileListSection: React.FC<FileListSectionProps> = ({
-    scrollViewRef,
-    filteredFiles,
-    searchQuery,
-    items,
-    paging,
-    refreshing,
-    colors,
-    t,
-    onRefresh,
-    onLoadMore,
-    onClearSearch,
-    renderEmptyState,
+  scrollViewRef,
+  filteredFiles,
+  searchQuery,
+  items,
+  paging,
+  refreshing,
+  colors,
+  t,
+  onRefresh,
+  onLoadMore,
+  onClearSearch,
+  renderEmptyState,
 }) => {
-    return (
-        <ScrollView
-            ref={scrollViewRef}
-            className="flex-1"
-            style={{ flex: 1 }}
-            contentContainerClassName="px-space-12 pt-0 pb-space-12"
-            refreshControl={
-                <RefreshControl
-                    refreshing={refreshing}
-                    onRefresh={onRefresh}
-                    tintColor={colors.primary}
-                />
-            }
-            onScroll={({ nativeEvent }) => {
-                const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
-                const distanceFromBottom = contentSize.height - (contentOffset.y + layoutMeasurement.height);
-                if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
-                    onLoadMore();
-                }
-            }}
-            scrollEventThrottle={250}
-        >
-            {filteredFiles.length === 0 && searchQuery.length > 0 ? (
-                <View className="items-center py-10 px-space-24">
-                    <Ionicons name="search" size={64} color={colors.textTertiary} />
-                    <Text className="text-[24px] font-bold mt-space-16 mb-space-8" style={{ color: colors.text }}>{t('fileManagement.noResults.title')}</Text>
-                    <Text className="text-[16px] text-center leading-[24px] mb-space-32" style={{ color: colors.textSecondary }}>
-                        {t('fileManagement.noResults.description', { query: searchQuery })}
-                    </Text>
-                    <Button onPress={onClearSearch}>{t('fileManagement.clearSearch')}</Button>
-                </View>
-            ) : filteredFiles.length === 0 ? renderEmptyState() : (
-                <>
-                    <SettingsListGroup>
-                        {items.map(item => (
-                            <SettingsListItem
-                                key={item.id}
-                                icon={item.icon}
-                                title={item.title}
-                                description={item.description}
-                                onPress={item.onPress}
-                                showChevron={false}
-                                rightElement={item.rightElement}
-                            />
-                        ))}
-                    </SettingsListGroup>
-                    {paging.loadingMore && (
-                        <View className="flex-row items-center justify-center py-space-12 gap-space-8">
-                            <ActivityIndicator size="small" color={colors.primary} />
-                            <Text className="text-[13px] font-medium" style={{ color: colors.text }}>{t('fileManagement.loadingMore')}</Text>
-                        </View>
-                    )}
-                </>
-            )}
-        </ScrollView>
-    );
+  return (
+    <ScrollView
+      ref={scrollViewRef}
+      className="flex-1"
+      style={{ flex: 1 }}
+      contentContainerClassName="px-space-12 pt-0 pb-space-12"
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.primary} />
+      }
+      onScroll={({ nativeEvent }) => {
+        const { layoutMeasurement, contentOffset, contentSize } = nativeEvent;
+        const distanceFromBottom =
+          contentSize.height - (contentOffset.y + layoutMeasurement.height);
+        if (distanceFromBottom < 200 && !paging.loadingMore && paging.hasMore) {
+          onLoadMore();
+        }
+      }}
+      scrollEventThrottle={250}
+    >
+      {filteredFiles.length === 0 && searchQuery.length > 0 ? (
+        <View className="items-center py-10 px-space-24">
+          <Ionicons name="search" size={64} color={colors.textTertiary} />
+          <Text
+            className="text-[24px] font-bold mt-space-16 mb-space-8"
+            style={{ color: colors.text }}
+          >
+            {t('fileManagement.noResults.title')}
+          </Text>
+          <Text
+            className="text-[16px] text-center leading-[24px] mb-space-32"
+            style={{ color: colors.textSecondary }}
+          >
+            {t('fileManagement.noResults.description', { query: searchQuery })}
+          </Text>
+          <Button onPress={onClearSearch}>{t('fileManagement.clearSearch')}</Button>
+        </View>
+      ) : filteredFiles.length === 0 ? (
+        renderEmptyState()
+      ) : (
+        <>
+          <SettingsListGroup>
+            {items.map((item) => (
+              <SettingsListItem
+                key={item.id}
+                icon={item.icon}
+                title={item.title}
+                description={item.description}
+                onPress={item.onPress}
+                showChevron={false}
+                rightElement={item.rightElement}
+              />
+            ))}
+          </SettingsListGroup>
+          {paging.loadingMore && (
+            <View className="flex-row items-center justify-center py-space-12 gap-space-8">
+              <ActivityIndicator size="small" color={colors.primary} />
+              <Text className="text-[13px] font-medium" style={{ color: colors.text }}>
+                {t('fileManagement.loadingMore')}
+              </Text>
+            </View>
+          )}
+        </>
+      )}
+    </ScrollView>
+  );
 };
 
 export default FileListSection;