chore(release): update versions

* Keep the phone logged in

* Added document sheet

* Make button outline

* Fix colors

* Design accroding to base design

* Design accroding to base design

* Added download and share

* Added view document screen

* Added view document screen

* Screen is launching

* fix toolbar issue

* Fix the button

* fix all the conflicts

* revert unncessary bloat

* remove packages

* pnpnm i

* Fixed some issues

* Added error state

* added header in loading and error state

* Removed duplication  in render

* added correct name of app

* Update apps/mobile/app.json

Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

---------

Co-authored-by: jibraniqbal666 <jibran.iqbal@protonmail.com>
Co-authored-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

.github/workflows/ci.yaml

@@ -12,14 +12,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
-      
+
       - name: Install pnpm
         uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
-          cache: 'pnpm'
+          node-version: 24
+          cache: "pnpm"
 
       - name: Install dependencies
         run: pnpm i
@@ -29,7 +29,7 @@ jobs:
         run: pnpm -r --parallel -F "./packages/*" build
 
       - name: Run linters
-        run: pnpm -r --parallel lint
+        run: pnpm -r --parallel lint --quiet
 
       - name: Type check
         # Exclude docs as their are some typing issues we are ok with for now
@@ -44,4 +44,4 @@ jobs:
         run: pnpm -r --parallel -F "./apps/*" build
 
       - name: Ensure no non-excluded files are changed for the whole repo
-        run: git diff --exit-code > /dev/null || (echo "After running the CI, some un-committed changes were detected. Please ensure cleanness before merging." && exit 1)
+        run: git diff --exit-code > /dev/null || (echo "After running the CI, some un-committed changes were detected. Please ensure cleanness before merging." && exit 1)

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
           cache: "pnpm"
 
       # Ensure npm 11.5.1 or later is installed

.nvmrc

@@ -1 +1 @@
-22
+24

README.md

