@oxy.so/services 11.6.0 → 11.9.0

package/src/ui/icons/subsetGlyphMaps.ts

@@ -9,6 +9,7 @@ export const ioniconsGlyphMap = {
   "arrow-back": 61735,
   "arrow-down": 61741,
   "arrow-forward": 61747,
+  "arrow-undo": 61759,
   "arrow-up": 61765,
   "at": 61771,
   "briefcase-outline": 61874,
@@ -199,6 +200,7 @@ export const materialCommunityIconsGlyphMap = {
   "code-tags": 983412,
   "cog": 984211,
   "cog-outline": 985275,
+  "contacts": 984779,
   "contain": 985662,
   "content-copy": 983439,
   "controller": 983732,
@@ -206,6 +208,7 @@ export const materialCommunityIconsGlyphMap = {
   "credit-card": 987119,
   "cube-outline": 983463,
   "database-outline": 988722,
+  "decimal": 987297,
   "delete": 983476,
   "delete-outline": 985575,
   "devices": 987056,

package/src/ui/index.ts

@@ -57,3 +57,5 @@ export {
   extractErrorMessage,
 } from './utils/errorHandlers';
 export type { HandleAuthErrorOptions } from './utils/errorHandlers';
+
+export { useSupervision, supervisionQueryKeys } from './hooks/queries/useSupervision';

package/src/ui/navigation/__tests__/getSurfaceConfig.test.ts

@@ -32,6 +32,15 @@ describe('getSurfaceConfig presentation', () => {
     expect(config.frameSize).toEqual({ heightRatio: 0.9, maxWidth: 640 });
   });
 
+  it('hosts the file Trash as a morphing own-scroller sheet (it owns its list)', () => {
+    const config = getSurfaceConfig('FileTrash', {});
+    expect(config.presentation).toBe('sheet');
+    expect(config.scrollable).toBe(false);
+    expect(config.morph).toBe(true);
+    expect(config.stacks).toBe(false);
+    expect(config.header).toBe(true);
+  });
+
   it('morphs the surface for every route, the picker included', () => {
     // NAV-WITHIN: drilling into these swaps the content inside ONE surface,
     // which reshapes the panel instead of hard-cutting.

package/src/ui/navigation/routes.ts

@@ -3,6 +3,7 @@ import type { BaseScreenProps } from '../types/navigation';
 
 // Define all available route names
 export type RouteName =
+  | 'Supervision'
   | 'ManageAccount' // Unified "Manage your Oxy Account" surface
   | 'AccountVerification'
   | 'PaymentGateway'
@@ -11,6 +12,7 @@ export type RouteName =
   | 'PrivacySettings'
   | 'SearchSettings'
   | 'FileManagement'
+  | 'FileTrash' // The person's trash: restore, or delete permanently (ADR 0043 D5)
   | 'HelpSupport'
   | 'LegalDocuments'
   | 'AppInfo'
@@ -71,6 +73,7 @@ export type RouteName =
  * confines the gap to one documented widening in {@link getScreenComponent}.
  */
 const screenComponents: Record<RouteName, ComponentType<never>> = {
+  Supervision: lazy(() => import('../screens/SupervisionScreen')),
   ManageAccount: lazy(() => import('../screens/ManageAccountScreen')),
   AccountVerification: lazy(() => import('../screens/AccountVerificationScreen')),
   PaymentGateway: lazy(() => import('../screens/PaymentGatewayScreen')),
@@ -79,6 +82,7 @@ const screenComponents: Record<RouteName, ComponentType<never>> = {
   PrivacySettings: lazy(() => import('../screens/PrivacySettingsScreen')),
   SearchSettings: lazy(() => import('../screens/SearchSettingsScreen')),
   FileManagement: lazy(() => import('../screens/FileManagementScreen')),
+  FileTrash: lazy(() => import('../screens/FileTrashScreen')),
   HelpSupport: lazy(() => import('../screens/HelpSupportScreen')),
   LegalDocuments: lazy(() => import('../screens/LegalDocumentsScreen')),
   AppInfo: lazy(() => import('../screens/AppInfoScreen')),

package/src/ui/navigation/surfaceRegistry.ts

@@ -24,6 +24,7 @@ type SurfaceRoute<Props = Record<string, unknown>, Result = void> = {
 };
 
 export interface SurfaceRegistry {
+  Supervision: SurfaceRoute<{ approvalId?: string; childAccountId?: string }>;
   ManageAccount: SurfaceRoute;
   AccountVerification: SurfaceRoute;
   PaymentGateway: SurfaceRoute;
@@ -38,6 +39,8 @@ export interface SurfaceRegistry {
    * keep their callback behaviour and this result goes unread.
    */
   FileManagement: SurfaceRoute<Record<string, unknown>, FileMetadata>;
+  /** The person's trash (ADR 0043 D5), opened from the file manager. */
+  FileTrash: SurfaceRoute;
   HelpSupport: SurfaceRoute;
   LegalDocuments: SurfaceRoute;
   AppInfo: SurfaceRoute;
@@ -232,7 +235,7 @@ const isFileManagementImageOnlyPicker = (props: Record<string, unknown>): boolea
  * Routes whose screen owns its OWN scroll container — a FlatList /
  * VirtualizedList (`ConnectedApps`, `TrustLeaderboard`, `FollowersList` /
  * `FollowingList` via `UserListScreen`) or its own vertical `ScrollView`
- * (`FileManagement`). These MUST opt out of the Dialog's internal ScrollView
+ * (`FileManagement`, `FileTrash`). These MUST opt out of the Dialog's internal ScrollView
  * (`scrollable: false`) so there is exactly ONE scroll container — otherwise a
  * VirtualizedList nests inside a plain ScrollView (RN warning) or a nested
  * vertical scroll-in-scroll breaks windowing. Screens with only a HORIZONTAL
@@ -241,6 +244,7 @@ const isFileManagementImageOnlyPicker = (props: Record<string, unknown>): boolea
  */
 const OWN_SCROLL_CONTAINER_ROUTES: ReadonlySet<RouteName> = new Set<RouteName>([
   'FileManagement',
+  'FileTrash',
   'ConnectedApps',
   'TrustLeaderboard',
   'FollowersList',

package/src/ui/screens/CreateAccountScreen.tsx

@@ -120,7 +120,12 @@ const ACCOUNT_CATEGORY_OPTIONS: readonly AccountCategoryId[] = SELECTABLE_ACCOUN
  * account via the `parentAccountId` prop. NOT the cryptographic Commons/DID
  * "identity" — that is a separate concept.
  */
-const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, parentAccountId }) => {
+const CreateAccountScreen: React.FC<BaseScreenProps> = ({
+  onClose,
+  goBack,
+  parentAccountId,
+  navigate,
+}) => {
   const bloomTheme = useTheme();
   const { oxyServices, createAccount, switchToAccount, user, canUsePrivateApi } = useOxy();
   const { t, locale } = useI18n();
@@ -399,6 +404,15 @@ const CreateAccountScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, paren
 
   return (
     <View className="gap-space-16 px-screen-margin pt-space-16 pb-space-32">
+      {user?.kind === 'personal' && !parentId ? (
+        <SettingsListGroup title={t('supervision.title')}>
+          <SettingsListItem
+            title={t('supervision.setupOwn')}
+            description={t('supervision.setupOwnDescription')}
+            onPress={() => navigate?.('Supervision')}
+          />
+        </SettingsListGroup>
+      ) : null}
       {/* Account type — canonical grouped selection rows (checkmark on the chosen one) */}
       <SettingsListGroup title={t('accounts.create.typeSection') || 'Account type'}>
         {KIND_OPTIONS.map((option) => {

package/src/ui/screens/FileManagementScreen.tsx

@@ -42,6 +42,12 @@ import { presentFileDetails } from '../components/fileManagement/FileDetailsModa
 import { UploadPreview } from '../components/fileManagement/UploadPreview';
 import { presentActionSheet } from '../components/surfaces/ActionSheetSurface';
 import { getErrorMessage } from './fileManagement/shared';
+import {
+  deletePermanently,
+  errorStatus,
+  libraryRemovalFor,
+  removeFromLibrary,
+} from './fileManagement/trashActions';
 import { useFileUploadState } from './fileManagement/hooks/useFileUploadState';
 import PhotoPickerView from './fileManagement/PhotoPickerSection';
 import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
@@ -124,6 +130,10 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
   const invalidateFiles = useCallback(() => {
     queryClient.invalidateQueries({ queryKey: queryKeys.files.list(targetUserId) });
   }, [queryClient, targetUserId]);
+  // A removal changes the library AND the trash (`files.all` holds both).
+  const invalidateAllFiles = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.files.all });
+  }, [queryClient]);
 
   const { width: windowWidth } = useWindowDimensions();
   // Prefer an explicit sheet width from the router; fall back to the window
@@ -483,90 +493,142 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     t,
   });
 
-  const confirmFileDelete = useCallback(
-    async (fileId: string, filename: string) => {
-      const confirmed = await surfaces.confirm({
+  // Asks before deleting for good a file an application still uses (the API
+  // refuses it until the person says so — ADR 0043 D5).
+  const confirmStillUsed = useCallback(
+    (filename: string) => (uses: number) =>
+      surfaces.confirm({
         title: t('fileManagement.deleteFile') || 'Delete File',
-        description: t('fileManagement.confirms.deleteFile', { filename }),
-        confirmLabel: t('fileManagement.confirm') || 'Delete',
+        description: t('fileManagement.confirms.deleteForeverInUse', { filename, count: uses }),
+        confirmLabel: t('fileManagement.trashView.deleteForever'),
         cancelLabel: t('common.cancel') || 'Cancel',
         destructive: true,
-      });
+      }),
+    [t],
+  );
+
+  /**
+   * Remove one file from the library. It goes to TRASH — no longer served,
+   * restorable from Trash (ADR 0043 D5). A `blocked` file cannot be trashed
+   * (it is served to nobody already), so removing it is the permanent delete.
+   */
+  const confirmFileDelete = useCallback(
+    async (fileId: string, filename: string) => {
+      const file = files.find((candidate) => candidate.id === fileId);
+      const removal = libraryRemovalFor({ status: file?.status });
+      const confirmed = await surfaces.confirm(
+        removal === 'trash'
+          ? {
+              title: t('fileManagement.moveToTrash'),
+              description: t('fileManagement.confirms.moveToTrash', { filename }),
+              confirmLabel: t('fileManagement.moveToTrash'),
+              cancelLabel: t('common.cancel') || 'Cancel',
+            }
+          : {
+              title: t('fileManagement.deleteFile') || 'Delete File',
+              description: t('fileManagement.confirms.deleteFile', { filename }),
+              confirmLabel: t('fileManagement.confirm') || 'Delete',
+              cancelLabel: t('common.cancel') || 'Cancel',
+              destructive: true,
+            },
+      );
       if (!confirmed) return;
 
       try {
         setDeletingId(fileId);
-        await oxyServices.assets.delete(fileId);
-
-        toast.success(t('fileManagement.toasts.deleteSuccess'));
+        if (removal === 'trash') {
+          await oxyServices.assets.trash(fileId);
+          toast.success(t('fileManagement.toasts.movedToTrash'));
+        } else {
+          const outcome = await deletePermanently(
+            oxyServices.assets,
+            fileId,
+            confirmStillUsed(filename),
+          );
+          if (outcome === 'cancelled') return;
+          if (outcome === 'deleted') toast.success(t('fileManagement.toasts.deleteSuccess'));
+        }
 
-        // Remove from the query cache, then reconcile against the server.
+        // Remove from the library cache, then reconcile both lists (the file
+        // is now in the trash) against the server.
         removeFileFromCache(queryClient, targetUserId, fileId);
-        invalidateFiles();
+        invalidateAllFiles();
       } catch (error: unknown) {
-        // Provide specific error messages
-        if (
-          getErrorMessage(error)?.includes('File not found') ||
-          getErrorMessage(error)?.includes('404')
-        ) {
+        const status = errorStatus(error);
+        if (status === 404) {
           toast.error(t('fileManagement.toasts.fileNotFound'));
           // It's already gone server-side — reconcile the list.
-          invalidateFiles();
-        } else if (
-          getErrorMessage(error)?.includes('permission') ||
-          getErrorMessage(error)?.includes('403')
-        ) {
+          invalidateAllFiles();
+        } else if (status === 403) {
           toast.error(t('fileManagement.toasts.noPermission'));
         } else {
-          toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
+          toast.error(
+            getErrorMessage(error) ||
+              t(
+                removal === 'trash'
+                  ? 'fileManagement.toasts.moveToTrashFailed'
+                  : 'fileManagement.toasts.deleteFailed',
+              ),
+          );
         }
       } finally {
         setDeletingId(null);
       }
     },
-    [oxyServices, queryClient, targetUserId, invalidateFiles, t],
+    [files, oxyServices, queryClient, targetUserId, invalidateAllFiles, confirmStillUsed, t],
   );
 
   const confirmBulkDelete = useCallback(async () => {
     if (selectedIds.size === 0) return;
 
     const confirmed = await surfaces.confirm({
-      title: t('fileManagement.deleteFiles') || 'Delete Files',
-      description: t('fileManagement.confirms.deleteFiles', { count: selectedIds.size }),
-      confirmLabel: t('fileManagement.confirm') || 'Delete',
+      title: t('fileManagement.moveToTrash'),
+      description: t('fileManagement.confirms.moveFilesToTrash', { count: selectedIds.size }),
+      confirmLabel: t('fileManagement.moveToTrash'),
       cancelLabel: t('common.cancel') || 'Cancel',
-      destructive: true,
     });
     if (!confirmed) return;
 
     try {
-      const deletePromises = Array.from(selectedIds).map(async (fileId) => {
-        try {
-          await oxyServices.assets.delete(fileId);
-          removeFileFromCache(queryClient, targetUserId, fileId);
-          return { success: true, fileId };
-        } catch (error: unknown) {
-          return { success: false, fileId, error };
-        }
-      });
-
-      const results = await Promise.allSettled(deletePromises);
-      const successful = results.filter((r) => r.status === 'fulfilled' && r.value.success).length;
-      const failed = results.length - successful;
+      const selected = Array.from(selectedIds).map(
+        (id) => files.find((file) => file.id === id) ?? { id, filename: '', status: undefined },
+      );
+      const result = await removeFromLibrary(oxyServices.assets, selected, (uses, filename) =>
+        confirmStillUsed(filename)(uses),
+      );
+      for (const fileId of [...result.trashed, ...result.deleted]) {
+        removeFileFromCache(queryClient, targetUserId, fileId);
+      }
 
-      if (successful > 0) {
-        toast.success(t('fileManagement.toasts.bulkDeleteSuccess', { count: successful }));
+      if (result.trashed.length > 0) {
+        toast.success(
+          t('fileManagement.toasts.bulkMovedToTrash', { count: result.trashed.length }),
+        );
       }
-      if (failed > 0) {
-        toast.error(t('fileManagement.toasts.bulkDeleteFailed', { count: failed }));
+      if (result.deleted.length > 0) {
+        toast.success(
+          t('fileManagement.toasts.bulkDeleteSuccess', { count: result.deleted.length }),
+        );
+      }
+      if (result.failed.length > 0) {
+        toast.error(t('fileManagement.toasts.bulkDeleteFailed', { count: result.failed.length }));
       }
 
       setSelectedIds(new Set());
-      invalidateFiles();
+      invalidateAllFiles();
     } catch (error: unknown) {
       toast.error(getErrorMessage(error) || t('fileManagement.toasts.bulkDeleteError'));
     }
-  }, [selectedIds, oxyServices, queryClient, targetUserId, invalidateFiles, t]);
+  }, [
+    selectedIds,
+    files,
+    oxyServices,
+    queryClient,
+    targetUserId,
+    invalidateAllFiles,
+    confirmStillUsed,
+    t,
+  ]);
 
   const handleBulkVisibilityChange = useCallback(
     async (visibility: 'private' | 'public' | 'unlisted') => {
@@ -912,7 +974,16 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             <Ionicons name={getFileIcon(file.contentType)} size={20} color={colors.primary} />
           ) : undefined),
         title: file.filename,
-        description: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}`,
+        // "Not in use": no application references it. Informational only —
+        // the file is never removed for that (ADR 0043 D5). A file taken down
+        // after a content claim says so: it is served to nobody (D10).
+        description: `${formatFileSize(file.length)} • ${new Date(file.uploadDate).toLocaleDateString()}${
+          file.status === 'blocked'
+            ? ` • ${t('fileManagement.removedAfterClaim')}`
+            : file.inUse === false
+              ? ` • ${t('fileManagement.notInUse')}`
+              : ''
+        }`,
         onPress: () => {
           // Support selection in regular mode with long press or if already selecting
           if (!selectMode && selectedIds.size > 0) {
@@ -955,7 +1026,12 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 iconOnly
                 stopPropagation
                 loading={deletingId === file.id}
-                accessibilityLabel={`Delete ${file.filename}`}
+                accessibilityLabel={t(
+                  file.status === 'blocked'
+                    ? 'fileManagement.a11y.deleteFile'
+                    : 'fileManagement.a11y.moveToTrash',
+                  { name: file.filename },
+                )}
                 onPress={() => confirmFileDelete(file.id, file.filename)}
                 icon={<Ionicons name="trash" size={18} color={colors.error} />}
               />
@@ -974,6 +1050,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
     thumbSourceFor,
     selectMode,
     selectedIds,
+    t,
   ]);
 
   // Browse-themed terminal load-failure state — DISTINCT from the empty state.
@@ -1122,7 +1199,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
               },
               {
                 key: 'delete',
-                label: t('fileManagement.delete', { count: selectedIds.size }),
+                label: t('fileManagement.moveToTrashCount', { count: selectedIds.size }),
                 onPress: confirmBulkDelete,
                 disabled: false,
               },
@@ -1387,6 +1464,11 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         onClose={handleCloseFile}
         onDownload={handleFileDownload}
         onDelete={confirmFileDelete}
+        deleteLabel={
+          openedFile.status === 'blocked'
+            ? t('fileManagement.deleteFile')
+            : t('fileManagement.moveToTrash')
+        }
         isOwner={user?.id === targetUserId}
       />
     );
@@ -1494,6 +1576,17 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
             </View>
           }
         />
+        {user?.id === targetUserId && !selectMode && navigate && (
+          <Button
+            appearance="subtle"
+            tone="neutral"
+            size="sm"
+            iconOnly
+            onPress={() => navigate('FileTrash', userId ? { userId } : undefined)}
+            accessibilityLabel={t('fileManagement.a11y.openTrash')}
+            icon={<Ionicons name="trash-outline" size={20} color={colors.text} />}
+          />
+        )}
         {user?.id === targetUserId && (!selectMode || allowUploadInSelectMode) && (
           <Button
             iconOnly

package/src/ui/screens/FileTrashScreen.tsx

@@ -0,0 +1,228 @@
+import type React from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { View, type ScrollView } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { Text } from '@oxy.so/bloom/typography';
+import { toast } from '@oxy.so/bloom/toast';
+import { surfaces } from '@oxy.so/bloom/surfaces';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { useQueryClient } from '@tanstack/react-query';
+import type { BaseScreenProps } from '../types/navigation';
+import Ionicons from '../icons/Ionicons';
+import { useOxy } from '../context/OxyContext';
+import { useI18n } from '../hooks/useI18n';
+import { useSurfaceHeader } from '../hooks/useSurfaceHeader';
+import { queryKeys } from '../hooks/queries/queryKeys';
+import { removeFileFromCache, useUserFilesInfinite } from '../hooks/queries/useFileQueries';
+import { formatFileSize, getFileIcon } from '../utils/fileManagement';
+import FileListSection, { type FileListItem } from './fileManagement/FileListSection';
+import FileLibraryError from './fileManagement/FileLibraryError';
+import { getErrorMessage } from './fileManagement/shared';
+import { deletePermanently, restoreFromTrash } from './fileManagement/trashActions';
+
+/**
+ * The person's Trash (ADR 0043 D5): the files they moved to trash, most
+ * recently trashed first. Each can be restored — served again, back in the
+ * library — or deleted permanently, after a confirmation (and a second one when
+ * an app still uses it). An account's trash never expires, so nothing here
+ * disappears on its own; it still counts toward the account's storage.
+ */
+const FileTrashScreen: React.FC<BaseScreenProps & { userId?: string }> = ({ userId }) => {
+  const { user, oxyServices } = useOxy();
+  const { t } = useI18n();
+  const { colors } = useTheme();
+  const queryClient = useQueryClient();
+  const ownerId = userId || user?.id;
+
+  const trashQuery = useUserFilesInfinite(ownerId, 'trash');
+  const files = useMemo(
+    () => trashQuery.data?.pages.flatMap((page) => page.files) ?? [],
+    [trashQuery.data],
+  );
+  const scrollViewRef = useRef<ScrollView | null>(null);
+  // The file an action is in flight for: its buttons show progress.
+  const [busy, setBusy] = useState<{ id: string; restoring: boolean } | null>(null);
+
+  // Both lists change: a restored file returns to the library, a deleted one
+  // leaves the trash. `files.all` covers both keys.
+  const refreshFiles = useCallback(() => {
+    queryClient.invalidateQueries({ queryKey: queryKeys.files.all });
+  }, [queryClient]);
+
+  const handleRestore = useCallback(
+    async (fileId: string) => {
+      setBusy({ id: fileId, restoring: true });
+      try {
+        const outcome = await restoreFromTrash(oxyServices.assets, fileId);
+        if (outcome === 'restored') {
+          toast.success(t('fileManagement.toasts.restored'));
+        } else {
+          toast.error(t('fileManagement.toasts.notInTrash'));
+        }
+        removeFileFromCache(queryClient, ownerId, fileId, 'trash');
+        refreshFiles();
+      } catch (error: unknown) {
+        toast.error(getErrorMessage(error) || t('fileManagement.toasts.restoreFailed'));
+      } finally {
+        setBusy(null);
+      }
+    },
+    [oxyServices, queryClient, ownerId, refreshFiles, t],
+  );
+
+  const handleDeleteForever = useCallback(
+    async (fileId: string, filename: string) => {
+      const confirmed = await surfaces.confirm({
+        title: t('fileManagement.trashView.deleteForever'),
+        description: t('fileManagement.confirms.deleteForever', { filename }),
+        confirmLabel: t('fileManagement.trashView.deleteForever'),
+        cancelLabel: t('common.cancel') || 'Cancel',
+        destructive: true,
+      });
+      if (!confirmed) return;
+
+      setBusy({ id: fileId, restoring: false });
+      try {
+        const outcome = await deletePermanently(oxyServices.assets, fileId, (uses) =>
+          surfaces.confirm({
+            title: t('fileManagement.trashView.deleteForever'),
+            description: t('fileManagement.confirms.deleteForeverInUse', {
+              filename,
+              count: uses,
+            }),
+            confirmLabel: t('fileManagement.trashView.deleteForever'),
+            cancelLabel: t('common.cancel') || 'Cancel',
+            destructive: true,
+          }),
+        );
+        if (outcome === 'cancelled') return;
+        if (outcome === 'deleted') toast.success(t('fileManagement.toasts.deletedForever'));
+        removeFileFromCache(queryClient, ownerId, fileId, 'trash');
+        refreshFiles();
+      } catch (error: unknown) {
+        toast.error(getErrorMessage(error) || t('fileManagement.toasts.deleteFailed'));
+      } finally {
+        setBusy(null);
+      }
+    },
+    [oxyServices, queryClient, ownerId, refreshFiles, t],
+  );
+
+  const items = useMemo<FileListItem[]>(
+    () =>
+      files.map((file) => {
+        const trashedOn = file.trashedAt ? new Date(file.trashedAt).toLocaleDateString() : null;
+        return {
+          id: file.id,
+          icon: <Ionicons name={getFileIcon(file.contentType)} size={20} color={colors.primary} />,
+          title: file.filename,
+          description: trashedOn
+            ? `${formatFileSize(file.length)} • ${t('fileManagement.trashView.trashedOn', { date: trashedOn })}`
+            : formatFileSize(file.length),
+          // A trashed file is not served, so there is nothing to open.
+          onPress: () => {},
+          rightElement: (
+            <View className="flex-row items-center gap-1.5 ml-3">
+              <Button
+                appearance="subtle"
+                tone="neutral"
+                size="sm"
+                iconOnly
+                stopPropagation
+                disabled={busy !== null && busy.id !== file.id}
+                loading={busy?.id === file.id && busy.restoring}
+                accessibilityLabel={t('fileManagement.trashView.a11y.restore', {
+                  name: file.filename,
+                })}
+                onPress={() => handleRestore(file.id)}
+                icon={<Ionicons name="arrow-undo" size={18} color={colors.text} />}
+              />
+              <Button
+                appearance="subtle"
+                tone="danger"
+                size="sm"
+                iconOnly
+                stopPropagation
+                disabled={busy !== null && busy.id !== file.id}
+                loading={busy?.id === file.id && !busy.restoring}
+                accessibilityLabel={t('fileManagement.trashView.a11y.deleteForever', {
+                  name: file.filename,
+                })}
+                onPress={() => handleDeleteForever(file.id, file.filename)}
+                icon={<Ionicons name="trash" size={18} color={colors.error} />}
+              />
+            </View>
+          ),
+        };
+      }),
+    [files, colors, busy, handleRestore, handleDeleteForever, t],
+  );
+
+  useSurfaceHeader({
+    title: t('fileManagement.trashView.title'),
+    subtitle: t('fileManagement.trashView.subtitle'),
+    largeTitle: false,
+  });
+
+  const hasLoadError = trashQuery.isError && files.length === 0;
+  const renderEmptyState = () =>
+    hasLoadError ? (
+      <FileLibraryError
+        title={t('fileManagement.trashView.loadError')}
+        description={t('fileManagement.loadError.description')}
+        retryLabel={t('fileManagement.retry')}
+        onRetry={() => trashQuery.refetch()}
+        iconColor={colors.error}
+        titleColor={colors.text}
+        descriptionColor={colors.textSecondary}
+      />
+    ) : trashQuery.isLoading || !ownerId ? null : (
+      <View className="items-center py-[40px] px-[24px]">
+        <Ionicons name="trash-outline" size={64} color={colors.textTertiary} />
+        <Text
+          className="text-[24px] font-bold mt-[16px] mb-[8px] text-center"
+          style={{ color: colors.text }}
+        >
+          {t('fileManagement.trashView.emptyTitle')}
+        </Text>
+        <Text
+          className="text-[16px] text-center leading-[24px]"
+          style={{ color: colors.textSecondary }}
+        >
+          {t('fileManagement.trashView.emptyDescription')}
+        </Text>
+      </View>
+    );
+
+  return (
+    <View className="flex-1">
+      {files.length > 0 && (
+        <Text
+          className="text-[13px] leading-[18px] mx-[16px] mt-[4px] mb-[12px]"
+          style={{ color: colors.textSecondary }}
+        >
+          {t('fileManagement.trashView.notice')}
+        </Text>
+      )}
+      <FileListSection
+        scrollViewRef={scrollViewRef}
+        filteredFiles={files}
+        searchQuery=""
+        items={items}
+        paging={{
+          loadingMore: trashQuery.isFetchingNextPage,
+          hasMore: trashQuery.hasNextPage ?? false,
+        }}
+        refreshing={trashQuery.isRefetching}
+        colors={colors}
+        t={t}
+        onRefresh={() => trashQuery.refetch()}
+        onLoadMore={() => trashQuery.fetchNextPage()}
+        onClearSearch={() => {}}
+        renderEmptyState={renderEmptyState}
+      />
+    </View>
+  );
+};
+
+export default FileTrashScreen;