Feature: Document Management

Relevant source files

The following files were used as context for generating this wiki page:

• app/(tabs)/documents.tsx
• lib/document-picker.ts
• server/storage.ts
• app/(tabs)/analyze.tsx
• drizzle/schema.ts
• design.md

The Document Management feature is a core component of the Strategic Legal Analyzer AI mobile app, designed to allow users to upload, view, and manage their legal documents. It serves as the central repository for documents that can be analyzed by the AI, generated by the app, or discussed in the AI chat. The system is composed of a frontend interface for user interaction, a client-side utility for file selection, and a backend service for persistent storage.

Currently, the feature includes a UI for listing documents (using mock data), a functional document picker for selecting files from the device, and a backend storage module for handling uploads and downloads. However, full integration between the frontend selection and backend storage, as well as database persistence for document metadata, is not yet implemented.

Sources: design.md, app/(tabs)/documents.tsx, lib/document-picker.ts, server/storage.ts

Frontend Implementation

The frontend for document management is split across several components, primarily the DocumentsScreen for listing items and the AnalyzeScreen which contains the document selection logic.

Sources: app/(tabs)/documents.tsx, app/(tabs)/analyze.tsx

Document List (DocumentsScreen)

The DocumentsScreen provides the user interface for viewing and searching their documents.

• UI Components: The screen displays a header with the title "My Documents", a document count, and a search bar.
• Document List: It renders a list of documents. Each item in the list is a TouchableOpacity component showing the document's name, type, and date.
• Data Source: The document list is currently populated with mock data. There is no connection to a backend API or a persistent database to fetch real documents.
• Search: A TextInput allows users to filter the displayed documents by name in real-time. The filtering is case-insensitive.
• Empty State: If no documents are found (or if the list is empty), an "empty state" view is shown with a message and an icon, prompting the user to upload or generate a document.

The following diagram shows the component structure of the DocumentsScreen.

Document Selection

Document selection is handled by a dedicated utility module and integrated into the AnalyzeScreen.

document-picker.ts

This module provides functions to interact with the device's file system using expo-document-picker.

Function	Description
pickDocument()	Asynchronously opens the system's document picker, allowing the user to select a file. It is configured to accept PDF, Word, text, and image files.
formatFileSize()	A utility function to convert file size in bytes into a human-readable string (e.g., "KB", "MB").
getDocumentIcon()	Returns an emoji icon based on the document's type string (pdf, word, etc.).

The pickDocument function returns a PickedDocument object upon successful selection.

// Source: lib/document-picker.ts:3-9
export interface PickedDocument {
  name: string;
  size: number;
  mimeType: string;
  uri: string;
  type: "pdf" | "word" | "text" | "image" | "unknown";
}

Sources: lib/document-picker.ts

Integration in AnalyzeScreen

The AnalyzeScreen uses the pickDocument utility to allow users to upload a document for analysis.

• The handlePickDocument function calls pickDocument() and, if successful, updates the component's state with the selected file's information.
• The UI displays the name, size, and an icon for the selected file.
• The user can also choose to take a photo, which navigates to a different modal (/camera-modal).

The following flowchart illustrates the document picking process initiated from the AnalyzeScreen.

Backend Storage

The backend storage is managed by server/storage.ts, which acts as a client for a pre-configured storage proxy (Forge API).

Storage Architecture

The module is designed to communicate with a remote storage service.

• Configuration: It retrieves the storage service URL and API key from environment variables (ENV.forgeApiUrl, ENV.forgeApiKey).
• Authentication: All requests to the storage proxy are authenticated using a Bearer token (Authorization: Bearer <apiKey>).
• Endpoints: It constructs URLs for two main operations: uploading a file (v1/storage/upload) and retrieving a temporary download URL (v1/storage/downloadUrl).

Sources: server/storage.ts:6-16, 31-39

Core Functions

Function	Description
storagePut(relKey, data, contentType)	Uploads data (Buffer, Uint8Array, or string) to the storage service. It packages the data into FormData and sends it via a POST request. It returns the object's key and public URL.
storageGet(relKey)	Retrieves a temporary, signed URL for downloading a file from the storage service. It makes a GET request to the downloadUrl endpoint.

The sequence diagram below shows the flow for uploading a file using storagePut.

Data Models and Persistence

While the application handles document objects on the client and has a storage backend, there is currently no persistent database model for documents.

Client-Side Data Model

The primary client-side data structure is the PickedDocument interface, which defines the shape of a document object after it has been selected by the user.

Field	Type	Description
name	string	The name of the file.
size	number	The file size in bytes.
mimeType	string	The MIME type of the file.
uri	string	The local URI of the file on the device.
type	"pdf" | "word" | "text" | "image" | "unknown"	A simplified type identifier derived from the MIME type.

Sources: lib/document-picker.ts:3-9

Database Schema

The current database schema defined in drizzle/schema.ts only contains a users table. There is no table for storing document metadata, which explains why the DocumentsScreen relies on mock data.

The diagram below shows the existing users table and highlights the absence of a documents table.

Conclusion

The Document Management feature has a solid foundation with UI components for listing and selecting documents, and a backend service for handling file storage. The DocumentsScreen provides a clear, searchable interface, though it currently relies on mock data. The document picking functionality is robust, supporting various file types. The backend storage.ts module provides a clear abstraction for interacting with a remote file storage service.

Key areas for future development include:

1. Integrating the frontend document selection with the storagePut backend function to enable actual file uploads.
2. Creating a documents table in the database schema to persist document metadata (e.g., name, type, storage key, owner).
3. Connecting the DocumentsScreen to a new API endpoint to fetch and display the user's actual documents from the database.

Sources: todo.md, design.md