style(biome): using biome for format, lint, check

.husky/pre-commit

@@ -1 +1 @@
-bun run check-types && bun run check && bun run lint:check
+bun run typecheck && bun run lint

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "editor.defaultFormatter": "biomejs.biome",
   "[javascript]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
@@ -10,21 +9,20 @@
     "editor.defaultFormatter": "biomejs.biome"
   },
   "editor.codeActionsOnSave": {
-    "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit",
-    "source.fixAll": "explicit",
+    "source.fixAll.biome": "explicit"
-    "source.organizeImports": "explicit",
-    "source.sortMembers": "explicit"
   },
+  "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
+  "files.autoSave": "onFocusChange",
+  "search.exclude": {
+    "**/node_modules": true
+  },
+  "terminal.integrated.localEchoStyle": "dim",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.preferences.autoImportFileExcludePatterns": [
     "next/router.d.ts",
     "next/dist/client/router.d.ts"
   ],
-  "terminal.integrated.localEchoStyle": "dim",
+  "typescript.tsdk": "node_modules/typescript/lib"
-  "search.exclude": {
-    "**/node_modules": true
-  }
 }

apps/api-legacy/api/bruno.json

@@ -1,9 +1,6 @@
 {
-  "version": "1",
+  "ignore": ["node_modules", ".git"],
   "name": "basango",
   "type": "collection",
-  "ignore": [
+  "version": "1"
-    "node_modules",
-    ".git"
-  ]
 }

apps/api-legacy/composer.json

@@ -1,18 +1,59 @@
 {
-    "type": "project",
+  "autoload": {
+    "psr-4": {
+      "Basango\\": "src/"
+    }
+  },
+  "autoload-dev": {
+    "psr-4": {
+      "Tests\\": "tests/"
+    }
+  },
+  "config": {
+    "allow-plugins": {
+      "cweagans/composer-patches": true,
+      "php-http/discovery": true,
+      "symfony/flex": true,
+      "symfony/runtime": true
+    },
+    "sort-packages": true
+  },
+  "conflict": {
+    "symfony/symfony": "*"
+  },
+  "extra": {
+    "patches": {
+      "symfony/monolog-bundle": {
+        "support telegram topic in configuration": "./patches/monolog-telegram-configuration.patch",
+        "support telegram topic in extension": "./patches/monolog-telegram-extension.patch"
+      }
+    },
+    "symfony": {
+      "allow-contrib": false,
+      "require": "7.2.*"
+    }
+  },
   "license": "proprietary",
   "minimum-stability": "stable",
   "prefer-stable": true,
+  "replace": {
+    "symfony/polyfill-ctype": "*",
+    "symfony/polyfill-iconv": "*",
+    "symfony/polyfill-php72": "*",
+    "symfony/polyfill-php73": "*",
+    "symfony/polyfill-php74": "*",
+    "symfony/polyfill-php80": "*",
+    "symfony/polyfill-php81": "*"
+  },
   "require": {
-        "php": ">=8.4",
-        "ext-ctype": "*",
-        "ext-dom": "*",
-        "ext-iconv": "*",
     "cweagans/composer-patches": "^1.7.3",
     "doctrine/dbal": "^3.9.4",
     "doctrine/doctrine-bundle": "^2.13.2",
     "doctrine/doctrine-migrations-bundle": "^3.4.1",
     "doctrine/orm": "^3.3.1",
+    "ext-ctype": "*",
+    "ext-dom": "*",
+    "ext-iconv": "*",
     "geoip2/geoip2": "^3.1",
     "gesdinet/jwt-refresh-token-bundle": "^1.4",
     "knplabs/knp-paginator-bundle": "^6.7",
@@ -20,6 +61,7 @@
     "lexik/jwt-authentication-bundle": "^3.1",
     "martin-georgiev/postgresql-for-doctrine": "^3.5",
     "matomo/device-detector": "^6.4",
+    "php": ">=8.4",
     "phpdocumentor/reflection-docblock": "^5.6",
     "phpstan/phpdoc-parser": "^2.1",
     "sentry/sentry-symfony": "^5.2",
@@ -63,44 +105,11 @@
     "symplify/easy-coding-standard": "^12.1.13",
     "tomasvotruba/class-leak": "^1.2.7"
   },
-    "config": {
-        "allow-plugins": {
-            "php-http/discovery": true,
-            "symfony/flex": true,
-            "symfony/runtime": true,
-            "cweagans/composer-patches": true
-        },
-        "sort-packages": true
-    },
-    "autoload": {
-        "psr-4": {
-            "Basango\\": "src/"
-        }
-    },
-    "autoload-dev": {
-        "psr-4": {
-            "Tests\\": "tests/"
-        }
-    },
-    "replace": {
-        "symfony/polyfill-ctype": "*",
-        "symfony/polyfill-iconv": "*",
-        "symfony/polyfill-php72": "*",
-        "symfony/polyfill-php73": "*",
-        "symfony/polyfill-php74": "*",
-        "symfony/polyfill-php80": "*",
-        "symfony/polyfill-php81": "*"
-    },
   "scripts": {
-        "auto-scripts": {
+    "app:behat": [
-            "cache:clear": "symfony-cmd",
+      "APP_ENV=test bin/console doctrine:database:create",
-            "assets:install %PUBLIC_DIR%": "symfony-cmd"
+      "APP_ENV=test bin/console doctrine:migration:migrate --no-interaction --allow-no-migration --all-or-nothing",
-        },
+      "APP_ENV=test ./vendor/bin/behat --format=progress --no-interaction"
-        "post-install-cmd": [
-            "@auto-scripts"
-        ],
-        "post-update-cmd": [
-            "@auto-scripts"
     ],
     "app:cs": [
       "./vendor/bin/ecs check",
@@ -110,32 +119,17 @@
       "./vendor/bin/phpstan analyse --memory-limit=-1 --configuration=phpstan.dist.neon",
       "./vendor/bin/rector --dry-run"
     ],
-        "app:tests": [
-            "APP_ENV=test ./vendor/bin/phpunit"
-        ],
-        "app:behat": [
-            "APP_ENV=test bin/console doctrine:database:create",
-            "APP_ENV=test bin/console doctrine:migration:migrate --no-interaction --allow-no-migration --all-or-nothing",
-            "APP_ENV=test ./vendor/bin/behat --format=progress --no-interaction"
-        ],
     "app:env": [
       "APP_RUNTIME_ENV=prod bin/console secrets:decrypt-to-local --force",
       "bin/console dotenv:dump prod"
-        ]
+    ],
+    "app:tests": ["APP_ENV=test ./vendor/bin/phpunit"],
+    "auto-scripts": {
+      "assets:install %PUBLIC_DIR%": "symfony-cmd",
+      "cache:clear": "symfony-cmd"
     },
-    "conflict": {
+    "post-install-cmd": ["@auto-scripts"],
-        "symfony/symfony": "*"
+    "post-update-cmd": ["@auto-scripts"]
   },
-    "extra": {
+  "type": "project"
-        "symfony": {
-            "allow-contrib": false,
-            "require": "7.2.*"
-        },
-        "patches": {
-            "symfony/monolog-bundle": {
-                "support telegram topic in configuration": "./patches/monolog-telegram-configuration.patch",
-                "support telegram topic in extension": "./patches/monolog-telegram-extension.patch"
-            }
-        }
-    }
 }

apps/crawler/package.json

@@ -1,6 +1,4 @@
 {
-  "name": "@basango/crawler",
-  "private": true,
   "dependencies": {
     "@basango/logger": "workspace:*",
     "@devscast/config": "^1.0.3",
@@ -16,16 +14,18 @@
     "@types/turndown": "^5.0.6",
     "vitest": "^4.0.7"
   },
+  "name": "@basango/crawler",
+  "private": true,
   "scripts": {
+    "clean": "rm -rf .turbo node_modules",
     "crawler:async": "bun run src/scripts/queue.ts",
     "crawler:sync": "bun run src/scripts/crawl.ts",
     "crawler:worker": "bun run src/scripts/worker.ts",
-    "clean": "rm -rf .turbo node_modules",
     "format": "biome format --write .",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
-    "typecheck": "tsc --noEmit",
+    "test": "vitest --run",
-    "test": "vitest --run"
+    "typecheck": "tsc --noEmit"
   },
   "type": "module"
 }

apps/crawler/tsconfig.json

@@ -5,7 +5,7 @@
       "@/*": ["./src/*"]
     }
   },
-  "extends": "@basango/typescript-config/base.json",
+  "extends": "@basango/tsconfig/base.json",
   "include": ["src"],
   "references": []
 }

apps/dashboard/app/globals.css

@@ -20,7 +20,7 @@
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
+  color: var(--foreground);
+  background: var(--background);
 }

apps/dashboard/app/layout.tsx

@@ -3,18 +3,18 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 
 const geistSans = Geist({
-  variable: "--font-geist-sans",
   subsets: ["latin"],
+  variable: "--font-geist-sans",
 });
 
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
   subsets: ["latin"],
+  variable: "--font-geist-mono",
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
   description: "Generated by create next app",
+  title: "Create Next App",
 };
 
 export default function RootLayout({
@@ -24,11 +24,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
     </html>
   );
 }

apps/dashboard/app/page.tsx

@@ -5,12 +5,12 @@ export default function Home() {
     <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
       <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
         <Image
-          className="dark:invert"
-          src="/next.svg"
           alt="Next.js logo"
-          width={100}
+          className="dark:invert"
           height={20}
           priority
+          src="/next.svg"
+          width={100}
         />
         <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
           <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
@@ -19,15 +19,15 @@ export default function Home() {
           <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
             Looking for a starting point or more instructions? Head over to{" "}
             <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             >
               Templates
             </a>{" "}
             or the{" "}
             <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
               className="font-medium text-zinc-950 dark:text-zinc-50"
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
             >
               Learning
             </a>{" "}
@@ -38,23 +38,23 @@ export default function Home() {
           <a
             className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
             href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
             rel="noopener noreferrer"
+            target="_blank"
           >
             <Image
-              className="dark:invert"
-              src="/vercel.svg"
               alt="Vercel logomark"
-              width={16}
+              className="dark:invert"
               height={16}
+              src="/vercel.svg"
+              width={16}
             />
             Deploy Now
           </a>
           <a
             className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
             href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
             rel="noopener noreferrer"
+            target="_blank"
           >
             Documentation
           </a>

apps/dashboard/components.json

@@ -1,20 +1,20 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "",
-    "css": "../../packages/ui/src/styles/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true
-  },
-  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "hooks": "@/hooks",
     "lib": "@/lib",
-    "utils": "@basango/ui/lib/utils",
+    "ui": "@basango/ui/components",
-    "ui": "@basango/ui/components"
+    "utils": "@basango/ui/lib/utils"
-  }
+  },
+  "iconLibrary": "lucide",
+  "rsc": true,
+  "style": "new-york",
+  "tailwind": {
+    "baseColor": "neutral",
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "cssVariables": true
+  },
+  "tsx": true
 }

apps/dashboard/next.config.ts

@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   transpilePackages: ["@basango/ui"],
-}
+};
 
-export default nextConfig
+export default nextConfig;

apps/dashboard/package.json

@@ -1,23 +1,23 @@
 {
-  "name": "@basango/dashboard",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
-  },
   "dependencies": {
+    "next": "catalog:",
     "react": "catalog:",
-    "react-dom": "catalog:",
+    "react-dom": "catalog:"
-    "next": "catalog:"
   },
   "devDependencies": {
-    "typescript": "catalog:",
+    "@tailwindcss/postcss": "^4",
     "@types/bun": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "@tailwindcss/postcss": "^4",
+    "tailwindcss": "^4",
-    "tailwindcss": "^4"
+    "typescript": "catalog:"
+  },
+  "name": "@basango/dashboard",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "eslint",
+    "start": "next start"
   }
 }

apps/dashboard/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "@basango/typescript-config/nextjs.json",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
@@ -12,12 +11,7 @@
       }
     ]
   },
-  "include": [
+  "exclude": ["node_modules"],
-    "next-env.d.ts",
+  "extends": "@basango/tsconfig/nextjs.json",
-    "next.config.ts",
+  "include": ["next-env.d.ts", "next.config.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": ["node_modules"]
 }

apps/mobile-legacy/app.json

@@ -1,40 +1,43 @@
 {
   "expo": {
-    "name": "basango",
-    "slug": "basango",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./src/assets/images/logo.png",
-    "scheme": "basango",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "githubUrl": "https://github.com/bernard-ng/basango",
-    "ios": {
-      "supportsTablet": true,
-      "bundleIdentifier": "dev.ngandu.basango"
-    },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./src/assets/images/logo.png",
         "backgroundColor": "#ffffff",
+        "foregroundImage": "./src/assets/images/logo.png",
         "package": "dev.ngandu.basango"
       },
       "package": "dev.ngandu.basango"
     },
-    "web": {
+    "experiments": {
-      "bundler": "metro",
+      "typedRoutes": true
-      "output": "static",
-      "favicon": "./src/assets/images/logo.png"
     },
+    "extra": {
+      "eas": {
+        "projectId": "57281e7a-46e3-4aac-8715-5165fa0bf560"
+      },
+      "router": {
+        "origin": false
+      }
+    },
+    "githubUrl": "https://github.com/bernard-ng/basango",
+    "icon": "./src/assets/images/logo.png",
+    "ios": {
+      "bundleIdentifier": "dev.ngandu.basango",
+      "supportsTablet": true
+    },
+    "name": "basango",
+    "newArchEnabled": true,
+    "orientation": "portrait",
+    "owner": "bernard-ng",
     "plugins": [
       "expo-router",
       [
         "expo-splash-screen",
         {
+          "backgroundColor": "#ffffff",
           "image": "./src/assets/images/logo.png",
           "imageWidth": 200,
-          "resizeMode": "contain",
+          "resizeMode": "contain"
-          "backgroundColor": "#ffffff"
         }
       ],
       "expo-build-properties",
@@ -42,23 +45,20 @@
       [
         "@sentry/react-native/expo",
         {
-          "url": "https://glitchtip.devscast.tech/",
+          "organization": "devscast-software",
           "project": "basango",
-          "organization": "devscast-software"
+          "url": "https://glitchtip.devscast.tech/"
         }
       ]
     ],
-    "experiments": {
+    "scheme": "basango",
-      "typedRoutes": true
+    "slug": "basango",
-    },
+    "userInterfaceStyle": "automatic",
-    "extra": {
+    "version": "1.0.0",
-      "router": {
+    "web": {
-        "origin": false
+      "bundler": "metro",
-      },
+      "favicon": "./src/assets/images/logo.png",
-      "eas": {
+      "output": "static"
-        "projectId": "57281e7a-46e3-4aac-8715-5165fa0bf560"
+    }
-      }
-    },
-    "owner": "bernard-ng"
   }
 }

apps/mobile-legacy/babel.config.js

@@ -1,7 +1,7 @@
-module.exports = function (api) {
+module.exports = (api) => {
   api.cache(true);
   return {
-        presets: [["babel-preset-expo", { jsxRuntime: "automatic" }]],
     plugins: ["react-native-reanimated/plugin"],
+    presets: [["babel-preset-expo", { jsxRuntime: "automatic" }]],
   };
 };

apps/mobile-legacy/commitlint.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   extends: ["@commitlint/config-conventional"],
   rules: {
+    "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]],
     "type-enum": [
       2,
       "always",
@@ -18,6 +19,5 @@ module.exports = {
         "revert", // Reverts a previous commit
       ],
     ],
-        "subject-case": [2, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"]],
   },
 };

apps/mobile-legacy/eas.json

@@ -1,8 +1,4 @@
 {
-  "cli": {
-    "version": ">= 16.3.1",
-    "appVersionSource": "remote"
-  },
   "build": {
     "development": {
       "developmentClient": true,
@@ -15,6 +11,10 @@
       "autoIncrement": true
     }
   },
+  "cli": {
+    "appVersionSource": "remote",
+    "version": ">= 16.3.1"
+  },
   "submit": {
     "production": {}
   }

apps/mobile-legacy/eslint.config.js

@@ -1,56 +0,0 @@
-const { defineConfig } = require("eslint/config");
-const expoConfig = require("eslint-config-expo/flat");
-const prettierPlugin = require("eslint-plugin-prettier");
-const unusedImportsPlugin = require("eslint-plugin-unused-imports");
-
-module.exports = defineConfig([
-    expoConfig,
-    {
-        plugins: {
-            prettier: prettierPlugin,
-            "unused-imports": unusedImportsPlugin,
-        },
-        rules: {
-            "import/default": "off",
-            "react/prop-types": "off",
-            "react/react-in-jsx-scope": "off",
-            "import/named": "off",
-            "import/namespace": "error",
-            "import/export": "error",
-            "no-unused-vars": "off",
-            "unused-imports/no-unused-imports": "error",
-            "unused-imports/no-unused-vars": [
-                "warn",
-                {
-                    vars: "all",
-                    varsIgnorePattern: "^_",
-                    args: "after-used",
-                    argsIgnorePattern: "^_",
-                },
-            ],
-            "import/order": [
-                "error",
-                {
-                    groups: ["builtin", "external", "internal"],
-                    pathGroups: [
-                        {
-                            pattern: "react",
-                            group: "external",
-                            position: "before",
-                        },
-                    ],
-                    pathGroupsExcludedImportTypes: ["react"],
-                    "newlines-between": "always",
-                    alphabetize: {
-                        order: "asc",
-                        caseInsensitive: true,
-                    },
-                },
-            ],
-            "prettier/prettier": "error",
-        },
-    },
-    {
-        ignores: ["dist/*"],
-    },
-]);

apps/mobile-legacy/ios/Podfile.properties.json

@@ -1,8 +1,8 @@
 {
-  "expo.jsEngine": "hermes",
-  "EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
-  "newArchEnabled": "true",
-  "apple.extraPods": "[]",
   "apple.ccacheEnabled": "false",
-  "apple.privacyManifestAggregationEnabled": "true"
+  "apple.extraPods": "[]",
+  "apple.privacyManifestAggregationEnabled": "true",
+  "EX_DEV_CLIENT_NETWORK_INSPECTOR": "true",
+  "expo.jsEngine": "hermes",
+  "newArchEnabled": "true"
 }

apps/mobile-legacy/ios/basango/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -8,7 +8,7 @@
     }
   ],
   "info": {
-    "version": 1,
+    "author": "expo",
-    "author": "expo"
+    "version": 1
   }
 }