@@ -118,6 +118,7 @@ Papra would not have been possible without the following open-source projects:
   - **[HonoJS](https://hono.dev/)**: A small, fast, and lightweight web framework for building APIs.
   - **[Drizzle](https://orm.drizzle.team/)**: A simple and lightweight ORM for Node.js.
   - **[Better Auth](https://better-auth.com/)**: A simple and lightweight authentication library for Node.js.
+  - **[CadenceMQ](https://github.com/papra-hq/cadence-mq)**: A self-hosted-friendly job queue for Node.js, made by Papra.
   - And other dependencies listed in the **[server package.json](./apps/papra-server/package.json)**
 - **Documentation**
   - **[Astro](https://astro.build)**: A great static site generator.
@@ -128,7 +129,7 @@ Papra would not have been possible without the following open-source projects:
   - **[Github Actions](https://github.com/features/actions)**: For CI/CD.
 - **Infrastructure**
   - **[Cloudflare Pages](https://pages.cloudflare.com/)**: For static site hosting.
-  - **[Render](https://render.com/)**: For backend hosting.
+  - **[Fly.io](https://fly.io/)**: For backend hosting.
   - **[Turso](https://turso.tech/)**: For production database.
 
 ### Inspiration

apps/docs/package.json

@@ -40,7 +40,7 @@
     "figue": "^3.1.1",
     "lodash-es": "^4.17.21",
     "marked": "^15.0.6",
-    "typescript": "^5.7.3",
+    "typescript": "catalog:",
     "unocss": "0.65.0-beta.2",
     "vitest": "catalog:"
   }

apps/docs/src/content/docs/03-guides/02-intake-emails-with-cf-email-worker.mdx

@@ -52,7 +52,7 @@ The code for the Email Worker proxy is available in the [papra-hq/email-proxy](h
 
     - **Option 2**: Build and deploy the Email Worker
 
-      Clone the [papra-hq/email-proxy](https://github.com/papra-hq/email-proxy) repository and deploy the worker using Wrangler cli. You will need to have Node.js v22 and pnpm installed.
+      Clone the [papra-hq/email-proxy](https://github.com/papra-hq/email-proxy) repository and deploy the worker using Wrangler cli. You will need to have Node.js v24 and pnpm installed.
 
         ```bash
         # Clone the repository

apps/docs/src/content/docs/04-resources/03-api-endpoints.mdx

@@ -201,7 +201,10 @@ Search documents in the organization by name or content.
   - `pageIndex`: (optional, default: 0) The page index to start from.
   - `pageSize`: (optional, default: 100) The number of documents to return.
 - Response (JSON)
-  - `documents`: The list of documents.
+  - `searchResults`: The search results.
+    - `documents`: The list of matching documents.
+      - `id`: The document ID.
+      - `name`: The document name.
 
 ### Get organization documents statistics
 

apps/mobile/.gitignore

@@ -0,0 +1,43 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+.kotlin/
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example
+
+# generated native folders
+/ios
+/android

apps/mobile/README.md

@@ -0,0 +1,5 @@
+# Papra Mobile App
+
+React Native mobile application for Papra document management platform, built with Expo.
+
+// Todo: Add more details about setup, development, and usage instructions.

apps/mobile/app.json

@@ -0,0 +1,56 @@
+{
+  "expo": {
+    "name": "Papra",
+    "slug": "papra",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./src/assets/images/icon.png",
+    "scheme": "papra",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#E6F4FE",
+        "foregroundImage": "./src/assets/images/android-icon-foreground.png",
+        "backgroundImage": "./src/assets/images/android-icon-background.png",
+        "monochromeImage": "./src/assets/images/android-icon-monochrome.png"
+      },
+      "edgeToEdgeEnabled": true,
+      "predictiveBackGestureEnabled": false,
+      "package": "app.papra.android"
+    },
+    "web": {
+      "output": "static",
+      "favicon": "./src/assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./src/assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff",
+          "dark": {
+            "backgroundColor": "#000000"
+          }
+        }
+      ],
+      "expo-secure-store"
+    ],
+    "experiments": {
+      "typedRoutes": true,
+      "reactCompiler": true
+    },
+    "extra": {
+      "router": {},
+      "eas": {
+        "projectId": "f40c21f5-38e6-40d8-8627-528c1d3a533a"
+      }
+    }
+  }
+}

apps/mobile/app/(app)/(with-organizations)/(tabs)/_layout.tsx

@@ -0,0 +1,58 @@
+import { Tabs } from 'expo-router';
+import React from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { HapticTab } from '@/modules/ui/components/haptic-tab';
+import { Icon } from '@/modules/ui/components/icon';
+import { ImportTabButton } from '@/modules/ui/components/import-tab-button';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+export default function TabLayout() {
+  const colors = useThemeColor();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: colors.primary,
+        headerShown: false,
+        tabBarButton: HapticTab,
+        tabBarStyle: {
+          backgroundColor: colors.secondaryBackground,
+          borderTopColor: colors.border,
+          paddingTop: 15,
+          paddingBottom: insets.bottom,
+          height: 65 + insets.bottom,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="list"
+        options={{
+          title: 'Documents',
+          tabBarIcon: ({ color }) => <Icon name="home" size={30} color={color} style={{ height: 30 }} />,
+          tabBarLabel: () => null,
+
+        }}
+      />
+      <Tabs.Screen
+        name="import"
+        options={{
+          title: 'Import',
+          tabBarButton: () => <ImportTabButton />,
+          tabBarLabel: () => null,
+
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: 'Settings',
+          tabBarIcon: ({ color }) => <Icon name="settings" size={30} color={color} style={{ height: 30 }} />,
+          tabBarLabel: () => null,
+
+        }}
+      />
+    </Tabs>
+  );
+}

apps/mobile/app/(app)/(with-organizations)/(tabs)/import.tsx

@@ -0,0 +1,5 @@
+// This is a dummy screen that will never be rendered
+// The import tab button intercepts the press and opens a drawer instead
+export default function ImportScreen() {
+  return null;
+}

apps/mobile/app/(app)/(with-organizations)/(tabs)/list.tsx

@@ -0,0 +1,3 @@
+import { DocumentsListScreen } from '@/modules/documents/screens/documents-list.screen';
+
+export default DocumentsListScreen;

apps/mobile/app/(app)/(with-organizations)/(tabs)/settings.tsx

@@ -0,0 +1,3 @@
+import SettingsScreen from '@/modules/users/screens/settings.screen';
+
+export default SettingsScreen;

apps/mobile/app/(app)/(with-organizations)/_layout.tsx

@@ -0,0 +1,13 @@
+import { Stack } from 'expo-router';
+import { OrganizationsProvider } from '@/modules/organizations/organizations.provider';
+
+export default function WithOrganizationsLayout() {
+  return (
+    <OrganizationsProvider>
+      <Stack>
+        <Stack.Screen name="organizations/create" options={{ headerShown: false }} />
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      </Stack>
+    </OrganizationsProvider>
+  );
+}

apps/mobile/app/(app)/(with-organizations)/organizations/create.tsx

@@ -0,0 +1,3 @@
+import { OrganizationCreateScreen } from '@/modules/organizations/screens/organization-create.screen';
+
+export default OrganizationCreateScreen;

apps/mobile/app/(app)/_layout.tsx

@@ -0,0 +1,26 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+
+import { ApiProvider } from '@/modules/api/providers/api.provider';
+import 'react-native-reanimated';
+
+export default function RootLayout() {
+  return (
+    <ApiProvider>
+      <Stack>
+        <Stack.Screen name="auth/login" options={{ headerShown: false }} />
+        <Stack.Screen name="auth/signup" options={{ headerShown: false }} />
+        <Stack.Screen name="(with-organizations)" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="document/view"
+          options={{
+            headerShown: false,
+            presentation: 'modal',
+            animation: 'slide_from_bottom',
+          }}
+        />
+      </Stack>
+      <StatusBar style="auto" />
+    </ApiProvider>
+  );
+}

apps/mobile/app/(app)/auth/login.tsx

@@ -0,0 +1,3 @@
+import { LoginScreen } from '@/modules/auth/screens/login.screen';
+
+export default LoginScreen;

apps/mobile/app/(app)/auth/signup.tsx

@@ -0,0 +1,3 @@
+import { SignupScreen } from '@/modules/auth/screens/signup.screen';
+
+export default SignupScreen;

apps/mobile/app/(app)/document/view.tsx

@@ -0,0 +1,3 @@
+import DocumentViewScreen from '@/modules/documents-actions/screens/document-view.screen';
+
+export default DocumentViewScreen;

apps/mobile/app/+not-found.tsx

@@ -0,0 +1,45 @@
+import { Link, Stack } from 'expo-router';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+
+export default function NotFoundScreen() {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const styles = createStylesNotFound(isDark);
+  return (
+    <>
+      <Stack.Screen options={{ title: 'Oops!' }} />
+      <View style={styles.container}>
+        <Text style={styles.title}>This screen doesn&apos;t exist.</Text>
+        <Link href="/" style={styles.link}>
+          <Text style={styles.linkText}>Go to home screen</Text>
+        </Link>
+      </View>
+    </>
+  );
+}
+
+export function createStylesNotFound(isDark: boolean) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 20,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+      marginBottom: 20,
+      color: isDark ? '#fff' : '#000',
+    },
+    link: {
+      marginTop: 15,
+      paddingVertical: 15,
+    },
+    linkText: {
+      fontSize: 14,
+      color: '#007AFF',
+    },
+  });
+}

apps/mobile/app/_layout.tsx

@@ -0,0 +1,25 @@
+import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { AppProviders } from '@/modules/app/providers/app-providers';
+
+import { useColorScheme } from '@/modules/ui/providers/use-color-scheme';
+import 'react-native-reanimated';
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <AppProviders>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="config/server-selection" options={{ headerShown: false }} />
+          <Stack.Screen name="(app)" options={{ headerShown: false }} />
+          <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
+        </Stack>
+        <StatusBar style="auto" />
+      </ThemeProvider>
+    </AppProviders>
+  );
+}

apps/mobile/app/config/server-selection.tsx

@@ -0,0 +1,3 @@
+import { ServerSelectionScreen } from '@/modules/config/screens/server-selection.screen';
+
+export default ServerSelectionScreen;

apps/mobile/app/index.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { Redirect } from 'expo-router';
+import { createAuthClient } from '@/modules/auth/auth.client';
+import { configLocalStorage } from '@/modules/config/config.local-storage';
+
+export default function Index() {
+  const query = useQuery({
+    queryKey: ['api-server-url'],
+    queryFn: configLocalStorage.getApiServerBaseUrl,
+  });
+
+  const getRedirection = () => {
+    if (query.isLoading) {
+      return null;
+    }
+
+    if (query.isError || query.data == null) {
+      return <Redirect href="/config/server-selection" />;
+    }
+
+    const authClient = createAuthClient({ baseUrl: query.data });
+    if (authClient.getCookie()) {
+      return <Redirect href="/(app)/(with-organizations)/(tabs)/list" />;
+    }
+
+    return <Redirect href="/auth/login" />;
+  };
+
+  return (
+    <>
+      {getRedirection()}
+    </>
+  );
+}

apps/mobile/app/modal.tsx

@@ -0,0 +1,29 @@
+import { Link } from 'expo-router';
+import { StyleSheet } from 'react-native';
+
+import { ThemedText } from '@/modules/ui/components/themed-text';
+import { ThemedView } from '@/modules/ui/components/themed-view';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+});
+
+export default function ModalScreen() {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText type="title">This is a modal</ThemedText>
+      <Link href="/" dismissTo style={styles.link}>
+        <ThemedText type="link">Go to home screen</ThemedText>
+      </Link>
+    </ThemedView>
+  );
+}

apps/mobile/eas.json

@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 16.27.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

apps/mobile/eslint.config.js

@@ -0,0 +1,29 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu({
+  typescript: {
+    tsconfigPath: './tsconfig.json',
+    overridesTypeAware: {
+      'ts/no-misused-promises': ['error', { checksVoidReturn: false }],
+      'ts/strict-boolean-expressions': ['error', { allowNullableObject: true }],
+    },
+
+  },
+  stylistic: {
+    semi: true,
+  },
+
+  rules: {
+    // To allow export on top of files
+    'ts/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
+    'curly': ['error', 'all'],
+    'vitest/consistent-test-it': ['error', { fn: 'test' }],
+    'ts/consistent-type-definitions': ['error', 'type'],
+    'style/brace-style': ['error', '1tbs', { allowSingleLine: false }],
+    'unused-imports/no-unused-vars': ['error', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
+      caughtErrorsIgnorePattern: '^_',
+    }],
+  },
+});

apps/mobile/metro.config.cjs

@@ -0,0 +1,8 @@
+const { getDefaultConfig } = require('expo/metro-config');
+
+const config = getDefaultConfig(__dirname);
+
+// Enable package exports for Better Auth
+config.resolver.unstable_enablePackageExports = true;
+
+module.exports = config;

apps/mobile/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "mobile",
+  "type": "module",
+  "version": "1.0.0",
+  "private": true,
+  "main": "expo-router/entry",
+  "scripts": {
+    "dev": "pnpm start",
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest watch"
+  },
+  "dependencies": {
+    "@better-auth/expo": "catalog:",
+    "@corentinth/chisels": "catalog:",
+    "@expo/vector-icons": "^15.0.3",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-navigation/bottom-tabs": "^7.4.0",
+    "@react-navigation/elements": "^2.6.3",
+    "@react-navigation/native": "^7.1.8",
+    "@tanstack/react-form": "^1.23.8",
+    "@tanstack/react-query": "^5.90.7",
+    "better-auth": "catalog:",
+    "expo": "~54.0.22",
+    "expo-constants": "~18.0.10",
+    "expo-document-picker": "^14.0.7",
+    "expo-file-system": "^19.0.19",
+    "expo-font": "~14.0.9",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.10",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.14",
+    "expo-secure-store": "^15.0.7",
+    "expo-sharing": "^14.0.7",
+    "expo-splash-screen": "~31.0.10",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.8",
+    "expo-web-browser": "~15.0.9",
+    "ofetch": "^1.4.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-pdf": "^7.0.3",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "~0.21.0",
+    "react-native-worklets": "0.5.1",
+    "valibot": "1.0.0-beta.10"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "catalog:",
+    "@types/react": "~19.1.0",
+    "eas-cli": "^16.27.0",
+    "eslint": "catalog:",
+    "eslint-config-expo": "~10.0.0",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  }
+}

apps/mobile/src/modules/api/api.client.ts

@@ -0,0 +1,30 @@
+import type { HttpClientOptions, ResponseType } from './http.client';
+import { Platform } from 'react-native';
+import { httpClient } from './http.client';
+
+export type ApiClient = ReturnType<typeof createApiClient>;
+
+export function createApiClient({
+  baseUrl,
+  getAuthCookie,
+}: {
+  baseUrl: string;
+  getAuthCookie: () => string;
+}) {
+  return async <T, R extends ResponseType = 'json'>({ path, ...rest}: { path: string } & Omit<HttpClientOptions<R>, 'url'>) => {
+    return httpClient<T, R>({
+      baseUrl,
+      url: path,
+      credentials: Platform.OS === 'web' ? 'include' : 'omit',
+      headers: {
+        ...(Platform.OS === 'web'
+          ? {}
+          : {
+              Cookie: getAuthCookie(),
+            }),
+        ...rest.headers,
+      },
+      ...rest,
+    });
+  };
+}

apps/mobile/src/modules/api/api.models.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, test } from 'vitest';
+import { coerceDate } from './api.models';
+
+describe('api models', () => {
+  describe('coerceDate', () => {
+    test('transforms date-ish values into Date instances', () => {
+      expect(coerceDate(new Date('2024-01-01T00:00:00Z'))).toEqual(new Date('2024-01-01T00:00:00Z'));
+      expect(coerceDate('2024-01-01T00:00:00Z')).toEqual(new Date('2024-01-01T00:00:00Z'));
+      expect(coerceDate('2024-01-01')).toEqual(new Date('2024-01-01T00:00:00Z'));
+      expect(coerceDate(1704067200000)).toEqual(new Date('2024-01-01T00:00:00Z'));
+
+      expect(() => coerceDate(null)).toThrow('Invalid date: expected Date, string, or number, but received value "null" of type "object"');
+      expect(() => coerceDate(undefined)).toThrow('Invalid date: expected Date, string, or number, but received value "undefined" of type "undefined"');
+      expect(() => coerceDate({})).toThrow('Invalid date: expected Date, string, or number, but received value "[object Object]" of type "object"');
+      expect(() => coerceDate(['foo'])).toThrow('Invalid date: expected Date, string, or number, but received value "foo" of type "object"');
+      expect(() => coerceDate(true)).toThrow('Invalid date: expected Date, string, or number, but received value "true" of type "boolean"');
+    });
+  });
+});

apps/mobile/src/modules/api/api.models.ts

@@ -0,0 +1,43 @@
+type DateKeys = 'createdAt' | 'updatedAt' | 'deletedAt' | 'expiresAt' | 'lastTriggeredAt' | 'lastUsedAt' | 'scheduledPurgeAt';
+
+export type CoerceDate<T> = T extends string | Date
+  ? Date
+  : T extends string | Date | null | undefined
+    ? Date | undefined
+    : T;
+
+export type CoerceDates<T> = {
+  [K in keyof T]: K extends DateKeys ? CoerceDate<T[K]> : T[K];
+};
+
+export function coerceDate(date: unknown): Date {
+  if (date instanceof Date) {
+    return date;
+  }
+
+  if (typeof date === 'string' || typeof date === 'number') {
+    return new Date(date);
+  }
+
+  throw new Error(`Invalid date: expected Date, string, or number, but received value "${String(date)}" of type "${typeof date}"`);
+}
+
+export function coerceDateOrUndefined(date: unknown): Date | undefined {
+  if (date == null) {
+    return undefined;
+  }
+  return coerceDate(date);
+}
+
+export function coerceDates<T extends Record<string, unknown>>(obj: T): CoerceDates<T> {
+  return {
+    ...obj,
+    ...('createdAt' in obj ? { createdAt: coerceDateOrUndefined(obj.createdAt) } : {}),
+    ...('updatedAt' in obj ? { updatedAt: coerceDateOrUndefined(obj.updatedAt) } : {}),
+    ...('deletedAt' in obj ? { deletedAt: coerceDateOrUndefined(obj.deletedAt) } : {}),
+    ...('expiresAt' in obj ? { expiresAt: coerceDateOrUndefined(obj.expiresAt) } : {}),
+    ...('lastTriggeredAt' in obj ? { lastTriggeredAt: coerceDateOrUndefined(obj.lastTriggeredAt) } : {}),
+    ...('lastUsedAt' in obj ? { lastUsedAt: coerceDateOrUndefined(obj.lastUsedAt) } : {}),
+    ...('scheduledPurgeAt' in obj ? { scheduledPurgeAt: coerceDateOrUndefined(obj.scheduledPurgeAt) } : {}),
+  } as CoerceDates<T>;
+}

apps/mobile/src/modules/api/http.client.ts

@@ -0,0 +1,12 @@
+import type { FetchOptions, ResponseType } from 'ofetch';
+import { ofetch } from 'ofetch';
+
+export { ResponseType };
+export type HttpClientOptions<R extends ResponseType = 'json'> = Omit<FetchOptions<R>, 'baseURL'> & { url: string; baseUrl?: string };
+
+export async function httpClient<A, R extends ResponseType = 'json'>({ url, baseUrl, ...rest }: HttpClientOptions<R>) {
+  return ofetch<A, R>(url, {
+    baseURL: baseUrl,
+    ...rest,
+  });
+}

apps/mobile/src/modules/api/providers/api.provider.tsx

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import type { ApiClient } from '@/modules/api/api.client';
+import type { AuthClient } from '@/modules/auth/auth.client';
+import { useQuery } from '@tanstack/react-query';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { createApiClient } from '@/modules/api/api.client';
+import { createAuthClient } from '@/modules/auth/auth.client';
+import { configLocalStorage } from '@/modules/config/config.local-storage';
+
+type ApiProviderProps = {
+  children: ReactNode;
+};
+
+const AuthClientContext = createContext<AuthClient | undefined>(undefined);
+const ApiClientContext = createContext<ApiClient | undefined>(undefined);
+
+export function ApiProvider({ children }: ApiProviderProps) {
+  const [authClient, setAuthClient] = useState<AuthClient | undefined>(undefined);
+  const [apiClient, setApiClient] = useState<ApiClient | undefined>(undefined);
+
+  const { data: baseUrl } = useQuery({
+    queryKey: ['api-server-url'],
+    queryFn: configLocalStorage.getApiServerBaseUrl,
+  });
+
+  useEffect(() => {
+    if (baseUrl == null) {
+      return;
+    }
+
+    const authClient = createAuthClient({ baseUrl });
+    setAuthClient(() => authClient);
+
+    const apiClient = createApiClient({ baseUrl, getAuthCookie: () => authClient.getCookie() });
+    setApiClient(() => apiClient);
+  }, [baseUrl]);
+
+  return (
+    <>
+      { authClient && apiClient && (
+        <AuthClientContext.Provider value={authClient}>
+          <ApiClientContext.Provider value={apiClient}>
+            {children}
+          </ApiClientContext.Provider>
+        </AuthClientContext.Provider>
+      )}
+    </>
+  );
+}
+
+export function useAuthClient(): AuthClient {
+  const context = useContext(AuthClientContext);
+
+  if (!context) {
+    throw new Error('useAuthClient must be used within ApiProvider');
+  }
+
+  return context;
+}
+
+export function useApiClient(): ApiClient {
+  const context = useContext(ApiClientContext);
+
+  if (!context) {
+    throw new Error('useApiClient must be used within ApiProvider');
+  }
+
+  return context;
+}

apps/mobile/src/modules/api/providers/query.provider.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 2,
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes
+    },
+  },
+});
+
+type QueryProviderProps = {
+  children: ReactNode;
+};
+
+export function QueryProvider({ children }: QueryProviderProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+    </QueryClientProvider>
+  );
+}

apps/mobile/src/modules/app/providers/app-providers.tsx

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import { QueryProvider } from '../../api/providers/query.provider';
+import { AlertProvider } from '../../ui/providers/alert-provider';
+
+type AppProvidersProps = {
+  children: ReactNode;
+};
+
+export function AppProviders({ children }: AppProvidersProps) {
+  return (
+    <QueryProvider>
+      <AlertProvider>
+        {children}
+      </AlertProvider>
+    </QueryProvider>
+  );
+}

apps/mobile/src/modules/auth/auth.client.ts

@@ -0,0 +1,22 @@
+import { expoClient } from '@better-auth/expo/client';
+import { createAuthClient as createBetterAuthClient } from 'better-auth/react';
+import Constants from 'expo-constants';
+import * as SecureStore from 'expo-secure-store';
+import { Platform } from 'react-native';
+
+export type AuthClient = ReturnType<typeof createAuthClient>;
+
+export function createAuthClient({ baseUrl}: { baseUrl: string }) {
+  return createBetterAuthClient({
+    baseURL: baseUrl,
+    plugins: [
+      expoClient({
+        scheme: String(Constants.expoConfig?.scheme ?? 'papra'),
+        storagePrefix: String(Constants.expoConfig?.scheme ?? 'papra'),
+        storage: Platform.OS === 'web'
+          ? localStorage
+          : SecureStore,
+      }),
+    ],
+  });
+}

apps/mobile/src/modules/auth/components/back-to-server-selection.tsx

@@ -0,0 +1,44 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { router } from 'expo-router';
+import { StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { Icon } from '@/modules/ui/components/icon';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+export function BackToServerSelectionButton() {
+  const themeColors = useThemeColor();
+  const styles = createStyles({ themeColors });
+
+  return (
+    <TouchableOpacity
+      style={styles.backToServerButton}
+      onPress={() => router.push('/config/server-selection')}
+    >
+      <Icon name="arrow-left" size={20} color={themeColors.mutedForeground} />
+      <Text style={styles.backToServerText}>
+        Select server
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    backToServerButton: {
+      marginBottom: 16,
+      alignSelf: 'flex-start',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+      backgroundColor: themeColors.secondaryBackground,
+      borderRadius: 8,
+      paddingVertical: 10,
+      paddingHorizontal: 14,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+    },
+    backToServerText: {
+      color: themeColors.mutedForeground,
+      fontSize: 16,
+    },
+  });
+}

apps/mobile/src/modules/auth/screens/login.screen.tsx

@@ -0,0 +1,346 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useForm } from '@tanstack/react-form';
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import * as v from 'valibot';
+import { useAuthClient } from '@/modules/api/providers/api.provider';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { useServerConfig } from '../../config/hooks/use-server-config';
+import { BackToServerSelectionButton } from '../components/back-to-server-selection';
+
+const loginSchema = v.object({
+  email: v.pipe(v.string(), v.email('Please enter a valid email')),
+  password: v.pipe(v.string(), v.minLength(8, 'Password must be at least 8 characters')),
+});
+
+export function LoginScreen() {
+  const router = useRouter();
+  const themeColors = useThemeColor();
+  const authClient = useAuthClient();
+  const { showAlert } = useAlert();
+  const insets = useSafeAreaInsets();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { data: serverConfig, isLoading: isLoadingConfig } = useServerConfig();
+
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+    validators: {
+      onChange: loginSchema,
+    },
+
+    onSubmit: async ({ value }) => {
+      setIsSubmitting(true);
+      try {
+        const response = await authClient.signIn.email({ email: value.email, password: value.password, rememberMe: true });
+
+        if (response.error) {
+          throw new Error(response.error.message);
+        }
+
+        router.replace('/(app)/(with-organizations)/(tabs)/list');
+      } catch (error) {
+        showAlert({
+          title: 'Login Failed',
+          message: error instanceof Error ? error.message : 'An error occurred',
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+  });
+
+  const handleSocialSignIn = async (provider: string) => {
+    try {
+      const response = await authClient.signIn.social({ provider, callbackURL: '/' });
+      if (response.error) {
+        throw Object.assign(new Error(response.error.message), response.error);
+      }
+    } catch (error) {
+      showAlert({
+        title: 'Sign In Failed',
+        message: error instanceof Error ? error.message : 'An error occurred',
+      });
+    }
+  };
+
+  const authConfig = serverConfig?.config?.auth;
+  const isEmailEnabled = authConfig?.providers?.email?.isEnabled ?? false;
+  const isGoogleEnabled = authConfig?.providers?.google?.isEnabled ?? false;
+  const isGithubEnabled = authConfig?.providers?.github?.isEnabled ?? false;
+  const customProviders = authConfig?.providers?.customs ?? [];
+
+  const styles = createStyles({ themeColors });
+
+  if (isLoadingConfig) {
+    return (
+      <View style={[styles.container, styles.centerContent]}>
+        <ActivityIndicator size="large" color={themeColors.primary} />
+      </View>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={{ ...styles.container, paddingTop: insets.top }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <BackToServerSelectionButton />
+
+        <View style={styles.header}>
+          <Text style={styles.title}>Welcome Back</Text>
+          <Text style={styles.subtitle}>Sign in to your account</Text>
+        </View>
+
+        {isEmailEnabled && (
+          <View style={styles.formContainer}>
+            <form.Field name="email">
+              {field => (
+                <View style={styles.fieldContainer}>
+                  <Text style={styles.label}>Email</Text>
+                  <TextInput
+                    style={styles.input}
+                    placeholder="you@example.com"
+                    placeholderTextColor={themeColors.mutedForeground}
+                    value={field.state.value}
+                    onChangeText={field.handleChange}
+                    onBlur={field.handleBlur}
+                    autoCapitalize="none"
+                    autoCorrect={false}
+                    keyboardType="email-address"
+                    editable={!isSubmitting}
+                  />
+                </View>
+              )}
+            </form.Field>
+
+            <form.Field name="password">
+              {field => (
+                <View style={styles.fieldContainer}>
+                  <Text style={styles.label}>Password</Text>
+                  <TextInput
+                    style={styles.input}
+                    placeholder="Enter your password"
+                    placeholderTextColor={themeColors.mutedForeground}
+                    value={field.state.value}
+                    onChangeText={field.handleChange}
+                    onBlur={field.handleBlur}
+                    secureTextEntry
+                    editable={!isSubmitting}
+                  />
+                </View>
+              )}
+            </form.Field>
+
+            <TouchableOpacity
+              style={[styles.button, isSubmitting && styles.buttonDisabled]}
+              onPress={async () => form.handleSubmit()}
+              disabled={isSubmitting}
+            >
+              {isSubmitting
+                ? (
+                    <ActivityIndicator color="#fff" />
+                  )
+                : (
+                    <Text style={styles.buttonText}>Sign In</Text>
+                  )}
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {(isGoogleEnabled || isGithubEnabled || customProviders.length > 0) && (
+          <>
+            {isEmailEnabled && (
+              <View style={styles.divider}>
+                <View style={styles.dividerLine} />
+                <Text style={styles.dividerText}>OR</Text>
+                <View style={styles.dividerLine} />
+              </View>
+            )}
+
+            <View style={styles.socialButtons}>
+              {isGoogleEnabled && (
+                <TouchableOpacity
+                  style={styles.socialButton}
+                  onPress={async () => handleSocialSignIn('google')}
+                >
+                  <Text style={styles.socialButtonText}>Continue with Google</Text>
+                </TouchableOpacity>
+              )}
+
+              {isGithubEnabled && (
+                <TouchableOpacity
+                  style={styles.socialButton}
+                  onPress={async () => handleSocialSignIn('github')}
+                >
+                  <Text style={styles.socialButtonText}>Continue with GitHub</Text>
+                </TouchableOpacity>
+              )}
+
+              {customProviders.map(provider => (
+                <TouchableOpacity
+                  key={provider.providerId}
+                  style={styles.socialButton}
+                  onPress={async () => handleSocialSignIn(provider.providerId)}
+                >
+                  <Text style={styles.socialButtonText}>
+                    Continue with
+                    {' '}
+                    {provider.providerName}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </>
+        )}
+
+        {authConfig?.isRegistrationEnabled === true && (
+          <TouchableOpacity
+            style={styles.linkButton}
+            onPress={() => router.push('/auth/signup')}
+          >
+            <Text style={styles.linkText}>
+              Don&apos;t have an account? Sign up
+            </Text>
+          </TouchableOpacity>
+        )}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    centerContent: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 24,
+    },
+    header: {
+      marginBottom: 48,
+      marginTop: 16,
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: themeColors.mutedForeground,
+    },
+    formContainer: {
+      gap: 16,
+    },
+    fieldContainer: {
+      gap: 8,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: themeColors.foreground,
+    },
+    input: {
+      height: 50,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      fontSize: 16,
+      color: themeColors.foreground,
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    button: {
+      height: 50,
+      backgroundColor: themeColors.primary,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 8,
+    },
+    buttonDisabled: {
+      opacity: 0.5,
+    },
+    buttonText: {
+      color: themeColors.primaryForeground,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    divider: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginVertical: 24,
+    },
+    dividerLine: {
+      flex: 1,
+      height: 1,
+      backgroundColor: themeColors.border,
+    },
+    dividerText: {
+      marginHorizontal: 16,
+      color: themeColors.mutedForeground,
+      fontSize: 14,
+    },
+    socialButtons: {
+      gap: 12,
+    },
+    socialButton: {
+      height: 50,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    socialButtonText: {
+      color: themeColors.foreground,
+      fontSize: 16,
+      fontWeight: '500',
+    },
+    linkButton: {
+      marginTop: 24,
+      alignItems: 'center',
+    },
+    linkText: {
+      color: themeColors.primary,
+      fontSize: 14,
+    },
+    backToServerButton: {
+      marginBottom: 16,
+      alignSelf: 'flex-start',
+    },
+    backToServerText: {
+      color: themeColors.primary,
+      fontSize: 14,
+    },
+  });
+}

apps/mobile/src/modules/auth/screens/signup.screen.tsx

@@ -0,0 +1,293 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useForm } from '@tanstack/react-form';
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import * as v from 'valibot';
+import { useAuthClient } from '@/modules/api/providers/api.provider';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { useServerConfig } from '../../config/hooks/use-server-config';
+import { BackToServerSelectionButton } from '../components/back-to-server-selection';
+
+const signupSchema = v.object({
+  name: v.pipe(v.string(), v.minLength(1, 'Name is required')),
+  email: v.pipe(v.string(), v.email('Please enter a valid email')),
+  password: v.pipe(v.string(), v.minLength(8, 'Password must be at least 8 characters')),
+});
+
+export function SignupScreen() {
+  const router = useRouter();
+  const themeColors = useThemeColor();
+  const authClient = useAuthClient();
+  const { showAlert } = useAlert();
+  const insets = useSafeAreaInsets();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { data: serverConfig, isLoading: isLoadingConfig } = useServerConfig();
+
+  const form = useForm({
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+    },
+    validators: {
+      onChange: signupSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setIsSubmitting(true);
+      try {
+        const { name, email, password } = value;
+
+        await authClient.signUp.email({ name, email, password });
+
+        const isEmailVerificationRequired = serverConfig?.config?.auth?.isEmailVerificationRequired ?? false;
+
+        if (isEmailVerificationRequired) {
+          showAlert({
+            title: 'Check your email',
+            message: 'We sent you a verification link. Please check your email to verify your account.',
+            buttons: [{ text: 'OK', onPress: () => router.replace('/auth/login') }],
+          });
+        } else {
+          router.replace('/(app)/(with-organizations)/(tabs)/list');
+        }
+      } catch (error) {
+        showAlert({
+          title: 'Signup Failed',
+          message: error instanceof Error ? error.message : 'An error occurred',
+        });
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+  });
+
+  const authConfig = serverConfig?.config?.auth;
+  const isRegistrationEnabled = authConfig?.isRegistrationEnabled ?? false;
+
+  const styles = createStyles({ themeColors });
+
+  if (isLoadingConfig) {
+    return (
+      <View style={[styles.container, styles.centerContent]}>
+        <ActivityIndicator size="large" color={themeColors.primary} />
+      </View>
+    );
+  }
+
+  if (!isRegistrationEnabled) {
+    return (
+      <View style={[styles.container, styles.centerContent]}>
+        <Text style={styles.errorText}>Registration is currently disabled</Text>
+        <TouchableOpacity
+          style={styles.linkButton}
+          onPress={() => router.back()}
+        >
+          <Text style={styles.linkText}>Go back to login</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <KeyboardAvoidingView
+      style={{ ...styles.container, paddingTop: insets.top }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <BackToServerSelectionButton />
+
+        <View style={styles.header}>
+          <Text style={styles.title}>Create Account</Text>
+          <Text style={styles.subtitle}>Sign up to get started</Text>
+        </View>
+
+        <View style={styles.formContainer}>
+          <form.Field name="name">
+            {field => (
+              <View style={styles.fieldContainer}>
+                <Text style={styles.label}>Name</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="Your name"
+                  placeholderTextColor={themeColors.mutedForeground}
+                  value={field.state.value}
+                  onChangeText={field.handleChange}
+                  onBlur={field.handleBlur}
+                  autoCapitalize="words"
+                  editable={!isSubmitting}
+                />
+              </View>
+            )}
+          </form.Field>
+
+          <form.Field name="email">
+            {field => (
+              <View style={styles.fieldContainer}>
+                <Text style={styles.label}>Email</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="you@example.com"
+                  placeholderTextColor={themeColors.mutedForeground}
+                  value={field.state.value}
+                  onChangeText={field.handleChange}
+                  onBlur={field.handleBlur}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  keyboardType="email-address"
+                  editable={!isSubmitting}
+                />
+              </View>
+            )}
+          </form.Field>
+
+          <form.Field name="password">
+            {field => (
+              <View style={styles.fieldContainer}>
+                <Text style={styles.label}>Password</Text>
+                <TextInput
+                  style={styles.input}
+                  placeholder="At least 8 characters"
+                  placeholderTextColor={themeColors.mutedForeground}
+                  value={field.state.value}
+                  onChangeText={field.handleChange}
+                  onBlur={field.handleBlur}
+                  secureTextEntry
+                  editable={!isSubmitting}
+                />
+              </View>
+            )}
+          </form.Field>
+
+          <TouchableOpacity
+            style={[styles.button, isSubmitting && styles.buttonDisabled]}
+            onPress={async () => form.handleSubmit()}
+            disabled={isSubmitting}
+          >
+            {isSubmitting
+              ? (
+                  <ActivityIndicator color="#fff" />
+                )
+              : (
+                  <Text style={styles.buttonText}>Sign Up</Text>
+                )}
+          </TouchableOpacity>
+        </View>
+
+        <TouchableOpacity
+          style={styles.linkButton}
+          onPress={() => router.back()}
+        >
+          <Text style={styles.linkText}>Already have an account? Sign in</Text>
+        </TouchableOpacity>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    centerContent: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 24,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 24,
+    },
+    header: {
+      marginBottom: 48,
+      marginTop: 16,
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: themeColors.mutedForeground,
+    },
+    formContainer: {
+      gap: 16,
+    },
+    fieldContainer: {
+      gap: 8,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: themeColors.foreground,
+    },
+    input: {
+      height: 50,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      fontSize: 16,
+      color: themeColors.foreground,
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    button: {
+      height: 50,
+      backgroundColor: themeColors.primary,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 8,
+    },
+    buttonDisabled: {
+      opacity: 0.5,
+    },
+    buttonText: {
+      color: themeColors.primaryForeground,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+    linkButton: {
+      marginTop: 24,
+      alignItems: 'center',
+    },
+    linkText: {
+      color: themeColors.primary,
+      fontSize: 14,
+    },
+    errorText: {
+      fontSize: 16,
+      color: themeColors.primary,
+      marginBottom: 16,
+      textAlign: 'center',
+    },
+    backToServerButton: {
+      marginBottom: 16,
+      alignSelf: 'flex-start',
+    },
+    backToServerText: {
+      color: themeColors.primary,
+      fontSize: 14,
+    },
+  });
+}

apps/mobile/src/modules/config/config.constants.ts

@@ -0,0 +1 @@
+export const MANAGED_SERVER_URL = 'https://api.papra.app';

apps/mobile/src/modules/config/config.local-storage.ts

@@ -0,0 +1,9 @@
+import { buildStorageKey } from '../lib/local-storage/local-storage.models';
+import { storage } from '../lib/local-storage/local-storage.services';
+
+const CONFIG_API_SERVER_URL_KEY = buildStorageKey(['config', 'api-server-url']);
+
+export const configLocalStorage = {
+  getApiServerBaseUrl: async () => storage.getItem(CONFIG_API_SERVER_URL_KEY),
+  setApiServerBaseUrl: async ({ apiServerBaseUrl}: { apiServerBaseUrl: string }) => storage.setItem(CONFIG_API_SERVER_URL_KEY, apiServerBaseUrl),
+};

apps/mobile/src/modules/config/config.services.ts

@@ -0,0 +1,44 @@
+import type { ApiClient } from '../api/api.client';
+import { httpClient } from '../api/http.client';
+
+export async function fetchServerConfig({ apiClient}: { apiClient: ApiClient }) {
+  return apiClient<{
+    config: {
+      auth: {
+        isEmailVerificationRequired: boolean;
+        isPasswordResetEnabled: boolean;
+        isRegistrationEnabled: boolean;
+        showLegalLinksOnAuthPage: boolean;
+        providers: {
+          email: {
+            isEnabled: boolean;
+          };
+          github: {
+            isEnabled: boolean;
+          };
+          google: {
+            isEnabled: boolean;
+          };
+          customs: {
+            providerId: string;
+            providerName: string;
+          }[];
+        };
+      };
+    };
+  }>({
+    path: '/api/config',
+  });
+}
+
+export async function pingServer({ url}: { url: string }): Promise<true | never> {
+  const response = await httpClient<{ status: 'ok' | 'error' }>({ url: `/api/ping`, baseUrl: url })
+    .then(() => true)
+    .catch(() => false);
+
+  if (!response) {
+    throw new Error('Could not reach the server');
+  }
+
+  return true;
+}

apps/mobile/src/modules/config/hooks/use-server-config.ts

@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+import { useApiClient } from '@/modules/api/providers/api.provider';
+import { fetchServerConfig } from '../config.services';
+
+export function useServerConfig() {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: ['server', 'config'],
+    queryFn: async () => fetchServerConfig({ apiClient }),
+  });
+}

apps/mobile/src/modules/config/screens/server-selection.screen.tsx

@@ -0,0 +1,238 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { queryClient } from '@/modules/api/providers/query.provider';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { MANAGED_SERVER_URL } from '../config.constants';
+import { configLocalStorage } from '../config.local-storage';
+import { pingServer } from '../config.services';
+
+function getDefaultCustomServerUrl() {
+  if (!__DEV__) {
+    return '';
+  }
+
+  // eslint-disable-next-line node/prefer-global/process
+  return process.env.EXPO_PUBLIC_API_URL ?? '';
+}
+
+export function ServerSelectionScreen() {
+  const router = useRouter();
+  const themeColors = useThemeColor();
+  const { showAlert } = useAlert();
+  const styles = createStyles({ themeColors });
+
+  const [selectedOption, setSelectedOption] = useState<'managed' | 'self-hosted'>('managed');
+  const [customUrl, setCustomUrl] = useState(getDefaultCustomServerUrl());
+  const [isValidating, setIsValidating] = useState(false);
+
+  const handleValidateCustomUrl = async ({ url}: { url: string }) => {
+    setIsValidating(true);
+    try {
+      await pingServer({ url });
+      await configLocalStorage.setApiServerBaseUrl({ apiServerBaseUrl: url });
+      await queryClient.invalidateQueries({ queryKey: ['api-server-url'] });
+
+      router.replace('/auth/login');
+    } catch {
+      showAlert({
+        title: 'Connection Failed',
+        message: 'Could not reach the server.',
+      });
+    } finally {
+      setIsValidating(false);
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      style={styles.container}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>Welcome to Papra</Text>
+          <Text style={styles.subtitle}>Choose your server</Text>
+        </View>
+
+        <View style={styles.options}>
+          <TouchableOpacity
+            style={[
+              styles.optionCard,
+              selectedOption === 'managed' && styles.optionCardSelected,
+            ]}
+            onPress={() => setSelectedOption('managed')}
+            disabled={isValidating}
+          >
+            <Text style={styles.optionTitle}>Managed Cloud</Text>
+            <Text style={styles.optionDescription}>
+              Use the official Papra cloud service
+            </Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            style={[
+              styles.optionCard,
+              selectedOption === 'self-hosted' && styles.optionCardSelected,
+            ]}
+            onPress={() => setSelectedOption('self-hosted')}
+            disabled={isValidating}
+          >
+            <Text style={styles.optionTitle}>Self-Hosted</Text>
+            <Text style={styles.optionDescription}>
+              Connect to your own Papra server
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {selectedOption === 'managed' && (
+          <TouchableOpacity
+            style={[styles.button, isValidating && styles.buttonDisabled]}
+            onPress={async () => handleValidateCustomUrl({ url: MANAGED_SERVER_URL })}
+            disabled={isValidating}
+          >
+            {isValidating
+              ? (
+                  <ActivityIndicator color="#fff" />
+                )
+              : (
+                  <Text style={styles.buttonText}>Continue with Managed</Text>
+                )}
+          </TouchableOpacity>
+        )}
+
+        {selectedOption === 'self-hosted' && (
+          <View style={styles.customUrlContainer}>
+            <Text style={styles.inputLabel}>Server URL</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="https://your-server.com"
+              placeholderTextColor={themeColors.mutedForeground}
+              value={customUrl}
+              onChangeText={setCustomUrl}
+              autoCapitalize="none"
+              autoCorrect={false}
+              keyboardType="url"
+              editable={!isValidating}
+            />
+            <TouchableOpacity
+              style={[styles.button, isValidating && styles.buttonDisabled]}
+              onPress={async () => handleValidateCustomUrl({ url: customUrl })}
+              disabled={isValidating}
+            >
+              {isValidating
+                ? (
+                    <ActivityIndicator color="#fff" />
+                  )
+                : (
+                    <Text style={styles.buttonText}>Connect</Text>
+                  )}
+            </TouchableOpacity>
+          </View>
+        )}
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 24,
+      justifyContent: 'center',
+    },
+    header: {
+      marginBottom: 40,
+      alignItems: 'center',
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: themeColors.mutedForeground,
+    },
+    options: {
+      gap: 16,
+      marginBottom: 24,
+    },
+    optionCard: {
+      paddingHorizontal: 20,
+      paddingVertical: 14,
+      borderRadius: 12,
+      borderWidth: 2,
+      borderColor: themeColors.border,
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    optionCardSelected: {
+      borderColor: themeColors.primary,
+    },
+    optionTitle: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      margin: 0,
+    },
+    optionDescription: {
+      fontSize: 14,
+      color: themeColors.mutedForeground,
+    },
+    customUrlContainer: {
+      gap: 12,
+    },
+    inputLabel: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      marginBottom: 4,
+    },
+    input: {
+      height: 50,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      fontSize: 16,
+      color: themeColors.foreground,
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    button: {
+      height: 50,
+      backgroundColor: themeColors.primary,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    buttonDisabled: {
+      opacity: 0.5,
+    },
+    buttonText: {
+      color: themeColors.primaryForeground,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+  });
+}

apps/mobile/src/modules/documents-actions/components/document-action-sheet.tsx

@@ -0,0 +1,335 @@
+import type { CoerceDates } from '@/modules/api/api.models';
+import type { Document } from '@/modules/documents/documents.types';
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { router } from 'expo-router';
+import * as Sharing from 'expo-sharing';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+import { useAuthClient } from '@/modules/api/providers/api.provider';
+import { configLocalStorage } from '@/modules/config/config.local-storage';
+import { fetchDocumentFile } from '@/modules/documents/documents.services';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+type DocumentActionSheetProps = {
+  visible: boolean;
+  document: CoerceDates<Document> | undefined;
+  onClose: () => void;
+};
+
+export function DocumentActionSheet({
+  visible,
+  document,
+  onClose,
+}: DocumentActionSheetProps) {
+  const themeColors = useThemeColor();
+  const styles = createStyles({ themeColors });
+  const { showAlert } = useAlert();
+  const authClient = useAuthClient();
+
+  if (document === undefined) {
+    return null;
+  }
+
+  // Check if document can be viewed in DocumentViewerScreen
+  // Supported types: images (image/*) and PDFs (application/pdf)
+  const isViewable
+    = document.mimeType.startsWith('image/')
+      || document.mimeType.startsWith('application/pdf');
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes < 1024) {
+      return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const formatDate = (dateString: string): string => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  const handleView = async () => {
+    onClose();
+    router.push({
+      pathname: '/(app)/document/view',
+      params: {
+        documentId: document.id,
+        organizationId: document.organizationId,
+      },
+    });
+  };
+
+  const handleDownloadAndShare = async () => {
+    const baseUrl = await configLocalStorage.getApiServerBaseUrl();
+
+    if (baseUrl == null) {
+      showAlert({
+        title: 'Error',
+        message: 'Base URL not found',
+      });
+      return;
+    }
+
+    const canShare = await Sharing.isAvailableAsync();
+    if (!canShare) {
+      showAlert({
+        title: 'Sharing Failed',
+        message: 'Sharing is not available on this device. Please share the document manually.',
+      });
+      return;
+    }
+
+    try {
+      const fileUri = await fetchDocumentFile({
+        document,
+        organizationId: document.organizationId,
+        baseUrl,
+        authClient,
+      });
+
+      await Sharing.shareAsync(fileUri);
+    } catch (error) {
+      console.error('Error downloading document file:', error);
+      showAlert({
+        title: 'Error',
+        message: 'Failed to download document file',
+      });
+    }
+  };
+
+  // Extract MIME type subtype, fallback to full MIME type if subtype is missing
+  const mimeParts = document.mimeType.split('/');
+  const mimeSubtype = mimeParts[1];
+  const displayMimeType = mimeSubtype != null && mimeSubtype !== '' ? mimeSubtype : document.mimeType;
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <TouchableWithoutFeedback onPress={onClose}>
+        <View style={styles.overlay}>
+          <TouchableWithoutFeedback>
+            <View style={styles.sheet}>
+              {/* Handle bar */}
+              <View style={styles.handleBar} />
+
+              {/* Document info */}
+              <View style={styles.documentInfo}>
+                <Text style={styles.documentName} numberOfLines={2}>
+                  {document.name}
+                </Text>
+
+                {/* Document details */}
+                <View style={styles.detailsContainer}>
+                  <View style={styles.detailRow}>
+                    <MaterialCommunityIcons
+                      name="file"
+                      size={14}
+                      color={themeColors.mutedForeground}
+                      style={styles.detailIcon}
+                    />
+                    <Text style={styles.detailText}>{formatFileSize(document.originalSize)}</Text>
+                  </View>
+                  <View style={styles.detailRow}>
+                    <MaterialCommunityIcons
+                      name="calendar"
+                      size={14}
+                      color={themeColors.mutedForeground}
+                      style={styles.detailIcon}
+                    />
+                    <Text style={styles.detailText}>{formatDate(document.createdAt.toISOString())}</Text>
+                  </View>
+                  <View style={styles.detailRow}>
+                    <MaterialCommunityIcons
+                      name="file-document-outline"
+                      size={14}
+                      color={themeColors.mutedForeground}
+                      style={styles.detailIcon}
+                    />
+                    <Text style={styles.detailText} numberOfLines={1}>
+                      {displayMimeType}
+                    </Text>
+                  </View>
+                </View>
+              </View>
+
+              {/* Action buttons */}
+              <View style={styles.actions}>
+                {isViewable && (
+                  <TouchableOpacity
+                    style={styles.actionButton}
+                    onPress={async () => {
+                      onClose();
+                      await handleView();
+                    }}
+                    activeOpacity={0.7}
+                  >
+                    <View style={[styles.actionIcon, styles.viewIcon]}>
+                      <MaterialCommunityIcons
+                        name="eye"
+                        size={20}
+                        color={themeColors.primary}
+                      />
+                    </View>
+                    <Text style={styles.actionText}>View</Text>
+                  </TouchableOpacity>
+                )}
+
+                <TouchableOpacity
+                  style={styles.actionButton}
+                  onPress={async () => {
+                    onClose();
+                    await handleDownloadAndShare();
+                  }}
+                  activeOpacity={0.7}
+                >
+                  <View style={[styles.actionIcon, styles.downloadIcon]}>
+                    <MaterialCommunityIcons
+                      name="download"
+                      size={20}
+                      color={themeColors.primary}
+                    />
+                  </View>
+                  <Text style={styles.actionText}>Share</Text>
+                </TouchableOpacity>
+              </View>
+
+              {/* Cancel button */}
+              <TouchableOpacity
+                style={styles.cancelButton}
+                onPress={onClose}
+                activeOpacity={0.7}
+              >
+                <Text style={styles.cancelButtonText}>Cancel</Text>
+              </TouchableOpacity>
+            </View>
+          </TouchableWithoutFeedback>
+        </View>
+      </TouchableWithoutFeedback>
+    </Modal>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    overlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end',
+    },
+    sheet: {
+      backgroundColor: themeColors.secondaryBackground,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      paddingBottom: 34, // Safe area for bottom
+      paddingTop: 16,
+    },
+    handleBar: {
+      width: 40,
+      height: 4,
+      backgroundColor: themeColors.border,
+      borderRadius: 2,
+      alignSelf: 'center',
+      marginBottom: 16,
+    },
+    documentInfo: {
+      paddingHorizontal: 24,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    documentName: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      textAlign: 'center',
+      marginBottom: 12,
+    },
+    detailsContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+      gap: 16,
+      marginTop: 8,
+    },
+    detailRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 6,
+    },
+    detailIcon: {
+      marginRight: 2,
+    },
+    detailText: {
+      fontSize: 12,
+      color: themeColors.mutedForeground,
+    },
+    actions: {
+      flexDirection: 'row',
+      paddingHorizontal: 24,
+      paddingVertical: 16,
+      gap: 16,
+    },
+    actionButton: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 12,
+      backgroundColor: themeColors.secondaryBackground,
+      borderRadius: 12,
+    },
+    actionIcon: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 8,
+    },
+    viewIcon: {
+      backgroundColor: `${themeColors.primary}15`,
+    },
+    downloadIcon: {
+      backgroundColor: `${themeColors.primary}15`,
+    },
+    actionText: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: themeColors.foreground,
+    },
+    cancelButton: {
+      marginHorizontal: 24,
+      marginTop: 12,
+      paddingVertical: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: 'transparent',
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 12,
+    },
+    cancelButtonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.foreground,
+    },
+  });
+}

apps/mobile/src/modules/documents-actions/screens/document-view.screen.tsx

@@ -0,0 +1,257 @@
+import type { CoerceDates } from '@/modules/api/api.models';
+import type { Document } from '@/modules/documents/documents.types';
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { useQuery } from '@tanstack/react-query';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import React from 'react';
+import {
+  ActivityIndicator,
+  Image,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Pdf from 'react-native-pdf';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useApiClient, useAuthClient } from '@/modules/api/providers/api.provider';
+import { configLocalStorage } from '@/modules/config/config.local-storage';
+import { fetchDocument, fetchDocumentFile } from '@/modules/documents/documents.services';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+type DocumentFile = {
+  uri: string;
+  doc: CoerceDates<Document>;
+};
+
+export default function DocumentViewScreen() {
+  const router = useRouter();
+  const params = useLocalSearchParams<{ documentId: string; organizationId: string }>();
+  const themeColors = useThemeColor();
+  const styles = createStyles({ themeColors });
+  const { showAlert } = useAlert();
+  const apiClient = useApiClient();
+  const authClient = useAuthClient();
+  const { documentId, organizationId } = params;
+
+  const documentQuery = useQuery({
+    queryKey: ['organizations', organizationId, 'documents', documentId],
+    queryFn: async () => {
+      if (organizationId == null || documentId == null) {
+        throw new Error('Organization ID and Document ID are required');
+      }
+      return fetchDocument({ organizationId, documentId, apiClient });
+    },
+    enabled: organizationId != null && documentId != null,
+  });
+
+  const documentFileQuery = useQuery({
+    queryKey: ['organizations', organizationId, 'documents', documentId, 'file'],
+    queryFn: async () => {
+      if (documentQuery.data == null) {
+        throw new Error('Document not loaded');
+      }
+
+      const baseUrl = await configLocalStorage.getApiServerBaseUrl();
+      if (baseUrl == null) {
+        throw new Error('Base URL not found');
+      }
+
+      const fileUri = await fetchDocumentFile({
+        document: documentQuery.data.document,
+        organizationId,
+        baseUrl,
+        authClient,
+      });
+
+      return {
+        uri: fileUri,
+        doc: documentQuery.data.document,
+      } as DocumentFile;
+    },
+    enabled: documentQuery.isSuccess && documentQuery.data != null,
+  });
+
+  const renderHeader = (documentName: string) => {
+    return (
+      <View style={styles.header}>
+        <TouchableOpacity
+          style={styles.backButton}
+          onPress={() => router.back()}
+        >
+          <MaterialCommunityIcons
+            name="close"
+            size={24}
+            color={themeColors.foreground}
+          />
+        </TouchableOpacity>
+        <Text style={styles.headerTitle} numberOfLines={1}>
+          {documentName}
+        </Text>
+        <View style={styles.headerSpacer} />
+      </View>
+    );
+  };
+
+  const renderDocumentFile = (file: DocumentFile) => {
+    if (file.doc.mimeType.startsWith('image/')) {
+      return (
+        <Image
+          source={{ uri: file.uri }}
+          style={styles.pdfViewer}
+        />
+      );
+    }
+    if (file.doc.mimeType.startsWith('application/pdf')) {
+      return (
+        <Pdf
+          source={{ uri: file.uri, cache: true }}
+          style={styles.pdfViewer}
+          onError={(error) => {
+            console.error('PDF error:', error);
+            showAlert({
+              title: 'Error',
+              message: 'Failed to load PDF',
+            });
+          }}
+          enablePaging={true}
+          horizontal={false}
+          enableAnnotationRendering={true}
+          fitPolicy={0}
+          spacing={10}
+        />
+      );
+    }
+    return <View style={styles.pdfViewer} />;
+  };
+
+  const isLoading = documentQuery.isLoading || documentFileQuery.isLoading;
+  const error = documentQuery.error ?? documentFileQuery.error;
+  const documentFile = documentFileQuery.data;
+  const documentName = documentFile?.doc.name ?? 'Document';
+
+  return (
+    <SafeAreaView style={styles.container}>
+      {renderHeader(documentName)}
+      {isLoading
+        ? (
+            <View style={styles.loadingContainer}>
+              <ActivityIndicator size="large" color={themeColors.primary} />
+              <Text style={styles.loadingText}>Loading document...</Text>
+            </View>
+          )
+        : error != null
+          ? (
+              <View style={styles.errorContainer}>
+                <MaterialCommunityIcons
+                  name="file-pdf-box"
+                  size={64}
+                  color={themeColors.mutedForeground}
+                />
+                <Text style={styles.errorText}>Failed to load document</Text>
+                <TouchableOpacity
+                  style={styles.errorButton}
+                  onPress={() => {
+                    void documentQuery.refetch();
+                  }}
+                >
+                  <Text style={styles.errorButtonText}>Retry</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.errorButton}
+                  onPress={() => router.back()}
+                >
+                  <Text style={styles.errorButtonText}>Go Back</Text>
+                </TouchableOpacity>
+              </View>
+            )
+          : documentFile != null
+            ? (
+                <View style={styles.pdfContainer}>
+                  {renderDocumentFile(documentFile)}
+                </View>
+              )
+            : null}
+    </SafeAreaView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    header: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 24,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    backButton: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      backgroundColor: themeColors.secondaryBackground,
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+    },
+    headerTitle: {
+      flex: 1,
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+      marginHorizontal: 16,
+    },
+    headerSpacer: {
+      width: 40,
+    },
+    pdfContainer: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    pdfViewer: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingText: {
+      marginTop: 16,
+      fontSize: 16,
+      color: themeColors.mutedForeground,
+    },
+    errorContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 32,
+    },
+    errorText: {
+      fontSize: 18,
+      color: themeColors.foreground,
+      marginTop: 16,
+      marginBottom: 24,
+    },
+    errorButton: {
+      paddingHorizontal: 24,
+      paddingVertical: 16,
+      backgroundColor: themeColors.secondaryBackground,
+      borderRadius: 12,
+      marginTop: 16,
+    },
+    errorButtonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.primary,
+    },
+  });
+}

apps/mobile/src/modules/documents/components/import-drawer.tsx

@@ -0,0 +1,233 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import * as DocumentPicker from 'expo-document-picker';
+import { File } from 'expo-file-system';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useApiClient } from '@/modules/api/providers/api.provider';
+import { queryClient } from '@/modules/api/providers/query.provider';
+import { useOrganizations } from '@/modules/organizations/organizations.provider';
+import { Icon } from '@/modules/ui/components/icon';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { uploadDocument } from '../documents.services';
+
+type ImportDrawerProps = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+export function ImportDrawer({ visible, onClose }: ImportDrawerProps) {
+  const themeColors = useThemeColor();
+  const { showAlert } = useAlert();
+  const styles = createStyles({ themeColors });
+  const apiClient = useApiClient();
+  const { currentOrganizationId } = useOrganizations();
+
+  const handleImportFromFiles = async () => {
+    onClose();
+
+    try {
+      if (currentOrganizationId == null) {
+        showAlert({
+          title: 'No Organization Selected',
+          message: 'Please select an organization before importing documents.',
+        });
+        return;
+      }
+
+      const result = await DocumentPicker.getDocumentAsync({
+        type: [
+          'application/pdf',
+          'image/*',
+          'application/msword',
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'application/vnd.ms-excel',
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          'text/plain',
+        ],
+        copyToCacheDirectory: true,
+        multiple: false,
+      });
+
+      if (result.canceled) {
+        return;
+      }
+
+      const [pickerFile] = result.assets;
+      if (!pickerFile) {
+        return;
+      }
+
+      const file = new File(pickerFile.uri);
+
+      await uploadDocument({ file, apiClient, organizationId: currentOrganizationId });
+      await queryClient.invalidateQueries({ queryKey: ['organizations', currentOrganizationId, 'documents'] });
+
+      showAlert({
+        title: 'Upload Successful',
+        message: `Successfully uploaded: ${file.name}`,
+      });
+    } catch (error) {
+      showAlert({
+        title: 'Error',
+        message: error instanceof Error ? error.message : 'Failed to pick document',
+      });
+    }
+  };
+
+  // const handleScanDocument = () => {
+  //   onClose();
+  //   showAlert({
+  //     title: 'Coming Soon',
+  //     message: 'Camera document scanning will be available soon!',
+  //   });
+  // };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity
+        style={styles.backdrop}
+        activeOpacity={1}
+        onPress={onClose}
+      >
+        <View style={styles.drawer}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Import Document</Text>
+          </View>
+
+          <View style={styles.optionsContainer}>
+            <TouchableOpacity
+              style={styles.optionItem}
+              onPress={handleImportFromFiles}
+            >
+              <View style={styles.optionIconContainer}>
+                <Icon name="file-plus" size={24} style={styles.optionIcon} />
+              </View>
+              <View style={styles.optionTextContainer}>
+                <Text style={styles.optionTitle}>Import from Files</Text>
+                <Text style={styles.optionDescription}>
+                  Choose a document from your device
+                </Text>
+              </View>
+              <Icon name="chevron-right" size={18} style={styles.chevronIcon} />
+            </TouchableOpacity>
+
+            {/* <TouchableOpacity
+              style={styles.optionItem}
+              onPress={handleScanDocument}
+            >
+              <View style={styles.optionIconContainer}>
+                <Icon name="camera" size={24} style={styles.optionIcon} />
+              </View>
+              <View style={styles.optionTextContainer}>
+                <Text style={styles.optionTitle}>Scan Document</Text>
+                <Text style={styles.optionDescription}>
+                  Use camera to scan (Coming soon)
+                </Text>
+              </View>
+              <Icon name="chevron-right" size={18} style={styles.chevronIcon} />
+            </TouchableOpacity> */}
+          </View>
+
+          <TouchableOpacity
+            style={styles.cancelButton}
+            onPress={onClose}
+          >
+            <Text style={styles.cancelButtonText}>Cancel</Text>
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end',
+    },
+    drawer: {
+      backgroundColor: themeColors.background,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      paddingBottom: 20,
+    },
+    header: {
+      padding: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+    },
+    optionsContainer: {
+      paddingVertical: 8,
+    },
+    optionItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    optionIconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: themeColors.secondaryBackground,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 16,
+    },
+    optionIcon: {
+      fontSize: 24,
+      color: themeColors.primary,
+    },
+    optionTextContainer: {
+      flex: 1,
+    },
+    optionTitle: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      marginBottom: 4,
+    },
+    optionDescription: {
+      fontSize: 14,
+      color: themeColors.mutedForeground,
+    },
+    chevronIcon: {
+      fontSize: 18,
+      color: themeColors.mutedForeground,
+    },
+    cancelButton: {
+      margin: 20,
+      marginTop: 12,
+      paddingVertical: 14,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      alignItems: 'center',
+    },
+    cancelButtonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.foreground,
+    },
+  });
+}

apps/mobile/src/modules/documents/components/import-tab-button.tsx

@@ -0,0 +1,60 @@
+import type { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import * as Haptics from 'expo-haptics';
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ImportDrawer } from '@/modules/documents/components/import-drawer';
+import { Icon } from '@/modules/ui/components/icon';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    width: 56,
+    height: 56,
+    borderRadius: 28,
+    justifyContent: 'center',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+});
+
+export function ImportTabButton(props: BottomTabBarButtonProps) {
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
+  const themeColors = useThemeColor();
+  const insets = useSafeAreaInsets();
+
+  const handlePress = () => {
+    void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    setIsDrawerVisible(true);
+  };
+
+  return (
+    <>
+      <Pressable
+        onPress={handlePress}
+        style={[styles.container, props.style]}
+      >
+        <View style={[styles.button, { backgroundColor: themeColors.primary, marginBottom: 20 + insets.bottom }]}>
+          <Icon name="plus" size={32} color={themeColors.primaryForeground} style={{ height: 32 }} />
+        </View>
+      </Pressable>
+
+      <ImportDrawer
+        visible={isDrawerVisible}
+        onClose={() => setIsDrawerVisible(false)}
+      />
+    </>
+  );
+}

apps/mobile/src/modules/documents/documents.services.ts

@@ -0,0 +1,127 @@
+import type { ApiClient } from '../api/api.client';
+import type { CoerceDates } from '../api/api.models';
+import type { AuthClient } from '../auth/auth.client';
+import type { Document } from './documents.types';
+import * as FileSystem from 'expo-file-system/legacy';
+import { coerceDates } from '../api/api.models';
+
+export function getFormData(pojo: Record<string, string | Blob>): FormData {
+  const formData = new FormData();
+  Object.entries(pojo).forEach(([key, value]) => formData.append(key, value));
+  return formData;
+}
+
+export async function uploadDocument({
+  file,
+  organizationId,
+
+  apiClient,
+}: {
+  file: Blob;
+  organizationId: string;
+
+  apiClient: ApiClient;
+}) {
+  const { document } = await apiClient<{ document: Document }>({
+    method: 'POST',
+    path: `/api/organizations/${organizationId}/documents`,
+    body: getFormData({ file }),
+  });
+
+  return {
+    document: coerceDates(document),
+  };
+}
+
+export async function fetchOrganizationDocuments({
+  organizationId,
+  pageIndex,
+  pageSize,
+  filters,
+
+  apiClient,
+}: {
+  organizationId: string;
+  pageIndex: number;
+  pageSize: number;
+  filters?: {
+    tags?: string[];
+  };
+
+  apiClient: ApiClient;
+}) {
+  const {
+    documents: apiDocuments,
+    documentsCount,
+  } = await apiClient<{ documents: Document[]; documentsCount: number }>({
+    method: 'GET',
+    path: `/api/organizations/${organizationId}/documents`,
+    query: {
+      pageIndex,
+      pageSize,
+      ...filters,
+    },
+  });
+
+  try {
+    const documents = apiDocuments.map(coerceDates);
+
+    return {
+      documentsCount,
+      documents,
+    };
+  } catch (error) {
+    console.error('Error fetching documents:', error);
+    throw error;
+  }
+}
+
+export async function fetchDocument({
+  organizationId,
+  documentId,
+  apiClient,
+}: {
+  organizationId: string;
+  documentId: string;
+  apiClient: ApiClient;
+}) {
+  const { document } = await apiClient<{ document: Document }>({
+    method: 'GET',
+    path: `/api/organizations/${organizationId}/documents/${documentId}`,
+  });
+  return {
+    document: coerceDates(document),
+  };
+}
+
+export async function fetchDocumentFile({
+  document,
+  organizationId,
+  baseUrl,
+  authClient,
+}: {
+  document: CoerceDates<Document>;
+  organizationId: string;
+  baseUrl: string;
+  authClient: AuthClient;
+}) {
+  const cookies = authClient.getCookie();
+  const uri = `${baseUrl}/api/organizations/${organizationId}/documents/${document.id}/file`;
+  const headers = {
+    'Cookie': cookies,
+    'Content-Type': 'application/json',
+  };
+  // Use cacheDirectory for better app compatibility
+  const fileUri = `${FileSystem.cacheDirectory}${document.name}`;
+
+  // Download the file with authentication headers
+  const downloadResult = await FileSystem.downloadAsync(uri, fileUri, {
+    headers,
+  });
+
+  if (downloadResult.status === 200) {
+    return downloadResult.uri;
+  } else {
+    throw new Error(`Download failed with status: ${downloadResult.status}`);
+  }
+}

apps/mobile/src/modules/documents/documents.types.ts

@@ -0,0 +1,14 @@
+export type Document = {
+  id: string;
+  name: string;
+  mimeType: string;
+  originalSize: number;
+  organizationId: string;
+  createdAt: string;
+  updatedAt: string;
+  tags: {
+    id: string;
+    name: string;
+    color: string;
+  }[];
+};

apps/mobile/src/modules/documents/screens/documents-list.screen.tsx

@@ -0,0 +1,253 @@
+import type { Document } from '../documents.types';
+import type { CoerceDates } from '@/modules/api/api.models';
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useApiClient } from '@/modules/api/providers/api.provider';
+import { DocumentActionSheet } from '@/modules/documents-actions/components/document-action-sheet';
+import { OrganizationPickerButton } from '@/modules/organizations/components/organization-picker-button';
+import { OrganizationPickerDrawer } from '@/modules/organizations/components/organization-picker-drawer';
+import { useOrganizations } from '@/modules/organizations/organizations.provider';
+import { Icon } from '@/modules/ui/components/icon';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { fetchOrganizationDocuments } from '../documents.services';
+
+export function DocumentsListScreen() {
+  const themeColors = useThemeColor();
+  const apiClient = useApiClient();
+  const { currentOrganizationId, isLoading: isLoadingOrganizations } = useOrganizations();
+  const [onDocumentActionSheet, setOnDocumentActionSheet] = useState<CoerceDates<Document> | undefined>(undefined);
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
+  const pagination = { pageIndex: 0, pageSize: 20 };
+
+  const documentsQuery = useQuery({
+    queryKey: ['organizations', currentOrganizationId, 'documents', pagination],
+    queryFn: async () => {
+      if (currentOrganizationId == null) {
+        return { documents: [], documentsCount: 0 };
+      }
+
+      return fetchOrganizationDocuments({
+        organizationId: currentOrganizationId,
+        ...pagination,
+        apiClient,
+      });
+    },
+    enabled: currentOrganizationId !== null && currentOrganizationId !== '',
+  });
+
+  const styles = createStyles({ themeColors });
+
+  const formatDate = (date: Date) => {
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    }).format(date);
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) {
+      return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+
+  const onRefresh = async () => {
+    await documentsQuery.refetch();
+  };
+
+  if (isLoadingOrganizations) {
+    return (
+      <View style={[styles.container, styles.centerContent]}>
+        <ActivityIndicator size="large" color={themeColors.primary} />
+      </View>
+    );
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      {onDocumentActionSheet && (
+        <DocumentActionSheet
+          visible={true}
+          document={onDocumentActionSheet}
+          onClose={() => setOnDocumentActionSheet(undefined)}
+        />
+      )}
+      <View style={styles.header}>
+        <Text style={styles.title}>Documents</Text>
+        <OrganizationPickerButton onPress={() => setIsDrawerVisible(true)} />
+      </View>
+
+      {documentsQuery.isLoading
+        ? (
+            <View style={styles.centerContent}>
+              <ActivityIndicator size="large" color={themeColors.primary} />
+            </View>
+          )
+        : (
+            <FlatList
+              data={documentsQuery.data?.documents ?? []}
+              keyExtractor={item => item.id}
+              renderItem={({ item }) => (
+                <TouchableOpacity onPress={() => setOnDocumentActionSheet(item)}>
+                  <View style={styles.documentCard}>
+                    <View style={{ backgroundColor: themeColors.muted, padding: 10, borderRadius: 6, marginRight: 12 }}>
+                      <Icon name="file-text" size={24} color={themeColors.primary} />
+                    </View>
+                    <View>
+                      <Text style={styles.documentTitle} numberOfLines={2}>
+                        {item.name}
+                      </Text>
+                      <View style={styles.documentMeta}>
+                        <Text style={styles.metaText}>{formatFileSize(item.originalSize)}</Text>
+                        <Text style={styles.metaSplitter}>-</Text>
+                        <Text style={styles.metaText}>{formatDate(item.createdAt)}</Text>
+                        {item.tags.length > 0 && (
+                          <View style={styles.tagsContainer}>
+                            {item.tags.map(tag => (
+                              <View
+                                key={tag.id}
+                                style={[
+                                  styles.tag,
+                                  { backgroundColor: `${tag.color}10` },
+                                ]}
+                              >
+                                <Text style={[styles.tagText, { color: tag.color }]}>
+                                  {tag.name}
+                                </Text>
+                              </View>
+                            ))}
+                          </View>
+                        )}
+                      </View>
+                    </View>
+                  </View>
+                </TouchableOpacity>
+              )}
+              ListEmptyComponent={(
+                <View style={styles.emptyContainer}>
+                  <Text style={styles.emptyText}>No documents yet</Text>
+                  <Text style={styles.emptySubtext}>
+                    Upload your first document to get started
+                  </Text>
+                </View>
+              )}
+              contentContainerStyle={documentsQuery.data?.documents.length === 0 ? styles.emptyList : undefined}
+              refreshControl={(
+                <RefreshControl
+                  refreshing={documentsQuery.isRefetching}
+                  onRefresh={onRefresh}
+                />
+              )}
+            />
+          )}
+
+      <OrganizationPickerDrawer
+        visible={isDrawerVisible}
+        onClose={() => setIsDrawerVisible(false)}
+      />
+    </SafeAreaView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    centerContent: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    header: {
+      padding: 16,
+      paddingTop: 20,
+      gap: 12,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+    },
+    emptyList: {
+      flex: 1,
+    },
+    emptyContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 60,
+    },
+    emptyText: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      marginBottom: 8,
+    },
+    emptySubtext: {
+      fontSize: 14,
+      color: themeColors.mutedForeground,
+    },
+    documentCard: {
+      padding: 16,
+      borderBottomWidth: 1,
+      borderColor: themeColors.border,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    documentTitle: {
+      flex: 1,
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      marginRight: 12,
+    },
+    documentMeta: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      marginTop: 4,
+    },
+    metaText: {
+      fontSize: 13,
+      color: themeColors.mutedForeground,
+    },
+    metaSplitter: {
+      fontSize: 13,
+      color: themeColors.mutedForeground,
+    },
+    tagsContainer: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+    },
+    tag: {
+      paddingHorizontal: 10,
+      paddingVertical: 6,
+      borderRadius: 6,
+    },
+    tagText: {
+      fontSize: 12,
+      fontWeight: '500',
+      lineHeight: 12,
+    },
+  });
+}

apps/mobile/src/modules/lib/local-storage/local-storage.constants.ts

@@ -0,0 +1 @@
+export const STORAGE_KEY_BASE_PREFIX = '@papra';

apps/mobile/src/modules/lib/local-storage/local-storage.models.ts

@@ -0,0 +1,5 @@
+import { STORAGE_KEY_BASE_PREFIX } from './local-storage.constants';
+
+export function buildStorageKey(sections: string[]): string {
+  return [STORAGE_KEY_BASE_PREFIX, ...sections].join(':');
+}

apps/mobile/src/modules/lib/local-storage/local-storage.services.ts

@@ -0,0 +1,8 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const storage = {
+  getItem: async (key: string) => AsyncStorage.getItem(key),
+  setItem: async (key: string, value: string) => AsyncStorage.setItem(key, value),
+  removeItem: async (key: string) => AsyncStorage.removeItem(key),
+  clear: async () => AsyncStorage.clear(),
+};

apps/mobile/src/modules/organizations/components/organization-picker-button.tsx

@@ -0,0 +1,62 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { Icon } from '@/modules/ui/components/icon';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { useOrganizations } from '../organizations.provider';
+
+type OrganizationPickerButtonProps = {
+  onPress: () => void;
+};
+
+export function OrganizationPickerButton({ onPress }: OrganizationPickerButtonProps) {
+  const themeColors = useThemeColor();
+  const { organizations, currentOrganizationId } = useOrganizations();
+
+  const styles = createStyles({ themeColors });
+
+  const currentOrganization = organizations.find(org => org.id === currentOrganizationId);
+
+  return (
+    <TouchableOpacity style={styles.button} onPress={onPress}>
+      <View style={styles.content}>
+        <Text style={styles.orgName} numberOfLines={1}>
+          {currentOrganization?.name ?? 'Select Organization'}
+        </Text>
+      </View>
+      <Icon name="chevron-down" style={styles.caret} size={20} />
+    </TouchableOpacity>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    button: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: themeColors.secondaryBackground,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+    },
+    content: {
+      flex: 1,
+      marginRight: 8,
+    },
+    label: {
+      fontSize: 12,
+      color: themeColors.mutedForeground,
+      marginBottom: 2,
+    },
+    orgName: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.foreground,
+    },
+    caret: {
+      color: themeColors.mutedForeground,
+    },
+  });
+}

apps/mobile/src/modules/organizations/components/organization-picker-drawer.tsx

@@ -0,0 +1,175 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useRouter } from 'expo-router';
+import {
+  ActivityIndicator,
+  FlatList,
+  Modal,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { Icon } from '@/modules/ui/components/icon';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { useOrganizations } from '../organizations.provider';
+
+type OrganizationPickerDrawerProps = {
+  visible: boolean;
+  onClose: () => void;
+};
+
+export function OrganizationPickerDrawer({ visible, onClose }: OrganizationPickerDrawerProps) {
+  const themeColors = useThemeColor();
+  const router = useRouter();
+  const { organizations, currentOrganizationId, setCurrentOrganizationId, isLoading } = useOrganizations();
+
+  const styles = createStyles({ themeColors });
+
+  const handleSelectOrganization = async (organizationId: string) => {
+    await setCurrentOrganizationId(organizationId);
+    onClose();
+  };
+
+  const handleCreateOrganization = () => {
+    onClose();
+    router.push('/(app)/(with-organizations)/organizations/create');
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity
+        style={styles.backdrop}
+        activeOpacity={1}
+        onPress={onClose}
+      >
+        <View style={styles.drawer}>
+          <View style={styles.header}>
+            <Text style={styles.title}>Select Organization</Text>
+          </View>
+
+          {isLoading
+            ? (
+                <View style={styles.loadingContainer}>
+                  <ActivityIndicator size="large" color={themeColors.primary} />
+                </View>
+              )
+            : (
+                <FlatList
+                  data={organizations}
+                  keyExtractor={item => item.id}
+                  renderItem={({ item }) => (
+                    <TouchableOpacity
+                      style={[
+                        styles.orgItem,
+                        item.id === currentOrganizationId && styles.orgItemSelected,
+                      ]}
+                      onPress={() => {
+                        void handleSelectOrganization(item.id);
+                      }}
+                    >
+                      <Text
+                        style={[
+                          styles.orgName,
+                          item.id === currentOrganizationId && styles.orgNameSelected,
+                        ]}
+                      >
+                        {item.name}
+                      </Text>
+                      {item.id === currentOrganizationId && (
+                        <Icon name="check" style={styles.checkmark} />
+                      )}
+                    </TouchableOpacity>
+                  )}
+                  contentContainerStyle={styles.listContent}
+                />
+              )}
+
+          <TouchableOpacity
+            style={styles.createButton}
+            onPress={handleCreateOrganization}
+          >
+            <Text style={styles.createButtonText}>+ Create New Organization</Text>
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    backdrop: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'flex-end',
+    },
+    drawer: {
+      backgroundColor: themeColors.background,
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      maxHeight: '70%',
+      paddingBottom: 20,
+    },
+    header: {
+      padding: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    title: {
+      fontSize: 20,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+    },
+    loadingContainer: {
+      padding: 40,
+      alignItems: 'center',
+    },
+    listContent: {
+      paddingVertical: 8,
+    },
+    orgItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 16,
+      paddingHorizontal: 20,
+      borderBottomWidth: 1,
+      borderBottomColor: themeColors.border,
+    },
+    orgItemSelected: {
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    orgName: {
+      fontSize: 16,
+      color: themeColors.foreground,
+    },
+    orgNameSelected: {
+      fontWeight: '600',
+      color: themeColors.primary,
+    },
+    checkmark: {
+      fontSize: 18,
+      color: themeColors.primary,
+      fontWeight: 'bold',
+    },
+    createButton: {
+      margin: 20,
+      marginTop: 0,
+      paddingVertical: 14,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      alignItems: 'center',
+    },
+    createButtonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.primary,
+    },
+  });
+}

apps/mobile/src/modules/organizations/organizations.local-storage.ts

@@ -0,0 +1,18 @@
+import { STORAGE_KEY_BASE_PREFIX } from '../lib/local-storage/local-storage.constants';
+import { storage } from '../lib/local-storage/local-storage.services';
+
+const CURRENT_ORGANIZATION_ID_KEY = `${STORAGE_KEY_BASE_PREFIX}:current-organization-id`;
+
+export const organizationsLocalStorage = {
+  getCurrentOrganizationId: async (): Promise<string | null> => {
+    return storage.getItem(CURRENT_ORGANIZATION_ID_KEY);
+  },
+
+  setCurrentOrganizationId: async (organizationId: string): Promise<void> => {
+    await storage.setItem(CURRENT_ORGANIZATION_ID_KEY, organizationId);
+  },
+
+  clearCurrentOrganizationId: async (): Promise<void> => {
+    await storage.removeItem(CURRENT_ORGANIZATION_ID_KEY);
+  },
+};

apps/mobile/src/modules/organizations/organizations.provider.tsx

@@ -0,0 +1,102 @@
+import type { ReactNode } from 'react';
+import type { Organization } from '@/modules/organizations/organizations.types';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useApiClient } from '../api/providers/api.provider';
+import { organizationsLocalStorage } from './organizations.local-storage';
+import { fetchOrganizations } from './organizations.services';
+
+type OrganizationsContextValue = {
+  currentOrganizationId: string | null;
+  setCurrentOrganizationId: (organizationId: string) => Promise<void>;
+  organizations: Organization[];
+  isLoading: boolean;
+  refetch: () => Promise<void>;
+};
+
+const OrganizationsContext = createContext<OrganizationsContextValue | null>(null);
+
+type OrganizationsProviderProps = {
+  children: ReactNode;
+};
+
+export function OrganizationsProvider({ children }: OrganizationsProviderProps) {
+  const router = useRouter();
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+  const [currentOrganizationId, setCurrentOrganizationIdState] = useState<string | null>(null);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  const organizationsQuery = useQuery({
+    queryKey: ['organizations'],
+    queryFn: async () => fetchOrganizations({ apiClient }),
+  });
+
+  // Load current organization ID from storage on mount
+  useEffect(() => {
+    const loadCurrentOrganizationId = async () => {
+      const storedOrgId = await organizationsLocalStorage.getCurrentOrganizationId();
+      setCurrentOrganizationIdState(storedOrgId);
+      setIsInitialized(true);
+    };
+
+    void loadCurrentOrganizationId();
+  }, []);
+
+  const setCurrentOrganizationId = async (organizationId: string) => {
+    await organizationsLocalStorage.setCurrentOrganizationId(organizationId);
+    setCurrentOrganizationIdState(organizationId);
+  };
+
+  // Redirect to organization selection if no organizations or no current org set
+  useEffect(() => {
+    if (!isInitialized || organizationsQuery.isLoading) {
+      return;
+    }
+
+    const organizations = organizationsQuery.data?.organizations ?? [];
+
+    if (organizations.length === 0) {
+      // No organizations, redirect to organization create to create one
+      router.replace('/(app)/(with-organizations)/organizations/create');
+      return;
+    }
+
+    // If there's no current org set, or the current org doesn't exist anymore, set to first org
+    if (currentOrganizationId == null || !organizations.some(org => org.id === currentOrganizationId)) {
+      const firstOrg = organizations[0];
+      if (firstOrg) {
+        void setCurrentOrganizationId(firstOrg.id);
+      }
+    }
+  }, [isInitialized, organizationsQuery.isLoading, organizationsQuery.data, currentOrganizationId, router]);
+
+  const refetch = async () => {
+    await queryClient.invalidateQueries({ queryKey: ['organizations'] });
+  };
+
+  const value: OrganizationsContextValue = {
+    currentOrganizationId,
+    setCurrentOrganizationId,
+    organizations: organizationsQuery.data?.organizations ?? [],
+    isLoading: organizationsQuery.isLoading || !isInitialized,
+    refetch,
+  };
+
+  return (
+    <OrganizationsContext.Provider value={value}>
+      {children}
+    </OrganizationsContext.Provider>
+  );
+}
+
+export function useOrganizations(): OrganizationsContextValue {
+  const context = useContext(OrganizationsContext);
+
+  if (!context) {
+    throw new Error('useOrganizations must be used within OrganizationsProvider');
+  }
+
+  return context;
+}

apps/mobile/src/modules/organizations/organizations.services.ts

@@ -0,0 +1,24 @@
+import type { ApiClient } from '../api/api.client';
+import type { Organization } from '@/modules/organizations/organizations.types';
+
+export async function fetchOrganizations({ apiClient }: { apiClient: ApiClient }) {
+  return apiClient<{
+    organizations: Organization[];
+  }>({
+    method: 'GET',
+    path: '/api/organizations',
+  });
+}
+
+export async function createOrganization({ name, apiClient }: { name: string; apiClient: ApiClient }) {
+  return apiClient<{
+    organization: {
+      id: string;
+      name: string;
+    };
+  }>({
+    method: 'POST',
+    path: '/api/organizations',
+    body: { name },
+  });
+}

apps/mobile/src/modules/organizations/organizations.types.ts

@@ -0,0 +1,7 @@
+export type Organization = {
+  id: string;
+  name: string;
+  slug: string;
+  createdAt: string;
+  updatedAt: string;
+};

apps/mobile/src/modules/organizations/screens/organization-create.screen.tsx

@@ -0,0 +1,175 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useApiClient } from '@/modules/api/providers/api.provider';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+import { useOrganizations } from '../organizations.provider';
+import { createOrganization } from '../organizations.services';
+
+export function OrganizationCreateScreen() {
+  const router = useRouter();
+  const themeColors = useThemeColor();
+  const apiClient = useApiClient();
+  const { showAlert } = useAlert();
+  const insets = useSafeAreaInsets();
+  const { setCurrentOrganizationId, refetch } = useOrganizations();
+
+  const [organizationName, setOrganizationName] = useState('');
+
+  const createMutation = useMutation({
+    mutationFn: async ({ name }: { name: string }) => createOrganization({ name, apiClient }),
+    onSuccess: async (data) => {
+      await refetch();
+      await setCurrentOrganizationId(data.organization.id);
+      router.replace('/(app)/(with-organizations)/(tabs)/list');
+    },
+    onError: (error) => {
+      showAlert({
+        title: 'Error',
+        message: error instanceof Error ? error.message : 'Failed to create organization',
+      });
+    },
+  });
+
+  const handleCreate = () => {
+    if (organizationName.trim().length === 0) {
+      showAlert({
+        title: 'Invalid Name',
+        message: 'Please enter a valid organization name',
+      });
+      return;
+    }
+
+    createMutation.mutate({ name: organizationName.trim() });
+  };
+
+  const styles = createStyles({ themeColors });
+
+  return (
+    <KeyboardAvoidingView
+      style={{ ...styles.container, paddingTop: insets.top }}
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    >
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>Create organization</Text>
+          <Text style={styles.subtitle}>
+            Your documents will be grouped by organization. You can create multiple organizations to separate your documents, for example, for personal and work documents.
+          </Text>
+        </View>
+
+        <View style={styles.formContainer}>
+          <View style={styles.fieldContainer}>
+            <Text style={styles.label}>Organization Name</Text>
+            <TextInput
+              style={styles.input}
+              placeholder="My Organization"
+              placeholderTextColor={themeColors.mutedForeground}
+              value={organizationName}
+              onChangeText={setOrganizationName}
+              autoFocus
+              autoCapitalize="words"
+              editable={!createMutation.isPending}
+              onSubmitEditing={handleCreate}
+              returnKeyType="done"
+            />
+          </View>
+
+          <TouchableOpacity
+            style={[styles.button, createMutation.isPending && styles.buttonDisabled]}
+            onPress={handleCreate}
+            disabled={createMutation.isPending}
+          >
+            {createMutation.isPending
+              ? (
+                  <ActivityIndicator color="#fff" />
+                )
+              : (
+                  <Text style={styles.buttonText}>Create Organization</Text>
+                )}
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    scrollContent: {
+      flexGrow: 1,
+      padding: 24,
+    },
+    header: {
+      marginBottom: 48,
+    },
+    title: {
+      fontSize: 32,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+      marginBottom: 8,
+    },
+    subtitle: {
+      fontSize: 16,
+      color: themeColors.mutedForeground,
+    },
+    formContainer: {
+      gap: 16,
+    },
+    fieldContainer: {
+      gap: 8,
+    },
+    label: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: themeColors.foreground,
+    },
+    input: {
+      height: 50,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      fontSize: 16,
+      color: themeColors.foreground,
+      backgroundColor: themeColors.secondaryBackground,
+    },
+    button: {
+      height: 50,
+      backgroundColor: themeColors.primary,
+      borderRadius: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 8,
+    },
+    buttonDisabled: {
+      opacity: 0.5,
+    },
+    buttonText: {
+      color: themeColors.primaryForeground,
+      fontSize: 16,
+      fontWeight: '600',
+    },
+  });
+}

apps/mobile/src/modules/ui/components/alert-dialog.tsx

@@ -0,0 +1,146 @@
+import type { ReactNode } from 'react';
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import {
+  Modal,
+  Pressable,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+type AlertButton = {
+  text: string;
+  onPress?: () => void;
+  style?: 'default' | 'cancel' | 'destructive';
+};
+
+type AlertDialogProps = {
+  visible: boolean;
+  title: string;
+  message?: string | ReactNode;
+  buttons: AlertButton[];
+  onDismiss?: () => void;
+};
+
+export function AlertDialog({ visible, title, message, buttons, onDismiss }: AlertDialogProps) {
+  const themeColors = useThemeColor();
+  const styles = createStyles({ themeColors });
+
+  const handleButtonPress = (button: AlertButton) => {
+    button.onPress?.();
+    onDismiss?.();
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={onDismiss}
+    >
+      <Pressable style={styles.overlay} onPress={onDismiss}>
+        <Pressable style={styles.container}>
+          <View style={styles.content}>
+            <Text style={styles.title}>{title}</Text>
+            {message !== undefined && (
+              <Text style={styles.message}>
+                {message}
+              </Text>
+            )}
+
+            <View style={styles.buttonContainer}>
+              {buttons.map((button, index) => (
+                <TouchableOpacity
+                  key={index}
+                  style={[
+                    styles.button,
+                    button.style === 'cancel' && styles.cancelButton,
+                    button.style === 'destructive' && styles.destructiveButton,
+                  ]}
+                  onPress={() => handleButtonPress(button)}
+                >
+                  <Text
+                    style={[
+                      styles.buttonText,
+                      button.style === 'cancel' && styles.cancelButtonText,
+                      button.style === 'destructive' && styles.destructiveButtonText,
+                    ]}
+                  >
+                    {button.text}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    overlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    container: {
+      width: '85%',
+      maxWidth: 400,
+    },
+    content: {
+      backgroundColor: themeColors.background,
+      borderRadius: 16,
+      padding: 24,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+    },
+    title: {
+      fontSize: 18,
+      fontWeight: '600',
+      color: themeColors.foreground,
+      marginBottom: 12,
+    },
+    message: {
+      fontSize: 14,
+      color: themeColors.mutedForeground,
+      marginBottom: 24,
+      lineHeight: 20,
+    },
+    buttonContainer: {
+      flexDirection: 'row',
+      gap: 12,
+    },
+    button: {
+      flex: 1,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderRadius: 8,
+      backgroundColor: themeColors.primary,
+      alignItems: 'center',
+    },
+    buttonText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: themeColors.primaryForeground,
+    },
+    cancelButton: {
+      backgroundColor: themeColors.secondaryBackground,
+      borderWidth: 1,
+      borderColor: themeColors.border,
+    },
+    cancelButtonText: {
+      color: themeColors.foreground,
+    },
+    destructiveButton: {
+      backgroundColor: themeColors.destructiveBackground,
+    },
+    destructiveButtonText: {
+      color: themeColors.destructive,
+    },
+  });
+}

apps/mobile/src/modules/ui/components/collapsible.tsx

@@ -0,0 +1,46 @@
+import type { PropsWithChildren } from 'react';
+import { useState } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+
+import { IconSymbol } from '@/modules/ui/components/icon-symbol';
+import { ThemedText } from '@/modules/ui/components/themed-text';
+import { ThemedView } from '@/modules/ui/components/themed-view';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+const styles = StyleSheet.create({
+  heading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  content: {
+    marginTop: 6,
+    marginLeft: 24,
+  },
+});
+
+export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const colors = useThemeColor();
+
+  return (
+    <ThemedView>
+      <TouchableOpacity
+        style={styles.heading}
+        onPress={() => setIsOpen(value => !value)}
+        activeOpacity={0.8}
+      >
+        <IconSymbol
+          name="chevron.right"
+          size={18}
+          weight="medium"
+          color={colors.foreground}
+          style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
+        />
+
+        <ThemedText type="defaultSemiBold">{title}</ThemedText>
+      </TouchableOpacity>
+      {isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
+    </ThemedView>
+  );
+}

apps/mobile/src/modules/ui/components/external-link.tsx

@@ -0,0 +1,27 @@
+import type { Href } from 'expo-router';
+import type { ComponentProps } from 'react';
+import { Link } from 'expo-router';
+import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
+import { Platform } from 'react-native';
+
+type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
+
+export function ExternalLink({ href, ...rest }: Props) {
+  return (
+    <Link
+      target="_blank"
+      {...rest}
+      href={href}
+      onPress={async (event) => {
+        if (Platform.OS !== 'web') {
+          // Prevent the default behavior of linking to the default browser on native.
+          event.preventDefault();
+          // Open the link in an in-app browser.
+          await openBrowserAsync(href, {
+            presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
+          });
+        }
+      }}
+    />
+  );
+}

apps/mobile/src/modules/ui/components/haptic-tab.tsx

@@ -0,0 +1,19 @@
+import type { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
+import { PlatformPressable } from '@react-navigation/elements';
+import * as Haptics from 'expo-haptics';
+import { Platform } from 'react-native';
+
+export function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={async (ev) => {
+        if (Platform.OS === 'ios') {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

apps/mobile/src/modules/ui/components/hello-wave.tsx

@@ -0,0 +1,20 @@
+import Animated from 'react-native-reanimated';
+
+export function HelloWave() {
+  return (
+    <Animated.Text
+      style={{
+        fontSize: 28,
+        lineHeight: 32,
+        marginTop: -6,
+        animationName: {
+          '50%': { transform: [{ rotate: '25deg' }] },
+        },
+        animationIterationCount: 4,
+        animationDuration: '300ms',
+      }}
+    >
+      👋
+    </Animated.Text>
+  );
+}

apps/mobile/src/modules/ui/components/icon-symbol.ios.tsx

@@ -0,0 +1,33 @@
+import type { SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { SymbolView } from 'expo-symbols';
+
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+  weight = 'regular',
+}: {
+  name: SymbolViewProps['name'];
+  size?: number;
+  color: string;
+  style?: StyleProp<ViewStyle>;
+  weight?: SymbolWeight;
+}) {
+  return (
+    <SymbolView
+      weight={weight}
+      tintColor={color}
+      resizeMode="scaleAspectFit"
+      name={name}
+      style={[
+        {
+          width: size,
+          height: size,
+        },
+        style,
+      ]}
+    />
+  );
+}

apps/mobile/src/modules/ui/components/icon-symbol.tsx

@@ -0,0 +1,41 @@
+// Fallback for using MaterialIcons on Android and web.
+
+import type { SymbolViewProps, SymbolWeight } from 'expo-symbols';
+import type { ComponentProps } from 'react';
+import type { OpaqueColorValue, StyleProp, TextStyle } from 'react-native';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+
+type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
+type IconSymbolName = keyof typeof MAPPING;
+
+/**
+ * Add your SF Symbols to Material Icons mappings here.
+ * - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
+ * - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
+ */
+const MAPPING = {
+  'house.fill': 'home',
+  'paperplane.fill': 'send',
+  'chevron.left.forwardslash.chevron.right': 'code',
+  'chevron.right': 'chevron-right',
+} as IconMapping;
+
+/**
+ * An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
+ * This ensures a consistent look across platforms, and optimal resource usage.
+ * Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
+ */
+export function IconSymbol({
+  name,
+  size = 24,
+  color,
+  style,
+}: {
+  name: IconSymbolName;
+  size?: number;
+  color: string | OpaqueColorValue;
+  style?: StyleProp<TextStyle>;
+  weight?: SymbolWeight;
+}) {
+  return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
+}

apps/mobile/src/modules/ui/components/icon.tsx

@@ -0,0 +1,3 @@
+import { Feather } from '@expo/vector-icons';
+
+export const Icon = Feather;

apps/mobile/src/modules/ui/components/import-tab-button.tsx

@@ -0,0 +1,29 @@
+import * as Haptics from 'expo-haptics';
+import { useState } from 'react';
+import { ImportDrawer } from '@/modules/documents/components/import-drawer';
+import { Icon } from '@/modules/ui/components/icon';
+import { useThemeColor } from '../providers/use-theme-color';
+import { HapticTab } from './haptic-tab';
+
+export function ImportTabButton() {
+  const [isDrawerVisible, setIsDrawerVisible] = useState(false);
+  const themeColors = useThemeColor();
+
+  const handlePress = () => {
+    void Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    setIsDrawerVisible(true);
+  };
+
+  return (
+    <>
+      <HapticTab onPress={handlePress} style={{ flex: 1, alignItems: 'center', padding: 5 }}>
+        <Icon name="plus" size={30} style={{ height: 30 }} color={themeColors.mutedForeground} />
+      </HapticTab>
+
+      <ImportDrawer
+        visible={isDrawerVisible}
+        onClose={() => setIsDrawerVisible(false)}
+      />
+    </>
+  );
+}

apps/mobile/src/modules/ui/components/parallax-scroll-view.tsx

@@ -0,0 +1,81 @@
+import type { PropsWithChildren, ReactElement } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, {
+  interpolate,
+  useAnimatedRef,
+  useAnimatedStyle,
+  useScrollOffset,
+} from 'react-native-reanimated';
+
+import { ThemedView } from '@/modules/ui/components/themed-view';
+import { useColorScheme } from '@/modules/ui/providers/use-color-scheme';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+const HEADER_HEIGHT = 250;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    height: HEADER_HEIGHT,
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+    padding: 32,
+    gap: 16,
+    overflow: 'hidden',
+  },
+});
+
+type Props = PropsWithChildren<{
+  headerImage: ReactElement;
+  headerBackgroundColor: { dark: string; light: string };
+}>;
+
+export default function ParallaxScrollView({
+  children,
+  headerImage,
+  headerBackgroundColor,
+}: Props) {
+  const colors = useThemeColor();
+  const colorScheme = useColorScheme() ?? 'light';
+  const scrollRef = useAnimatedRef<Animated.ScrollView>();
+  const scrollOffset = useScrollOffset(scrollRef);
+  const headerAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          translateY: interpolate(
+            scrollOffset.value,
+            [-HEADER_HEIGHT, 0, HEADER_HEIGHT],
+            [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75],
+          ),
+        },
+        {
+          scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
+        },
+      ],
+    };
+  });
+
+  return (
+    <Animated.ScrollView
+      ref={scrollRef}
+      style={{ backgroundColor: colors.background, flex: 1 }}
+      scrollEventThrottle={16}
+    >
+      <Animated.View
+        style={[
+          styles.header,
+          { backgroundColor: headerBackgroundColor[colorScheme] },
+          headerAnimatedStyle,
+        ]}
+      >
+        {headerImage}
+      </Animated.View>
+      <ThemedView style={styles.content}>{children}</ThemedView>
+    </Animated.ScrollView>
+  );
+}

apps/mobile/src/modules/ui/components/themed-text.tsx

@@ -0,0 +1,52 @@
+import type { TextProps } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
+
+export type ThemedTextProps = TextProps & {
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
+};
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: '600',
+  },
+  title: {
+    fontSize: 32,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  link: {
+    lineHeight: 30,
+    fontSize: 16,
+    color: '#0a7ea4',
+  },
+});
+
+export function ThemedText({
+  style,
+  type = 'default',
+  ...rest
+}: ThemedTextProps) {
+  return (
+    <Text
+      style={[
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}

apps/mobile/src/modules/ui/components/themed-view.tsx

@@ -0,0 +1,15 @@
+import type { ViewProps } from 'react-native';
+import { View } from 'react-native';
+
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+export function ThemedView({ style, ...otherProps }: ThemedViewProps) {
+  const theme = useThemeColor();
+
+  return <View style={[{ backgroundColor: theme.background }, style]} {...otherProps} />;
+}

apps/mobile/src/modules/ui/providers/alert-provider.tsx

@@ -0,0 +1,64 @@
+import type { ReactNode } from 'react';
+import { createContext, useContext, useState } from 'react';
+import { AlertDialog } from '@/modules/ui/components/alert-dialog';
+
+type AlertButton = {
+  text: string;
+  onPress?: () => void;
+  style?: 'default' | 'cancel' | 'destructive';
+};
+
+type AlertOptions = {
+  title: string;
+  message?: string | ReactNode;
+  buttons?: AlertButton[];
+};
+
+type AlertContextType = {
+  showAlert: (options: AlertOptions) => void;
+};
+
+const AlertContext = createContext<AlertContextType | null>(null);
+
+export function AlertProvider({ children }: { children: ReactNode }) {
+  const [alertState, setAlertState] = useState<AlertOptions & { visible: boolean }>({
+    visible: false,
+    title: '',
+    message: '',
+    buttons: [],
+  });
+
+  const showAlert = (options: AlertOptions) => {
+    setAlertState({
+      visible: true,
+      title: options.title,
+      message: options.message,
+      buttons: options.buttons ?? [{ text: 'OK', style: 'default' }],
+    });
+  };
+
+  const handleDismiss = () => {
+    setAlertState(prev => ({ ...prev, visible: false }));
+  };
+
+  return (
+    <AlertContext.Provider value={{ showAlert }}>
+      {children}
+      <AlertDialog
+        visible={alertState.visible}
+        title={alertState.title}
+        message={alertState.message}
+        buttons={alertState.buttons ?? []}
+        onDismiss={handleDismiss}
+      />
+    </AlertContext.Provider>
+  );
+}
+
+export function useAlert() {
+  const context = useContext(AlertContext);
+  if (!context) {
+    throw new Error('useAlert must be used within an AlertProvider');
+  }
+  return context;
+}

apps/mobile/src/modules/ui/providers/use-color-scheme.ts

@@ -0,0 +1 @@
+export { useColorScheme } from 'react-native';

apps/mobile/src/modules/ui/providers/use-color-scheme.web.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme as useRNColorScheme } from 'react-native';
+
+/**
+ * To support static rendering, this value needs to be re-calculated on the client side for web
+ */
+export function useColorScheme() {
+  const [hasHydrated, setHasHydrated] = useState(false);
+
+  useEffect(() => {
+    setHasHydrated(true);
+  }, []);
+
+  const colorScheme = useRNColorScheme();
+
+  if (hasHydrated) {
+    return colorScheme;
+  }
+
+  return 'light';
+}

apps/mobile/src/modules/ui/providers/use-theme-color.ts

@@ -0,0 +1,14 @@
+/**
+ * Learn more about light and dark modes:
+ * https://docs.expo.dev/guides/color-schemes/
+ */
+
+import type { ThemeColors } from '../theme.constants';
+import { colors } from '../theme.constants';
+import { useColorScheme } from './use-color-scheme';
+
+export function useThemeColor(): ThemeColors {
+  const theme = useColorScheme() ?? 'light';
+
+  return colors[theme];
+}

apps/mobile/src/modules/ui/theme.constants.ts

@@ -0,0 +1,64 @@
+/**
+ * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
+ * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
+ */
+
+import { Platform } from 'react-native';
+
+const lightColors = {
+  foreground: '#0a0a0a',
+  background: '#fafafa',
+  primary: '#fe7d4d',
+  primaryForeground: '#0a0a0a',
+  muted: '#f3f3f3',
+  mutedForeground: '#737373',
+  border: '#e5e5e5',
+  secondaryBackground: '#f3f3f3',
+  destructive: '#d32f2f',
+  destructiveBackground: '#ffe0e0',
+};
+
+const darkColors: ThemeColors = {
+  foreground: '#fafafa',
+  background: '#141414',
+  primary: '#d9ff7a',
+  primaryForeground: '#0a0a0a',
+  muted: '#262626',
+  mutedForeground: '#a3a3a3',
+  border: '#262626',
+  secondaryBackground: '#111111',
+  destructive: '#ff6b6b',
+  destructiveBackground: '#2a1a1a',
+};
+
+export type ThemeColors = typeof lightColors;
+
+export const colors = {
+  light: lightColors,
+  dark: darkColors,
+};
+
+export const Fonts = Platform.select({
+  ios: {
+    /** iOS `UIFontDescriptorSystemDesignDefault` */
+    sans: 'system-ui',
+    /** iOS `UIFontDescriptorSystemDesignSerif` */
+    serif: 'ui-serif',
+    /** iOS `UIFontDescriptorSystemDesignRounded` */
+    rounded: 'ui-rounded',
+    /** iOS `UIFontDescriptorSystemDesignMonospaced` */
+    mono: 'ui-monospace',
+  },
+  default: {
+    sans: 'normal',
+    serif: 'serif',
+    rounded: 'normal',
+    mono: 'monospace',
+  },
+  web: {
+    sans: 'system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif',
+    serif: 'Georgia, \'Times New Roman\', serif',
+    rounded: '\'SF Pro Rounded\', \'Hiragino Maru Gothic ProN\', Meiryo, \'MS PGothic\', sans-serif',
+    mono: 'SFMono-Regular, Menlo, Monaco, Consolas, \'Liberation Mono\', \'Courier New\', monospace',
+  },
+});

apps/mobile/src/modules/users/screens/settings.screen.tsx

@@ -0,0 +1,149 @@
+import type { ThemeColors } from '@/modules/ui/theme.constants';
+import { useRouter } from 'expo-router';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useAuthClient } from '@/modules/api/providers/api.provider';
+import { useAlert } from '@/modules/ui/providers/alert-provider';
+import { useThemeColor } from '@/modules/ui/providers/use-theme-color';
+
+export default function SettingsScreen() {
+  const router = useRouter();
+  const themeColors = useThemeColor();
+  const authClient = useAuthClient();
+  const session = authClient.useSession();
+  const { showAlert } = useAlert();
+
+  const handleSignOut = () => {
+    showAlert({
+      title: 'Sign Out',
+      message: 'Are you sure you want to sign out?',
+      buttons: [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Sign Out',
+          style: 'destructive',
+          onPress: async () => {
+            await authClient.signOut();
+            router.replace('/auth/login');
+          },
+        },
+      ],
+    });
+  };
+
+  const styles = createStyles({ themeColors });
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Settings</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>Account</Text>
+        {session.data?.user && (
+          <>
+            <View style={styles.infoRow}>
+              <Text style={styles.infoLabel}>Name</Text>
+              <Text style={styles.infoValue}>{session.data.user.name}</Text>
+            </View>
+            <View style={styles.infoRow}>
+              <Text style={styles.infoLabel}>Email</Text>
+              <Text style={styles.infoValue}>{session.data.user.email}</Text>
+            </View>
+            <View style={styles.infoRow}>
+              <Text style={styles.infoLabel}>Email Verified</Text>
+              <Text style={styles.infoValue}>
+                {session.data.user.emailVerified ? 'Yes' : 'No'}
+              </Text>
+            </View>
+          </>
+        )}
+      </View>
+
+      <View style={styles.section}>
+        <TouchableOpacity
+          style={[styles.actionButton, styles.dangerButton]}
+          onPress={handleSignOut}
+        >
+          <Text style={[styles.actionButtonText, styles.dangerText]}>
+            Sign Out
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+function createStyles({ themeColors }: { themeColors: ThemeColors }) {
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: themeColors.background,
+    },
+    header: {
+      padding: 24,
+      paddingBottom: 16,
+    },
+    title: {
+      fontSize: 28,
+      fontWeight: 'bold',
+      color: themeColors.foreground,
+    },
+    section: {
+      marginBottom: 24,
+      paddingHorizontal: 16,
+    },
+    sectionTitle: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: themeColors.mutedForeground,
+      textTransform: 'uppercase',
+      marginBottom: 12,
+      paddingHorizontal: 8,
+    },
+    infoRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      backgroundColor: themeColors.secondaryBackground,
+      borderRadius: 8,
+      marginBottom: 8,
+    },
+    infoLabel: {
+      fontSize: 14,
+      color: themeColors.mutedForeground,
+    },
+    infoValue: {
+      fontSize: 14,
+      fontWeight: '500',
+      color: themeColors.foreground,
+    },
+    actionButton: {
+      paddingVertical: 14,
+      paddingHorizontal: 16,
+      backgroundColor: themeColors.secondaryBackground,
+      borderRadius: 8,
+      marginBottom: 8,
+    },
+    actionButtonText: {
+      fontSize: 16,
+      fontWeight: '500',
+      color: themeColors.foreground,
+      textAlign: 'center',
+    },
+    dangerButton: {
+      backgroundColor: themeColors.destructiveBackground,
+    },
+    dangerText: {
+      color: themeColors.destructive,
+    },
+  });
+}

apps/mobile/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "jsx": "react-native",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "strict": true,
+    "noUncheckedIndexedAccess": true
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    ".expo/types/**/*.ts",
+    "expo-env.d.ts"
+  ]
+}

apps/mobile/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    env: {
+      TZ: 'UTC',
+    },
+  },
+});

apps/papra-client/.nvmrc

@@ -1 +1 @@
-22
+24

apps/papra-client/eslint.config.js

@@ -5,6 +5,8 @@ export default antfu({
     semi: true,
   },
 
+  solid: true,
+
   ignores: [
     'public/manifest.json',
   ],

apps/papra-client/package.json

@@ -11,7 +11,7 @@
     "url": "https://github.com/papra-hq/papra"
   },
   "engines": {
-    "node": ">=22.0.0"
+    "node": ">=24.0.0"
   },
   "scripts": {
     "start": "vite",
@@ -42,12 +42,12 @@
     "clsx": "^2.1.1",
     "cmdk-solid": "^1.1.2",
     "ofetch": "^1.4.1",
+    "p-limit": "^6.2.0",
     "posthog-js-lite": "^4.1.5",
     "radix3": "^1.1.2",
     "solid-js": "^1.9.9",
     "solid-sonner": "^0.2.8",
     "tailwind-merge": "^2.6.0",
-    "ts-pattern": "^5.7.1",
     "unocss-preset-animations": "^1.3.0",
     "unstorage": "^1.16.0",
     "valibot": "1.0.0-beta.10"
@@ -58,8 +58,9 @@
     "@playwright/test": "^1.53.1",
     "@types/node": "catalog:",
     "eslint": "catalog:",
+    "eslint-plugin-solid": "^0.14.5",
     "tinyglobby": "^0.2.14",
-    "tsx": "^4.20.3",
+    "tsx": "catalog:",
     "typescript": "catalog:",
     "unocss": "^66.5.4",
     "vite": "^7.1.9",

apps/papra-client/src/index.tsx

@@ -5,7 +5,8 @@ import { ColorModeProvider, createLocalStorageManager } from '@kobalte/core/colo
 import { Router } from '@solidjs/router';
 import { QueryClientProvider } from '@tanstack/solid-query';
 
-import { render, Suspense } from 'solid-js/web';
+import { Suspense } from 'solid-js';
+import { render } from 'solid-js/web';
 import { CommandPaletteProvider } from './modules/command-palette/command-palette.provider';
 import { ConfigProvider } from './modules/config/config.provider';
 import { DemoIndicator } from './modules/demo/demo.provider';

apps/papra-client/src/locales/de.dictionary.ts

@@ -249,6 +249,11 @@ export const translations: Partial<TranslationsDictionary> = {
   'documents.list.no-documents.title': 'Keine Dokumente',
   'documents.list.no-documents.description': 'Es sind noch keine Dokumente in dieser Organisation vorhanden. Beginnen Sie mit dem Hochladen von Dokumenten.',
   'documents.list.no-results': 'Keine Dokumente gefunden',
+  'documents.list.table.headers.file-name': 'Dateiname',
+  'documents.list.table.headers.created': 'Erstellt am',
+  'documents.list.table.headers.deleted': 'Gelöscht am',
+  'documents.list.table.headers.actions': 'Aktionen',
+  'documents.list.table.headers.tags': 'Tags',
 
   'documents.tabs.info': 'Info',
   'documents.tabs.content': 'Inhalt',
@@ -710,4 +715,6 @@ export const translations: Partial<TranslationsDictionary> = {
   // Common / Shared
 
   'common.confirm-modal.type-to-confirm': 'Geben Sie "{{ text }}" ein zur Bestätigung',
+  'common.tables.rows-per-page': 'Zeilen pro Seite',
+  'common.tables.pagination-info': 'Seite {{ currentPage }} von {{ totalPages }}',
 };

apps/papra-client/src/locales/en.dictionary.ts

@@ -247,6 +247,11 @@ export const translations = {
   'documents.list.no-documents.title': 'No documents',
   'documents.list.no-documents.description': 'There are no documents in this organization yet. Start by uploading some documents.',
   'documents.list.no-results': 'No documents found',
+  'documents.list.table.headers.file-name': 'File name',
+  'documents.list.table.headers.created': 'Created at',
+  'documents.list.table.headers.deleted': 'Deleted at',
+  'documents.list.table.headers.actions': 'Actions',
+  'documents.list.table.headers.tags': 'Tags',
 
   'documents.tabs.info': 'Info',
   'documents.tabs.content': 'Content',
@@ -642,7 +647,7 @@ export const translations = {
 
   // Demo
 
-  'demo.popup.description': 'This is a demo environment, all data is save to your browser local storage.',
+  'demo.popup.description': 'This is a demo environment, all data is saved to your browser local storage.',
   'demo.popup.discord': 'Join the {{ discordLink }} to get support, propose features or just chat.',
   'demo.popup.discord-link-label': 'Discord server',
   'demo.popup.reset': 'Reset demo data',
@@ -708,4 +713,6 @@ export const translations = {
   // Common / Shared
 
   'common.confirm-modal.type-to-confirm': 'Type "{{ text }}" to confirm',
+  'common.tables.rows-per-page': 'Rows per page',
+  'common.tables.pagination-info': 'Page {{ currentPage }} of {{ totalPages }}',
 } as const;

apps/papra-client/src/locales/es.dictionary.ts

@@ -249,6 +249,11 @@ export const translations: Partial<TranslationsDictionary> = {
   'documents.list.no-documents.title': 'Sin documentos',
   'documents.list.no-documents.description': 'Aún no hay documentos en esta organización. Comienza subiendo algunos documentos.',
   'documents.list.no-results': 'No se encontraron documentos',
+  'documents.list.table.headers.file-name': 'Nombre de archivo',
+  'documents.list.table.headers.created': 'Creado el',
+  'documents.list.table.headers.deleted': 'Eliminado el',
+  'documents.list.table.headers.actions': 'Acciones',
+  'documents.list.table.headers.tags': 'Etiquetas',
 
   'documents.tabs.info': 'Información',
   'documents.tabs.content': 'Contenido',
@@ -710,4 +715,6 @@ export const translations: Partial<TranslationsDictionary> = {
   // Common / Shared
 
   'common.confirm-modal.type-to-confirm': 'Escriba "{{ text }}" para confirmar',
+  'common.tables.rows-per-page': 'Filas por página',
+  'common.tables.pagination-info': 'Página {{ currentPage }} de {{ totalPages }}',
 };