apps/mobile-legacy/ios/basango/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
   "info": {
-    "version" : 1,
+    "author": "expo",
-    "author" : "expo"
+    "version": 1
   }
 }

apps/mobile-legacy/ios/basango/Images.xcassets/SplashScreenBackground.colorset/Contents.json

@@ -2,19 +2,19 @@
   "colors": [
     {
       "color": {
+        "color-space": "srgb",
         "components": {
           "alpha": "1.000",
           "blue": "1.00000000000000",
           "green": "1.00000000000000",
           "red": "1.00000000000000"
-        },
+        }
-        "color-space": "srgb"
       },
       "idiom": "universal"
     }
   ],
   "info": {
-    "version": 1,
+    "author": "expo",
-    "author": "expo"
+    "version": 1
   }
 }

apps/mobile-legacy/ios/basango/Images.xcassets/SplashScreenLogo.imageset/Contents.json

@@ -1,23 +1,23 @@
 {
   "images": [
     {
-      "idiom": "universal",
       "filename": "image.png",
+      "idiom": "universal",
       "scale": "1x"
     },
     {
-      "idiom": "universal",
       "filename": "image@2x.png",
+      "idiom": "universal",
       "scale": "2x"
     },
     {
-      "idiom": "universal",
       "filename": "image@3x.png",
+      "idiom": "universal",
       "scale": "3x"
     }
   ],
   "info": {
-    "version": 1,
+    "author": "expo",
-    "author": "expo"
+    "version": 1
   }
 }

apps/mobile-legacy/package.json

@@ -1,49 +1,4 @@
 {
-  "name": "drc-news",
-  "main": "expo-router/entry",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo run:android",
-    "ios": "expo run:ios",
-    "web": "expo start --web",
-    "test": "jest --watchAll",
-    "============= EAS BUILD =============": "",
-    "build:ios:dev": "eas build --profile development --platform ios",
-    "build:ios:sim": "eas build --profile dev-sim --platform ios",
-    "build:ios:prev": "eas build --profile preview --platform ios",
-    "build:ios:e2e": "eas build --profile ios-e2e --platform ios",
-    "build:android:dev": "eas build --profile development --platform android",
-    "build:android:sim": "eas build --profile dev-sim --platform android",
-    "build:android:prev": "eas build --profile preview --platform android",
-    "build:android:e2e": "eas build --profile android-e2e --platform android",
-    "build:android:prod": "eas build --profile production --platform android",
-    "build:ios:prod": "eas build --profile production --platform ios",
-    "===================== EAS SUBMIT =====================": "",
-    "eas:android:submit": "eas submit -p android --profile production",
-    "eas:ios:submit": "eas submit -p ios --profile production",
-    "=========== CODE STYLE ============": "",
-    "check-types": "tsc --noEmit",
-    "check": "prettier src --check",
-    "format": "prettier src --write",
-    "lint:check": "eslint src --debug",
-    "lint:fix": "eslint src --fix",
-    "============= HUSKY =============": "",
-    "prepare": "husky",
-    "commit": "cz",
-    "============= MISCELLANEOUS =============": "",
-    "delete:dstore": "find  -name '.DS_Store' -type f -delete"
-  },
-  "lint-staged": {
-    "*.ts": [
-      "prettier --write",
-      "eslint --fix"
-    ],
-    "*.tsx": [
-      "prettier --write",
-      "eslint --fix"
-    ]
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -54,12 +9,6 @@
       "path": "cz-conventional-changelog"
     }
   },
-  "jest": {
-    "preset": "jest-expo"
-  },
-  "overrides": {
-    "globals": "14.0.0"
-  },
   "dependencies": {
     "@expo-google-fonts/inter": "^0.3.0",
     "@expo/vector-icons": "^14.0.2",
@@ -132,5 +81,56 @@
     "react-test-renderer": "18.3.1",
     "typescript": "^5.3.3"
   },
-  "private": true
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "lint-staged": {
+    "*.ts": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.tsx": [
+      "prettier --write",
+      "eslint --fix"
+    ]
+  },
+  "main": "expo-router/entry",
+  "name": "drc-news",
+  "overrides": {
+    "globals": "14.0.0"
+  },
+  "private": true,
+  "scripts": {
+    "=========== CODE STYLE ============": "",
+    "============= EAS BUILD =============": "",
+    "============= HUSKY =============": "",
+    "============= MISCELLANEOUS =============": "",
+    "===================== EAS SUBMIT =====================": "",
+    "android": "expo run:android",
+    "build:android:dev": "eas build --profile development --platform android",
+    "build:android:e2e": "eas build --profile android-e2e --platform android",
+    "build:android:prev": "eas build --profile preview --platform android",
+    "build:android:prod": "eas build --profile production --platform android",
+    "build:android:sim": "eas build --profile dev-sim --platform android",
+    "build:ios:dev": "eas build --profile development --platform ios",
+    "build:ios:e2e": "eas build --profile ios-e2e --platform ios",
+    "build:ios:prev": "eas build --profile preview --platform ios",
+    "build:ios:prod": "eas build --profile production --platform ios",
+    "build:ios:sim": "eas build --profile dev-sim --platform ios",
+    "check": "prettier src --check",
+    "check-types": "tsc --noEmit",
+    "commit": "cz",
+    "delete:dstore": "find  -name '.DS_Store' -type f -delete",
+    "eas:android:submit": "eas submit -p android --profile production",
+    "eas:ios:submit": "eas submit -p ios --profile production",
+    "format": "prettier src --write",
+    "ios": "expo run:ios",
+    "lint:check": "eslint src --debug",
+    "lint:fix": "eslint src --fix",
+    "prepare": "husky",
+    "start": "expo start",
+    "test": "jest --watchAll",
+    "web": "expo start --web"
+  },
+  "version": "1.0.0"
 }

apps/mobile-legacy/src/api/client.ts

@@ -7,8 +7,8 @@ const endpoint = process.env.EXPO_PUBLIC_API_URL!;
 const client: AxiosInstance = axios.create({
   baseURL: endpoint,
   headers: {
-        "Content-Type": "application/json",
     Accept: "application/json",
+    "Content-Type": "application/json",
   },
 });
 
@@ -16,21 +16,21 @@ let isAuthTokenRefreshing = false;
 let failedRequestsQueue: ((token: string) => void)[] = [];
 
 const processFailedRequestsQueue = (token: string) => {
-    failedRequestsQueue.forEach(callback => callback(token));
+  failedRequestsQueue.forEach((callback) => callback(token));
   failedRequestsQueue = [];
 };
 
 // Wait for 120 seconds before timing out
-axios.interceptors.request.use(config => {
+axios.interceptors.request.use((config) => {
   config.timeout = 120_000;
   return config;
 });
 
 // Add the Authorization header to all requests
-client.interceptors.request.use(async config => {
+client.interceptors.request.use(async (config) => {
   const token = await getAccessToken();
   if (token) {
-        config.headers["Authorization"] = `Bearer ${token}`;
+    config.headers.Authorization = `Bearer ${token}`;
   }
 
   return config;
@@ -38,8 +38,8 @@ client.interceptors.request.use(async config => {
 
 // Handle 401 errors and refresh the token
 client.interceptors.response.use(
-    response => response,
+  (response) => response,
-    async error => {
+  async (error) => {
     const originalRequest = error.config;
     const status = error.response?.status;
 
@@ -47,9 +47,9 @@ client.interceptors.response.use(
       originalRequest._retry = true;
 
       if (isAuthTokenRefreshing) {
-                return new Promise(resolve => {
+        return new Promise((resolve) => {
           failedRequestsQueue.push((token: string) => {
-                        originalRequest.headers["Authorization"] = `Bearer ${token}`;
+            originalRequest.headers.Authorization = `Bearer ${token}`;
             resolve(client(originalRequest));
           });
         });
@@ -72,7 +72,7 @@ client.interceptors.response.use(
         await setTokens(updatedToken, refreshToken);
         processFailedRequestsQueue(updatedToken);
 
-                originalRequest.headers["Authorization"] = `Bearer ${updatedToken}`;
+        originalRequest.headers.Authorization = `Bearer ${updatedToken}`;
         return client(originalRequest);
       } catch (error) {
         await clearTokens();
@@ -83,34 +83,34 @@ client.interceptors.response.use(
     }
 
     return Promise.reject(error);
-    }
+  },
 );
 
 if (__DEV__) {
   // Log HTTP requests and responses
   client.interceptors.request.use(
-        async config => {
+    async (config) => {
       console.log("HTTP REQUEST", {
         baseURL: config.baseURL,
-                url: config.url,
         data: config.data,
+        url: config.url,
       });
 
       return config;
     },
-        error => console.log(JSON.stringify(error))
+    (error) => console.log(JSON.stringify(error)),
   );
 
   client.interceptors.response.use(
-        response => {
+    (response) => {
       console.log("HTTP RESPONSE", {
-                stats: response.status,
         data: response.data,
+        stats: response.status,
       });
 
       return response;
     },
-        error => console.log(JSON.stringify(error))
+    (error) => console.log(JSON.stringify(error)),
   );
 }
 

apps/mobile-legacy/src/api/endpoint.ts

@@ -9,8 +9,8 @@ export const endpoint = {
     getArticleCommentList: (articleId: string) => `/feed/articles/${articleId}/comments`,
     getArticleDetails: (articleId: string) => `/feed/articles/${articleId}`,
     getArticleOverviewList: `/feed/articles`,
-        getBookmarkList: `/feed/bookmarks`,
     getBookmarkedArticlesList: (bookmarkId: string) => `/feed/bookmarks/${bookmarkId}/articles`,
+    getBookmarkList: `/feed/bookmarks`,
     getSourceArticleOverviewList: (sourceId: string) => `/feed/sources/${sourceId}/articles`,
     getSourceDetails: (sourceId: string) => `/feed/sources/${sourceId}`,
     getSourceOverviewList: `/feed/sources`,
@@ -20,12 +20,12 @@ export const endpoint = {
     updateBookmark: (bookmarkId: string) => `/feed/bookmarks/${bookmarkId}`,
   },
   identityAndAccess: {
+    confirmAccount: (token: string) => `/account/confirm/${token}`,
+    getUserProfile: "/me",
     login: "/login_check",
     logout: "/token/invalidate",
     register: "/register",
-        getUserProfile: "/me",
     requestPassword: "/password/request",
-        confirmAccount: (token: string) => `/account/confirm/${token}`,
     resetPassword: (token: string) => `/password/reset/${token}`,
     unlockAccount: (token: string) => `/account/unlock/${token}`,
     updatePassword: "/password/update",

apps/mobile-legacy/src/api/request/feed-management/article.ts

@@ -1,6 +1,11 @@
 import { endpoint } from "@/api/endpoint";
 import { Article, ArticleOverview, TrendingArticle } from "@/api/schema/feed-management/article";
-import { ArticleFilters, useGetQuery, usePaginatedInfiniteQuery, usePaginatedQuery } from "@/api/shared";
+import {
+  ArticleFilters,
+  useGetQuery,
+  usePaginatedInfiniteQuery,
+  usePaginatedQuery,
+} from "@/api/shared";
 
 export const useArticleTrendingList = (filters: ArticleFilters = {}) => {
   return usePaginatedQuery<TrendingArticle>("/feed/trending", filters);
@@ -11,9 +16,15 @@ export const useArticleDetails = (articleId: string) => {
 };
 
 export const useArticleOverviewList = (filters: ArticleFilters = {}) => {
-    return usePaginatedQuery<ArticleOverview>(endpoint.feedManagement.getArticleOverviewList, filters);
+  return usePaginatedQuery<ArticleOverview>(
+    endpoint.feedManagement.getArticleOverviewList,
+    filters,
+  );
 };
 
 export const useInfiniteArticleOverviewList = (filters: ArticleFilters = {}) => {
-    return usePaginatedInfiniteQuery<ArticleOverview>(endpoint.feedManagement.getArticleOverviewList, filters);
+  return usePaginatedInfiniteQuery<ArticleOverview>(
+    endpoint.feedManagement.getArticleOverviewList,
+    filters,
+  );
 };

apps/mobile-legacy/src/api/request/feed-management/bookmark.ts

@@ -1,6 +1,16 @@
 import { endpoint } from "@/api/endpoint";
-import { Bookmark, BookmarkedArticle, BookmarkPayload } from "@/api/schema/feed-management/bookmark";
+import {
-import { ArticleFilters, useDeleteQuery, usePaginatedInfiniteQuery, usePostQuery, usePutQuery } from "@/api/shared";
+  Bookmark,
+  BookmarkedArticle,
+  BookmarkPayload,
+} from "@/api/schema/feed-management/bookmark";
+import {
+  ArticleFilters,
+  useDeleteQuery,
+  usePaginatedInfiniteQuery,
+  usePostQuery,
+  usePutQuery,
+} from "@/api/shared";
 
 export const useCreateBookmark = () => {
   return usePostQuery<BookmarkPayload>(endpoint.feedManagement.createBookmark);
@@ -29,6 +39,6 @@ export const useBookmarkList = (filters: ArticleFilters = {}) => {
 export const useBookmarkedArticlesList = (bookmarkId: string, filters: ArticleFilters = {}) => {
   return usePaginatedInfiniteQuery<BookmarkedArticle>(
     endpoint.feedManagement.getBookmarkedArticlesList(bookmarkId),
-        filters
+    filters,
   );
 };

apps/mobile-legacy/src/api/request/feed-management/comment.ts

@@ -3,7 +3,9 @@ import { Comment, CommentPayload } from "@/api/schema/feed-management/comment";
 import { useDeleteQuery, usePaginatedInfiniteQuery, usePostQuery } from "@/api/shared";
 
 export const useArticleCommentList = (articleId: string) => {
-    return usePaginatedInfiniteQuery<Comment>(endpoint.feedManagement.getArticleCommentList(articleId));
+  return usePaginatedInfiniteQuery<Comment>(
+    endpoint.feedManagement.getArticleCommentList(articleId),
+  );
 };
 
 export const useAddCommentToArticle = (articleId: string) => {

apps/mobile-legacy/src/api/request/feed-management/source.ts

@@ -1,20 +1,29 @@
 import { endpoint } from "@/api/endpoint";
 import { ArticleOverview } from "@/api/schema/feed-management/article";
 import { SourceDetails, SourceOverview } from "@/api/schema/feed-management/source";
-import { ArticleFilters, useDeleteQuery, useGetQuery, usePaginatedInfiniteQuery, usePostQuery } from "@/api/shared";
+import {
+  ArticleFilters,
+  useDeleteQuery,
+  useGetQuery,
+  usePaginatedInfiniteQuery,
+  usePostQuery,
+} from "@/api/shared";
 
 export const useSourceDetails = (sourceId: string) => {
   return useGetQuery<SourceDetails>(endpoint.feedManagement.getSourceDetails(sourceId));
 };
 
 export const useSourceOverviewList = (filters: ArticleFilters = {}) => {
-    return usePaginatedInfiniteQuery<SourceOverview>(endpoint.feedManagement.getSourceOverviewList, filters);
+  return usePaginatedInfiniteQuery<SourceOverview>(
+    endpoint.feedManagement.getSourceOverviewList,
+    filters,
+  );
 };
 
 export const useSourceArticleOverviewList = (sourceId: string, filters: ArticleFilters = {}) => {
   return usePaginatedInfiniteQuery<ArticleOverview>(
     endpoint.feedManagement.getSourceArticleOverviewList(sourceId),
-        filters
+    filters,
   );
 };
 

apps/mobile-legacy/src/api/schema/feed-management/bookmark.ts

@@ -21,10 +21,10 @@ export type Bookmark = {
 export type BookmarkedArticle = ArticleOverview;
 
 export const BookmarkPayloadSchema = Joi.object({
-    name: Joi.string().required().messages({
-        "string.empty": "Le nom est requis",
-        "any.required": "Le nom est requis",
-    }),
   description: Joi.string().optional(),
   isPublic: Joi.boolean().optional(),
+  name: Joi.string().required().messages({
+    "any.required": "Le nom est requis",
+    "string.empty": "Le nom est requis",
+  }),
 });

apps/mobile-legacy/src/api/schema/identity-and-access/login.ts

@@ -19,13 +19,13 @@ export type RefreshTokenResponse = {
 };
 
 export const LoginPayloadSchema = Joi.object<LoginPayload>({
-    username: Joi.string().required().messages({
-        "string.empty": "L'email est requis",
-        "any.required": "L'email est requis",
-    }),
   password: Joi.string().min(4).required().messages({
+    "any.required": "Le mot de passe est requis",
     "string.empty": "Le mot de passe est requis",
     "string.min": "Le mot de passe doit comporter au moins 4 caractères",
-        "any.required": "Le mot de passe est requis",
+  }),
+  username: Joi.string().required().messages({
+    "any.required": "L'email est requis",
+    "string.empty": "L'email est requis",
   }),
 });

apps/mobile-legacy/src/api/schema/identity-and-access/password.ts

@@ -17,37 +17,37 @@ export type UpdatePasswordPayload = {
 
 export const RequestPasswordPayloadSchema = Joi.object<RequestPasswordPayload>({
   email: Joi.string().required().messages({
-        "string.empty": "L'email est requis",
     "any.required": "L'email est requis",
+    "string.empty": "L'email est requis",
   }),
 });
 
 export const ResetPasswordPayloadSchema = Joi.object<ResetPasswordPayload>({
-    password: Joi.string().min(6).required().messages({
-        "string.empty": "Le mot de passe est requis",
-        "string.min": "Le mot de passe doit comporter au moins 6 caractères",
-        "any.required": "Le mot de passe est requis",
-    }),
   confirm: Joi.string().valid(Joi.ref("password")).required().messages({
     "any.only": "Les mots de passe ne correspondent pas",
-        "string.empty": "La confirmation du mot de passe est requise",
     "any.required": "La confirmation du mot de passe est requise",
+    "string.empty": "La confirmation du mot de passe est requise",
+  }),
+  password: Joi.string().min(6).required().messages({
+    "any.required": "Le mot de passe est requis",
+    "string.empty": "Le mot de passe est requis",
+    "string.min": "Le mot de passe doit comporter au moins 6 caractères",
   }),
 });
 
 export const UpdatePasswordPayloadSchema = Joi.object<UpdatePasswordPayload>({
-    current: Joi.string().required().messages({
-        "string.empty": "Le mot de passe actuel est requis",
-        "any.required": "Le mot de passe actuel est requis",
-    }),
-    password: Joi.string().min(6).required().messages({
-        "string.empty": "Le nouveau mot de passe est requis",
-        "string.min": "Le nouveau mot de passe doit comporter au moins 6 caractères",
-        "any.required": "Le nouveau mot de passe est requis",
-    }),
   confirm: Joi.string().valid(Joi.ref("password")).required().messages({
     "any.only": "Les mots de passe ne correspondent pas",
-        "string.empty": "La confirmation du nouveau mot de passe est requise",
     "any.required": "La confirmation du nouveau mot de passe est requise",
+    "string.empty": "La confirmation du nouveau mot de passe est requise",
+  }),
+  current: Joi.string().required().messages({
+    "any.required": "Le mot de passe actuel est requis",
+    "string.empty": "Le mot de passe actuel est requis",
+  }),
+  password: Joi.string().min(6).required().messages({
+    "any.required": "Le nouveau mot de passe est requis",
+    "string.empty": "Le nouveau mot de passe est requis",
+    "string.min": "Le nouveau mot de passe doit comporter au moins 6 caractères",
   }),
 });

apps/mobile-legacy/src/api/schema/identity-and-access/register.ts

@@ -7,17 +7,17 @@ export type RegisterPayload = {
 };
 
 export const RegisterPayloadSchema = Joi.object<RegisterPayload>({
-    name: Joi.string().required().messages({
-        "string.empty": "Le nom est requis",
-        "any.required": "Le nom est requis",
-    }),
   email: Joi.string().required().messages({
-        "string.empty": "L'email est requis",
     "any.required": "L'email est requis",
+    "string.empty": "L'email est requis",
+  }),
+  name: Joi.string().required().messages({
+    "any.required": "Le nom est requis",
+    "string.empty": "Le nom est requis",
   }),
   password: Joi.string().min(6).required().messages({
+    "any.required": "Le mot de passe est requis",
     "string.empty": "Le mot de passe est requis",
     "string.min": "Le mot de passe doit comporter au moins 4 caractères",
-        "any.required": "Le mot de passe est requis",
   }),
 });

apps/mobile-legacy/src/api/shared.ts

@@ -1,4 +1,10 @@
-import { skipToken, useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  skipToken,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
 import { AxiosError } from "axios";
 import qs from "qs";
 
@@ -45,7 +51,9 @@ export type PaginatedResponse<TItem> = {
   pagination: PaginationInfo;
 };
 
-export const safeMessage = (error: AxiosError<ClientErrorResponse | ClientDetailErrorResponse> | Error): string => {
+export const safeMessage = (
+  error: AxiosError<ClientErrorResponse | ClientDetailErrorResponse> | Error,
+): string => {
   if (error instanceof AxiosError && error.response) {
     const response = error.response.data;
 
@@ -59,52 +67,58 @@ export const safeMessage = (error: AxiosError<ClientErrorResponse | ClientDetail
   return "Une erreur est survenue";
 };
 
-export const usePaginatedInfiniteQuery = <TItem>(endpoint: string, filters: PaginationFilters = {}) => {
+export const usePaginatedInfiniteQuery = <TItem>(
+  endpoint: string,
+  filters: PaginationFilters = {},
+) => {
   return useInfiniteQuery<PaginatedResponse<TItem>, ErrorResponse>({
+    getNextPageParam: (lastPage: PaginatedResponse<TItem>) => {
+      const { lastId } = lastPage.pagination;
+      return lastId ? lastId : null;
+    },
     initialData: undefined,
     initialPageParam: null,
-        queryKey: [endpoint, filters],
     queryFn: async ({ pageParam = null }) => {
       const query = qs.stringify({ ...filters, lastId: pageParam }, { skipNulls: true });
       const url = `${endpoint}?${query}`;
       const response = await client.get<PaginatedResponse<TItem>>(url);
       return response.data;
     },
-        getNextPageParam: (lastPage: PaginatedResponse<TItem>) => {
+    queryKey: [endpoint, filters],
-            const { lastId } = lastPage.pagination;
-            return lastId ? lastId : null;
-        },
     staleTime: 1_000 * 60 * 10,
   });
 };
 
 export const usePaginatedQuery = <TItem>(endpoint: string, filters: PaginationFilters = {}) => {
   return useQuery<PaginatedResponse<TItem>, ErrorResponse>({
-        queryKey: [endpoint, filters],
     queryFn: async (): Promise<PaginatedResponse<TItem>> => {
       const query = qs.stringify({ ...filters, lastId: null }, { skipNulls: true });
       const url = `${endpoint}?${query}`;
       const response = await client.get<PaginatedResponse<TItem>>(url);
       return response.data;
     },
+    queryKey: [endpoint, filters],
     staleTime: 1_000 * 60 * 10,
   });
 };
 
 export const useGetQuery = <TItem>(endpoint: string, enabled: boolean = true) => {
   return useQuery<TItem, ErrorResponse>({
-        queryKey: [endpoint],
     queryFn: enabled
       ? async (): Promise<TItem> => {
           const response = await client.get<TItem>(endpoint);
           return response.data;
         }
       : skipToken,
+    queryKey: [endpoint],
     staleTime: 1_000 * 60 * 10,
   });
 };
 
-export const usePostQuery = <TPayload = void, TResponse = void>(endpoint: string, keys: string[] = []) => {
+export const usePostQuery = <TPayload = void, TResponse = void>(
+  endpoint: string,
+  keys: string[] = [],
+) => {
   const queryClient = useQueryClient();
   return useMutation<TResponse, ErrorResponse, TPayload>({
     mutationFn: async (data: TPayload): Promise<TResponse> => {
@@ -119,7 +133,10 @@ export const usePostQuery = <TPayload = void, TResponse = void>(endpoint: string
   });
 };
 
-export const usePutQuery = <TPayload = void, TResponse = void>(endpoint: string, keys: string[] = []) => {
+export const usePutQuery = <TPayload = void, TResponse = void>(
+  endpoint: string,
+  keys: string[] = [],
+) => {
   const queryClient = useQueryClient();
   return useMutation<TResponse, ErrorResponse, TPayload>({
     mutationFn: async (data: TPayload): Promise<TResponse> => {

apps/mobile-legacy/src/app/(authed)/(tabs)/_layout.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { BookMarked, Globe, Home, User } from "@tamagui/lucide-icons";
 import { Tabs } from "expo-router";
 import { useColorScheme } from "react-native";
@@ -13,68 +11,68 @@ export default function TabLayout() {
       initialRouteName="articles"
       screenOptions={{
         headerShown: false,
-                tabBarShowLabel: true,
         tabBarActiveTintColor: "$accent5",
         tabBarHideOnKeyboard: true,
+        tabBarLabelStyle: {
+          fontSize: 12,
+          fontWeight: "600",
+          textTransform: "none",
+        },
+        tabBarShowLabel: true,
         tabBarStyle: {
           backgroundColor: colorScheme === "dark" ? "black" : "white",
           borderTopWidth: 0,
           paddingBottom: 5,
           paddingTop: 5,
         },
-                tabBarLabelStyle: {
-                    fontSize: 12,
-                    fontWeight: "600",
-                    textTransform: "none",
-                },
       }}
     >
       <Tabs.Screen
         name="articles"
         options={{
           href: "/(authed)/(tabs)/articles",
+          tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
           tabBarLabel: ({ color }) => (
-                        <Paragraph size="$2" color={color}>
+            <Paragraph color={color} size="$2">
               Actualités
             </Paragraph>
           ),
-                    tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
         }}
       />
       <Tabs.Screen
         name="sources"
         options={{
           href: "/(authed)/(tabs)/sources",
+          tabBarIcon: ({ color, size }) => <Globe color={color} size={size} />,
           tabBarLabel: ({ color }) => (
-                        <Paragraph size="$2" color={color}>
+            <Paragraph color={color} size="$2">
               Sources
             </Paragraph>
           ),
-                    tabBarIcon: ({ color, size }) => <Globe size={size} color={color} />,
         }}
       />
       <Tabs.Screen
         name="bookmarks"
         options={{
           href: "/(authed)/(tabs)/bookmarks",
+          tabBarIcon: ({ color, size }) => <BookMarked color={color} size={size} />,
           tabBarLabel: ({ color }) => (
-                        <Paragraph size="$2" color={color}>
+            <Paragraph color={color} size="$2">
               Signets
             </Paragraph>
           ),
-                    tabBarIcon: ({ color, size }) => <BookMarked size={size} color={color} />,
         }}
       />
       <Tabs.Screen
         name="account"
         options={{
           href: "/(authed)/(tabs)/account",
+          tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
           tabBarLabel: ({ color }) => (
-                        <Paragraph size="$2" color={color}>
+            <Paragraph color={color} size="$2">
               Profil
             </Paragraph>
           ),
-                    tabBarIcon: ({ color, size }) => <User size={size} color={color} />,
         }}
       />
     </Tabs>

apps/mobile-legacy/src/app/(authed)/(tabs)/account/index.tsx

@@ -16,9 +16,9 @@ export default function Index() {
         <YGroup alignSelf="center" bordered size="$4">
           <YGroup.Item>
             <ListItem
-                            onPress={() => router.push("/account/settings")}
               icon={Settings}
               iconAfter={ChevronRight}
+              onPress={() => router.push("/account/settings")}
               title="Settings"
             />
           </YGroup.Item>

apps/mobile-legacy/src/app/(authed)/(tabs)/account/settings/index.tsx

@@ -11,8 +11,8 @@ export default function Index() {
 
   const handleLogout = async () => {
     mutate(undefined, {
-            onSuccess: () => authState.logout(),
       onError: () => authState.logout(),
+      onSuccess: () => authState.logout(),
     });
   };
 
@@ -23,9 +23,9 @@ export default function Index() {
       <YStack width="100%">
         <Button
           disabled={isPending}
+          fontWeight="bold"
           onPress={handleLogout}
           theme={isPending ? "disabled" : "accent"}
-                    fontWeight="bold"
         >
           {isPending ? <ActivityIndicator /> : "Déconnexion"}
         </Button>

apps/mobile-legacy/src/app/(authed)/(tabs)/articles/[id].tsx

@@ -12,8 +12,8 @@ import { ArticleCategoryPill, ArticleCoverImage } from "@/ui/components/content/
 import { SourceReferencePill } from "@/ui/components/content/source";
 import { BackButton } from "@/ui/components/controls/BackButton";
 import { IconButton } from "@/ui/components/controls/IconButton";
-import { ScreenView } from "@/ui/components/layout";
 import { LoadingView } from "@/ui/components/LoadingView";
+import { ScreenView } from "@/ui/components/layout";
 import { Caption, Text } from "@/ui/components/typography";
 
 export default function ArticleDetails() {
@@ -29,9 +29,9 @@ export default function ArticleDetails() {
 
   if (error) {
     Toast.show({
-            type: "error",
       text1: "Erreur",
       text2: safeMessage(error),
+      type: "error",
     });
     router.replace("/(authed)/(tabs)/articles");
   }
@@ -46,22 +46,27 @@ export default function ArticleDetails() {
         leadingAction={<BackButton onPress={() => router.dismissTo("/(authed)/(tabs)/articles")} />}
         trailingActions={
           <>
-                        <IconButton onPress={() => {}} icon={<Bookmark size="$1" />} />
+            <IconButton icon={<Bookmark size="$1" />} onPress={() => {}} />
-                        <IconButton onPress={() => {}} icon={<Share size="$1" />} />
+            <IconButton icon={<Share size="$1" />} onPress={() => {}} />
-                        <IconButton onPress={() => {}} icon={<MoreVertical size="$1" />} />
+            <IconButton icon={<MoreVertical size="$1" />} onPress={() => {}} />
           </>
         }
       />
       <ScrollView>
         <YStack>
           {article.metadata?.image && (
-                        <ArticleCoverImage uri={article.metadata.image} width="100%" height={225} marginBottom="$4" />
+            <ArticleCoverImage
+              height={225}
+              marginBottom="$4"
+              uri={article.metadata.image}
+              width="100%"
+            />
           )}
         </YStack>
-                <YStack gap="$4" backgroundColor="$background">
+        <YStack backgroundColor="$background" gap="$4">
-                    <XStack gap="$2" flexWrap="wrap">
+          <XStack flexWrap="wrap" gap="$2">
             {article.categories.map((category, index) => (
-                            <ArticleCategoryPill key={index} category={category.toLowerCase()} />
+              <ArticleCategoryPill category={category.toLowerCase()} key={index} />
             ))}
           </XStack>
           <H5 fontWeight="bold" marginBottom="$1">
@@ -70,18 +75,18 @@ export default function ArticleDetails() {
 
           <YStack gap="$2">
             <SourceReferencePill data={article.source} />
-                        <XStack height={20} alignItems="center">
+            <XStack alignItems="center" height={20}>
               <Caption>{relativeTime}</Caption>
-                            <Separator alignSelf="stretch" vertical marginHorizontal={16} />
+              <Separator alignSelf="stretch" marginHorizontal={16} vertical />
               <Caption>{article.readingTime} minutes de lecture</Caption>
             </XStack>
           </YStack>
 
-                    <Text size="$3" marginTop="$2">
+          <Text marginTop="$2" size="$3">
             {article.body.trim()}
           </Text>
         </YStack>
-                <Button width="100%" onPress={handleReadIntegrality} theme="accent" fontWeight="bold">
+        <Button fontWeight="bold" onPress={handleReadIntegrality} theme="accent" width="100%">
           Consulter l&#39;article
         </Button>
       </ScrollView>

apps/mobile-legacy/src/app/(authed)/(tabs)/articles/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { ScrollView, YStack } from "tamagui";
 
 import { useArticleOverviewList } from "@/api/request/feed-management/article";
@@ -24,24 +22,27 @@ export default function Index() {
       <ScrollView contentContainerStyle={{ paddingBottom: 0 }}>
         <YStack gap="$4">
           <YStack gap="$2">
-                        <ScreenView.Section title="Tendances" forwardLink="/(authed)/(tabs)/articles/trending" />
+            <ScreenView.Section
+              forwardLink="/(authed)/(tabs)/articles/trending"
+              title="Tendances"
+            />
 
             {articlesLoading && <ArticleSkeletonList displayMode="card" horizontal={true} />}
             {!articlesLoading && (
               <ArticleList
                 data={articleOverviews}
-                                refreshing={articlesLoading}
                 displayMode="card"
                 horizontal={true}
+                refreshing={articlesLoading}
               />
             )}
           </YStack>
           <YStack gap="$2">
-                        <ScreenView.Section title="Nos sources" forwardLink="/(authed)/(tabs)/sources" />
+            <ScreenView.Section forwardLink="/(authed)/(tabs)/sources" title="Nos sources" />
 
             {sourcesLoading && <SourceSkeletonList horizontal={true} />}
             {!sourcesLoading && (
-                            <SourceList data={sourcesOverviews} refreshing={sourcesLoading} horizontal={true} />
+              <SourceList data={sourcesOverviews} horizontal={true} refreshing={sourcesLoading} />
             )}
           </YStack>
         </YStack>

apps/mobile-legacy/src/app/(authed)/(tabs)/articles/trending.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { useRouter } from "expo-router";
 
 import { useInfiniteArticleOverviewList } from "@/api/request/feed-management/article";
@@ -11,9 +9,8 @@ import { ScreenView } from "@/ui/components/layout";
 
 export default function Trending() {
   const router = useRouter();
-    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useInfiniteArticleOverviewList(
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } =
-        { limit: 20 }
+    useInfiniteArticleOverviewList({ limit: 20 });
-    );
   const articles: TrendingArticle[] = useFlattenedItems(data);
 
   return (
@@ -29,10 +26,10 @@ export default function Trending() {
           data={articles}
           fetchNextPage={fetchNextPage}
           hasNextPage={hasNextPage}
-                    isFetchingNextPage={isFetchingNextPage}
-                    refreshing={isLoading}
-                    onRefresh={refetch}
           infiniteScroll={true}
+          isFetchingNextPage={isFetchingNextPage}
+          onRefresh={refetch}
+          refreshing={isLoading}
         />
       )}
     </ScreenView>

apps/mobile-legacy/src/app/(authed)/(tabs)/bookmarks/index.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Plus, Search } from "@tamagui/lucide-icons";
 import { YStack } from "tamagui";
 
@@ -8,19 +6,20 @@ import { Bookmark } from "@/api/schema/feed-management/bookmark";
 import { useFlattenedItems } from "@/hooks/use-flattened-items";
 import { BookmarkList } from "@/ui/components/content/bookmark";
 import { IconButton } from "@/ui/components/controls/IconButton";
-import { ScreenView } from "@/ui/components/layout";
 import { LoadingView } from "@/ui/components/LoadingView";
+import { ScreenView } from "@/ui/components/layout";
 
 export default function Index() {
-    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } = useBookmarkList();
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch } =
+    useBookmarkList();
   const bookmarks: Bookmark[] = useFlattenedItems(data);
 
   return (
     <ScreenView>
       <ScreenView.Heading
+        leadingAction={<IconButton icon={<Plus size="$1" />} onPress={() => {}} />}
         title="Bookmarks"
-                leadingAction={<IconButton onPress={() => {}} icon={<Plus size="$1" />} />}
+        trailingActions={<IconButton icon={<Search size="$1" />} onPress={() => {}} />}
-                trailingActions={<IconButton onPress={() => {}} icon={<Search size="$1" />} />}
       />
 
       <YStack width="100%">
@@ -28,12 +27,12 @@ export default function Index() {
         {!isLoading && (
           <BookmarkList
             data={bookmarks}
-                        refreshing={isLoading}
-                        onRefresh={refetch}
-                        infiniteScroll={true}
-                        hasNextPage={hasNextPage}
-                        isFetchingNextPage={isFetchingNextPage}
             fetchNextPage={fetchNextPage}
+            hasNextPage={hasNextPage}
+            infiniteScroll={true}
+            isFetchingNextPage={isFetchingNextPage}
+            onRefresh={refetch}
+            refreshing={isLoading}
           />
         )}
       </YStack>

apps/mobile-legacy/src/app/(unauthed)/password-request.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { joiResolver } from "@hookform/resolvers/joi";
 import { Link, useRouter } from "expo-router";
 import { useForm } from "react-hook-form";
@@ -7,7 +5,10 @@ import Toast from "react-native-toast-message";
 import { YStack } from "tamagui";
 
 import { usePasswordForgotten } from "@/api/request/identity-and-access/password";
-import { RequestPasswordPayload, RequestPasswordPayloadSchema } from "@/api/schema/identity-and-access/password";
+import {
+  RequestPasswordPayload,
+  RequestPasswordPayloadSchema,
+} from "@/api/schema/identity-and-access/password";
 import { ErrorResponse, safeMessage } from "@/api/shared";
 import { FormEmailInput } from "@/ui/components/controls/forms";
 import { SubmitButton } from "@/ui/components/controls/SubmitButton";
@@ -24,6 +25,13 @@ export default function PasswordRequest() {
 
   const onSubmit = (data: RequestPasswordPayload) => {
     mutate(data, {
+      onError: (error: ErrorResponse) => {
+        Toast.show({
+          text1: "Erreur de connexion",
+          text2: safeMessage(error),
+          type: "error",
+        });
+      },
       onSuccess: () => {
         Toast.show({
           text1: "Succès",
@@ -32,37 +40,31 @@ export default function PasswordRequest() {
         });
         router.push("/(unauthed)/signin");
       },
-            onError: (error: ErrorResponse) => {
-                Toast.show({
-                    text1: "Erreur de connexion",
-                    text2: safeMessage(error),
-                    type: "error",
-                });
-            },
     });
   };
 
   return (
     <ScreenView>
-            <YStack flex={1} gap="$4" width="100%" justifyContent="flex-start">
+      <YStack flex={1} gap="$4" justifyContent="flex-start" width="100%">
         <YStack gap="$4">
           <Heading>Mot de passe oublié ?</Heading>
           <Text>
-                        Veuillez entrer votre adresse e-mail pour recevoir un lien de réinitialisation de mot de passe.
+            Veuillez entrer votre adresse e-mail pour recevoir un lien de réinitialisation de mot de
+            passe.
           </Text>
         </YStack>
 
         <FormEmailInput control={control} name="email" />
 
-                <Link href="/signin" asChild>
+        <Link asChild href="/signin">
           <Text>Vous avez pas de compte ? Se connecter</Text>
         </Link>
       </YStack>
       <SubmitButton
-                label="Réinitialiser le mot de passe"
-                onPress={handleSubmit(onSubmit)}
         isPending={isPending}
         isValid={formState.isValid}
+        label="Réinitialiser le mot de passe"
+        onPress={handleSubmit(onSubmit)}
       />
     </ScreenView>
   );

apps/mobile-legacy/src/app/(unauthed)/signin.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { joiResolver } from "@hookform/resolvers/joi";
 import { Link, useRouter } from "expo-router";
 import { useForm } from "react-hook-form";
@@ -7,7 +5,11 @@ import Toast from "react-native-toast-message";
 import { YStack } from "tamagui";
 
 import { useLogin } from "@/api/request/identity-and-access/login";
-import { LoginPayload, LoginPayloadSchema, LoginResponse } from "@/api/schema/identity-and-access/login";
+import {
+  LoginPayload,
+  LoginPayloadSchema,
+  LoginResponse,
+} from "@/api/schema/identity-and-access/login";
 import { ErrorResponse, safeMessage } from "@/api/shared";
 import { useAuth } from "@/providers/auth-provider";
 import { FormEmailInput, FormPasswordInput } from "@/ui/components/controls/forms";
@@ -30,10 +32,6 @@ export default function SignIn() {
 
   const onSubmit = (data: LoginPayload) => {
     mutate(data, {
-            onSuccess: async (data: LoginResponse) => {
-                auth.login(data.token, data.refresh_token);
-                Toast.show({ text1: "Connexion réussie", type: "success" });
-            },
       onError: (error: ErrorResponse) => {
         Toast.show({
           text1: "Erreur de connexion",
@@ -41,12 +39,16 @@ export default function SignIn() {
           type: "error",
         });
       },
+      onSuccess: async (data: LoginResponse) => {
+        auth.login(data.token, data.refresh_token);
+        Toast.show({ text1: "Connexion réussie", type: "success" });
+      },
     });
   };
 
   return (
     <ScreenView>
-            <YStack flex={1} gap="$4" width="100%" justifyContent="flex-start">
+      <YStack flex={1} gap="$4" justifyContent="flex-start" width="100%">
         <YStack gap="$4">
           <Heading>Connexion</Heading>
           <Text>Bienvenue sur Basango, la plateforme d&#39;actualités intelligente</Text>
@@ -56,24 +58,24 @@ export default function SignIn() {
           <FormEmailInput control={control} name="username" />
           <YStack gap="$2">
             <FormPasswordInput control={control} name="password" />
-                        <Link href="/password-request" asChild>
+            <Link asChild href="/password-request">
               <Text color="$accent6"> Mot de passe oublié ?</Text>
             </Link>
           </YStack>
         </YStack>
 
         <Caption>
-                    En continuant, vous acceptez les conditions d&#39;utilisation de Basango et reconnaissez avoir lu
+          En continuant, vous acceptez les conditions d&#39;utilisation de Basango et reconnaissez
-                    notre politique de confidentialité.
+          avoir lu notre politique de confidentialité.
         </Caption>
-                <Link href="/signup" asChild>
+        <Link asChild href="/signup">
           <Text>Vous n&#39;avez pas de compte ? Créer un compte</Text>
         </Link>
       </YStack>
       <SubmitButton
-                label="Se connecter"
         isPending={isPending}
         isValid={formState.isValid}
+        label="Se connecter"
         onPress={handleSubmit(onSubmit)}
       />
     </ScreenView>

apps/mobile-legacy/src/app/(unauthed)/signup.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { joiResolver } from "@hookform/resolvers/joi";
 import { User } from "@tamagui/lucide-icons";
 import { Link, useRouter } from "expo-router";
@@ -25,6 +23,13 @@ export default function SingUp() {
 
   const onSubmit = (data: RegisterPayload) => {
     mutate(data, {
+      onError: (error: ErrorResponse) => {
+        Toast.show({
+          text1: "Erreur",
+          text2: safeMessage(error),
+          type: "error",
+        });
+      },
       onSuccess: () => {
         Toast.show({
           text1: "Félicitations !",
@@ -33,19 +38,12 @@ export default function SingUp() {
         });
         router.replace("/(unauthed)/signin");
       },
-            onError: (error: ErrorResponse) => {
-                Toast.show({
-                    text1: "Erreur",
-                    text2: safeMessage(error),
-                    type: "error",
-                });
-            },
     });
   };
 
   return (
     <ScreenView>
-            <YStack flex={1} gap="$4" width="100%" justifyContent="flex-start">
+      <YStack flex={1} gap="$4" justifyContent="flex-start" width="100%">
         <YStack gap="$4">
           <Heading>Inscription</Heading>
           <Text>Rejoignez la communauté Basango et restez informé des dernières actualités</Text>
@@ -54,27 +52,27 @@ export default function SingUp() {
         <YStack gap="$2">
           <FormTextInput
             control={control}
-                        name="name"
-                        leadingAdornment={User}
             label="Nom complet"
+            leadingAdornment={User}
+            name="name"
             placeholder="John Doe"
           />
           <FormEmailInput control={control} name="email" />
           <FormPasswordInput control={control} name="password" />
         </YStack>
         <Caption>
-                    En continuant, vous acceptez les conditions d&#39;utilisation de Basango et reconnaissez avoir lu
+          En continuant, vous acceptez les conditions d&#39;utilisation de Basango et reconnaissez
-                    notre politique de confidentialité.
+          avoir lu notre politique de confidentialité.
         </Caption>
         <Link href="/signin">
           <Text>Vous avez un compte ? Connectez-vous</Text>
         </Link>
       </YStack>
       <SubmitButton
-                label="Créer un compte"
-                onPress={handleSubmit(onSubmit)}
         isPending={isPending}
         isValid={formState.isValid}
+        label="Créer un compte"
+        onPress={handleSubmit(onSubmit)}
       />
     </ScreenView>
   );

apps/mobile-legacy/src/app/(unauthed)/welcome.tsx

@@ -10,28 +10,28 @@ export default function Welcome() {
 
   return (
     <ScreenView justifyContent="center">
-            <AppIcon width={120} height={120} />
+      <AppIcon height={120} width={120} />
-            <YStack width="100%" gap="$6">
+      <YStack gap="$6" width="100%">
         <YStack gap="$3">
           <Display textAlign="center">Bienvenue sur Basango</Display>
-                    <Text textAlign="center" lineHeight="$1" marginTop="auto">
+          <Text lineHeight="$1" marginTop="auto" textAlign="center">
             La première plateforme d&#39;actualités intelligente qui vous aide à rester informé sur
             congolaise et internationale.
           </Text>
         </YStack>
 
         <YStack gap="$4">
-                    <Button onPress={() => router.push("/signin")} theme="accent" fontWeight="bold">
+          <Button fontWeight="bold" onPress={() => router.push("/signin")} theme="accent">
             Se connecter
           </Button>
-                    <Link href="/signup" asChild>
+          <Link asChild href="/signup">
             <Text textAlign="center">Ouvrir un compte</Text>
           </Link>
         </YStack>
 
         <Caption textAlign="center">
-                    En continuant, vous acceptez les conditions d&#39;utilisation de Basango et reconnaissez avoir lu
+          En continuant, vous acceptez les conditions d&#39;utilisation de Basango et reconnaissez
-                    notre politique de confidentialité.
+          avoir lu notre politique de confidentialité.
         </Caption>
       </YStack>
     </ScreenView>

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

@@ -9,15 +9,15 @@ export default function NotFoundScreen() {
   return (
     <ScreenView>
       <Stack.Screen options={{ title: "Oops !" }} />
-            <View flex={1} backgroundColor="$background" padding="$4">
+      <View backgroundColor="$background" flex={1} padding="$4">
-                <YStack alignItems="center" justifyContent="center" flex={1} gap="$4">
+        <YStack alignItems="center" flex={1} gap="$4" justifyContent="center">
-                    <AppIcon width={100} height={100} />
+          <AppIcon height={100} width={100} />
-                    <YStack width="100%" gap="$6" alignItems="center" paddingHorizontal="$4">
+          <YStack alignItems="center" gap="$6" paddingHorizontal="$4" width="100%">
             <YStack>
               <Heading fontWeight="bold" lineHeight="$8" textAlign="center">
                 Une erreur s&#39;est produite
               </Heading>
-                            <Text textAlign="center" lineHeight="$1" marginTop="auto">
+              <Text lineHeight="$1" marginTop="auto" textAlign="center">
                 Nous avons une difficulté à charger la page que vous recherchez.
               </Text>
             </YStack>

apps/mobile-legacy/src/app/_layout.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-
 import * as Sentry from "@sentry/react-native";
 import { Stack } from "expo-router";
+import React from "react";
 import { useColorScheme } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import Toast from "react-native-toast-message";
@@ -12,12 +11,12 @@ import { RootProviders } from "@/providers/root-providers";
 export { ErrorBoundary } from "expo-router";
 
 Sentry.init({
+  debug: __DEV__,
   dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
   sendDefaultPii: true,
-    debug: __DEV__,
-    tracesSampleRate: 1.0,
-    tracePropagationTargets: [/.*?/],
   spotlight: __DEV__,
+  tracePropagationTargets: [/.*?/],
+  tracesSampleRate: 1.0,
 });
 
 function RootLayout() {
@@ -29,7 +28,7 @@ function RootLayout() {
       <RootProviders>
         <Theme name={colorScheme || "dark"}>
           <Stack screenOptions={{ headerShown: false }} />
-                    <Toast topOffset={insets.top + 10} position="top" visibilityTime={6_000} />
+          <Toast position="top" topOffset={insets.top + 10} visibilityTime={6_000} />
         </Theme>
       </RootProviders>
     </React.StrictMode>

apps/mobile-legacy/src/app/index.tsx

@@ -9,5 +9,9 @@ export default function Index() {
     return null;
   }
 
-    return auth.isLoggedIn ? <Redirect href="/(authed)/(tabs)/articles" /> : <Redirect href="/(unauthed)/welcome" />;
+  return auth.isLoggedIn ? (
+    <Redirect href="/(authed)/(tabs)/articles" />
+  ) : (
+    <Redirect href="/(unauthed)/welcome" />
+  );
 }

apps/mobile-legacy/src/assets/illustrations/BookmarkIllustration.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 import Svg, { Circle, G, Path, Rect, SvgProps } from "react-native-svg";
 
 /**
@@ -73,7 +71,13 @@ export default function BookmarkIllustration(props: SvgProps) {
           d="M249 439a2.51 2.51 0 11-2.52-2.48A2.5 2.5 0 01249 439zM263 438.89a2.5 2.5 0 11-2.52-2.48 2.52 2.52 0 012.52 2.48z"
           fill="#263238"
         />
-                <Circle cx={274.51} cy={438.8} r={2.5} transform="rotate(-45.69 274.488 438.779)" fill="#263238" />
+        <Circle
+          cx={274.51}
+          cy={438.8}
+          fill="#263238"
+          r={2.5}
+          transform="rotate(-45.69 274.488 438.779)"
+        />
         <Path d="M197.74 318.91H318.79V326.82000000000005H197.74z" fill="#23a99c" />
         <Path
           d="M317.06 344.92c0 .28-27.18.52-60.69.52s-60.7-.24-60.7-.52 27.17-.52 60.7-.52 60.69.23 60.69.52zM317.06 359.32c0 .28-27.18.51-60.69.51s-60.7-.23-60.7-.51 27.17-.52 60.7-.52 60.69.2 60.69.52zM317.06 373.71c0 .29-27.18.52-60.69.52s-60.7-.23-60.7-.52 27.17-.51 60.7-.51 60.69.23 60.69.51zM317.06 388.11c0 .28-27.18.52-60.69.52s-60.7-.24-60.7-.52 27.17-.52 60.7-.52 60.69.23 60.69.52zM317.06 402.5c0 .29-27.18.52-60.69.52s-60.7-.23-60.7-.52 27.17-.51 60.7-.51 60.69.23 60.69.51zM318.79 418.83c0 .28-27.17.51-60.68.51s-60.7-.23-60.7-.51 27.17-.52 60.7-.52 60.68.23 60.68.52z"
@@ -103,7 +107,7 @@ export default function BookmarkIllustration(props: SvgProps) {
           d="M182.15 149.76H183.08l2.52-.07-.09.09v-1.83-1.06a1 1 0 01.87-.79h1.21a1 1 0 01.85 1v2.67l-.14-.15h3.18l-.15.15v-4-1a1 1 0 00-.44-.73l-1.39-1.38-1.34-1.32-.65-.64c-.23-.22-.39-.44-.64-.49a.85.85 0 00-.71.14c-.19.15-.4.39-.59.57l-1.19 1.08c-.72.74-1.48 1.43-2 2.06a2.15 2.15 0 00-.16 1.18v4.5a1.65 1.65 0 010-.38v-1.13c0-.44 0-1.14-.05-1.83v-1.14a2.36 2.36 0 01.17-1.31c.59-.73 1.29-1.36 2-2.14l1.13-1.16c.21-.2.37-.4.62-.61a1.14 1.14 0 01.95-.19 1.75 1.75 0 01.78.56l.65.64 1.35 1.32c.46.44.92.9 1.39 1.36a1.29 1.29 0 01.53.95v5.15h-3.48v-.15-2.67a.76.76 0 00-.62-.75h-1.15a.77.77 0 00-.67.6v2.92H182.49c-.28-.01-.35-.01-.34-.02z"
           fill="#263238"
         />
-                <Rect x={197.63} y={138.21} width={116.21} height={13.34} rx={5.12} fill="#e0e0e0" />
+        <Rect fill="#e0e0e0" height={13.34} rx={5.12} width={116.21} x={197.63} y={138.21} />
         <Path
           d="M211.42 144.68V147h-1.17v-2.13c0-.66-.3-1-.82-1s-1 .35-1 1.09v2h-1.17v-5.57h1.17v2a1.79 1.79 0 011.28-.48 1.59 1.59 0 011.71 1.77zM215.08 146.79a1.61 1.61 0 01-1 .26 1.33 1.33 0 01-1.51-1.45v-1.66H212V143h.62v-1h1.17v1h1v.9h-1v1.65a.47.47 0 00.5.53.78.78 0 00.48-.15zM218.26 146.79a1.62 1.62 0 01-1 .26 1.33 1.33 0 01-1.5-1.45v-1.66h-.63V143h.63v-1H217v1h1v.9h-1v1.65a.47.47 0 00.5.53.75.75 0 00.47-.15zM223.32 145a2 2 0 01-2 2.08 1.57 1.57 0 01-1.22-.49v1.89h-1.17V143H220v.47a1.55 1.55 0 011.27-.53 2 2 0 012.05 2.06zm-1.19 0a1 1 0 10-1 1.12 1 1 0 001-1.12zM223.81 143.62a.73.73 0 011.46 0 .73.73 0 11-1.46 0zm0 2.69a.73.73 0 011.46 0 .73.73 0 11-1.46 0zM228.15 140.67h1l-2.48 7.07h-1zM230.55 140.67h1l-2.47 7.07h-1.05z"
           fill="#263238"
@@ -137,8 +141,14 @@ export default function BookmarkIllustration(props: SvgProps) {
           d="M102.43 438.51a.79.79 0 010-.25v-.74c0-.68 0-1.63-.09-2.83-.08-2.51-.18-6.06-.3-10.43s-.32-9.64-.64-15.45-.76-12.2-1.64-18.85a61.07 61.07 0 00-1.89-9.58A50.15 50.15 0 0094.3 372a48.59 48.59 0 00-4.42-6.94 45.1 45.1 0 00-4.82-5.29 35.57 35.57 0 00-8.55-5.77c-.56-.26-1.05-.51-1.48-.68l-1.12-.44-.68-.27-.23-.11.24.06.71.23 1.13.39c.45.16.94.4 1.51.64a34.33 34.33 0 018.71 5.74 44.83 44.83 0 014.92 5.3 47.87 47.87 0 014.49 7 49.31 49.31 0 013.57 8.45 60.16 60.16 0 011.92 9.65c.88 6.68 1.3 13.07 1.6 18.89s.43 11.07.53 15.47.12 8 .13 10.44V438.33a.67.67 0 01-.03.18zM106.54 443.68a32.74 32.74 0 01-1.25-4.91 51.7 51.7 0 01-.52-13.78 92 92 0 014.35-20c2.35-7.35 5.53-15.21 8.25-23.66a109.27 109.27 0 003.28-12.52 110.19 110.19 0 001.62-11.94 173.75 173.75 0 00.36-20.42c-.19-5.82-.5-10.53-.7-13.78-.09-1.6-.16-2.85-.22-3.74v-1a1.37 1.37 0 010-.33 1.23 1.23 0 010 .33c0 .24.06.57.1 1 .07.89.18 2.14.31 3.74.26 3.25.62 7.95.86 13.77a166.42 166.42 0 01-.25 20.48 111.7 111.7 0 01-1.6 12 107.63 107.63 0 01-3.28 12.58c-2.73 8.47-5.93 16.32-8.29 23.64a93.11 93.11 0 00-4.43 19.86 53.33 53.33 0 00.36 13.71c.28 1.6.54 2.84.76 3.67.1.39.17.71.23 1a1.27 1.27 0 01.06.3z"
           fill="#263238"
         />
-                <Path d="M134.87 448.84L81.23 448.84 80 438.51 134.87 438.51 134.87 448.84z" fill="#455a64" />
+        <Path
-                <Path d="M86.98 447.66L93.69 478.63 122.84 478.63 129.11 447.66 86.98 447.66z" fill="#455a64" />
+          d="M134.87 448.84L81.23 448.84 80 438.51 134.87 438.51 134.87 448.84z"
+          fill="#455a64"
+        />
+        <Path
+          d="M86.98 447.66L93.69 478.63 122.84 478.63 129.11 447.66 86.98 447.66z"
+          fill="#455a64"
+        />
         <Path
           d="M134.87 448.84c0 .14-11.8.22-26.34.18s-26.34-.19-26.34-.33 11.79-.22 26.34-.18 26.34.19 26.34.33z"
           fill="#455a64"

apps/mobile-legacy/src/hooks/use-flattened-items.ts

@@ -16,7 +16,7 @@ export const useFlattenedItems = <T>(data: PaginatedResult<T> | undefined | null
     }
 
     if (data.pages && Array.isArray(data.pages) && data.pages.length > 0) {
-            return data.pages.flatMap(page => page.items || []);
+      return data.pages.flatMap((page) => page.items || []);
     } else if (data.items && Array.isArray(data.items)) {
       return data.items;
     } else {

apps/mobile-legacy/src/hooks/use-relative-time.ts

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
-
 import { formatDistanceToNowStrict, Locale } from "date-fns";
 import { fr } from "date-fns/locale";
+import { useEffect, useState } from "react";
 
 export const useRelativeTime = (
   dateInput: string | Date | number | null | undefined,
@@ -12,7 +11,7 @@ export const useRelativeTime = (
     roundingMethod?: "floor" | "ceil" | "round";
     includeSeconds?: boolean;
   },
-    updateInterval: number = 60000
+  updateInterval: number = 60000,
 ): string => {
   const [relativeTime, setRelativeTime] = useState("");
 
@@ -25,7 +24,7 @@ export const useRelativeTime = (
     const date = new Date(dateInput);
 
     // Check if the date is valid
-        if (isNaN(date.getTime())) {
+    if (Number.isNaN(date.getTime())) {
       setRelativeTime("Invalid Date");
       return;
     }
@@ -33,8 +32,8 @@ export const useRelativeTime = (
     const updateTime = () => {
       // Default options if none provided, ensures suffix is added
       const effectiveOptions = {
-                locale: fr,
         addSuffix: true,
+        locale: fr,
         ...options,
       };
 

apps/mobile-legacy/src/providers/auth-provider.tsx

@@ -1,8 +1,7 @@
+import { SplashScreen, useRouter } from "expo-router";
 import React, { createContext, useContext, useEffect, useState } from "react";
 
-import { useRouter, SplashScreen } from "expo-router";
+import { clearTokens, getAccessToken, getRefreshToken, setTokens } from "@/store/auth";
-
-import { clearTokens, setTokens, getAccessToken, getRefreshToken } from "@/store/auth";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -16,11 +15,11 @@ type AuthState = {
 };
 
 const AuthContext = createContext<AuthState>({
-    isReady: false,
+  accessToken: null,
   isLoggedIn: false,
+  isReady: false,
   login: () => {},
   logout: () => {},
-    accessToken: null,
   refreshToken: null,
 });
 
@@ -53,7 +52,10 @@ export function AuthProvider({ children }: React.PropsWithChildren) {
   useEffect(() => {
     const loadTokens = async () => {
       try {
-                const [storedAccess, storedRefresh] = await Promise.all([getAccessToken(), getRefreshToken()]);
+        const [storedAccess, storedRefresh] = await Promise.all([
+          getAccessToken(),
+          getRefreshToken(),
+        ]);
 
         if (storedAccess && storedRefresh) {
           setAccessToken(storedAccess);
@@ -72,11 +74,11 @@ export function AuthProvider({ children }: React.PropsWithChildren) {
   return (
     <AuthContext.Provider
       value={{
-                isReady,
+        accessToken,
         isLoggedIn,
+        isReady,
         login,
         logout,
-                accessToken,
         refreshToken,
       }}
     >

apps/mobile-legacy/src/providers/fonts-loader-provider.tsx

@@ -1,6 +1,3 @@
-import type React from "react";
-import { useEffect } from "react";
-
 import {
   Inter_100Thin,
   Inter_200ExtraLight,
@@ -14,6 +11,8 @@ import {
   useFonts,
 } from "@expo-google-fonts/inter";
 import { SplashScreen } from "expo-router";
+import type React from "react";
+import { useEffect } from "react";
 
 SplashScreen.preventAutoHideAsync();
 

apps/mobile-legacy/src/providers/network-provider.tsx

@@ -1,7 +1,6 @@
-import React, { createContext, useContext, useEffect, useState } from "react";
-
 import * as Network from "expo-network";
 import { NetworkStateEvent } from "expo-network";
+import React, { createContext, useContext, useEffect, useState } from "react";
 
 type NetworkState = {
   isConnected: boolean;
@@ -34,7 +33,7 @@ export const NetworkProvider = ({ children }: React.PropsWithChildren) => {
     subscribeToNetworkChanges();
 
     return () => {
-            subscription && subscription.remove();
+      subscription?.remove();
     };
   }, []);
 

apps/mobile-legacy/src/providers/tanstack-query-provider.tsx

@@ -1,6 +1,5 @@
-import type React from "react";
-
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type React from "react";
 
 export const queryClient = new QueryClient();
 

apps/mobile-legacy/src/ui/components/AppIcon.tsx

@@ -10,11 +10,11 @@ export const AppIcon = (props: AppLogoProps) => {
 
   return (
     <Image
+      height={width}
+      marginBottom="$2"
+      objectFit="contain"
       source={require("@/assets/images/logo.png")}
       width={height}
-            height={width}
-            objectFit="contain"
-            marginBottom="$2"
     />
   );
 };

apps/mobile-legacy/src/ui/components/LoadingView.tsx

@@ -4,7 +4,14 @@ import { View } from "tamagui";
 import { Caption } from "@/ui/components/typography";
 
 export const LoadingView = () => (
-    <View flex={1} padding="$4" backgroundColor="$background" alignItems="center" justifyContent="center" gap="$4">
+  <View
+    alignItems="center"
+    backgroundColor="$background"
+    flex={1}
+    gap="$4"
+    justifyContent="center"
+    padding="$4"
+  >
     <ActivityIndicator />
     <Caption>Chargement...</Caption>
   </View>

apps/mobile-legacy/src/ui/components/content/article/ArticleCategoryPill.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Caption } from "@/ui/components/typography";
 
 type ArticleCategoryPillProps = {

apps/mobile-legacy/src/ui/components/content/article/ArticleCoverImage.tsx

@@ -1,8 +1,8 @@
 import { GetProps, Image, styled } from "tamagui";
 
 const StyledImage = styled(Image, {
-    borderRadius: "$4",
   backgroundColor: "$gray3",
+  borderRadius: "$4",
   objectFit: "cover",
 });
 
@@ -15,5 +15,7 @@ type ArticleCoverImageProps = GetProps<typeof StyledImage> & {
 export const ArticleCoverImage = (props: ArticleCoverImageProps) => {
   const { width, height, uri, ...rest } = props;
 
-    return <StyledImage source={{ uri, cache: "force-cache" }} width={width} height={height} {...rest} />;
+  return (
+    <StyledImage height={height} source={{ cache: "force-cache", uri }} width={width} {...rest} />
+  );
 };

apps/mobile-legacy/src/ui/components/content/article/ArticleList.tsx

@@ -79,7 +79,7 @@ const ArticleList: ArticleListComponent = (props: ArticleListProps) => {
         </View>
       );
     },
-        [horizontal, displayMode]
+    [horizontal, displayMode],
   );
 
   const handleOnEndReached = useCallback(async () => {
@@ -92,18 +92,18 @@ const ArticleList: ArticleListComponent = (props: ArticleListProps) => {
     <FlatList
       {...rest}
       data={data}
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            ItemSeparatorComponent={horizontal ? HorizontalSeparator : VerticalSeparator}
       horizontal={horizontal}
-            showsHorizontalScrollIndicator={false}
+      ItemSeparatorComponent={horizontal ? HorizontalSeparator : VerticalSeparator}
       initialNumToRender={5}
-            onEndReachedThreshold={0.5}
+      keyExtractor={keyExtractor}
-            removeClippedSubviews={true}
-            onEndReached={handleOnEndReached}
-            refreshing={refreshing}
-            ListFooterComponent={infiniteScroll ? LoadingIndicator : undefined}
       ListEmptyComponent={() => <Text>Pas d’articles disponibles pour le moment.</Text>}
+      ListFooterComponent={infiniteScroll ? LoadingIndicator : undefined}
+      onEndReached={handleOnEndReached}
+      onEndReachedThreshold={0.5}
+      refreshing={refreshing}
+      removeClippedSubviews={true}
+      renderItem={renderItem}
+      showsHorizontalScrollIndicator={false}
     />
   );
 };

apps/mobile-legacy/src/ui/components/content/article/ArticleMagazineCard.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Link } from "expo-router";
 import { Card, XStack, YStack } from "tamagui";
 
@@ -18,24 +16,24 @@ export const ArticleMagazineCard = (props: ArticleMagazineCardProps) => {
   const relativeTime = useRelativeTime(data.publishedAt);
 
   return (
-        <Card width="100%" backgroundColor="transparent" borderRadius="$4" padding={0}>
+    <Card backgroundColor="transparent" borderRadius="$4" padding={0} width="100%">
       <Link href={`/(authed)/(tabs)/articles/${data.id}`}>
-                <XStack flexDirection="row" gap="$3" alignItems="center">
+        <XStack alignItems="center" flexDirection="row" gap="$3">
           <YStack flex={1} gap="$2">
-                        <Text numberOfLines={2} fontWeight="600" fontSize="$5">
+            <Text fontSize="$5" fontWeight="600" numberOfLines={2}>
               {data.title}
             </Text>
-                        <Text size="$3" numberOfLines={2} color="$colorHover">
+            <Text color="$colorHover" numberOfLines={2} size="$3">
               {data.excerpt}
             </Text>
           </YStack>
 
-                    {data.image && <ArticleCoverImage uri={data.image} width={120} height={90} />}
+          {data.image && <ArticleCoverImage height={90} uri={data.image} width={120} />}
         </XStack>
       </Link>
 
       <YStack marginTop="$3">
-                <XStack justifyContent="space-between" alignItems="center">
+        <XStack alignItems="center" justifyContent="space-between">
           <SourceReferencePill data={data.source} />
           <Caption>{relativeTime}</Caption>
         </XStack>

apps/mobile-legacy/src/ui/components/content/article/ArticleOverviewCard.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Link } from "expo-router";
 import { Card, XStack, YStack } from "tamagui";
 
@@ -19,22 +17,20 @@ export const ArticleOverviewCard = (props: ArticleOverviewCardProps) => {
 
   return (
     <Card backgroundColor="transparent">
-            <Link href={`/(authed)/(tabs)/articles/${data.id}`} asChild>
+      <Link asChild href={`/(authed)/(tabs)/articles/${data.id}`}>
-                <>
+        {data.image && <ArticleCoverImage height={200} uri={data.image} width="100%" />}
-                    {data.image && <ArticleCoverImage uri={data.image} width="100%" height={200} />}
+        <YStack gap="$2" marginTop="$2">
-                    <YStack marginTop="$2" gap="$2">
+          <Text fontSize="$5" fontWeight="600" numberOfLines={2}>
-                        <Text numberOfLines={2} fontWeight="600" fontSize="$5">
             {data.title}
           </Text>
-                        <Text size="$3" numberOfLines={2}>
+          <Text numberOfLines={2} size="$3">
             {data.excerpt}
           </Text>
         </YStack>
-                </>
       </Link>
 
       <YStack marginTop="$2">
-                <XStack justifyContent="space-between" alignItems="center">
+        <XStack alignItems="center" justifyContent="space-between">
           <SourceReferencePill data={data.source} />
           <Caption>{relativeTime}</Caption>
         </XStack>

apps/mobile-legacy/src/ui/components/content/article/ArticleSkeleton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 
 import ContentLoader, { Circle, Rect } from "react-content-loader/native";
 import { Dimensions, FlatList } from "react-native";
@@ -16,71 +16,71 @@ type ArticleSkeletonListProps = {
 
 const OverviewCardSkeleton = (props: any) => (
   <ContentLoader
-        speed={1}
+    animate={true}
-        interval={0.3}
     backgroundColor="#D4D5D8"
     foregroundColor="white"
     height={350}
-        animate={true}
+    interval={0.3}
+    speed={1}
     width="100%"
     {...props}
   >
-        <Rect x="0" y="0" rx="8" ry="8" width="100%" height="200" />
+    <Rect height="200" rx="8" ry="8" width="100%" x="0" y="0" />
-        <Rect x="0" y="216" rx="4" ry="4" width="80%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="80%" x="0" y="216" />
-        <Rect x="0" y="232" rx="4" ry="4" width="100%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="100%" x="0" y="232" />
 
-        <Rect x="0" y="256" rx="4" ry="4" width="100%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="100%" x="0" y="256" />
-        <Rect x="0" y="272" rx="4" ry="4" width="60%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="60%" x="0" y="272" />
 
     <Circle cx="10" cy="310" r="9" />
-        <Rect x="30" y="305" rx="4" ry="4" width="15%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="15%" x="30" y="305" />
-        <Rect x="215" y="305" rx="4" ry="4" width="20%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="20%" x="215" y="305" />
   </ContentLoader>
 );
 
 const MagazineCardSkeleton = (props: any) => (
   <ContentLoader
-        speed={1.5}
+    animate={true}
     backgroundColor="#D4D5D8"
     foregroundColor="white"
     height={140}
-        animate={true}
+    speed={1.5}
     width="100%"
     {...props}
   >
-        <Rect x="235" y="0" rx="8" ry="8" width="120" height="90" />
+    <Rect height="90" rx="8" ry="8" width="120" x="235" y="0" />
 
-        <Rect x="0" y="0" rx="4" ry="4" width="54%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="54%" x="0" y="0" />
-        <Rect x="0" y="16" rx="4" ry="4" width="56%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="56%" x="0" y="16" />
-        <Rect x="0" y="40" rx="4" ry="4" width="55%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="55%" x="0" y="40" />
-        <Rect x="0" y="56" rx="4" ry="4" width="55%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="55%" x="0" y="56" />
-        <Rect x="0" y="72" rx="4" ry="4" width="55%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="55%" x="0" y="72" />
 
     <Circle cx="10" cy="110" r="9" />
-        <Rect x="30" y="105" rx="4" ry="4" width="15%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="15%" x="30" y="105" />
-        <Rect x="315" y="105" rx="4" ry="4" width="40" height="10" />
+    <Rect height="10" rx="4" ry="4" width="40" x="315" y="105" />
   </ContentLoader>
 );
 
 const TextOnlyCardSkeleton = (props: any) => (
   <ContentLoader
-        speed={1.5}
+    animate={true}
     backgroundColor="#D4D5D8"
     foregroundColor="white"
     height={150}
-        animate={true}
+    speed={1.5}
     width="100%"
     {...props}
   >
-        <Rect x="0" y="16" rx="4" ry="4" width="80%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="80%" x="0" y="16" />
-        <Rect x="0" y="32" rx="4" ry="4" width="100%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="100%" x="0" y="32" />
 
-        <Rect x="0" y="56" rx="4" ry="4" width="100%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="100%" x="0" y="56" />
-        <Rect x="0" y="72" rx="4" ry="4" width="60%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="60%" x="0" y="72" />
 
     <Circle cx="10" cy="110" r="9" />
-        <Rect x="30" y="105" rx="4" ry="4" width="15%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="15%" x="30" y="105" />
-        <Rect x="215" y="105" rx="4" ry="4" width="20%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="20%" x="215" y="105" />
   </ContentLoader>
 );
 
@@ -100,7 +100,9 @@ const selectSkeletonComponent = (displayMode: ArticleListDisplayMode) => {
 export const ArticleSkeletonList = (props: ArticleSkeletonListProps) => {
   const { horizontal = false, displayMode = "magazine" } = props;
 
-    const ItemSeparator = horizontal ? ArticleList.HorizontalSeparator : ArticleList.VerticalSeparator;
+  const ItemSeparator = horizontal
+    ? ArticleList.HorizontalSeparator
+    : ArticleList.VerticalSeparator;
 
   const renderItem = useCallback(() => {
     const itemWidth = horizontal ? screenWidth * 0.7 : screenWidth;
@@ -115,15 +117,15 @@ export const ArticleSkeletonList = (props: ArticleSkeletonListProps) => {
 
   return (
     <FlatList
-            data={data}
-            scrollEnabled={false}
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            ItemSeparatorComponent={ItemSeparator}
-            horizontal={horizontal}
-            showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ paddingBottom: 0 }}
+      data={data}
+      horizontal={horizontal}
+      ItemSeparatorComponent={ItemSeparator}
+      keyExtractor={keyExtractor}
       removeClippedSubviews={true}
+      renderItem={renderItem}
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
     />
   );
 };

apps/mobile-legacy/src/ui/components/content/article/ArticleTextOnlyCard.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Link } from "expo-router";
 import { Card, XStack, YStack } from "tamagui";
 
@@ -17,14 +15,14 @@ export const ArticleTextOnlyCard = (props: ArticleTextOnlyCardProps) => {
   const relativeTime = useRelativeTime(data.publishedAt);
 
   return (
-        <Card width="100%" backgroundColor="transparent" borderRadius="$4" padding={0}>
+    <Card backgroundColor="transparent" borderRadius="$4" padding={0} width="100%">
       <Link href={`/(authed)/(tabs)/articles/${data.id}`}>
-                <XStack flexDirection="row" gap="$3" alignItems="center">
+        <XStack alignItems="center" flexDirection="row" gap="$3">
           <YStack flex={1} gap="$2">
-                        <Text numberOfLines={2} fontWeight="600" fontSize="$5">
+            <Text fontSize="$5" fontWeight="600" numberOfLines={2}>
               {data.title}
             </Text>
-                        <Text size="$3" numberOfLines={2} color="$colorHover">
+            <Text color="$colorHover" numberOfLines={2} size="$3">
               {data.excerpt}
             </Text>
           </YStack>
@@ -32,7 +30,7 @@ export const ArticleTextOnlyCard = (props: ArticleTextOnlyCardProps) => {
       </Link>
 
       <YStack marginTop="$3">
-                <XStack justifyContent="space-between" alignItems="center">
+        <XStack alignItems="center" justifyContent="space-between">
           <SourceReferencePill data={data.source} />
           <Caption>{relativeTime}</Caption>
         </XStack>

apps/mobile-legacy/src/ui/components/content/article/index.tsx

@@ -1,7 +1,7 @@
 export { ArticleCategoryPill } from "@/ui/components/content/article/ArticleCategoryPill";
 export { ArticleCoverImage } from "@/ui/components/content/article/ArticleCoverImage";
 export { ArticleList } from "@/ui/components/content/article/ArticleList";
-export { ArticleSkeletonList } from "@/ui/components/content/article/ArticleSkeleton";
 export { ArticleMagazineCard } from "@/ui/components/content/article/ArticleMagazineCard";
 export { ArticleOverviewCard } from "@/ui/components/content/article/ArticleOverviewCard";
+export { ArticleSkeletonList } from "@/ui/components/content/article/ArticleSkeleton";
 export { ArticleTextOnlyCard } from "@/ui/components/content/article/ArticleTextOnlyCard";

apps/mobile-legacy/src/ui/components/content/bookmark/BookmarkCard.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Link } from "expo-router";
 import { Card, XStack, YStack } from "tamagui";
 
@@ -16,17 +14,17 @@ export const BookmarkCard = (props: BookmarkCardProps) => {
   const relativeTime = useRelativeTime(data.createdAt);
 
   return (
-        <Card width="100%" backgroundColor="$gray7" borderRadius="$4" padding="$4">
+    <Card backgroundColor="$gray7" borderRadius="$4" padding="$4" width="100%">
       <XStack gap="$4" justifyContent="space-between">
         <YStack>
-                    <XStack flexDirection="row" gap="$3" alignItems="center">
+          <XStack alignItems="center" flexDirection="row" gap="$3">
             <Link href={`/(authed)/(tabs)/bookmarks/${data.id}`}>
               <YStack flex={1} gap="$2">
-                                <Text numberOfLines={2} fontWeight="600" fontSize="$5">
+                <Text fontSize="$5" fontWeight="600" numberOfLines={2}>
                   {data.name}
                 </Text>
                 {data.description && (
-                                    <Text size="$3" numberOfLines={2} color="$colorHover">
+                  <Text color="$colorHover" numberOfLines={2} size="$3">
                     {data.description}
                   </Text>
                 )}
@@ -35,7 +33,7 @@ export const BookmarkCard = (props: BookmarkCardProps) => {
           </XStack>
 
           <YStack marginTop="$3">
-                        <XStack justifyContent="space-between" alignItems="center">
+            <XStack alignItems="center" justifyContent="space-between">
               <Caption>{data.isPublic}</Caption>
               <Caption>{data.articlesCount} articles</Caption>
               <Caption>{relativeTime}</Caption>

apps/mobile-legacy/src/ui/components/content/bookmark/BookmarkEmptyState.tsx

@@ -6,10 +6,12 @@ import { Heading, Text } from "@/ui/components/typography";
 
 export const BookmarkEmptyState = () => {
   return (
-        <YStack flex={1} alignItems="center" justifyContent="center" gap="$2">
+    <YStack alignItems="center" flex={1} gap="$2" justifyContent="center">
-            <BookmarkIllustration width={250} height={250} />
+      <BookmarkIllustration height={250} width={250} />
       <Heading alignSelf="center">Empty Bookmarks</Heading>
-            <Text textAlign="center">Create a bookmark to save your favorite articles and access them later.</Text>
+      <Text textAlign="center">
+        Create a bookmark to save your favorite articles and access them later.
+      </Text>
 
       <CreateBookmarkSheet />
     </YStack>

apps/mobile-legacy/src/ui/components/content/bookmark/BookmarkList.tsx

@@ -37,7 +37,15 @@ const renderItem = ({ item }: { item: Bookmark }) => {
 };
 
 const BookmarkList: BookmarkListComponent = (props: BookmarkListProps) => {
-    const { data, infiniteScroll = false, hasNextPage, isFetchingNextPage, fetchNextPage, refreshing, ...rest } = props;
+  const {
+    data,
+    infiniteScroll = false,
+    hasNextPage,
+    isFetchingNextPage,
+    fetchNextPage,
+    refreshing,
+    ...rest
+  } = props;
 
   const handleOnEndReached = useCallback(async () => {
     if (infiniteScroll && hasNextPage && !isFetchingNextPage && fetchNextPage) {
@@ -49,17 +57,17 @@ const BookmarkList: BookmarkListComponent = (props: BookmarkListProps) => {
     <FlatList
       {...rest}
       data={data}
-            renderItem={renderItem}
-            onEndReached={handleOnEndReached}
-            keyExtractor={keyExtractor}
       ItemSeparatorComponent={VerticalSeparator}
-            showsHorizontalScrollIndicator={false}
       initialNumToRender={5}
-            onEndReachedThreshold={0.5}
+      keyExtractor={keyExtractor}
-            removeClippedSubviews={true}
-            refreshing={refreshing}
       ListEmptyComponent={<BookmarkEmptyState />}
       ListFooterComponent={infiniteScroll && refreshing ? LoadingIndicator : undefined}
+      onEndReached={handleOnEndReached}
+      onEndReachedThreshold={0.5}
+      refreshing={refreshing}
+      removeClippedSubviews={true}
+      renderItem={renderItem}
+      showsHorizontalScrollIndicator={false}
     />
   );
 };

apps/mobile-legacy/src/ui/components/content/bookmark/CreateBookmarkSheet.tsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
-
 import { joiResolver } from "@hookform/resolvers/joi";
 import { Sheet } from "@tamagui/sheet";
+import { useState } from "react";
 import { useForm } from "react-hook-form";
 import Toast from "react-native-toast-message";
 import { Button, YStack } from "tamagui";
@@ -22,6 +21,13 @@ export const CreateBookmarkSheet = () => {
 
   const onSubmit = (data: BookmarkPayload) => {
     mutate(data, {
+      onError: (error: ErrorResponse) => {
+        Toast.show({
+          text1: "Erreur",
+          text2: safeMessage(error),
+          type: "error",
+        });
+      },
       onSuccess: () => {
         Toast.show({
           text1: "Félicitations !",
@@ -30,13 +36,6 @@ export const CreateBookmarkSheet = () => {
         });
         setOpen(false);
       },
-            onError: (error: ErrorResponse) => {
-                Toast.show({
-                    text1: "Erreur",
-                    text2: safeMessage(error),
-                    type: "error",
-                });
-            },
     });
   };
 
@@ -45,14 +44,14 @@ export const CreateBookmarkSheet = () => {
       <Button onPress={() => setOpen(true)}>Ajouter un signet</Button>
 
       <Sheet
-                modal={true}
+        animation="medium"
-                open={open}
-                onOpenChange={setOpen}
-                snapPointsMode="percent"
-                snapPoints={[65, 90]}
         dismissOnOverlayPress={true}
         dismissOnSnapToBottom={true}
-                animation="medium"
+        modal={true}
+        onOpenChange={setOpen}
+        open={open}
+        snapPoints={[65, 90]}
+        snapPointsMode="percent"
       >
         <Sheet.Overlay
           animation="lazy"
@@ -61,41 +60,41 @@ export const CreateBookmarkSheet = () => {
           exitStyle={{ opacity: 0 }}
         />
         <Sheet.Frame
-                    flex={1}
-                    backgroundColor="$background"
-                    padding="$4"
-                    gap="$4"
           alignItems="center"
+          backgroundColor="$background"
+          flex={1}
+          gap="$4"
           justifyContent="flex-start"
+          padding="$4"
         >
           <YStack width="100%">
             <Sheet.Handle theme="accent" />
             <FormTextInput
-                            name="name"
+              caption="Enter a name for your bookmark."
               control={control}
               label="Name"
-                            caption="Enter a name for your bookmark."
+              name="name"
               placeholder="My awesome bookmark"
             />
             <FormTextArea
-                            name="description"
-                            control={control}
               caption="Describe your bookmark for easy retrieval."
+              control={control}
               label="Description"
+              name="description"
               placeholder="A brief description..."
             />
             <FormSwitch
-                            name="isPublic"
               control={control}
-                            label="Public"
               description="A public bookmark is visible and accessible to other users"
+              label="Public"
+              name="isPublic"
             />
           </YStack>
           <SubmitButton
-                        label="Créer le signet"
-                        onPress={handleSubmit(onSubmit)}
             isPending={isPending}
             isValid={formState.isValid}
+            label="Créer le signet"
+            onPress={handleSubmit(onSubmit)}
           />
         </Sheet.Frame>
       </Sheet>

apps/mobile-legacy/src/ui/components/content/bookmark/UpdateBookmarkSheet.tsx

@@ -1,13 +1,16 @@
-import { useEffect, useState } from "react";
-
 import { joiResolver } from "@hookform/resolvers/joi";
 import { Sheet } from "@tamagui/sheet";
+import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import Toast from "react-native-toast-message";
 import { Button, YStack } from "tamagui";
 
 import { useUpdateBookmark } from "@/api/request/feed-management/bookmark";
-import { Bookmark, BookmarkPayload, BookmarkPayloadSchema } from "@/api/schema/feed-management/bookmark";
+import {
+  Bookmark,
+  BookmarkPayload,
+  BookmarkPayloadSchema,
+} from "@/api/schema/feed-management/bookmark";
 import { ErrorResponse, safeMessage } from "@/api/shared";
 import { FormSwitch } from "@/ui/components/controls/forms/Switch";
 import { FormTextArea } from "@/ui/components/controls/forms/TextArea";
@@ -33,6 +36,13 @@ export const UpdateBookmarkSheet = (props: UpdateBookmarkSheetProps) => {
 
   const onSubmit = (data: BookmarkPayload) => {
     mutate(data, {
+      onError: (error: ErrorResponse) => {
+        Toast.show({
+          text1: "Erreur",
+          text2: safeMessage(error),
+          type: "error",
+        });
+      },
       onSuccess: () => {
         Toast.show({
           text1: "Félicitations !",
@@ -41,13 +51,6 @@ export const UpdateBookmarkSheet = (props: UpdateBookmarkSheetProps) => {
         });
         setOpen(false);
       },
-            onError: (error: ErrorResponse) => {
-                Toast.show({
-                    text1: "Erreur",
-                    text2: safeMessage(error),
-                    type: "error",
-                });
-            },
     });
   };
 
@@ -56,14 +59,14 @@ export const UpdateBookmarkSheet = (props: UpdateBookmarkSheetProps) => {
       <Button onPress={() => setOpen(true)}>Modifier</Button>
 
       <Sheet
-                modal={true}
+        animation="medium"
-                open={open}
-                onOpenChange={setOpen}
-                snapPointsMode="percent"
-                snapPoints={[65, 90]}
         dismissOnOverlayPress={true}
         dismissOnSnapToBottom={true}
-                animation="medium"
+        modal={true}
+        onOpenChange={setOpen}
+        open={open}
+        snapPoints={[65, 90]}
+        snapPointsMode="percent"
       >
         <Sheet.Overlay
           animation="lazy"
@@ -72,41 +75,41 @@ export const UpdateBookmarkSheet = (props: UpdateBookmarkSheetProps) => {
           exitStyle={{ opacity: 0 }}
         />
         <Sheet.Frame
-                    flex={1}
-                    backgroundColor="$background"
-                    padding="$4"
-                    gap="$4"
           alignItems="center"
+          backgroundColor="$background"
+          flex={1}
+          gap="$4"
           justifyContent="flex-start"
+          padding="$4"
         >
           <YStack width="100%">
             <Sheet.Handle theme="accent" />
             <FormTextInput
-                            name="name"
+              caption="Enter a name for your bookmark."
               control={control}
               label="Name"
-                            caption="Enter a name for your bookmark."
+              name="name"
               placeholder="My awesome bookmark"
             />
             <FormTextArea
-                            name="description"
-                            control={control}
               caption="Describe your bookmark for easy retrieval."
+              control={control}
               label="Description"
+              name="description"
               placeholder="A brief description..."
             />
             <FormSwitch
-                            name="isPublic"
               control={control}
-                            label="Public"
               description="A public bookmark is visible and accessible to other users"
+              label="Public"
+              name="isPublic"
             />
           </YStack>
           <SubmitButton
-                        label="Modifier le signet"
-                        onPress={handleSubmit(onSubmit)}
             isPending={isPending}
             isValid={formState.isValid}
+            label="Modifier le signet"
+            onPress={handleSubmit(onSubmit)}
           />
         </Sheet.Frame>
       </Sheet>

apps/mobile-legacy/src/ui/components/content/source/SourceFollowButton.tsx

@@ -25,35 +25,35 @@ export const SourceFollowButton = (props: SourceFollowButtonProps) => {
         `Êtes-vous sûr de vouloir ne plus suivre ${name} ?`,
         [
           {
-                        text: "Annuler",
             style: "cancel",
+            text: "Annuler",
           },
           {
-                        text: "Ne plus suivre",
-                        style: "destructive",
             onPress: () => {
               unfollow();
-                            setIsFollowed(prev => !prev);
+              setIsFollowed((prev) => !prev);
             },
+            style: "destructive",
+            text: "Ne plus suivre",
           },
         ],
-                { cancelable: false }
+        { cancelable: false },
       );
     } else {
       follow();
-            setIsFollowed(prev => !prev);
+      setIsFollowed((prev) => !prev);
     }
-    }, [isFollowed, name, unfollow, follow, setIsFollowed]);
+  }, [isFollowed, name, unfollow, follow]);
 
   return (
     <Button
-            size="$2"
-            theme={isFollowed ? "alt1" : "surface1"}
       chromeless={isFollowed}
       disabled={loading}
-            onPress={handlePress}
       minWidth={80}
+      onPress={handlePress}
       paddingHorizontal="$2"
+      size="$2"
+      theme={isFollowed ? "alt1" : "surface1"}
       {...rest}
     >
       {loading ? <ActivityIndicator /> : isFollowed ? "Suivi" : "Suivre"}

apps/mobile-legacy/src/ui/components/content/source/SourceList.tsx

@@ -29,22 +29,22 @@ const SourceList: SourceOverviewListComponent = (props: SourceOverviewListProps)
     ({ item }: { item: SourceOverview }) => {
       return <SourceOverviewCard data={item} horizontal={horizontal} />;
     },
-        [horizontal]
+    [horizontal],
   );
 
   return (
     <FlatList
       {...rest}
       data={data}
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            ItemSeparatorComponent={horizontal ? HorizontalSeparator : VerticalSeparator}
       horizontal={horizontal}
-            showsHorizontalScrollIndicator={false}
+      ItemSeparatorComponent={horizontal ? HorizontalSeparator : VerticalSeparator}
       initialNumToRender={5}
+      keyExtractor={keyExtractor}
+      ListEmptyComponent={() => <Paragraph>Pas de sources disponibles pour le moment.</Paragraph>}
       onEndReachedThreshold={0.5}
       removeClippedSubviews={true}
-            ListEmptyComponent={() => <Paragraph>Pas de sources disponibles pour le moment.</Paragraph>}
+      renderItem={renderItem}
+      showsHorizontalScrollIndicator={false}
     />
   );
 };

apps/mobile-legacy/src/ui/components/content/source/SourceOverviewCard.tsx

@@ -8,21 +8,21 @@ import { Text } from "@/ui/components/typography";
 
 const SourceCardFrame = styled(YStack, {
   alignItems: "center",
-    gap: "$2",
   borderRadius: "$4",
+  gap: "$2",
 
   variants: {
     horizontal: {
-            true: {
-                maxWidth: 100,
-                flexShrink: 0,
-            },
       false: {
         flexDirection: "row",
-                justifyContent: "space-between",
-                width: "100%",
         gap: "$4",
+        justifyContent: "space-between",
         paddingVertical: "$2",
+        width: "100%",
+      },
+      true: {
+        flexShrink: 0,
+        maxWidth: 100,
       },
     },
   },
@@ -41,17 +41,17 @@ export const SourceOverviewCard = (props: SourceCardProps) => {
   return (
     <SourceCardFrame horizontal={horizontal} {...rest}>
       <Link href={`/(authed)/(tabs)/sources/${data.name}`}>
-                <SourceProfileImage name={data.name} image={data.image} size={horizontal ? 65 : 50} />
+        <SourceProfileImage image={data.image} name={data.name} size={horizontal ? 65 : 50} />
       </Link>
 
-            <Link href={`/(authed)/(tabs)/sources/${data.name}`} asChild>
+      <Link asChild href={`/(authed)/(tabs)/sources/${data.name}`}>
         {horizontal ? (
           <Text
             fontSize={nameFontSize}
             fontWeight="bold"
+            maxWidth="100%"
             numberOfLines={1}
             textAlign="center"
-                        maxWidth="100%"
           >
             {data.displayName ?? data.name}
           </Text>
@@ -70,7 +70,11 @@ export const SourceOverviewCard = (props: SourceCardProps) => {
         )}
       </Link>
 
-            <SourceFollowButton id={data.id} name={data.displayName ?? data.name} followed={data.followed} />
+      <SourceFollowButton
+        followed={data.followed}
+        id={data.id}
+        name={data.displayName ?? data.name}
+      />
     </SourceCardFrame>
   );
 };

apps/mobile-legacy/src/ui/components/content/source/SourceProfileImage.tsx

@@ -1,10 +1,8 @@
-import type React from "react";
-
 import { GetProps, Image, styled } from "tamagui";
 
 const StyledImage = styled(Image, {
-    borderRadius: "$12",
   backgroundColor: "white",
+  borderRadius: "$12",
 });
 
 type SourceAvatarProps = GetProps<typeof StyledImage> & {
@@ -19,13 +17,13 @@ export const SourceProfileImage = (props: SourceAvatarProps) => {
   return (
     <StyledImage
       accessibilityLabel={name}
-            source={{
-                uri: image,
-                cache: "force-cache",
-            }}
-            objectFit="contain"
-            width={size}
       height={size}
+      objectFit="contain"
+      source={{
+        cache: "force-cache",
+        uri: image,
+      }}
+      width={size}
       {...rest}
     />
   );

apps/mobile-legacy/src/ui/components/content/source/SourceReferencePill.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Link } from "expo-router";
 import { Avatar, GetProps, XStack } from "tamagui";
 
@@ -19,16 +17,16 @@ export function SourceReferencePill(props: SourceReferencePillProps) {
         <Avatar circular size="$1">
           <Avatar.Image
             accessibilityLabel={data.name}
-                        objectFit="contain"
             backgroundColor="white"
+            objectFit="contain"
             source={{
-                            uri: data.image,
               cache: "force-cache",
+              uri: data.image,
             }}
           />
           <Avatar.Fallback backgroundColor="$gray10" />
         </Avatar>
-                <Text size="$2" fontWeight="bold">
+        <Text fontWeight="bold" size="$2">
           {data.displayName ?? data.name}
         </Text>
       </XStack>

apps/mobile-legacy/src/ui/components/content/source/SourceSkeleton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 
 import ContentLoader, { Circle, Rect } from "react-content-loader/native";
 import { FlatList } from "react-native";
@@ -14,34 +14,34 @@ type SourceSkeletonListProps = {
 
 const VerticalSkeleton = (props: any) => (
   <ContentLoader
-        speed={1.5}
+    animate={true}
     backgroundColor="#D4D5D8"
     foregroundColor="white"
     height={70}
-        animate={true}
+    speed={1.5}
     width="100%"
     {...props}
   >
     <Circle cx="25" cy="30" r="25" />
-        <Rect x="70" y="10" rx="4" ry="4" width="25%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="25%" x="70" y="10" />
-        <Rect x="70" y="40" rx="4" ry="4" width="45%" height="10" />
+    <Rect height="10" rx="4" ry="4" width="45%" x="70" y="40" />
-        <Rect x="280" y="15" rx="4" ry="4" width="20%" height="30" />
+    <Rect height="30" rx="4" ry="4" width="20%" x="280" y="15" />
   </ContentLoader>
 );
 
 const HorizontalSkeleton = (props: any) => (
   <ContentLoader
-        speed={1.5}
+    animate={true}
     backgroundColor="#D4D5D8"
     foregroundColor="white"
     height={180}
-        animate={true}
+    speed={1.5}
     width={110}
     {...props}
   >
     <Circle cx="60" cy="40" r="33" />
-        <Rect x="10" y="85" rx="4" ry="4" width="100" height="10" />
+    <Rect height="10" rx="4" ry="4" width="100" x="10" y="85" />
-        <Rect x="25" y="105" rx="8" ry="8" width="70" height="25" />
+    <Rect height="25" rx="8" ry="8" width="70" x="25" y="105" />
   </ContentLoader>
 );
 
@@ -68,15 +68,15 @@ export const SourceSkeletonList = (props: SourceSkeletonListProps) => {
 
   return (
     <FlatList
-            data={data}
-            scrollEnabled={false}
-            renderItem={renderItem}
-            keyExtractor={keyExtractor}
-            ItemSeparatorComponent={ItemSeparator}
-            horizontal={horizontal}
-            showsHorizontalScrollIndicator={false}
       contentContainerStyle={{ paddingBottom: 0 }}
+      data={data}
+      horizontal={horizontal}
+      ItemSeparatorComponent={ItemSeparator}
+      keyExtractor={keyExtractor}
       removeClippedSubviews={true}
+      renderItem={renderItem}
+      scrollEnabled={false}
+      showsHorizontalScrollIndicator={false}
     />
   );
 };

apps/mobile-legacy/src/ui/components/content/source/index.ts

@@ -1,6 +1,6 @@
-export { SourceList } from "@/ui/components/content/source/SourceList";
 export { SourceFollowButton } from "@/ui/components/content/source/SourceFollowButton";
+export { SourceList } from "@/ui/components/content/source/SourceList";
+export { SourceOverviewCard } from "@/ui/components/content/source/SourceOverviewCard";
+export { SourceProfileImage } from "@/ui/components/content/source/SourceProfileImage";
 export { SourceReferencePill } from "@/ui/components/content/source/SourceReferencePill";
 export { SourceSkeletonList } from "@/ui/components/content/source/SourceSkeleton";
-export { SourceProfileImage } from "@/ui/components/content/source/SourceProfileImage";
-export { SourceOverviewCard } from "@/ui/components/content/source/SourceOverviewCard";

apps/mobile-legacy/src/ui/components/controls/BackButton.tsx

@@ -10,15 +10,15 @@ export const BackButton = (props: BackButtonProps & ButtonProps) => {
 
   return (
     <Button
-            chromeless
       alignSelf="flex-start"
-            size="$4"
-            width="$4"
-            height="$4"
       borderRadius="$12"
-            // backgroundColor="$gray6"
+      chromeless
+      height="$4"
       icon={<ArrowLeft size="$1" />}
       onPress={onPress}
+      // backgroundColor="$gray6"
+      size="$4"
+      width="$4"
       {...rest}
     />
   );

apps/mobile-legacy/src/ui/components/controls/IconButton.tsx

@@ -9,13 +9,13 @@ export const IconButton = (props: IconButtonProps & ButtonProps) => {
 
   return (
     <Button
-            chromeless
       alignSelf="flex-start"
+      borderRadius="$12"
+      chromeless
+      height="$4"
+      onPress={onPress}
       size="$4"
       width="$4"
-            height="$4"
-            borderRadius="$12"
-            onPress={onPress}
       {...rest}
     />
   );

apps/mobile-legacy/src/ui/components/controls/SubmitButton.tsx

@@ -18,8 +18,8 @@ export const SubmitButton = (props: SubmitButtonProps) => {
   return (
     <StyledButton
       disabled={isPending}
-            theme={!isValid || isPending ? "disabled" : "accent"}
       fontWeight="bold"
+      theme={!isValid || isPending ? "disabled" : "accent"}
       {...rest}
     >
       {isPending ? <ActivityIndicator /> : label}

apps/mobile-legacy/src/ui/components/controls/forms/EmailInput.tsx

@@ -8,14 +8,14 @@ export const EmailInput = (props: InputProps) => {
 
   return (
     <Input
-            label={label}
-            caption={caption}
-            error={error}
-            leadingAdornment={Mail}
-            onChangeText={onChangeText}
-            keyboardType="email-address"
       autoCapitalize="none"
       autoCorrect={false}
+      caption={caption}
+      error={error}
+      keyboardType="email-address"
+      label={label}
+      leadingAdornment={Mail}
+      onChangeText={onChangeText}
       placeholder="votre@email.com..."
       {...rest}
     />

apps/mobile-legacy/src/ui/components/controls/forms/Input.tsx

@@ -1,16 +1,24 @@
-import React, { useMemo } from "react";
-
 import { IconProps } from "@tamagui/helpers-icon";
-import { ColorTokens, GetProps, Input as TamaguiInput, Label, SizeTokens, styled, XStack, YStack } from "tamagui";
+import React, { useMemo } from "react";
+import {
+  ColorTokens,
+  GetProps,
+  Label,
+  SizeTokens,
+  styled,
+  Input as TamaguiInput,
+  XStack,
+  YStack,
+} from "tamagui";
 
 import { Caption } from "@/ui/components/typography";
 
 const StyledInput = styled(TamaguiInput, {
-    size: "$large",
-    flex: 1,
-    borderWidth: 0,
-    placeholderTextColor: "$gray8",
   backgroundColor: "transparent",
+  borderWidth: 0,
+  flex: 1,
+  placeholderTextColor: "$gray8",
+  size: "$large",
 });
 
 export type InputProps = GetProps<typeof StyledInput> & {
@@ -24,15 +32,16 @@ export type InputProps = GetProps<typeof StyledInput> & {
 };
 
 export const Input = (props: InputProps) => {
-    const { label, caption, error, leadingAdornment, trailingAdornment, onChangeText, id, ...rest } = props;
+  const { label, caption, error, leadingAdornment, trailingAdornment, onChangeText, id, ...rest } =
+    props;
 
   const isInvalid = !!error;
   const leadingAdornmentComponent = useMemo(() => {
     return leadingAdornment ? (
-            <XStack paddingLeft="$3" style={{ justifyContent: "center", alignItems: "center" }}>
+      <XStack paddingLeft="$3" style={{ alignItems: "center", justifyContent: "center" }}>
         {React.createElement(leadingAdornment, {
-                    size: "$1",
           color: "$gray9",
+          size: "$1",
         })}
       </XStack>
     ) : undefined;
@@ -42,17 +51,17 @@ export const Input = (props: InputProps) => {
     <YStack gap="$1">
       <YStack>
         {label && (
-                    <Label htmlFor={id} fontWeight="bold" color={isInvalid ? "$red9" : undefined}>
+          <Label color={isInvalid ? "$red9" : undefined} fontWeight="bold" htmlFor={id}>
             {label}
           </Label>
         )}
 
         <XStack
-                    backgroundColor="$gray4"
           alignItems="center"
+          backgroundColor="$gray4"
+          borderColor={isInvalid ? "$red9" : "transparent"}
           borderRadius="$4"
           borderWidth="$0.5"
-                    borderColor={isInvalid ? "$red9" : "transparent"}
           focusStyle={{
             borderColor: "$accent8",
           }}

apps/mobile-legacy/src/ui/components/controls/forms/PasswordInput.tsx

@@ -1,6 +1,5 @@
-import { useState } from "react";
-
 import { Eye, EyeOff, Lock } from "@tamagui/lucide-icons";
+import { useState } from "react";
 import { XStack } from "tamagui";
 
 import { Input, InputProps } from "@/ui/components/controls/forms/Input";
@@ -12,21 +11,21 @@ export const PasswordInput = (props: InputProps) => {
 
   return (
     <Input
-            label={label}
-            onChangeText={onChangeText}
       caption={caption}
       error={error}
+      label={label}
       leadingAdornment={Lock}
-            secureTextEntry={!showPassword}
+      onChangeText={onChangeText}
       paddingRight="$6"
       placeholder="Mot de passe"
+      secureTextEntry={!showPassword}
       trailingAdornment={
         <XStack
-                    paddingRight="$3"
+          hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
           onPress={() => setShowPassword(!showPassword)}
-                    hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          paddingRight="$3"
         >
-                    {showPassword ? <Eye size="$1" color="$gray9" /> : <EyeOff size="$1" color="$gray9" />}
+          {showPassword ? <Eye color="$gray9" size="$1" /> : <EyeOff color="$gray9" size="$1" />}
         </XStack>
       }
       {...rest}

apps/mobile-legacy/src/ui/components/controls/forms/Switch.tsx

@@ -22,7 +22,13 @@ export const Switch = (props: SwitchProps) => {
         </Label>
         {description && <Caption>{description}</Caption>}
       </YStack>
-            <TamaguiSwitch id={id} checked={isChecked} onCheckedChange={onCheckedChange} size="$3" {...rest}>
+      <TamaguiSwitch
+        checked={isChecked}
+        id={id}
+        onCheckedChange={onCheckedChange}
+        size="$3"
+        {...rest}
+      >
         <TamaguiSwitch.Thumb animation="bouncy" />
       </TamaguiSwitch>
     </XStack>

apps/mobile-legacy/src/ui/components/controls/forms/TextArea.tsx

@@ -4,12 +4,12 @@ import { withController } from "@/ui/components/controls/forms/withController";
 import { Caption } from "@/ui/components/typography";
 
 const StyledTextArea = styled(TamaguiTextArea, {
-    size: "$4",
+  backgroundColor: "transparent",
+  borderWidth: 0,
   flex: 1,
   minHeight: 100,
-    borderWidth: 0,
   placeholderTextColor: "$gray8",
-    backgroundColor: "transparent",
+  size: "$4",
 });
 
 type TextAreaProps = GetProps<typeof StyledTextArea> & {
@@ -28,7 +28,7 @@ export const TextArea = (props: TextAreaProps) => {
   return (
     <YStack gap="$2">
       {label && (
-                <Label htmlFor={id} fontWeight="bold" color={isInvalid ? "$red9" : undefined}>
+        <Label color={isInvalid ? "$red9" : undefined} fontWeight="bold" htmlFor={id}>
           {label}
         </Label>
       )}
@@ -36,9 +36,9 @@ export const TextArea = (props: TextAreaProps) => {
       <XStack
         alignItems="flex-start"
         backgroundColor="$gray4"
+        borderColor={isInvalid ? "$red9" : "transparent"}
         borderRadius="$4"
         borderWidth="$0.5"
-                borderColor={isInvalid ? "$red9" : "transparent"}
         focusStyle={{
           borderColor: "$accent8",
         }}

apps/mobile-legacy/src/ui/components/controls/forms/TextInput.tsx

@@ -6,9 +6,9 @@ export const TextInput = (props: InputProps) => {
 
   return (
     <Input
-            label={label}
       caption={caption}
       error={error}
+      label={label}
       leadingAdornment={leadingAdornment}
       onChangeText={onChangeText}
       {...rest}

apps/mobile-legacy/src/ui/components/controls/forms/index.tsx

@@ -1,5 +1,5 @@
 export { EmailInput, FormEmailInput } from "@/ui/components/controls/forms/EmailInput";
-export { TextInput, FormTextInput } from "@/ui/components/controls/forms/TextInput";
+export { FormPasswordInput, PasswordInput } from "@/ui/components/controls/forms/PasswordInput";
-export { PasswordInput, FormPasswordInput } from "@/ui/components/controls/forms/PasswordInput";
+export { FormSwitch, Switch } from "@/ui/components/controls/forms/Switch";
-export { Switch, FormSwitch } from "@/ui/components/controls/forms/Switch";
+export { FormTextArea, TextArea } from "@/ui/components/controls/forms/TextArea";
-export { TextArea, FormTextArea } from "@/ui/components/controls/forms/TextArea";
+export { FormTextInput, TextInput } from "@/ui/components/controls/forms/TextInput";

apps/mobile-legacy/src/ui/components/controls/forms/withController.tsx

@@ -15,14 +15,16 @@ type ControllerWrapperProps<T> = {
   control: ControllerProps<any, any, any>["control"];
 } & Omit<T, keyof WithControllerProps>;
 
-export const withController = <T extends WithControllerProps>(Component: React.ComponentType<T>) => {
+export const withController = <T extends WithControllerProps>(
+  Component: React.ComponentType<T>,
+) => {
   const ControllerWrapper = (props: ControllerWrapperProps<T>) => {
     const { name, control, ...rest } = props;
 
     return (
       <Controller
-                name={name}
         control={control}
+        name={name}
         render={({ field: { value, onChange }, fieldState: { error } }) => {
           const hasSwitchProps = "isChecked" in rest || "onCheckedChange" in rest;
 

apps/mobile-legacy/src/ui/components/layout/ScreenHeading.tsx

@@ -6,8 +6,8 @@ import { Text } from "@/ui/components/typography";
 
 const ActionContainer = styled(XStack, {
   alignItems: "center",
-    minWidth: "$5",
   gap: "$1",
+  minWidth: "$5",
 });
 
 interface ScreenHeadingProps {
@@ -19,7 +19,13 @@ interface ScreenHeadingProps {
 }
 
 export const ScreenHeading = (props: ScreenHeadingProps) => {
-    const { leadingAction, title, trailingActions, paddingHorizontal = "$4", marginBottom = "$2" } = props;
+  const {
+    leadingAction,
+    title,
+    trailingActions,
+    paddingHorizontal = "$4",
+    marginBottom = "$2",
+  } = props;
   const trailingActionsArray = Array.isArray(trailingActions)
     ? trailingActions
     : trailingActions
@@ -29,16 +35,16 @@ export const ScreenHeading = (props: ScreenHeadingProps) => {
   return (
     <XStack
       alignItems="center"
-            justifyContent="space-between"
-            height="$6"
       backgroundColor="$background"
-            paddingHorizontal={paddingHorizontal}
+      height="$6"
+      justifyContent="space-between"
       marginBottom={marginBottom}
+      paddingHorizontal={paddingHorizontal}
     >
       <ActionContainer>{leadingAction}</ActionContainer>
       <XStack flex={1} justifyContent="center">
         {title ? (
-                    <Text fontWeight="600" fontSize="$6">
+          <Text fontSize="$6" fontWeight="600">
             {title}
           </Text>
         ) : (

apps/mobile-legacy/src/ui/components/layout/ScreenSection.tsx

@@ -1,5 +1,3 @@
-import type React from "react";
-
 import { ArrowRight } from "@tamagui/lucide-icons";
 import { Href, Link } from "expo-router";
 import { GetProps, Paragraph, styled, XStack } from "tamagui";
@@ -9,8 +7,8 @@ import { Text } from "@/ui/components/typography";
 const SectionContainer = styled(XStack, {
   alignItems: "center",
   justifyContent: "space-between",
-    width: "100%",
   paddingVertical: "$2",
+  width: "100%",
 });
 
 type ScreenSectionProps = GetProps<typeof SectionContainer> & {
@@ -23,8 +21,8 @@ type ScreenSectionLinkProps = {
 };
 
 const ScreenSectionLink = ({ href }: ScreenSectionLinkProps) => (
-    <Link href={href} push asChild>
+  <Link asChild href={href} push>
-        <XStack gap="2" alignItems="center">
+    <XStack alignItems="center" gap="2">
       <Paragraph color="$accent5" fontWeight={500}>
         Voir tout
       </Paragraph>
@@ -38,7 +36,14 @@ export const ScreenSection = (props: ScreenSectionProps) => {
 
   return (
     <SectionContainer {...rest}>
-            <Text fontSize="$6" fontWeight="bold" color="$color" numberOfLines={1} flexShrink={1} marginRight="$2">
+      <Text
+        color="$color"
+        flexShrink={1}
+        fontSize="$6"
+        fontWeight="bold"
+        marginRight="$2"
+        numberOfLines={1}
+      >
         {title}
       </Text>
       {forwardLink && <ScreenSectionLink href={forwardLink} />}

apps/mobile-legacy/src/ui/components/layout/ScreenView.tsx

@@ -1,6 +1,5 @@
-import React from "react";
-
 import { StatusBar } from "expo-status-bar";
+import React from "react";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { styled, YStack } from "tamagui";
 
@@ -20,9 +19,9 @@ type ScreenViewComponent = React.FC<React.PropsWithChildren<ScreenViewProps>> &
 };
 
 const ScreenContent = styled(YStack, {
+  alignItems: "center",
   gap: "$4",
   paddingHorizontal: "$4",
-    alignItems: "center",
 });
 
 const ScreenView: ScreenViewComponent = (props: React.PropsWithChildren<ScreenViewProps>) => {
@@ -40,7 +39,7 @@ const ScreenView: ScreenViewComponent = (props: React.PropsWithChildren<ScreenVi
   const otherChildren: React.ReactNode[] = [];
 
   // Iterate through children to find the Heading and separate others
-    React.Children.forEach(children, child => {
+  React.Children.forEach(children, (child) => {
     if (React.isValidElement(child)) {
       if (child.type === ScreenView.Heading) {
         headingElement = child;
@@ -54,9 +53,11 @@ const ScreenView: ScreenViewComponent = (props: React.PropsWithChildren<ScreenVi
 
   return (
     <>
-            {showStatusBar ? <StatusBar style={statusBarStyle} backgroundColor={statusBarBackgroundColor} /> : null}
+      {showStatusBar ? (
+        <StatusBar backgroundColor={statusBarBackgroundColor} style={statusBarStyle} />
+      ) : null}
 
-            <YStack flex={1} paddingTop={insets.top} backgroundColor="$background">
+      <YStack backgroundColor="$background" flex={1} paddingTop={insets.top}>
         {headingElement}
 
         <ScreenContent

apps/mobile-legacy/src/ui/components/typography/Caption.tsx

@@ -6,7 +6,7 @@ export const Caption = (props: React.PropsWithChildren<ParagraphProps>) => {
   const { children, ...rest } = props;
 
   return (
-        <Paragraph fontSize="$2" lineHeight="$1" color="$gray10" {...rest}>
+    <Paragraph color="$gray10" fontSize="$2" lineHeight="$1" {...rest}>
       {children}
     </Paragraph>
   );

apps/mobile-legacy/src/ui/components/typography/Heading.tsx

@@ -6,7 +6,7 @@ export const Heading = (props: React.PropsWithChildren<ParagraphProps>) => {
   const { children, ...rest } = props;
 
   return (
-        <H4 fontWeight="bold" alignSelf="flex-start" {...rest}>
+    <H4 alignSelf="flex-start" fontWeight="bold" {...rest}>
       {children}
     </H4>
   );

apps/mobile-legacy/src/ui/components/typography/index.ts

@@ -1,4 +1,4 @@
+export { Caption } from "@/ui/components/typography/Caption";
 export { Display } from "@/ui/components/typography/Display";
 export { Heading } from "@/ui/components/typography/Heading";
-export { Caption } from "@/ui/components/typography/Caption";
 export { Text } from "@/ui/components/typography/Text";

apps/mobile-legacy/themes.ts

@@ -52,22 +52,14 @@ const darkShadows = {
 };
 
 const builtThemes = createThemes({
-    componentThemes: defaultComponentThemes,
+  accent: {
-    base: {
     palette: {
-            dark: darkPalette,
+      dark: [...primaryPalette].reverse(),
-            light: lightPalette,
+      light: [...primaryPalette].reverse(),
     },
-
+  },
+  base: {
     extra: {
-            light: {
-                ...Colors.green,
-                ...Colors.red,
-                ...Colors.yellow,
-                ...Colors.gray,
-                ...lightShadows,
-                shadowColor: lightShadows.shadow1,
-            },
       dark: {
         ...Colors.greenDark,
         ...Colors.redDark,
@@ -76,19 +68,25 @@ const builtThemes = createThemes({
         ...darkShadows,
         shadowColor: darkShadows.shadow1,
       },
+      light: {
+        ...Colors.green,
+        ...Colors.red,
+        ...Colors.yellow,
+        ...Colors.gray,
+        ...lightShadows,
+        shadowColor: lightShadows.shadow1,
       },
     },
-    accent: {
     palette: {
-            dark: [...primaryPalette].reverse(),
+      dark: darkPalette,
-            light: [...primaryPalette].reverse(),
+      light: lightPalette,
     },
   },
   childrenThemes: {
-        primary: {
+    error: {
       palette: {
-                dark: [...primaryPalette].reverse(),
+        dark: Object.values(Colors.redDark),
-                light: [...primaryPalette].reverse(),
+        light: Object.values(Colors.red),
       },
     },
     gray: {
@@ -97,16 +95,10 @@ const builtThemes = createThemes({
         light: lightPalette,
       },
     },
-        warning: {
+    primary: {
       palette: {
-                dark: Object.values(Colors.yellowDark),
+        dark: [...primaryPalette].reverse(),
-                light: Object.values(Colors.yellow),
+        light: [...primaryPalette].reverse(),
-            },
-        },
-        error: {
-            palette: {
-                dark: Object.values(Colors.redDark),
-                light: Object.values(Colors.red),
       },
     },
     success: {
@@ -115,7 +107,14 @@ const builtThemes = createThemes({
         light: Object.values(Colors.green),
       },
     },
+    warning: {
+      palette: {
+        dark: Object.values(Colors.yellowDark),
+        light: Object.values(Colors.yellow),
       },
+    },
+  },
+  componentThemes: defaultComponentThemes,
 });
 
 export type Themes = typeof builtThemes;

apps/mobile-legacy/tsconfig.json

@@ -1,21 +1,12 @@
 {
-  "extends": "expo/tsconfig.base",
-  "exclude": ["__tests__/**/*-test.ts"],
   "compilerOptions": {
-    "strict": true,
     "paths": {
-      "@/*": [
+      "@/*": ["./src/*"],
-        "./src/*"
+      "~/*": ["./*"]
-      ],
-      "~/*": [
-        "./*"
-      ],
-    }
     },
-  "include": [
+    "strict": true
-    "**/*.ts",
+  },
-    "**/*.tsx",
+  "exclude": ["__tests__/**/*-test.ts"],
-    ".expo/types/**/*.ts",
+  "extends": "expo/tsconfig.base",
-    "expo-env.d.ts"
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
-  ]
 }

apps/mobile/app.json

@@ -1,48 +1,48 @@
 {
   "expo": {
-    "name": "mobile",
-    "slug": "mobile",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "mobile",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
-    "ios": {
-      "supportsTablet": true
-    },
     "android": {
       "adaptiveIcon": {
         "backgroundColor": "#E6F4FE",
-        "foregroundImage": "./assets/images/android-icon-foreground.png",
         "backgroundImage": "./assets/images/android-icon-background.png",
+        "foregroundImage": "./assets/images/android-icon-foreground.png",
         "monochromeImage": "./assets/images/android-icon-monochrome.png"
       },
       "edgeToEdgeEnabled": true,
       "predictiveBackGestureEnabled": false
     },
-    "web": {
+    "experiments": {
-      "output": "static",
+      "reactCompiler": true,
-      "favicon": "./assets/images/favicon.png"
+      "typedRoutes": true
     },
+    "icon": "./assets/images/icon.png",
+    "ios": {
+      "supportsTablet": true
+    },
+    "name": "mobile",
+    "newArchEnabled": true,
+    "orientation": "portrait",
     "plugins": [
       "expo-router",
       [
         "expo-splash-screen",
         {
-          "image": "./assets/images/splash-icon.png",
-          "imageWidth": 200,
-          "resizeMode": "contain",
           "backgroundColor": "#ffffff",
           "dark": {
             "backgroundColor": "#000000"
-          }
+          },
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain"
         }
       ]
     ],
-    "experiments": {
+    "scheme": "mobile",
-      "typedRoutes": true,
+    "slug": "mobile",
-      "reactCompiler": true
+    "userInterfaceStyle": "automatic",
+    "version": "1.0.0",
+    "web": {
+      "favicon": "./assets/images/favicon.png",
+      "output": "static"
     }
   }
 }

apps/mobile/app/index.tsx

@@ -4,9 +4,9 @@ export default function Index() {
   return (
     <View
       style={{
+        alignItems: "center",
         flex: 1,
         justifyContent: "center",
-        alignItems: "center",
       }}
     >
       <Text>Edit app/index.tsx to edit this screen.</Text>

apps/mobile/package.json

@@ -1,15 +1,4 @@
 {
-  "name": "@basango/mobile",
-  "main": "expo-router/entry",
-  "version": "1.0.0",
-  "scripts": {
-    "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "lint": "expo lint"
-  },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
     "@react-navigation/bottom-tabs": "^7.4.0",
@@ -31,15 +20,26 @@
     "react-dom": "catalog:",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-worklets": "0.5.1",
     "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-web": "~0.21.0",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "catalog:",
     "typescript": "catalog:"
   },
-  "private": true
+  "main": "expo-router/entry",
+  "name": "@basango/mobile",
+  "private": true,
+  "scripts": {
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "lint": "expo lint",
+    "reset-project": "node ./scripts/reset-project.js",
+    "start": "expo start",
+    "web": "expo start --web"
+  },
+  "version": "1.0.0"
 }