Merge pull request #1575 from linkwarden/dev

Dev

.dockerignore

@@ -5,3 +5,11 @@ pgdata
 docker-compose.yml
 Dockerfile
 README.md
+.yarn/install-state.gz
+./apps/mobile
+**/.next/cache
+**/.next/cache/**
+data
+data.ms
+.git
+meili_data

.env.sample

@@ -68,6 +68,10 @@ ANTHROPIC_MODEL=
 OPENROUTER_API_KEY=
 OPENROUTER_MODEL=
 
+# https://ai-sdk.dev/providers/ai-sdk-providers/perplexity
+PERPLEXITY_API_KEY=
+PERPLEXITY_MODEL=
+
 # MeiliSearch Settings
 MEILI_HOST=
 MEILI_MASTER_KEY=
@@ -127,10 +131,10 @@ AUTH0_CLIENT_SECRET=
 AUTH0_CLIENT_ID=
 
 # Authelia
-NEXT_PUBLIC_AUTHELIA_ENABLED=""
-AUTHELIA_CLIENT_ID=""
-AUTHELIA_CLIENT_SECRET=""
-AUTHELIA_WELLKNOWN_URL=""
+NEXT_PUBLIC_AUTHELIA_ENABLED=
+AUTHELIA_CLIENT_ID=
+AUTHELIA_CLIENT_SECRET=
+AUTHELIA_WELLKNOWN_URL=
 
 # Authentik
 NEXT_PUBLIC_AUTHENTIK_ENABLED=
@@ -399,6 +403,13 @@ STRAVA_CUSTOM_NAME=
 STRAVA_CLIENT_ID=
 STRAVA_CLIENT_SECRET=
 
+# Synology
+NEXT_PUBLIC_SYNOLOGY_ENABLED=
+SYNOLOGY_CUSTOM_NAME=
+SYNOLOGY_CLIENT_ID=
+SYNOLOGY_CLIENT_SECRET=
+SYNOLOGY_WELLKNOWN_URL=
+
 # Todoist
 NEXT_PUBLIC_TODOIST_ENABLED=
 TODOIST_CUSTOM_NAME=

.github/FUNDING.yml

@@ -1,13 +1,3 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
 open_collective: linkwarden
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
+github: daniel31x13
+buy_me_a_coffee: daniel31x13

.github/pull_request_template.md

@@ -0,0 +1,46 @@
+## What does this PR do?
+
+<!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
+
+- Fixes #XXXX (GitHub issue number)
+
+## Visual Demo
+
+A visual demonstration is strongly recommended, for both the original and new change **(video / image)**.
+
+#### Video Demo (if applicable):
+
+- Show screen recordings of the issue or feature.
+- Demonstrate how to reproduce the issue, the behavior before and after the change.
+
+#### Image Demo (if applicable):
+
+- Add side-by-side screenshots of the original and updated change.
+- Highlight any significant change(s).
+
+## AI Assistance (Required)
+
+We allow AI-assisted development, but reviewers need transparency to assess risk, maintainability, and correctness.
+
+#### AI usage level (check one)
+
+- [ ] None (no AI used)
+- [ ] Light (spellcheck/rewording/comments/docs only)
+- [ ] Medium (AI suggested small code changes/snippets that I adapted)
+- [ ] Heavy (AI significantly shaped the implementation or architecture)
+
+#### Which tool(s) where used?
+
+- e.g., ChatGPT, Copilot, Cursor, etc.
+
+## What was verified by the author?
+
+<!-- Add what you personally checked to ensure correctness and safety. -->
+
+- [ ] I reviewed **and** understood all AI/human generated code
+- [ ] I validated behavior locally (tests/manual verification)
+- [ ] I checked edge cases and failure modes
+
+## Submission Acknowledgement
+
+- [ ] I acknowledge that a decent size PR without self-review might be rejected

.github/workflows/playwright-tests.yml

@@ -61,12 +61,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Use Node.js
+      - name: Use Node.js and Enable Yarn 4
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
-          cache: 'yarn'
+          node-version: "20"
 
+      - name: Enable Yarn 4
+        run: |
+          sudo rm -f /usr/bin/yarn /usr/bin/yarnpkg || true
+          corepack enable
+          corepack prepare yarn@4.12.0 --activate
+          yarn --version
+          
       - name: Initialize PostgreSQL
         run: |
           echo "Initializing Databases"
@@ -74,7 +80,7 @@ jobs:
           psql -h localhost -U postgres -d postgres -c "CREATE DATABASE ${{ env.TEST_POSTGRES_DATABASE }} OWNER ${{ env.TEST_POSTGRES_USER }};"
 
       - name: Install packages
-        run: yarn install -y
+        run: yarn install --immutable
 
       - name: Cache playwright dependencies
         uses: awalsh128/cache-apt-pkgs-action@latest

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -48,7 +49,11 @@ certificates
 
 # generated files and folders
 /data
+/data.ms
+meilisearch
+meili_data
 .idea
 prisma/dev.db
-data.ms
-.turbo
+.turbo
+
+service-account-file.json

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

Dockerfile

@@ -10,7 +10,13 @@ RUN set -eux && cargo install --locked monolith
 # Purpose: Compiles the frontend and
 # Notes:
 #  - Nothing extra should be left here.  All commands should cleanup
-FROM node:22.14-bullseye-slim AS main-app
+FROM node:20.19.6-bullseye-slim AS main-app
+
+ENV YARN_HTTP_TIMEOUT=10000000
+
+ENV COREPACK_ENABLE_DOWNLOAD_PROMPT=0
+
+ENV PRISMA_HIDE_UPDATE_MESSAGE=1
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -18,6 +24,10 @@ RUN mkdir /data
 
 WORKDIR /data
 
+RUN corepack enable
+
+COPY ./.yarnrc.yml ./
+
 COPY ./apps/web/package.json ./apps/web/playwright.config.ts ./apps/web/
 
 COPY ./apps/worker/package.json ./apps/worker/
@@ -28,7 +38,7 @@ COPY ./yarn.lock ./package.json ./
 
 RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn \
     set -eux && \
-    yarn install --network-timeout 10000000 && \
+    yarn workspaces focus linkwarden @linkwarden/web @linkwarden/worker && \
     # Install curl for healthcheck, and ca-certificates to prevent monolith from failing to retrieve resources due to invalid certificates
     apt-get update && \
     apt-get install -yqq --no-install-recommends curl ca-certificates && \
@@ -46,7 +56,8 @@ RUN set -eux && \
 COPY . .
 
 RUN yarn prisma:generate && \
-    yarn web:build
+    yarn web:build && \
+    rm -rf apps/web/.next/cache
 
 HEALTHCHECK --interval=30s \
             --timeout=5s \

README.md

@@ -38,32 +38,49 @@ Linkwarden is also designed with collaboration in mind, enabling you to share li
 
 ## Features
 
-- 📸 Auto capture a screenshot, PDF, and single html file of each webpage.
-- 📖 Reader view of the webpage, with the ability to highlight and annotate text.
-- 🏛️ Send your webpage to Wayback Machine ([archive.org](https://archive.org)) for a snapshot. (Optional)
-- ✨ Local AI Tagging to automatically tag your links based on their content (Optional).
-- 📂 Organize links by collection, sub-collection, name, description and multiple tags.
-- 👥 Collaborate on gathering links in a collection.
-- 🎛️ Customize the permissions of each member.
-- 🌐 Share your collected links and preserved formats with the world.
-- 📌 Pin your favorite links to dashboard.
-- 🔍 Full text search, filter and sort for easy retrieval.
-- 📱 Responsive design and supports most modern browsers.
-- 🌓 Dark/Light mode support.
-- 🧩 Browser extension. [Star it here!](https://github.com/linkwarden/browser-extension)
+- 📸 Auto capture a screenshot, PDF, and single html file of each webpage
+- 📖 Reader view of the webpage, with the ability to highlight and annotate text
+- 🏛️ Send your webpage to Wayback Machine ([archive.org](https://archive.org)) for a snapshot (optional)
+- ✨ Local AI Tagging to automatically tag your links based on their content (optional)
+- 📂 Organize links by collection, sub-collection, name, description and multiple tags
+- 👥 Collaborate on gathering links in a collection
+- 🎛️ Customize the permissions of each member
+- 🌐 Share your collected links and preserved formats with the world
+- 📱 Native iOS and android mobile apps
+- 🔍 Full text search, filter and sort for easy retrieval
+- 🌓 Dark/Light mode support
+- 🧩 Browser extension (star it [here](https://github.com/linkwarden/browser-extension)!)
 - 🔄 Browser Synchronization (using [Floccus](https://floccus.org)!)
-- ⬇️ Import and export your bookmarks.
-- 🔐 SSO integration. (Enterprise and Self-hosted users only)
-- 📦 Installable Progressive Web App (PWA).
-- 🍎 iOS Shortcut to save Links to Linkwarden.
-- 🔑 API keys.
-- ✅ Bulk actions.
-- 👥 User administration.
-- 🌐 Support for Other Languages (i18n).
-- 📁 Image and PDF Uploads.
-- 🎨 Custom Icons for Links and Collections.
-- 🔔 RSS Feed Subscription.
-- ✨ And many more features. (Literally!)
+- ⬆️ Upload from SingleFile (check out the [guide](https://docs.linkwarden.app/Usage/upload-from-singlefile))
+- 🔐 SSO integration (Enterprise and Self-hosted users only)
+- 🍎 iOS Shortcut to save links to Linkwarden
+- 🔑 API keys
+- ✅ Bulk actions
+- 👥 User administration
+- 🌐 Support for other languages (i18n)
+- 📁 Image and PDF uploads
+- 🎨 Custom icons for links and collections
+- 🔔 RSS feed subscription
+- ✨ And many more features (literally!)
+
+## Get Our Official Mobile App
+
+<img src="./assets/mobile_apps.png" alt="Different screens (iPad, Pixel, and iPhone)" width="400" />
+
+> [!IMPORTANT]
+> To use the app you’ll first need a Linkwarden account.
+
+To create an account, you can choose between:
+
+- [**Linkwarden Cloud**](https://linkwarden.app/#pricing) – instant setup, and your subscription directly supports ongoing development.
+- [**Self-hosted Linkwarden**](https://docs.linkwarden.app/self-hosting/installation) – free, but you’ll need to deploy and maintain a Linkwarden instance on a server.
+
+After creating an account, download the app from your preferred store:
+
+[![Download on the App Store](./assets/app_store.png)](https://apps.apple.com/app/linkwarden/id6752550960)
+[![Get it on Google Play](./assets/google_play.png)](https://play.google.com/store/apps/details?id=app.linkwarden)
+
+(To get the app as an APK outside Google Play, check out our [builds](https://github.com/linkwarden/builds) repository.)
 
 ## Like what we're doing? Give us a Star ⭐
 

apps/mobile/.easignore

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

apps/mobile/.gitignore

@@ -36,4 +36,11 @@ yarn-error.*
 *.tsbuildinfo
 
 app-example
-.env
+.env
+
+ios/
+android/
+
+service-account-file.json
+
+.env.local

apps/mobile/.npmrc

@@ -1 +0,0 @@
-node-linker=hoisted

apps/mobile/android/.gitignore

@@ -1,16 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# Android/IntelliJ
-#
-build/
-.idea
-.gradle
-local.properties
-*.iml
-*.hprof
-.cxx/
-
-# Bundle artifacts
-*.jsbundle

apps/mobile/android/app/build.gradle

@@ -1,176 +0,0 @@
-apply plugin: "com.android.application"
-apply plugin: "org.jetbrains.kotlin.android"
-apply plugin: "com.facebook.react"
-
-def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
-
-/**
- * This is the configuration block to customize your React Native Android app.
- * By default you don't need to apply any configuration, just uncomment the lines you need.
- */
-react {
-    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
-    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
-    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
-
-    // Use Expo CLI to bundle the app, this ensures the Metro config
-    // works correctly with Expo projects.
-    cliFile = new File(["node", "--print", "require.resolve('@expo/cli', { paths: [require.resolve('expo/package.json')] })"].execute(null, rootDir).text.trim())
-    bundleCommand = "export:embed"
-
-    /* Folders */
-     //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-
-    /* Variants */
-    //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
-    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
-
-    /* Bundling */
-    //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
-
-    //
-    //   The path to the CLI configuration file. Default is empty.
-    // bundleConfig = file(../rn-cli.config.js)
-    //
-    //   The name of the generated asset file containing your JS bundle
-    // bundleAssetName = "MyApplication.android.bundle"
-    //
-    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
-    //
-    //   A list of extra flags to pass to the 'bundle' commands.
-    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
-    // extraPackagerArgs = []
-
-    /* Hermes Commands */
-    //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
-    //
-    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-    // hermesFlags = ["-O", "-output-source-map"]
-
-    /* Autolinking */
-    autolinkLibrariesWithApp()
-}
-
-/**
- * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
- */
-def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
-
-/**
- * The preferred build flavor of JavaScriptCore (JSC)
- *
- * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
- *
- * The international variant includes ICU i18n library and necessary data
- * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US. Note that
- * this variant is about 6MiB larger per architecture than default.
- */
-def jscFlavor = 'org.webkit:android-jsc:+'
-
-android {
-    ndkVersion rootProject.ext.ndkVersion
-
-    buildToolsVersion rootProject.ext.buildToolsVersion
-    compileSdk rootProject.ext.compileSdkVersion
-
-    namespace 'com.anonymous.mobileapp'
-    defaultConfig {
-        applicationId 'com.anonymous.mobileapp'
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0.0"
-    }
-    signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
-        }
-    }
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            crunchPngs (findProperty('android.enablePngCrunchInReleaseBuilds')?.toBoolean() ?: true)
-        }
-    }
-    packagingOptions {
-        jniLibs {
-            useLegacyPackaging (findProperty('expo.useLegacyPackaging')?.toBoolean() ?: false)
-        }
-    }
-    androidResources {
-        ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:!CVS:!thumbs.db:!picasa.ini:!*~'
-    }
-}
-
-// Apply static values from `gradle.properties` to the `android.packagingOptions`
-// Accepts values in comma delimited lists, example:
-// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
-["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
-    // Split option: 'foo,bar' -> ['foo', 'bar']
-    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
-    // Trim all elements in place.
-    for (i in 0..<options.size()) options[i] = options[i].trim();
-    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
-    options -= ""
-
-    if (options.length > 0) {
-        println "android.packagingOptions.$prop += $options ($options.length)"
-        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
-        options.each {
-            android.packagingOptions[prop] += it
-        }
-    }
-}
-
-dependencies {
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")
-
-    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
-    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
-    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
-
-    if (isGifEnabled) {
-        // For animated gif support
-        implementation("com.facebook.fresco:animated-gif:${reactAndroidLibs.versions.fresco.get()}")
-    }
-
-    if (isWebpEnabled) {
-        // For webp support
-        implementation("com.facebook.fresco:webpsupport:${reactAndroidLibs.versions.fresco.get()}")
-        if (isWebpAnimatedEnabled) {
-            // Animated webp support
-            implementation("com.facebook.fresco:animated-webp:${reactAndroidLibs.versions.fresco.get()}")
-        }
-    }
-
-    if (hermesEnabled.toBoolean()) {
-        implementation("com.facebook.react:hermes-android")
-    } else {
-        implementation jscFlavor
-    }
-}

apps/mobile/android/app/proguard-rules.pro

@@ -1,14 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# react-native-reanimated
--keep class com.swmansion.reanimated.** { *; }
--keep class com.facebook.react.turbomodule.** { *; }
-
-# Add any project specific keep options here:

apps/mobile/android/app/src/debug/AndroidManifest.xml

@@ -1,7 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-
-    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
-</manifest>

apps/mobile/android/app/src/main/AndroidManifest.xml

@@ -1,33 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-  <uses-permission android:name="android.permission.INTERNET"/>
-  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
-  <uses-permission android:name="android.permission.VIBRATE"/>
-  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-  <queries>
-    <intent>
-      <action android:name="android.intent.action.VIEW"/>
-      <category android:name="android.intent.category.BROWSABLE"/>
-      <data android:scheme="https"/>
-    </intent>
-  </queries>
-  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme" android:supportsRtl="true" android:fullBackupContent="@xml/secure_store_backup_rules" android:dataExtractionRules="@xml/secure_store_data_extraction_rules">
-    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
-    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
-    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
-      <intent-filter>
-        <action android:name="android.intent.action.MAIN"/>
-        <category android:name="android.intent.category.LAUNCHER"/>
-      </intent-filter>
-      <intent-filter>
-        <action android:name="android.intent.action.VIEW"/>
-        <category android:name="android.intent.category.DEFAULT"/>
-        <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="myapp"/>
-        <data android:scheme="com.anonymous.mobileapp"/>
-        <data android:scheme="exp+mobile-app"/>
-      </intent-filter>
-    </activity>
-  </application>
-</manifest>

apps/mobile/android/app/src/main/java/com/anonymous/mobileapp/MainActivity.kt

@@ -1,65 +0,0 @@
-package com.anonymous.mobileapp
-import expo.modules.splashscreen.SplashScreenManager
-
-import android.os.Build
-import android.os.Bundle
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-import expo.modules.ReactActivityDelegateWrapper
-
-class MainActivity : ReactActivity() {
-  override fun onCreate(savedInstanceState: Bundle?) {
-    // Set the theme to AppTheme BEFORE onCreate to support
-    // coloring the background, status bar, and navigation bar.
-    // This is required for expo-splash-screen.
-    // setTheme(R.style.AppTheme);
-    // @generated begin expo-splashscreen - expo prebuild (DO NOT MODIFY) sync-f3ff59a738c56c9a6119210cb55f0b613eb8b6af
-    SplashScreenManager.registerOnActivity(this)
-    // @generated end expo-splashscreen
-    super.onCreate(null)
-  }
-
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  override fun getMainComponentName(): String = "main"
-
-  /**
-   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
-   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
-   */
-  override fun createReactActivityDelegate(): ReactActivityDelegate {
-    return ReactActivityDelegateWrapper(
-          this,
-          BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
-          object : DefaultReactActivityDelegate(
-              this,
-              mainComponentName,
-              fabricEnabled
-          ){})
-  }
-
-  /**
-    * Align the back button behavior with Android S
-    * where moving root activities to background instead of finishing activities.
-    * @see <a href="https://developer.android.com/reference/android/app/Activity#onBackPressed()">onBackPressed</a>
-    */
-  override fun invokeDefaultOnBackPressed() {
-      if (Build.VERSION.SDK_INT <= Build.VERSION_CODES.R) {
-          if (!moveTaskToBack(false)) {
-              // For non-root activities, use the default implementation to finish them.
-              super.invokeDefaultOnBackPressed()
-          }
-          return
-      }
-
-      // Use the default back button implementation on Android S
-      // because it's doing more than [Activity.moveTaskToBack] in fact.
-      super.invokeDefaultOnBackPressed()
-  }
-}

apps/mobile/android/app/src/main/java/com/anonymous/mobileapp/MainApplication.kt

@@ -1,57 +0,0 @@
-package com.anonymous.mobileapp
-
-import android.app.Application
-import android.content.res.Configuration
-
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.ReactPackage
-import com.facebook.react.ReactHost
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
-import com.facebook.soloader.SoLoader
-
-import expo.modules.ApplicationLifecycleDispatcher
-import expo.modules.ReactNativeHostWrapper
-
-class MainApplication : Application(), ReactApplication {
-
-  override val reactNativeHost: ReactNativeHost = ReactNativeHostWrapper(
-        this,
-        object : DefaultReactNativeHost(this) {
-          override fun getPackages(): List<ReactPackage> {
-            val packages = PackageList(this).packages
-            // Packages that cannot be autolinked yet can be added manually here, for example:
-            // packages.add(new MyReactNativePackage());
-            return packages
-          }
-
-          override fun getJSMainModuleName(): String = ".expo/.virtual-metro-entry"
-
-          override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-          override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-          override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-      }
-  )
-
-  override val reactHost: ReactHost
-    get() = ReactNativeHostWrapper.createReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      // If you opted-in for the New Architecture, we load the native entry point for this app.
-      load()
-    }
-    ApplicationLifecycleDispatcher.onApplicationCreate(this)
-  }
-
-  override fun onConfigurationChanged(newConfig: Configuration) {
-    super.onConfigurationChanged(newConfig)
-    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig)
-  }
-}

apps/mobile/android/app/src/main/res/drawable/ic_launcher_background.xml

@@ -1,6 +0,0 @@
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-  <item android:drawable="@color/splashscreen_background"/>
-  <item>
-    <bitmap android:gravity="center" android:src="@drawable/splashscreen_logo"/>
-  </item>
-</layer-list>

apps/mobile/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2014 The Android Open Source Project
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-<inset xmlns:android="http://schemas.android.com/apk/res/android"
-       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
-       >
-
-    <selector>
-        <!--
-          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
-          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
-          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
-
-          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-
-          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-        -->
-        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
-    </selector>
-
-</inset>

apps/mobile/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/iconBackground"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>

apps/mobile/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@color/iconBackground"/>
-    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
-</adaptive-icon>

apps/mobile/android/app/src/main/res/values-night/colors.xml

@@ -1 +0,0 @@
-<resources/>

apps/mobile/android/app/src/main/res/values/colors.xml

@@ -1,6 +0,0 @@
-<resources>
-  <color name="splashscreen_background">#ffffff</color>
-  <color name="iconBackground">#ffffff</color>
-  <color name="colorPrimary">#023c69</color>
-  <color name="colorPrimaryDark">#ffffff</color>
-</resources>

apps/mobile/android/app/src/main/res/values/strings.xml

@@ -1,6 +0,0 @@
-<resources>
-  <string name="app_name">mobile-app</string>
-  <string name="expo_system_ui_user_interface_style" translatable="false">automatic</string>
-  <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
-  <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
-</resources>

apps/mobile/android/app/src/main/res/values/styles.xml

@@ -1,19 +0,0 @@
-<resources xmlns:tools="http://schemas.android.com/tools">
-  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-    <item name="android:textColor">@android:color/black</item>
-    <item name="android:editTextStyle">@style/ResetEditText</item>
-    <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="android:statusBarColor">#ffffff</item>
-  </style>
-  <style name="ResetEditText" parent="@android:style/Widget.EditText">
-    <item name="android:padding">0dp</item>
-    <item name="android:textColorHint">#c8c8c8</item>
-    <item name="android:textColor">@android:color/black</item>
-  </style>
-  <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen">
-    <item name="windowSplashScreenBackground">@color/splashscreen_background</item>
-    <item name="windowSplashScreenAnimatedIcon">@drawable/splashscreen_logo</item>
-    <item name="postSplashScreenTheme">@style/AppTheme</item>
-  </style>
-</resources>

apps/mobile/android/build.gradle

@@ -1,41 +0,0 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
-buildscript {
-    ext {
-        buildToolsVersion = findProperty('android.buildToolsVersion') ?: '35.0.0'
-        minSdkVersion = Integer.parseInt(findProperty('android.minSdkVersion') ?: '24')
-        compileSdkVersion = Integer.parseInt(findProperty('android.compileSdkVersion') ?: '35')
-        targetSdkVersion = Integer.parseInt(findProperty('android.targetSdkVersion') ?: '34')
-        kotlinVersion = findProperty('android.kotlinVersion') ?: '1.9.25'
-
-        ndkVersion = "26.1.10909125"
-    }
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath('com.android.tools.build:gradle')
-        classpath('com.facebook.react:react-native-gradle-plugin')
-        classpath('org.jetbrains.kotlin:kotlin-gradle-plugin')
-    }
-}
-
-apply plugin: "com.facebook.react.rootproject"
-
-allprojects {
-    repositories {
-        maven {
-            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-            url(new File(['node', '--print', "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), '../android'))
-        }
-        maven {
-            // Android JSC is installed from npm
-            url(new File(['node', '--print', "require.resolve('jsc-android/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim(), '../dist'))
-        }
-
-        google()
-        mavenCentral()
-        maven { url 'https://www.jitpack.io' }
-    }
-}

apps/mobile/android/gradle.properties

@@ -1,56 +0,0 @@
-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true
-
-# Enable AAPT2 PNG crunching
-android.enablePngCrunchInReleaseBuilds=true
-
-# Use this property to specify which architecture you want to build.
-# You can also override it from the CLI using
-# ./gradlew <task> -PreactNativeArchitectures=x86_64
-reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
-
-# Use this property to enable support to the new architecture.
-# This will allow you to use TurboModules and the Fabric render in
-# your application. You should enable this flag either if you want
-# to write custom TurboModules/Fabric components OR use libraries that
-# are providing them.
-newArchEnabled=true
-
-# Use this property to enable or disable the Hermes JS engine.
-# If set to false, you will be using JSC instead.
-hermesEnabled=true
-
-# Enable GIF support in React Native images (~200 B increase)
-expo.gif.enabled=true
-# Enable webp support in React Native images (~85 KB increase)
-expo.webp.enabled=true
-# Enable animated webp support (~3.4 MB increase)
-# Disabled by default because iOS doesn't support animated webp
-expo.webp.animated=false
-
-# Enable network inspector
-EX_DEV_CLIENT_NETWORK_INSPECTOR=true
-
-# Use legacy packaging to compress native libraries in the resulting APK.
-expo.useLegacyPackaging=false

apps/mobile/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,7 +0,0 @@
-distributionBase=GRADLE_USER_HOME
-distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip
-networkTimeout=10000
-validateDistributionUrl=true
-zipStoreBase=GRADLE_USER_HOME
-zipStorePath=wrapper/dists

apps/mobile/android/gradlew

@@ -1,252 +0,0 @@
-#!/bin/sh
-
-#
-# Copyright © 2015-2021 the original authors.
-#
-# Licensed under the Apache License, Version 2.0 (the "License");
-# you may not use this file except in compliance with the License.
-# You may obtain a copy of the License at
-#
-#      https://www.apache.org/licenses/LICENSE-2.0
-#
-# Unless required by applicable law or agreed to in writing, software
-# distributed under the License is distributed on an "AS IS" BASIS,
-# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-# See the License for the specific language governing permissions and
-# limitations under the License.
-#
-# SPDX-License-Identifier: Apache-2.0
-#
-
-##############################################################################
-#
-#   Gradle start up script for POSIX generated by Gradle.
-#
-#   Important for running:
-#
-#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
-#       noncompliant, but you have some other compliant shell such as ksh or
-#       bash, then to run this script, type that shell name before the whole
-#       command line, like:
-#
-#           ksh Gradle
-#
-#       Busybox and similar reduced shells will NOT work, because this script
-#       requires all of these POSIX shell features:
-#         * functions;
-#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
-#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
-#         * compound commands having a testable exit status, especially «case»;
-#         * various built-in commands including «command», «set», and «ulimit».
-#
-#   Important for patching:
-#
-#   (2) This script targets any POSIX shell, so it avoids extensions provided
-#       by Bash, Ksh, etc; in particular arrays are avoided.
-#
-#       The "traditional" practice of packing multiple parameters into a
-#       space-separated string is a well documented source of bugs and security
-#       problems, so this is (mostly) avoided, by progressively accumulating
-#       options in "$@", and eventually passing that to Java.
-#
-#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
-#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
-#       see the in-line comments for details.
-#
-#       There are tweaks for specific operating systems such as AIX, CygWin,
-#       Darwin, MinGW, and NonStop.
-#
-#   (3) This script is generated from the Groovy template
-#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
-#       within the Gradle project.
-#
-#       You can find Gradle at https://github.com/gradle/gradle/.
-#
-##############################################################################
-
-# Attempt to set APP_HOME
-
-# Resolve links: $0 may be a link
-app_path=$0
-
-# Need this for daisy-chained symlinks.
-while
-    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
-    [ -h "$app_path" ]
-do
-    ls=$( ls -ld "$app_path" )
-    link=${ls#*' -> '}
-    case $link in             #(
-      /*)   app_path=$link ;; #(
-      *)    app_path=$APP_HOME$link ;;
-    esac
-done
-
-# This is normally unused
-# shellcheck disable=SC2034
-APP_BASE_NAME=${0##*/}
-# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
-APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s
-' "$PWD" ) || exit
-
-# Use the maximum available, or set MAX_FD != -1 to use that value.
-MAX_FD=maximum
-
-warn () {
-    echo "$*"
-} >&2
-
-die () {
-    echo
-    echo "$*"
-    echo
-    exit 1
-} >&2
-
-# OS specific support (must be 'true' or 'false').
-cygwin=false
-msys=false
-darwin=false
-nonstop=false
-case "$( uname )" in                #(
-  CYGWIN* )         cygwin=true  ;; #(
-  Darwin* )         darwin=true  ;; #(
-  MSYS* | MINGW* )  msys=true    ;; #(
-  NONSTOP* )        nonstop=true ;;
-esac
-
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
-
-
-# Determine the Java command to use to start the JVM.
-if [ -n "$JAVA_HOME" ] ; then
-    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
-        # IBM's JDK on AIX uses strange locations for the executables
-        JAVACMD=$JAVA_HOME/jre/sh/java
-    else
-        JAVACMD=$JAVA_HOME/bin/java
-    fi
-    if [ ! -x "$JAVACMD" ] ; then
-        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-else
-    JAVACMD=java
-    if ! command -v java >/dev/null 2>&1
-    then
-        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-
-Please set the JAVA_HOME variable in your environment to match the
-location of your Java installation."
-    fi
-fi
-
-# Increase the maximum file descriptors if we can.
-if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
-    case $MAX_FD in #(
-      max*)
-        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC2039,SC3045
-        MAX_FD=$( ulimit -H -n ) ||
-            warn "Could not query maximum file descriptor limit"
-    esac
-    case $MAX_FD in  #(
-      '' | soft) :;; #(
-      *)
-        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
-        # shellcheck disable=SC2039,SC3045
-        ulimit -n "$MAX_FD" ||
-            warn "Could not set maximum file descriptor limit to $MAX_FD"
-    esac
-fi
-
-# Collect all arguments for the java command, stacking in reverse order:
-#   * args from the command line
-#   * the main class name
-#   * -classpath
-#   * -D...appname settings
-#   * --module-path (only if needed)
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
-
-# For Cygwin or MSYS, switch paths to Windows format before running java
-if "$cygwin" || "$msys" ; then
-    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
-    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
-
-    JAVACMD=$( cygpath --unix "$JAVACMD" )
-
-    # Now convert the arguments - kludge to limit ourselves to /bin/sh
-    for arg do
-        if
-            case $arg in                                #(
-              -*)   false ;;                            # don't mess with options #(
-              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
-                    [ -e "$t" ] ;;                      #(
-              *)    false ;;
-            esac
-        then
-            arg=$( cygpath --path --ignore --mixed "$arg" )
-        fi
-        # Roll the args list around exactly as many times as the number of
-        # args, so each arg winds up back in the position where it started, but
-        # possibly modified.
-        #
-        # NB: a `for` loop captures its iteration list before it begins, so
-        # changing the positional parameters here affects neither the number of
-        # iterations, nor the values presented in `arg`.
-        shift                   # remove old arg
-        set -- "$@" "$arg"      # push replacement arg
-    done
-fi
-
-
-# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
-
-# Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
-#     and any embedded shellness will be escaped.
-#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
-#     treated as '${Hostname}' itself on the command line.
-
-set -- \
-        "-Dorg.gradle.appname=$APP_BASE_NAME" \
-        -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
-        "$@"
-
-# Stop when "xargs" is not available.
-if ! command -v xargs >/dev/null 2>&1
-then
-    die "xargs is not available"
-fi
-
-# Use "xargs" to parse quoted args.
-#
-# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
-#
-# In Bash we could simply go:
-#
-#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
-#   set -- "${ARGS[@]}" "$@"
-#
-# but POSIX shell has neither arrays nor command substitution, so instead we
-# post-process each arg (as a line of input to sed) to backslash-escape any
-# character that might be a shell metacharacter, then use eval to reverse
-# that process (while maintaining the separation between arguments), and wrap
-# the whole thing up as a single "set" statement.
-#
-# This will of course break if any of these variables contains a newline or
-# an unmatched quote.
-#
-
-eval "set -- $(
-        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
-        xargs -n1 |
-        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
-        tr '\n' ' '
-    )" '"$@"'
-
-exec "$JAVACMD" "$@"

apps/mobile/android/gradlew.bat

@@ -1,94 +0,0 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-@rem SPDX-License-Identifier: Apache-2.0
-@rem
-
-@if "%DEBUG%"=="" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%"=="" set DIRNAME=.
-@rem This is normally unused
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if %ERRORLEVEL% equ 0 goto execute
-
-echo. 1>&2
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
-echo. 1>&2
-echo Please set the JAVA_HOME variable in your environment to match the 1>&2
-echo location of your Java installation. 1>&2
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto execute
-
-echo. 1>&2
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
-echo. 1>&2
-echo Please set the JAVA_HOME variable in your environment to match the 1>&2
-echo location of your Java installation. 1>&2
-
-goto fail
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
-
-:end
-@rem End local scope for the variables with windows NT shell
-if %ERRORLEVEL% equ 0 goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-set EXIT_CODE=%ERRORLEVEL%
-if %EXIT_CODE% equ 0 set EXIT_CODE=1
-if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
-exit /b %EXIT_CODE%
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega

apps/mobile/android/settings.gradle

@@ -1,38 +0,0 @@
-pluginManagement {
-    includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile().toString())
-}
-plugins { id("com.facebook.react.settings") }
-
-extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
-  if (System.getenv('EXPO_USE_COMMUNITY_AUTOLINKING') == '1') {
-    ex.autolinkLibrariesFromCommand()
-  } else {
-    def command = [
-      'node',
-      '--no-warnings',
-      '--eval',
-      'require(require.resolve(\'expo-modules-autolinking\', { paths: [require.resolve(\'expo/package.json\')] }))(process.argv.slice(1))',
-      'react-native-config',
-      '--json',
-      '--platform',
-      'android'
-    ].toList()
-    ex.autolinkLibrariesFromCommand(command)
-  }
-}
-
-rootProject.name = 'mobile-app'
-
-dependencyResolutionManagement {
-  versionCatalogs {
-    reactAndroidLibs {
-      from(files(new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim(), "../gradle/libs.versions.toml")))
-    }
-  }
-}
-
-apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
-useExpoModules()
-
-include ':app'
-includeBuild(new File(["node", "--print", "require.resolve('@react-native/gradle-plugin/package.json', { paths: [require.resolve('react-native/package.json')] })"].execute(null, rootDir).text.trim()).getParentFile())

apps/mobile/app.json

@@ -1,23 +1,32 @@
 {
   "expo": {
-    "name": "mobile-app",
-    "slug": "mobile-app",
-    "version": "1.0.0",
+    "name": "Linkwarden",
+    "slug": "linkwarden",
+    "version": "1.0.1",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "myapp",
+    "scheme": "linkwarden",
     "userInterfaceStyle": "automatic",
     "newArchEnabled": true,
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "com.anonymous.mobile-app"
+      "bundleIdentifier": "app.linkwarden",
+      "entitlements": {
+        "com.apple.security.application-groups": ["group.app.linkwarden"]
+      },
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false,
+        "NSAppTransportSecurity": {
+          "NSAllowsArbitraryLoads": true
+        }
+      }
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/images/maskable_logo.jpeg",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.anonymous.mobileapp"
+      "package": "app.linkwarden"
     },
     "web": {
       "bundler": "metro",
@@ -32,13 +41,66 @@
           "image": "./assets/images/splash-icon.png",
           "imageWidth": 200,
           "resizeMode": "contain",
-          "backgroundColor": "#ffffff"
+          "backgroundColor": "#FFFFFF",
+          "dark": {
+            "image": "./assets/images/splash-icon.png",
+            "resizeMode": "contain",
+            "backgroundColor": "#171717"
+          }
         }
       ],
-      "expo-secure-store"
+      "expo-secure-store",
+      [
+        "expo-share-intent",
+        {
+          "iosAppGroupIdentifier": "group.app.linkwarden"
+        }
+      ],
+      [
+        "expo-build-properties",
+        {
+          "android": {
+            "enableProguardInReleaseBuilds": true,
+            "extraProguardRules": "-keep public class com.horcrux.svg.** {*;}",
+            "allowBackup": false,
+            "compileSdkVersion": 35,
+            "targetSdkVersion": 35,
+            "buildToolsVersion": "35.0.0",
+            "usesCleartextTraffic": true
+          }
+        }
+      ],
+      [
+        "react-native-edge-to-edge",
+        {
+          "android": {
+            "parentTheme": "Default",
+            "enforceNavigationBarContrast": false
+          }
+        }
+      ],
+      "./plugins/with-daynight-transparent-nav"
     ],
     "experiments": {
       "typedRoutes": true
-    }
+    },
+    "androidStatusBar": {
+      "backgroundColor": "#ffffff",
+      "barStyle": "dark-content",
+      "translucent": false
+    },
+    "androidNavigationBar": {
+      "backgroundColor": "#ffffff",
+      "barStyle": "dark-content"
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "34f82639-7a25-4ebe-81c8-2db521b612cf"
+      }
+    },
+    "owner": "linkwarden"
   }
 }

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

@@ -1,26 +1,38 @@
 import { Tabs } from "expo-router";
 import React from "react";
-import { Platform, TouchableOpacity, useColorScheme } from "react-native";
+import { Platform } from "react-native";
 import HapticTab from "@/components/HapticTab";
-import { IconSymbol } from "@/components/ui/IconSymbol";
-// import "react-native-reanimated";
 import TabBarBackground from "@/components/ui/TabBarBackground";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Folder, Hash, House, Link, Settings } from "lucide-react-native";
 
 export default function TabLayout() {
-  const colorScheme = useColorScheme();
+  const { colorScheme } = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
         tabBarBackground: TabBarBackground,
-        tabBarActiveTintColor: colorScheme === "dark" ? "white" : "black",
+        tabBarActiveTintColor: rawTheme[colorScheme as ThemeName].primary,
+        tabBarInactiveTintColor: rawTheme[colorScheme as ThemeName].neutral,
         tabBarButton: HapticTab,
-        // headerShown: false,
         tabBarStyle: Platform.select({
           ios: {
             position: "absolute",
+            borderTopWidth: 0,
+            elevation: 0,
+            backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+            paddingLeft: 5,
+            paddingRight: 5,
+          },
+          default: {
+            borderTopWidth: 0,
+            backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+            elevation: 0,
+            paddingLeft: 5,
+            paddingRight: 5,
           },
-          default: {},
         }),
       }}
     >
@@ -29,9 +41,7 @@ export default function TabLayout() {
         options={{
           title: "Dashboard",
           headerShown: false,
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="house.fill" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <House size={24} color={color} />,
         }}
       />
       <Tabs.Screen
@@ -39,9 +49,23 @@ export default function TabLayout() {
         options={{
           title: "Links",
           headerShown: false,
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="link" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <Link size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="collections"
+        options={{
+          title: "Collections",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <Folder size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="tags"
+        options={{
+          title: "Tags",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <Hash size={24} color={color} />,
         }}
       />
       <Tabs.Screen
@@ -49,9 +73,7 @@ export default function TabLayout() {
         options={{
           title: "Settings",
           headerShown: false,
-          tabBarIcon: ({ color }) => (
-            <IconSymbol size={28} name="gearshape.fill" color={color} />
-          ),
+          tabBarIcon: ({ color }) => <Settings size={24} color={color} />,
         }}
       />
     </Tabs>

apps/mobile/app/(tabs)/collections/[id].tsx

@@ -0,0 +1,62 @@
+import { useLinks } from "@linkwarden/router/links";
+import { View, StyleSheet, Platform } from "react-native";
+import useAuthStore from "@/store/auth";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import React, { useEffect } from "react";
+import { useCollections } from "@linkwarden/router/collections";
+import Links from "@/components/Links";
+
+export default function LinksScreen() {
+  const { auth } = useAuthStore();
+  const { search, id } = useLocalSearchParams<{
+    search?: string;
+    id: string;
+  }>();
+
+  const { links, data } = useLinks(
+    {
+      sort: 0,
+      searchQueryString: decodeURIComponent(search ?? ""),
+      collectionId: Number(id),
+    },
+    auth
+  );
+
+  const collections = useCollections(auth);
+
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    const activeCollection = collections.data?.filter(
+      (e) => e.id === Number(id)
+    )[0];
+
+    if (activeCollection?.name)
+      navigation?.setOptions?.({
+        headerTitle: activeCollection?.name,
+        headerSearchBarOptions: {
+          placeholder: `Search ${activeCollection.name}`,
+        },
+      });
+  }, [navigation]);
+
+  return (
+    <View
+      style={styles.container}
+      className="h-full bg-base-100"
+      collapsable={false}
+      collapsableChildren={false}
+    >
+      <Links links={links} data={data} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 83,
+    },
+    default: {},
+  }),
+});

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

@@ -0,0 +1,44 @@
+import { Stack, useRouter } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Platform } from "react-native";
+
+export default function Layout() {
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerTitle: "Collections",
+        headerLargeTitle: true,
+        headerTransparent: Platform.OS === "ios" ? true : false,
+        headerShadowVisible: false,
+        headerBlurEffect:
+          colorScheme === "dark" ? "systemMaterialDark" : "systemMaterial",
+        headerTintColor: colorScheme === "dark" ? "white" : "black",
+        headerSearchBarOptions: {
+          placeholder: "Search Collections",
+          autoCapitalize: "none",
+          onChangeText: (e) => {
+            router.setParams({
+              search: encodeURIComponent(e.nativeEvent.text),
+            });
+          },
+          headerIconColor: colorScheme === "dark" ? "white" : "black",
+        },
+        headerLargeStyle: {
+          backgroundColor: rawTheme[colorScheme as ThemeName]["base-100"],
+        },
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+                ? rawTheme["dark"]["base-100"]
+                : "white",
+        },
+      }}
+    />
+  );
+}

apps/mobile/app/(tabs)/collections/index.tsx

@@ -0,0 +1,94 @@
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  Platform,
+  Text,
+  ActivityIndicator,
+} from "react-native";
+import useAuthStore from "@/store/auth";
+import CollectionListing from "@/components/CollectionListing";
+import { useLocalSearchParams } from "expo-router";
+import React, { useEffect, useState } from "react";
+import Spinner from "@/components/ui/Spinner";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { useCollections } from "@linkwarden/router/collections";
+import { CollectionIncludingMembersAndLinkCount } from "@linkwarden/types";
+
+export default function CollectionsScreen() {
+  const { colorScheme } = useColorScheme();
+  const { auth } = useAuthStore();
+  const { search } = useLocalSearchParams<{ search?: string }>();
+
+  const collections = useCollections(auth);
+
+  const [filteredCollections, setFilteredCollections] = useState<
+    CollectionIncludingMembersAndLinkCount[]
+  >([]);
+
+  useEffect(() => {
+    const filter =
+      collections.data?.filter((e) =>
+        e.name.includes(decodeURIComponent(search || ""))
+      ) || [];
+
+    setFilteredCollections(filter);
+  }, [search, collections.data]);
+
+  return (
+    <View
+      style={styles.container}
+      className="h-full bg-base-100"
+      collapsable={false}
+      collapsableChildren={false}
+    >
+      {collections.isLoading ? (
+        <View className="flex justify-center h-screen items-center">
+          <ActivityIndicator size="large" />
+          <Text className="text-base mt-2.5 text-neutral">Loading...</Text>
+        </View>
+      ) : (
+        <FlatList
+          contentInsetAdjustmentBehavior="automatic"
+          ListHeaderComponent={() => <></>}
+          data={filteredCollections}
+          refreshControl={
+            <Spinner
+              refreshing={collections.isRefetching}
+              onRefresh={() => collections.refetch()}
+              progressBackgroundColor={
+                rawTheme[colorScheme as ThemeName]["base-200"]
+              }
+              colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
+            />
+          }
+          refreshing={collections.isRefetching}
+          initialNumToRender={4}
+          keyExtractor={(item) => item.id?.toString() || ""}
+          renderItem={({ item }) => <CollectionListing collection={item} />}
+          onEndReachedThreshold={0.5}
+          ItemSeparatorComponent={() => (
+            <View className="bg-neutral-content h-px" />
+          )}
+          ListEmptyComponent={
+            <View className="flex justify-center py-10 items-center">
+              <Text className="text-center text-xl text-neutral">
+                Nothing found...
+              </Text>
+            </View>
+          }
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 83,
+    },
+    default: {},
+  }),
+});

apps/mobile/app/(tabs)/dashboard/[section].tsx

@@ -1,17 +1,10 @@
 import { useLinks } from "@linkwarden/router/links";
-import { View, StyleSheet, FlatList, Platform } from "react-native";
+import { View, StyleSheet, Platform } from "react-native";
 import useAuthStore from "@/store/auth";
-import LinkListing from "@/components/LinkListing";
 import { useLocalSearchParams, useNavigation } from "expo-router";
-import React, { useEffect, useState } from "react";
-import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import React, { useEffect, useMemo } from "react";
 import { useCollections } from "@linkwarden/router/collections";
-
-const RenderItem = React.memo(
-  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
-    return <LinkListing link={item} />;
-  }
-);
+import Links from "@/components/Links";
 
 export default function LinksScreen() {
   const { auth } = useAuthStore();
@@ -24,19 +17,28 @@ export default function LinksScreen() {
   const navigation = useNavigation();
   const collections = useCollections(auth);
 
+  const title = useMemo(() => {
+    if (section === "pinned-links") return "Pinned Links";
+    if (section === "recent-links") return "Recent Links";
+
+    if (section === "collection") {
+      return (
+        collections.data?.find((c) => c.id?.toString() === collectionId)
+          ?.name || "Collection"
+      );
+    }
+
+    return "Links";
+  }, [section, collections.data, collectionId]);
+
   useEffect(() => {
     navigation.setOptions({
-      headerTitle:
-        section === "pinned-links"
-          ? "Pinned Links"
-          : section === "recent-links"
-            ? "Recent Links"
-            : section === "collection"
-              ? collections.data?.find((c) => c.id?.toString() === collectionId)
-                  ?.name || "Collection"
-              : "Links",
+      headerTitle: title,
+      headerSearchBarOptions: {
+        placeholder: `Search ${title}`,
+      },
     });
-  }, [section, navigation]);
+  }, [title, navigation]);
 
   const { links, data } = useLinks(
     {
@@ -49,24 +51,13 @@ export default function LinksScreen() {
   );
 
   return (
-    <View style={styles.container} className="h-full">
-      <FlatList
-        contentInsetAdjustmentBehavior="automatic"
-        ListHeaderComponent={() => <></>}
-        data={links || []}
-        onRefresh={() => data.refetch()}
-        refreshing={data.isRefetching}
-        initialNumToRender={4}
-        keyExtractor={(item) => item.id?.toString() || ""}
-        renderItem={({ item }) => (
-          <RenderItem item={item} key={item.id?.toString()} />
-        )}
-        onEndReached={() => data.fetchNextPage()}
-        onEndReachedThreshold={0.5}
-        ItemSeparatorComponent={() => (
-          <View className="bg-[#eee] h-[1px] w-[100px]" />
-        )}
-      />
+    <View
+      style={styles.container}
+      className="h-full bg-base-100"
+      collapsable={false}
+      collapsableChildren={false}
+    >
+      <Links links={links} data={data} />
     </View>
   );
 }

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

@@ -1,32 +1,49 @@
-import { IconSymbol } from "@/components/ui/IconSymbol";
+import { rawTheme, ThemeName } from "@/lib/colors";
 import { Stack, useRouter } from "expo-router";
-import { TouchableOpacity } from "react-native";
+import { Plus } from "lucide-react-native";
+import { useColorScheme } from "nativewind";
+import { Platform, TouchableOpacity } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import * as DropdownMenu from "zeego/dropdown-menu";
 
-export default function RootLayout() {
+export default function Layout() {
   const router = useRouter();
+  const { colorScheme } = useColorScheme();
 
   return (
     <Stack
       screenOptions={{
         headerLargeTitle: true,
-        headerTransparent: true,
-        headerBlurEffect: "systemUltraThinMaterial",
+        headerTransparent: Platform.OS === "ios" ? true : false,
+        headerShadowVisible: false,
+        headerBlurEffect:
+          colorScheme === "dark" ? "systemMaterialDark" : "systemMaterial",
+        headerTintColor: colorScheme === "dark" ? "white" : "black",
+        headerLargeStyle: {
+          backgroundColor: rawTheme[colorScheme as ThemeName]["base-100"],
+        },
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+              ? rawTheme["dark"]["base-100"]
+              : "white",
+        },
       }}
     >
       <Stack.Screen
         name="index"
         options={{
           headerTitle: "Dashboard",
-          headerLargeStyle: {
-            backgroundColor: "#f2f2f2",
-          },
           headerRight: () => (
             <DropdownMenu.Root>
               <DropdownMenu.Trigger>
                 <TouchableOpacity>
-                  <IconSymbol size={20} name="plus" color={"#3478f6"} />
+                  <Plus
+                    size={21}
+                    color={rawTheme[colorScheme as ThemeName].primary}
+                  />
                 </TouchableOpacity>
               </DropdownMenu.Trigger>
 
@@ -39,18 +56,12 @@ export default function RootLayout() {
                 </DropdownMenu.Item>
                 <DropdownMenu.Item
                   key="new-collection"
-                  onSelect={() => alert("Item 2 selected")}
+                  onSelect={() => SheetManager.show("new-collection-sheet")}
                 >
                   <DropdownMenu.ItemTitle>
                     New Collection
                   </DropdownMenu.ItemTitle>
                 </DropdownMenu.Item>
-                {/* <DropdownMenu.Item
-                key="upload-file"
-                onSelect={() => alert("Item 3 selected")}
-              >
-                <DropdownMenu.ItemTitle>Upload File</DropdownMenu.ItemTitle>
-              </DropdownMenu.Item> */}
               </DropdownMenu.Content>
             </DropdownMenu.Root>
           ),
@@ -61,12 +72,10 @@ export default function RootLayout() {
         options={{
           headerTitle: "Links",
           headerBackTitle: "Back",
-          headerLargeStyle: {
-            backgroundColor: "white",
-          },
           headerSearchBarOptions: {
             placeholder: "Search",
             autoCapitalize: "none",
+            headerIconColor: colorScheme === "dark" ? "white" : "black",
             onChangeText: (e) => {
               router.setParams({
                 search: encodeURIComponent(e.nativeEvent.text),

apps/mobile/app/(tabs)/dashboard/index.tsx

@@ -1,27 +1,22 @@
 import {
-  FlatList,
+  ActivityIndicator,
   Platform,
-  RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from "react-native";
-import { IconSymbol } from "@/components/ui/IconSymbol";
-import { SafeAreaView } from "react-native-safe-area-context";
+import React, { useEffect, useMemo, useState } from "react";
 import { useDashboardData } from "@linkwarden/router/dashboardData";
 import useAuthStore from "@/store/auth";
-import React, { useEffect, useMemo, useState } from "react";
-import { DashboardSection, DashboardSectionType } from "@prisma/client";
+import { DashboardSection as DashboardSectionType } from "@linkwarden/prisma/client";
 import { useUser } from "@linkwarden/router/user";
 import { useCollections } from "@linkwarden/router/collections";
 import { useTags } from "@linkwarden/router/tags";
-import clsx from "clsx";
-import DashboardItem from "@/components/DashboardItem";
-import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
-import LinkListing from "@/components/LinkListing";
-import { useRouter } from "expo-router";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import Spinner from "@/components/ui/Spinner";
+import DashboardSection from "@/components/DashboardSection";
 
 export default function DashboardScreen() {
   const { auth } = useAuthStore();
@@ -31,12 +26,14 @@ export default function DashboardScreen() {
     },
     ...dashboardData
   } = useDashboardData(auth);
-  const { data: user } = useUser(auth);
-  const { data: collections = [] } = useCollections(auth);
-  const { data: tags = [] } = useTags(auth);
+  const { data: user, ...userData } = useUser(auth);
+  const { data: collections = [], ...collectionsData } = useCollections(auth);
+  const { data: tags = [], ...tagsData } = useTags(auth);
+
+  const { colorScheme } = useColorScheme();
 
   const [dashboardSections, setDashboardSections] = useState<
-    DashboardSection[]
+    DashboardSectionType[]
   >(user?.dashboardSections || []);
 
   const [numberOfLinks, setNumberOfLinks] = useState(0);
@@ -47,7 +44,7 @@ export default function DashboardScreen() {
 
   useEffect(() => {
     setNumberOfLinks(
-      collections.reduce(
+      collections?.reduce?.(
         (accumulator, collection) =>
           accumulator + (collection._count as any).links,
         0
@@ -63,287 +60,88 @@ export default function DashboardScreen() {
     });
   }, [dashboardSections]);
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <ScrollView
-        refreshControl={
-          <RefreshControl
-            refreshing={dashboardData.isLoading}
-            onRefresh={dashboardData.refetch}
-          />
-        }
-        contentContainerStyle={{
-          flexDirection: "column",
-          gap: 15,
-          paddingVertical: 20,
-        }}
-        contentInsetAdjustmentBehavior="automatic"
-      >
-        {orderedSections.map((sectionData) => {
-          const collection = collections.find(
-            (c) => c.id === sectionData.collectionId
-          );
+  const [pullRefreshing, setPullRefreshing] = useState(false);
 
-          return (
-            <Section
-              key={sectionData.id}
-              sectionData={sectionData}
-              collection={collection}
-              links={links}
-              tagsLength={tags.length}
-              numberOfLinks={numberOfLinks}
-              collectionsLength={collections.length}
-              numberOfPinnedLinks={numberOfPinnedLinks}
-              dashboardData={dashboardData}
-              collectionLinks={
-                sectionData.collectionId
-                  ? collectionLinks[sectionData.collectionId]
-                  : []
-              }
-            />
-          );
-        })}
-      </ScrollView>
-    </SafeAreaView>
+  const onRefresh = async () => {
+    setPullRefreshing(true);
+    try {
+      await Promise.all([
+        dashboardData.refetch(),
+        userData.refetch(),
+        collectionsData.refetch(),
+        tagsData.refetch(),
+      ]);
+    } finally {
+      setPullRefreshing(false);
+    }
+  };
+
+  if (orderedSections.length === 0 && dashboardData.isLoading)
+    return (
+      <View className="flex justify-center h-screen items-center bg-base-100">
+        <ActivityIndicator size="large" />
+        <Text className="text-base mt-2.5 text-neutral">Loading...</Text>
+      </View>
+    );
+
+  return (
+    <ScrollView
+      refreshControl={
+        <Spinner
+          refreshing={pullRefreshing}
+          onRefresh={onRefresh}
+          progressBackgroundColor={
+            rawTheme[colorScheme as ThemeName]["base-200"]
+          }
+          colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
+        />
+      }
+      contentContainerStyle={styles.container}
+      className="bg-base-100"
+      contentInsetAdjustmentBehavior="automatic"
+    >
+      {orderedSections.map((sectionData, i) => {
+        if (!collections || !collections[0]) return null;
+
+        const collection = collections.find(
+          (c) => c.id === sectionData.collectionId
+        );
+
+        return (
+          <DashboardSection
+            key={sectionData.id}
+            sectionData={sectionData}
+            collection={collection}
+            collectionLinks={
+              sectionData.collectionId
+                ? collectionLinks[sectionData.collectionId]
+                : []
+            }
+            links={links}
+            tagsLength={tags.length}
+            numberOfLinks={numberOfLinks}
+            collectionsLength={collections.length}
+            numberOfPinnedLinks={numberOfPinnedLinks}
+            dashboardData={dashboardData}
+          />
+        );
+      })}
+    </ScrollView>
   );
 }
 
-interface SectionProps {
-  sectionData: { type: DashboardSectionType };
-  collection?: any;
-  links?: any[];
-  tagsLength: number;
-  numberOfLinks: number;
-  collectionsLength: number;
-  numberOfPinnedLinks: number;
-  dashboardData: { isLoading: boolean };
-  collectionLinks?: any[];
-}
-
-const Section: React.FC<SectionProps> = ({
-  sectionData,
-  collection,
-  links = [],
-  tagsLength,
-  numberOfLinks,
-  collectionsLength,
-  numberOfPinnedLinks,
-  dashboardData,
-  collectionLinks = [],
-}) => {
-  const router = useRouter();
-
-  switch (sectionData.type) {
-    case DashboardSectionType.STATS:
-      return (
-        <View className="flex-col gap-4 max-w-full px-5">
-          <View className="flex-row gap-4">
-            <DashboardItem
-              name={numberOfLinks === 1 ? "Link" : "Links"}
-              value={numberOfLinks}
-              icon="link.circle.fill"
-              color="#9c00cc"
-            />
-            <DashboardItem
-              name={collectionsLength === 1 ? "Collection" : "Collections"}
-              value={collectionsLength}
-              icon="folder.circle.fill"
-              color="#0096cc"
-            />
-          </View>
-          <View className="flex-row gap-4">
-            <DashboardItem
-              name={tagsLength === 1 ? "Tag" : "Tags"}
-              value={tagsLength}
-              icon="tag.circle.fill"
-              color="#00cc99"
-            />
-            <DashboardItem
-              name={"Pinned Links"}
-              value={numberOfPinnedLinks}
-              icon="pin.circle.fill"
-              color="#cc6d00"
-            />
-          </View>
-        </View>
-      );
-
-    case DashboardSectionType.RECENT_LINKS:
-      return (
-        <>
-          <View className="flex-row justify-between items-center px-5">
-            <View className="flex-row gap-2 items-center">
-              <View className={"flex-row items-center gap-2"}>
-                <IconSymbol size={30} name="clock" color={""} />
-                <Text className="text-2xl capitalize">Recent Links</Text>
-              </View>
-            </View>
-            <TouchableOpacity
-              className="flex-row items-center text-sm gap-1"
-              onPress={() => router.navigate("/(tabs)/dashboard/recent-links")}
-            >
-              <Text className="text-[#3478f6]">View All</Text>
-              <IconSymbol size={15} name="chevron.right" color={"#3478f6"} />
-            </TouchableOpacity>
-          </View>
-
-          {dashboardData.isLoading ||
-          (links.length > 0 && !dashboardData.isLoading) ? (
-            <FlatList
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              directionalLockEnabled
-              data={links || []}
-              refreshing={dashboardData.isLoading}
-              initialNumToRender={2}
-              keyExtractor={(item) => item.id?.toString() || ""}
-              renderItem={({ item }) => (
-                <RenderItem item={item} key={item.id?.toString()} />
-              )}
-              ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
-              contentContainerStyle={{
-                paddingHorizontal: 20,
-              }}
-            />
-          ) : (
-            <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 bg-white mx-5">
-              <IconSymbol size={40} name="clock" color={""} />
-              <Text className="text-center text-xl text-gray-500">
-                No Recent Links
-              </Text>
-
-              {/* <View className="text-center w-full mt-4 flex-row flex-wrap gap-4 justify-center">
-                <Button onPress={() => setNewLinkModal(true)} variant="accent">
-                  <Icon name="bi-plus-lg" className="text-xl" />
-                  <Text>{t("add_link")}</Text>
-                </Button>
-                <ImportDropdown />
-              </View> */}
-            </View>
-          )}
-        </>
-      );
-
-    case DashboardSectionType.PINNED_LINKS:
-      return (
-        <>
-          <View className="flex-row justify-between items-center px-5">
-            <View className="flex-row gap-2 items-center">
-              <View className={"flex-row items-center gap-2"}>
-                <IconSymbol size={30} name="pin" color={""} />
-                <Text className="text-2xl capitalize">Pinned Links</Text>
-              </View>
-            </View>
-            <TouchableOpacity
-              className="flex-row items-center text-sm gap-1"
-              onPress={() => router.navigate("/(tabs)/dashboard/pinned-links")}
-            >
-              <Text className="text-[#3478f6]">View All</Text>
-              <IconSymbol size={15} name="chevron.right" color={"#3478f6"} />
-            </TouchableOpacity>
-          </View>
-
-          {dashboardData.isLoading ||
-          links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
-            <FlatList
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              data={links.filter((e: any) => e.pinnedBy && e.pinnedBy[0]) || []}
-              // onRefresh={() => data.refetch()}
-              refreshing={dashboardData.isLoading}
-              initialNumToRender={2}
-              keyExtractor={(item) => item.id?.toString() || ""}
-              renderItem={({ item }) => (
-                <RenderItem item={item} key={item.id?.toString()} />
-              )}
-              ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
-              contentContainerStyle={{
-                paddingHorizontal: 20,
-              }}
-            />
-          ) : (
-            <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 bg-white mx-5">
-              <IconSymbol size={40} name="pin" color={""} />
-              <Text className="text-center text-xl text-gray-500">
-                No Pinned Links
-              </Text>
-            </View>
-          )}
-        </>
-      );
-
-    case DashboardSectionType.COLLECTION:
-      return collection?.id ? (
-        <>
-          <View className="flex-row justify-between items-center px-5">
-            <View className="flex-row gap-2 items-center max-w-[60%]">
-              <View className={clsx("flex-row items-center gap-2")}>
-                <IconSymbol
-                  size={30}
-                  name="folder.fill"
-                  color={collection.color || "#0ea5e9"}
-                />
-                <Text className="text-2xl capitalize w-full" numberOfLines={1}>
-                  {collection.name}
-                </Text>
-              </View>
-            </View>
-            <TouchableOpacity
-              className="flex-row items-center text-sm gap-1 whitespace-nowrap"
-              onPress={() =>
-                router.navigate(
-                  `/(tabs)/dashboard/collection?collectionId=${collection.id}`
-                )
-              }
-            >
-              <Text className="text-[#3478f6]">View All</Text>
-              <IconSymbol size={15} name="chevron.right" color={"#3478f6"} />
-            </TouchableOpacity>
-          </View>
-
-          {dashboardData.isLoading || collectionLinks.length > 0 ? (
-            <FlatList
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              data={collectionLinks || []}
-              // onRefresh={() => data.refetch()}
-              refreshing={dashboardData.isLoading}
-              initialNumToRender={2}
-              keyExtractor={(item) => item.id?.toString() || ""}
-              renderItem={({ item }) => (
-                <RenderItem item={item} key={item.id?.toString()} />
-              )}
-              ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
-              contentContainerStyle={{
-                paddingHorizontal: 20,
-              }}
-            />
-          ) : (
-            <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 bg-white mx-5">
-              <Text className="text-center text-xl text-gray-500">
-                Empty Collection
-              </Text>
-            </View>
-          )}
-        </>
-      ) : null;
-
-    default:
-      return null;
-  }
-};
-
-const RenderItem = React.memo(
-  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
-    return <LinkListing link={item} dashboard />;
-  }
-);
-
 const styles = StyleSheet.create({
   container: Platform.select({
     ios: {
       paddingBottom: 49,
+      flexDirection: "column",
+      gap: 15,
+      paddingVertical: 20,
+    },
+    default: {
+      flexDirection: "column",
+      gap: 15,
+      paddingVertical: 20,
     },
-    default: {},
   }),
 });

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

@@ -1,26 +1,42 @@
 import { Stack, useRouter } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Platform } from "react-native";
 
-export default function RootLayout() {
+export default function Layout() {
   const router = useRouter();
+  const { colorScheme } = useColorScheme();
 
   return (
     <Stack
       screenOptions={{
         headerTitle: "Links",
         headerLargeTitle: true,
-        headerTransparent: true,
-        headerBlurEffect: "systemUltraThinMaterial",
+        headerTransparent: Platform.OS === "ios" ? true : false,
+        headerShadowVisible: false,
+        headerBlurEffect:
+          colorScheme === "dark" ? "systemMaterialDark" : "systemMaterial",
+        headerTintColor: colorScheme === "dark" ? "white" : "black",
         headerSearchBarOptions: {
-          placeholder: "Search",
+          placeholder: "Search Links",
           autoCapitalize: "none",
           onChangeText: (e) => {
             router.setParams({
               search: encodeURIComponent(e.nativeEvent.text),
             });
           },
+          headerIconColor: colorScheme === "dark" ? "white" : "black",
         },
         headerLargeStyle: {
-          backgroundColor: "white",
+          backgroundColor: rawTheme[colorScheme as ThemeName]["base-100"],
+        },
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+                ? rawTheme["dark"]["base-100"]
+                : "white",
         },
       }}
     />

apps/mobile/app/(tabs)/links/index.tsx

@@ -1,22 +1,13 @@
 import { useLinks } from "@linkwarden/router/links";
-import { View, StyleSheet, FlatList, Platform } from "react-native";
+import { View, StyleSheet, Platform } from "react-native";
 import useAuthStore from "@/store/auth";
-import LinkListing from "@/components/LinkListing";
 import { useLocalSearchParams } from "expo-router";
 import React from "react";
-import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
-import { useHeaderHeight } from "@react-navigation/elements";
-
-const RenderItem = React.memo(
-  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
-    return <LinkListing link={item} />;
-  }
-);
+import Links from "@/components/Links";
 
 export default function LinksScreen() {
   const { auth } = useAuthStore();
   const { search } = useLocalSearchParams<{ search?: string }>();
-  const headerHeight = useHeaderHeight();
 
   const { links, data } = useLinks(
     {
@@ -27,24 +18,13 @@ export default function LinksScreen() {
   );
 
   return (
-    <View style={styles.container} className="h-full">
-      <FlatList
-        contentInsetAdjustmentBehavior="automatic"
-        ListHeaderComponent={() => <></>}
-        data={links || []}
-        onRefresh={() => data.refetch()}
-        refreshing={data.isRefetching}
-        initialNumToRender={4}
-        keyExtractor={(item) => item.id?.toString() || ""}
-        renderItem={({ item }) => (
-          <RenderItem item={item} key={item.id?.toString()} />
-        )}
-        onEndReached={() => data.fetchNextPage()}
-        onEndReachedThreshold={0.5}
-        ItemSeparatorComponent={() => (
-          <View className="bg-[#eee] h-[1px] w-[100px]" />
-        )}
-      />
+    <View
+      style={styles.container}
+      className="h-full bg-base-100"
+      collapsable={false}
+      collapsableChildren={false}
+    >
+      <Links links={links} data={data} />
     </View>
   );
 }

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

@@ -1,17 +1,31 @@
-import { Stack, useRouter } from "expo-router";
+import { Stack } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Platform } from "react-native";
 
-export default function RootLayout() {
-  const router = useRouter();
+export default function Layout() {
+  const { colorScheme } = useColorScheme();
 
   return (
     <Stack
       screenOptions={{
         headerTitle: "Settings",
         headerLargeTitle: true,
-        headerTransparent: true,
-        headerBlurEffect: "systemUltraThinMaterial",
+        headerTransparent: Platform.OS === "ios" ? true : false,
+        headerShadowVisible: false,
+        headerBlurEffect:
+          colorScheme === "dark" ? "systemMaterialDark" : "systemMaterial",
+        headerTintColor: colorScheme === "dark" ? "white" : "black",
         headerLargeStyle: {
-          backgroundColor: "white",
+          backgroundColor: rawTheme[colorScheme as ThemeName]["base-100"],
+        },
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+                ? rawTheme["dark"]["base-100"]
+                : "white",
         },
       }}
     />

apps/mobile/app/(tabs)/settings/index.tsx

@@ -1,31 +1,241 @@
 import useAuthStore from "@/store/auth";
-import { View, Text, StyleSheet, Button, ScrollView } from "react-native";
+import { useUser } from "@linkwarden/router/user";
+import {
+  View,
+  Text,
+  StyleSheet,
+  ScrollView,
+  TouchableOpacity,
+  Platform,
+  Alert,
+} from "react-native";
+import { nativeApplicationVersion } from "expo-application";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useEffect, useState } from "react";
+import {
+  AppWindowMac,
+  Check,
+  ExternalLink,
+  LogOut,
+  Mail,
+  Moon,
+  Smartphone,
+  Sun,
+} from "lucide-react-native";
+import useDataStore from "@/store/data";
+import * as Clipboard from "expo-clipboard";
 
 export default function SettingsScreen() {
-  const { signOut } = useAuthStore();
+  const { signOut, auth } = useAuthStore();
+  const { data: user } = useUser(auth);
+  const { colorScheme, setColorScheme } = useColorScheme();
+  const { data, updateData } = useDataStore();
+  const [override, setOverride] = useState<"light" | "dark" | "system">(
+    data.theme || "system"
+  );
+
+  useEffect(() => {
+    setColorScheme(override);
+    updateData({ theme: override });
+  }, [override]);
 
   return (
-    <View style={styles.container}>
+    <View
+      style={styles.container}
+      collapsable={false}
+      collapsableChildren={false}
+      className="bg-base-100"
+    >
       <ScrollView
         contentContainerStyle={{
-          flexDirection: "column",
-          gap: 15,
-          paddingVertical: 20,
-          alignItems: "center",
+          padding: 20,
         }}
+        contentContainerClassName="flex-col gap-6"
         contentInsetAdjustmentBehavior="automatic"
       >
-        <Text>Settings</Text>
-        <Button title="Sign out" onPress={() => signOut()} />
+        <View className="bg-base-200 rounded-xl px-4 py-3">
+          <Text className="font-semibold text-xl text-base-content">
+            Your account
+          </Text>
+          <Text className="text-neutral mt-2 mb-3">
+            {user?.email || "@" + user?.username}
+          </Text>
+          <View className="h-px bg-neutral-content -mr-4" />
+          <TouchableOpacity
+            className="flex-row items-center mt-3"
+            onPress={() =>
+              Alert.alert("Sign Out", "Are you sure you want to sign out?", [
+                {
+                  text: "Cancel",
+                  style: "cancel",
+                },
+                {
+                  text: "Sign Out",
+                  style: "destructive",
+                  onPress: () => {
+                    signOut();
+                  },
+                },
+              ])
+            }
+          >
+            <Text className="flex-1 text-base text-red-500">Sign Out</Text>
+            <LogOut size={18} color="red" />
+          </TouchableOpacity>
+        </View>
+
+        <View>
+          <Text className="mb-4 mx-4 text-neutral">Theme</Text>
+          <View className="bg-base-200 rounded-xl flex-col">
+            <TouchableOpacity
+              className="flex-row gap-2 items-center justify-between py-3 px-4"
+              onPress={() => setOverride("system")}
+            >
+              <View className="flex-row items-center gap-2">
+                <Smartphone
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-neutral">System Defaults</Text>
+              </View>
+              {override === "system" ? (
+                <Check
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+              ) : null}
+            </TouchableOpacity>
+            <View className="h-px bg-neutral-content ml-12" />
+            <TouchableOpacity
+              className="flex-row gap-2 items-center justify-between py-3 px-4"
+              onPress={() => setOverride("light")}
+            >
+              <View className="flex-row items-center gap-2">
+                <Sun size={20} color="orange" />
+                <Text className="text-orange-500 dark:text-orange-400">
+                  Light
+                </Text>
+              </View>
+              {override === "light" ? (
+                <Check
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+              ) : null}
+            </TouchableOpacity>
+            <View className="h-px bg-neutral-content ml-12" />
+            <TouchableOpacity
+              className="flex-row gap-2 items-center justify-between py-3 px-4"
+              onPress={() => setOverride("dark")}
+            >
+              <View className="flex-row items-center gap-2">
+                <Moon size={20} color="royalblue" />
+                <Text className="text-blue-600 dark:text-blue-400">Dark</Text>
+              </View>
+              {override === "dark" ? (
+                <Check
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+              ) : null}
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <View>
+          <Text className="mb-4 mx-4 text-neutral">Preferred Browser</Text>
+          <View className="bg-base-200 rounded-xl flex-col">
+            <TouchableOpacity
+              className="flex-row gap-2 items-center justify-between py-3 px-4"
+              onPress={() =>
+                updateData({
+                  preferredBrowser: "app",
+                })
+              }
+            >
+              <View className="flex-row items-center gap-2">
+                <AppWindowMac
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-base-content">In app browser</Text>
+              </View>
+              {data.preferredBrowser === "app" ? (
+                <Check
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+              ) : null}
+            </TouchableOpacity>
+            <View className="h-px bg-neutral-content ml-12" />
+            <TouchableOpacity
+              className="flex-row gap-2 items-center justify-between py-3 px-4"
+              onPress={() =>
+                updateData({
+                  preferredBrowser: "system",
+                })
+              }
+            >
+              <View className="flex-row items-center gap-2">
+                <ExternalLink
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-base-content">
+                  System default browser
+                </Text>
+              </View>
+              {data.preferredBrowser === "system" ? (
+                <Check
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+              ) : null}
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <View>
+          <Text className="mb-4 mx-4 text-neutral">Contact Us</Text>
+          <View className="bg-base-200 rounded-xl flex-col">
+            <TouchableOpacity
+              className="flex-row gap-2 items-center justify-between py-3 px-4"
+              onPress={async () => {
+                await Clipboard.setStringAsync("support@linkwarden.app");
+                Alert.alert("Copied to clipboard", "support@linkwarden.app");
+              }}
+            >
+              <View className="flex-row items-center gap-2">
+                <Mail
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-base-content">
+                  support@linkwarden.app
+                </Text>
+              </View>
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <Text className="mx-auto text-sm text-neutral">
+          Linkwarden for {Platform.OS === "ios" ? "iOS" : "Android"}{" "}
+          {nativeApplicationVersion}
+        </Text>
       </ScrollView>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
+  container: Platform.select({
+    ios: {
+      flex: 1,
+      paddingBottom: 83,
+    },
+    default: {
+      flex: 1,
+    },
+  }),
 });

apps/mobile/app/(tabs)/tags/[id].tsx

@@ -0,0 +1,60 @@
+import { useLinks } from "@linkwarden/router/links";
+import { View, StyleSheet, Platform } from "react-native";
+import useAuthStore from "@/store/auth";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import React, { useEffect } from "react";
+import { useTags } from "@linkwarden/router/tags";
+import Links from "@/components/Links";
+
+export default function LinksScreen() {
+  const { auth } = useAuthStore();
+  const { search, id } = useLocalSearchParams<{
+    search?: string;
+    id: string;
+  }>();
+
+  const { links, data } = useLinks(
+    {
+      sort: 0,
+      searchQueryString: decodeURIComponent(search ?? ""),
+      tagId: Number(id),
+    },
+    auth
+  );
+
+  const tags = useTags(auth);
+
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    const activeTag = tags.data?.filter((e) => e.id === Number(id))[0];
+
+    if (activeTag?.name)
+      navigation?.setOptions?.({
+        headerTitle: activeTag?.name,
+        headerSearchBarOptions: {
+          placeholder: `Search ${activeTag.name}`,
+        },
+      });
+  }, [navigation]);
+
+  return (
+    <View
+      style={styles.container}
+      className="h-full bg-base-100"
+      collapsable={false}
+      collapsableChildren={false}
+    >
+      <Links links={links} data={data} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 83,
+    },
+    default: {},
+  }),
+});

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

@@ -0,0 +1,44 @@
+import { Stack, useRouter } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Platform } from "react-native";
+
+export default function Layout() {
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerTitle: "Tags",
+        headerLargeTitle: true,
+        headerTransparent: Platform.OS === "ios" ? true : false,
+        headerShadowVisible: false,
+        headerBlurEffect:
+          colorScheme === "dark" ? "systemMaterialDark" : "systemMaterial",
+        headerTintColor: colorScheme === "dark" ? "white" : "black",
+        headerSearchBarOptions: {
+          placeholder: "Search Tags",
+          autoCapitalize: "none",
+          onChangeText: (e) => {
+            router.setParams({
+              search: encodeURIComponent(e.nativeEvent.text),
+            });
+          },
+          headerIconColor: colorScheme === "dark" ? "white" : "black",
+        },
+        headerLargeStyle: {
+          backgroundColor: rawTheme[colorScheme as ThemeName]["base-100"],
+        },
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+                ? rawTheme["dark"]["base-100"]
+                : "white",
+        },
+      }}
+    />
+  );
+}

apps/mobile/app/(tabs)/tags/index.tsx

@@ -0,0 +1,92 @@
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  Platform,
+  Text,
+  ActivityIndicator,
+} from "react-native";
+import useAuthStore from "@/store/auth";
+import TagListing from "@/components/TagListing";
+import { useLocalSearchParams } from "expo-router";
+import React, { useEffect, useState } from "react";
+import Spinner from "@/components/ui/Spinner";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { TagIncludingLinkCount } from "@linkwarden/types";
+import { useTags } from "@linkwarden/router/tags";
+
+export default function TagsScreen() {
+  const { colorScheme } = useColorScheme();
+  const { auth } = useAuthStore();
+  const { search } = useLocalSearchParams<{ search?: string }>();
+
+  const tags = useTags(auth);
+
+  const [filteredTags, setFilteredTags] = useState<TagIncludingLinkCount[]>([]);
+
+  useEffect(() => {
+    const filter =
+      tags.data?.filter((e) =>
+        e.name.includes(decodeURIComponent(search || ""))
+      ) || [];
+
+    setFilteredTags(filter);
+  }, [search, tags.data]);
+
+  return (
+    <View
+      style={styles.container}
+      className="h-full bg-base-100"
+      collapsable={false}
+      collapsableChildren={false}
+    >
+      {tags.isLoading ? (
+        <View className="flex justify-center h-screen items-center">
+          <ActivityIndicator size="large" />
+          <Text className="text-base mt-2.5 text-neutral">Loading...</Text>
+        </View>
+      ) : (
+        <FlatList
+          contentInsetAdjustmentBehavior="automatic"
+          ListHeaderComponent={() => <></>}
+          data={filteredTags}
+          refreshControl={
+            <Spinner
+              refreshing={tags.isRefetching}
+              onRefresh={() => tags.refetch()}
+              progressBackgroundColor={
+                rawTheme[colorScheme as ThemeName]["base-200"]
+              }
+              colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
+            />
+          }
+          refreshing={tags.isRefetching}
+          initialNumToRender={4}
+          keyExtractor={(item) => item.id?.toString() || ""}
+          renderItem={({ item }) => <TagListing tag={item} />}
+          onEndReachedThreshold={0.5}
+          ItemSeparatorComponent={() => (
+            <View className="bg-neutral-content h-px" />
+          )}
+          ListEmptyComponent={
+            <View className="flex justify-center py-10 items-center">
+              <Text className="text-center text-xl text-neutral">
+                Nothing found...
+              </Text>
+            </View>
+          }
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 83,
+    },
+    default: {},
+  }),
+});

apps/mobile/app/_layout.tsx

@@ -1,25 +1,95 @@
-import { Stack } from "expo-router";
-import { QueryClient } from "@tanstack/react-query";
+import {
+  router,
+  Stack,
+  usePathname,
+  useRootNavigationState,
+  useRouter,
+} from "expo-router";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { mmkvPersister } from "@/lib/queryPersister";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import "../styles/global.css";
-import { SheetProvider } from "react-native-actions-sheet";
+import { SheetManager, SheetProvider } from "react-native-actions-sheet";
 import "@/components/ActionSheets/Sheets";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 1000 * 60 * 60 * 24, // never refetch for 24h
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      refetchOnReconnect: false,
-    },
-  },
-});
+import { useColorScheme } from "nativewind";
+import { lightTheme, darkTheme } from "../lib/theme";
+import {
+  Alert,
+  Linking,
+  Platform,
+  Share,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useShareIntent } from "expo-share-intent";
+import useDataStore from "@/store/data";
+import useAuthStore from "@/store/auth";
+import { KeyboardProvider } from "react-native-keyboard-controller";
+import * as DropdownMenu from "zeego/dropdown-menu";
+import { Compass, Ellipsis } from "lucide-react-native";
+import { Chromium } from "@/components/ui/Icons";
+import useTmpStore from "@/store/tmp";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  MobileAuth,
+} from "@linkwarden/types";
+import { useDeleteLink, useUpdateLink } from "@linkwarden/router/links";
+import { deleteLinkCache } from "@/lib/cache";
+import { queryClient } from "@/lib/queryClient";
+import getOriginalFormat from "@linkwarden/lib/getOriginalFormat";
+import { StatusBar } from "expo-status-bar";
 
 export default function RootLayout() {
   const [isLoading, setIsLoading] = useState(true);
+  const { hasShareIntent, shareIntent, error, resetShareIntent } =
+    useShareIntent();
+  const { updateData, setData, data } = useDataStore();
+
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const { auth, setAuth } = useAuthStore();
+  const rootNavState = useRootNavigationState();
+
+  useEffect(() => {
+    setAuth();
+    setData();
+  }, []);
+
+  useEffect(() => {
+    if (!rootNavState?.key) return;
+
+    if (hasShareIntent && shareIntent.webUrl) {
+      updateData({
+        shareIntent: {
+          hasShareIntent: true,
+          url: shareIntent.webUrl || "",
+        },
+      });
+
+      resetShareIntent();
+    }
+
+    const needsRewrite =
+      ((typeof pathname === "string" && pathname.startsWith("/dataUrl=")) ||
+        hasShareIntent) &&
+      pathname !== "/incoming";
+
+    if (needsRewrite) {
+      router.replace("/incoming");
+    }
+    if (hasShareIntent) {
+      resetShareIntent();
+      router.replace("/incoming");
+    }
+  }, [
+    rootNavState?.key,
+    hasShareIntent,
+    pathname,
+    shareIntent?.webUrl,
+    data.shareIntent,
+  ]);
 
   return (
     <PersistQueryClientProvider
@@ -27,30 +97,229 @@ export default function RootLayout() {
       persistOptions={{
         persister: mmkvPersister,
         maxAge: Infinity,
+        dehydrateOptions: {
+          shouldDehydrateMutation: () => true,
+          shouldDehydrateQuery: () => true,
+        },
+      }}
+      onSuccess={() => {
+        setIsLoading(false);
+        queryClient.invalidateQueries();
       }}
-      onSuccess={() => setIsLoading(false)}
     >
-      <SheetProvider>
-        {!isLoading && (
-          <Stack
-            screenOptions={{
-              headerShown: false,
-            }}
-          >
-            {/* <Stack.Screen name="(tabs)" /> */}
-            <Stack.Screen
-              name="links/[id]"
-              options={{
-                headerBackTitle: "Back",
-                headerShown: true,
-                headerTitle: "",
-              }}
-            />
-            <Stack.Screen name="login" />
-            <Stack.Screen name="+not-found" />
-          </Stack>
-        )}
-      </SheetProvider>
+      <RootComponent isLoading={isLoading} auth={auth} />
     </PersistQueryClientProvider>
   );
 }
+
+const RootComponent = ({
+  isLoading,
+  auth,
+}: {
+  isLoading: boolean;
+  auth: MobileAuth;
+}) => {
+  const { colorScheme } = useColorScheme();
+  const updateLink = useUpdateLink(auth);
+  const deleteLink = useDeleteLink(auth);
+
+  const { tmp } = useTmpStore();
+
+  return (
+    <View
+      style={[{ flex: 1 }, colorScheme === "dark" ? darkTheme : lightTheme]}
+    >
+      <KeyboardProvider>
+        <SheetProvider>
+          <StatusBar
+            style={colorScheme === "dark" ? "light" : "dark"}
+            backgroundColor={rawTheme[colorScheme as ThemeName]["base-100"]}
+          />
+          {!isLoading && (
+            <Stack
+              screenOptions={{
+                headerShown: false,
+                contentStyle: {
+                  backgroundColor:
+                    rawTheme[colorScheme as ThemeName]["base-100"],
+                },
+              }}
+            >
+              {/* <Stack.Screen name="(tabs)" /> */}
+              <Stack.Screen
+                name="links/[id]"
+                options={{
+                  headerShown: true,
+                  headerBackTitle: "Back",
+                  headerTitle: "",
+                  headerTintColor: colorScheme === "dark" ? "white" : "black",
+                  headerStyle: {
+                    backgroundColor:
+                      colorScheme === "dark"
+                        ? rawTheme["dark"]["base-100"]
+                        : "white",
+                  },
+                  headerRight: () => (
+                    <View className="flex-row gap-5">
+                      <TouchableOpacity
+                        onPress={() => {
+                          if (tmp.link) {
+                            if (tmp.link.url) {
+                              return Linking.openURL(tmp.link.url);
+                            } else {
+                              const format = getOriginalFormat(tmp.link);
+
+                              return Linking.openURL(
+                                format !== null
+                                  ? auth.instance +
+                                      `/preserved/${tmp.link.id}?format=${format}`
+                                  : tmp.link.url || ""
+                              );
+                            }
+                          }
+                        }}
+                      >
+                        {Platform.OS === "ios" ? (
+                          <Compass
+                            size={21}
+                            color={
+                              rawTheme[colorScheme as ThemeName]["base-content"]
+                            }
+                          />
+                        ) : (
+                          <Chromium
+                            stroke={
+                              rawTheme[colorScheme as ThemeName]["base-content"]
+                            }
+                          />
+                        )}
+                      </TouchableOpacity>
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger>
+                          <TouchableOpacity>
+                            <Ellipsis
+                              size={21}
+                              color={
+                                rawTheme[colorScheme as ThemeName][
+                                  "base-content"
+                                ]
+                              }
+                            />
+                          </TouchableOpacity>
+                        </DropdownMenu.Trigger>
+
+                        <DropdownMenu.Content>
+                          {tmp.link?.url && (
+                            <DropdownMenu.Item
+                              key="share"
+                              onSelect={async () => {
+                                await Share.share({
+                                  ...(Platform.OS === "android"
+                                    ? { message: tmp.link?.url as string }
+                                    : { url: tmp.link?.url as string }),
+                                });
+                              }}
+                            >
+                              <DropdownMenu.ItemTitle>
+                                Share
+                              </DropdownMenu.ItemTitle>
+                            </DropdownMenu.Item>
+                          )}
+
+                          {tmp.link && tmp.user && (
+                            <DropdownMenu.Item
+                              key="pin-link"
+                              onSelect={async () => {
+                                const isAlreadyPinned =
+                                  tmp.link?.pinnedBy && tmp.link.pinnedBy[0]
+                                    ? true
+                                    : false;
+                                await updateLink.mutateAsync({
+                                  ...(tmp.link as LinkIncludingShortenedCollectionAndTags),
+                                  pinnedBy: (isAlreadyPinned
+                                    ? [{ id: undefined }]
+                                    : [{ id: tmp.user?.id }]) as any,
+                                });
+                              }}
+                            >
+                              <DropdownMenu.ItemTitle>
+                                {tmp.link.pinnedBy && tmp.link.pinnedBy[0]
+                                  ? "Unpin Link"
+                                  : "Pin Link"}
+                              </DropdownMenu.ItemTitle>
+                            </DropdownMenu.Item>
+                          )}
+
+                          {tmp.link && (
+                            <DropdownMenu.Item
+                              key="edit-link"
+                              onSelect={() => {
+                                SheetManager.show("edit-link-sheet", {
+                                  payload: {
+                                    link: tmp.link as LinkIncludingShortenedCollectionAndTags,
+                                  },
+                                });
+                              }}
+                            >
+                              <DropdownMenu.ItemTitle>
+                                Edit Link
+                              </DropdownMenu.ItemTitle>
+                            </DropdownMenu.Item>
+                          )}
+
+                          {tmp.link && (
+                            <DropdownMenu.Item
+                              key="delete-link"
+                              onSelect={() => {
+                                return Alert.alert(
+                                  "Delete Link",
+                                  "Are you sure you want to delete this link? This action cannot be undone.",
+                                  [
+                                    {
+                                      text: "Cancel",
+                                      style: "cancel",
+                                    },
+                                    {
+                                      text: "Delete",
+                                      style: "destructive",
+                                      onPress: () => {
+                                        deleteLink.mutate(
+                                          tmp.link?.id as number,
+                                          {
+                                            onSuccess: async () => {
+                                              await deleteLinkCache(
+                                                tmp.link?.id as number
+                                              );
+                                            },
+                                          }
+                                        );
+                                        // go back
+                                        router.back();
+                                      },
+                                    },
+                                  ]
+                                );
+                              }}
+                            >
+                              <DropdownMenu.ItemTitle>
+                                Delete
+                              </DropdownMenu.ItemTitle>
+                            </DropdownMenu.Item>
+                          )}
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
+                    </View>
+                  ),
+                }}
+              />
+              <Stack.Screen name="login" />
+              <Stack.Screen name="index" />
+              <Stack.Screen name="incoming" />
+              <Stack.Screen name="+not-found" />
+            </Stack>
+          )}
+        </SheetProvider>
+      </KeyboardProvider>
+    </View>
+  );
+};

apps/mobile/app/incoming.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from "react";
+import {
+  SafeAreaView,
+  View,
+  Text,
+  StyleSheet,
+  ActivityIndicator,
+  Alert,
+} from "react-native";
+import { Redirect, useRouter } from "expo-router";
+import useAuthStore from "@/store/auth";
+import useDataStore from "@/store/data";
+import { Check } from "lucide-react-native";
+import { useAddLink } from "@linkwarden/router/links";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+
+export default function IncomingScreen() {
+  const { auth } = useAuthStore();
+  const router = useRouter();
+  const { data, updateData } = useDataStore();
+  const addLink = useAddLink(auth);
+  const { colorScheme } = useColorScheme();
+
+  useEffect(() => {
+    if (auth.status === "authenticated" && data.shareIntent.url)
+      addLink.mutate(
+        { url: data.shareIntent.url },
+        {
+          onSuccess: () => {
+            setTimeout(() => {
+              updateData({
+                shareIntent: {
+                  hasShareIntent: false,
+                  url: "",
+                },
+              });
+              router.replace("/dashboard");
+            }, 1000);
+          },
+          onError: (error) => {
+            Alert.alert("Error", "There was an error adding the link.");
+            console.error("Error adding link:", error);
+          },
+        }
+      );
+  }, [auth, data.shareIntent.url]);
+
+  if (auth.status === "unauthenticated") return <Redirect href="/" />;
+
+  return (
+    <SafeAreaView className="flex-1 bg-base-100">
+      {data?.shareIntent.url ? (
+        <View className="flex-1 items-center justify-center">
+          <Check
+            size={140}
+            className="mb-3 text-base-content"
+            color={rawTheme[colorScheme as ThemeName].primary}
+          />
+          <Text className="text-2xl font-semibold text-base-content">
+            Link Saved!
+          </Text>
+        </View>
+      ) : (
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator size="large" />
+          <Text className="mt-3 text-base text-base-content opacity-70">
+            One sec… {String(data?.shareIntent.url)}
+          </Text>
+        </View>
+      )}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  center: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  check: {
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: "600",
+  },
+  subtitle: {
+    marginTop: 12,
+    fontSize: 16,
+    opacity: 0.7,
+  },
+});

apps/mobile/app/index.tsx

@@ -1,17 +1,77 @@
+import { Button } from "@/components/ui/Button";
+import { rawTheme, ThemeName } from "@/lib/colors";
 import useAuthStore from "@/store/auth";
-import { Redirect } from "expo-router";
-import { useEffect } from "react";
+import { Redirect, router } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { View, Text, Dimensions, TouchableOpacity, Image } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import Svg, { Path } from "react-native-svg";
+import Animated, { SlideInDown } from "react-native-reanimated";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function HomeScreen() {
-  const { setAuth, auth } = useAuthStore();
-
-  useEffect(() => {
-    setAuth();
-  }, []);
+  const { auth } = useAuthStore();
+  const { colorScheme } = useColorScheme();
 
   if (auth.session) {
-    return <Redirect href="/(tabs)/dashboard" />;
-  } else {
-    return <Redirect href="/login" />;
+    return <Redirect href="/dashboard" />;
   }
+
+  return (
+    <Animated.View
+      entering={SlideInDown.springify().damping(100).stiffness(300)}
+      className="flex-col justify-end h-full"
+    >
+      <View className="h-full bg-primary relative">
+        <View className="my-auto">
+          <Image
+            source={require("@/assets/images/linkwarden.png")}
+            className="w-[120px] h-[120px] mx-auto"
+          />
+          <Text className="text-base-100 text-4xl font-semibold mt-7 mx-auto">
+            Linkwarden
+          </Text>
+        </View>
+        <View>
+          <Text className="text-base-100 text-xl text-center font-semibold mx-4 mt-3">
+            Welcome to the official mobile app for Linkwarden!
+          </Text>
+
+          <Text className="text-base-100 text-xl text-center mx-4 mt-3">
+            Expect regular improvements and new features as we continue refining
+            the experience.
+          </Text>
+        </View>
+        <Svg
+          viewBox="0 0 1440 320"
+          width={Dimensions.get("screen").width}
+          height={Dimensions.get("screen").width * (320 / 1440) + 2}
+        >
+          <Path
+            fill={rawTheme[colorScheme as ThemeName]["base-100"]}
+            fill-opacity="1"
+            d="M0,256L48,234.7C96,213,192,171,288,176C384,181,480,235,576,266.7C672,299,768,309,864,277.3C960,245,1056,171,1152,122.7C1248,75,1344,53,1392,42.7L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+          />
+        </Svg>
+        <SafeAreaView
+          edges={["bottom"]}
+          className="flex-col justify-end h-auto duration-100 pt-10 bg-base-100 -mt-2 pb-10 gap-4 w-full px-4"
+        >
+          <Button
+            variant="accent"
+            size="lg"
+            onPress={() => router.navigate("/login")}
+          >
+            <Text className="text-white text-xl">Get Started</Text>
+          </Button>
+          <TouchableOpacity
+            className="w-fit mx-auto"
+            onPress={() => SheetManager.show("support-sheet")}
+          >
+            <Text className="text-neutral text-center w-fit">Need help?</Text>
+          </TouchableOpacity>
+        </SafeAreaView>
+      </View>
+    </Animated.View>
+  );
 }

apps/mobile/app/links/[id].tsx

@@ -1,179 +1,111 @@
-import React, { useEffect, useMemo, useState } from "react";
-import {
-  View,
-  ActivityIndicator,
-  Text,
-  ScrollView,
-  TouchableOpacity,
-} from "react-native";
+import React, { useEffect, useState } from "react";
+import { View, ActivityIndicator, Text, Platform } from "react-native";
 import { WebView } from "react-native-webview";
-import * as FileSystem from "expo-file-system";
-import NetInfo from "@react-native-community/netinfo";
 import useAuthStore from "@/store/auth";
-import { useLocalSearchParams, useRouter } from "expo-router";
+import { useLocalSearchParams } from "expo-router";
 import { useUser } from "@linkwarden/router/user";
-import { generateLinkHref } from "@linkwarden/lib/generateLinkHref";
-import { useWindowDimensions } from "react-native";
-import RenderHtml from "@linkwarden/react-native-render-html";
-import ElementNotSupported from "@/components/ElementNotSupported";
-import { decode } from "html-entities";
-import { IconSymbol } from "@/components/ui/IconSymbol";
-import { useLinks } from "@linkwarden/router/links";
-
-const CACHE_DIR = FileSystem.documentDirectory + "archivedData/readable/";
-const htmlPath = (id: string) => `${CACHE_DIR}link_${id}.html`;
-
-async function ensureCacheDir() {
-  const info = await FileSystem.getInfoAsync(CACHE_DIR);
-  if (!info.exists) {
-    await FileSystem.makeDirectoryAsync(CACHE_DIR, { intermediates: true });
-  }
-}
+import { useGetLink } from "@linkwarden/router/links";
+import useTmpStore from "@/store/tmp";
+import { ArchivedFormat } from "@linkwarden/types";
+import ReadableFormat from "@/components/Formats/ReadableFormat";
+import ImageFormat from "@/components/Formats/ImageFormat";
+import PdfFormat from "@/components/Formats/PdfFormat";
+import WebpageFormat from "@/components/Formats/WebpageFormat";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function LinkScreen() {
   const { auth } = useAuthStore();
   const { id, format } = useLocalSearchParams();
   const { data: user } = useUser(auth);
   const [url, setUrl] = useState<string>();
-  const [htmlContent, setHtmlContent] = useState<string>("");
   const [isLoading, setIsLoading] = useState(true);
-  const { width } = useWindowDimensions();
-  const router = useRouter();
-  const { links } = useLinks(
-    {
-      sort: 0,
-    },
-    auth
-  );
 
-  const link = useMemo(() => {
-    return links?.find((link) => link.id === Number(id));
-  }, [links, id]);
+  const { data: link } = useGetLink({ id: Number(id), auth, enabled: true });
+
+  const { updateTmp } = useTmpStore();
 
   useEffect(() => {
-    async function loadCacheOrFetch() {
-      await ensureCacheDir();
-      const htmlFile = htmlPath(id as string);
+    if (link?.id && user?.id)
+      updateTmp({
+        link,
+        user: {
+          id: user.id,
+        },
+      });
 
-      const [htmlInfo] = await Promise.all([FileSystem.getInfoAsync(htmlFile)]);
+    return () =>
+      updateTmp({
+        link: null,
+      });
+  }, [link, user]);
 
-      if (format === "3" && htmlInfo.exists) {
-        const rawHtml = await FileSystem.readAsStringAsync(htmlFile);
-        setHtmlContent(rawHtml);
-        setIsLoading(false);
-      }
-
-      const net = await NetInfo.fetch();
-      if (net.isConnected) {
-        await fetchLinkData();
-      }
-    }
-
-    if (user && user.id && !url) {
-      loadCacheOrFetch();
-    }
-  }, [user, url]);
-
-  async function fetchLinkData() {
-    if (link?.id && format === "3") {
-      const apiUrl = `${auth.instance}/api/v1/archives/${link.id}?format=${format}`;
-      setUrl(apiUrl);
-      try {
-        const response = await fetch(apiUrl, {
-          headers: { Authorization: `Bearer ${auth.session}` },
-        });
-        const html = (await response.json()).content;
-        setHtmlContent(html);
-        await FileSystem.writeAsStringAsync(htmlPath(id as string), html, {
-          encoding: FileSystem.EncodingType.UTF8,
-        });
-      } catch (e) {
-        console.error("Failed to fetch HTML content", e);
-      } finally {
-        setIsLoading(false);
-      }
-    } else if (link?.id && !format && user) {
-      setUrl(
-        generateLinkHref(link, { ...user, password: "" }, auth.instance, true)
-      );
-    } else if (link?.id && format) {
+  useEffect(() => {
+    if (user?.id && link?.id && format) {
       setUrl(`${auth.instance}/api/v1/archives/${link.id}?format=${format}`);
+    } else if (!url) {
+      if (link?.url) {
+        setUrl(link.url);
+      }
     }
-  }
+  }, [user, link]);
+
+  const insets = useSafeAreaInsets();
 
   return (
-    <>
-      {format === "3" && htmlContent ? (
-        <ScrollView
-          className="flex-1 bg-white"
-          contentContainerClassName="p-4"
-          nestedScrollEnabled
-        >
-          <Text className="text-2xl font-bold mb-2.5">
-            {decode(link?.name || link?.description || link?.url || "")}
-          </Text>
-
-          <TouchableOpacity
-            className="flex-row items-center gap-1 mb-2.5 pr-5"
-            onPress={() => router.replace(`/links/${id}`)}
-          >
-            <IconSymbol name="link" size={16} color="gray" />
-            <Text className="text-base text-gray-500 flex-1" numberOfLines={1}>
-              {link?.url}
-            </Text>
-          </TouchableOpacity>
-
-          <View className="flex-row items-center gap-1 mb-2.5">
-            <IconSymbol name="calendar" size={16} color="gray" />
-            <Text className="text-base text-gray-500">
-              {new Date(
-                (link?.importDate || link?.createdAt) as string
-              ).toLocaleString("en-US", {
-                year: "numeric",
-                month: "short",
-                day: "numeric",
-              })}
-            </Text>
-          </View>
-
-          <View className="border-t border-gray-200 mt-2.5 mb-5" />
-
-          <RenderHtml
-            contentWidth={width}
-            source={{ html: htmlContent }}
-            renderers={{
-              table: () => (
-                <ElementNotSupported
-                  onPress={() => router.replace(`/links/${id}`)}
-                />
-              ),
-            }}
-            tagsStyles={{
-              p: { fontSize: 16, lineHeight: 24, marginVertical: 10 },
-            }}
-          />
-        </ScrollView>
+    <View
+      className="flex-1"
+      style={{ paddingBottom: Platform.OS === "android" ? insets.bottom : 0 }}
+    >
+      {link?.id && Number(format) === ArchivedFormat.readability ? (
+        <ReadableFormat
+          link={link as any}
+          setIsLoading={(state) => setIsLoading(state)}
+        />
+      ) : link?.id &&
+        (Number(format) === ArchivedFormat.jpeg ||
+          Number(format) === ArchivedFormat.png) ? (
+        <ImageFormat
+          link={link as any}
+          setIsLoading={(state) => setIsLoading(state)}
+          format={Number(format)}
+        />
+      ) : link?.id && Number(format) === ArchivedFormat.pdf ? (
+        <PdfFormat
+          link={link as any}
+          setIsLoading={(state) => setIsLoading(state)}
+        />
+      ) : link?.id && Number(format) === ArchivedFormat.monolith ? (
+        <WebpageFormat
+          link={link as any}
+          setIsLoading={(state) => setIsLoading(state)}
+        />
+      ) : url ? (
+        <WebView
+          className={isLoading ? "opacity-0" : "flex-1"}
+          source={{
+            uri: url,
+            headers:
+              format || link?.type !== "url"
+                ? { Authorization: `Bearer ${auth.session}` }
+                : {},
+          }}
+          onLoadEnd={() => setIsLoading(false)}
+        />
       ) : (
-        <View className="flex-1 bg-white">
-          {url && (
-            <WebView
-              className={isLoading ? "opacity-0" : "flex-1"}
-              source={{
-                uri: url,
-                headers: { Authorization: `Bearer ${auth.session}` },
-              }}
-              onLoadEnd={() => setIsLoading(false)}
-            />
-          )}
+        <View className="flex-1 justify-center items-center bg-base-100 p-5">
+          <Text className="text-base text-neutral">
+            No link data available. Please check your network connection or try
+            again later.
+          </Text>
         </View>
       )}
 
       {isLoading && (
-        <View className="absolute inset-0 flex-1 justify-center items-center bg-white p-5">
-          <ActivityIndicator size="large" color="gray" />
-          <Text className="text-base mt-2.5 text-gray-500">Loading...</Text>
+        <View className="absolute inset-0 flex-1 justify-center items-center bg-base-100 p-5">
+          <ActivityIndicator size="large" />
+          <Text className="text-base mt-2.5 text-neutral">Loading...</Text>
         </View>
       )}
-    </>
+    </View>
   );
 }

apps/mobile/app/login.tsx

@@ -1,63 +1,197 @@
 import { Button } from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
+import { rawTheme, ThemeName } from "@/lib/colors";
 import useAuthStore from "@/store/auth";
-import { useState } from "react";
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Redirect } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { useEffect, useState } from "react";
+import { View, Text, Dimensions, TouchableOpacity, Image } from "react-native";
+import { SheetManager } from "react-native-actions-sheet";
+import Svg, { Path } from "react-native-svg";
+import {
+  KeyboardStickyView,
+  KeyboardToolbar,
+} from "react-native-keyboard-controller";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function HomeScreen() {
-  const { signIn } = useAuthStore();
+  const { auth, signIn } = useAuthStore();
+  const { colorScheme } = useColorScheme();
+  const [method, setMethod] = useState<"password" | "token">("password");
+  const [isLoading, setIsLoading] = useState(false);
+
   const [form, setForm] = useState({
     user: "",
     password: "",
-    instance: "",
+    token: "",
+    instance: auth.instance || "https://cloud.linkwarden.app",
   });
 
+  const [showInstanceField, setShowInstanceField] = useState(
+    form.instance !== "https://cloud.linkwarden.app"
+  );
+
+  useEffect(() => {
+    setForm((prev) => ({
+      ...prev,
+      instance: auth.instance || "https://cloud.linkwarden.app",
+    }));
+  }, [auth.instance]);
+
+  useEffect(() => {
+    setShowInstanceField(form.instance !== "https://cloud.linkwarden.app");
+  }, [form.instance]);
+
+  useEffect(() => {
+    setForm((prev) => ({
+      ...prev,
+      token: "",
+      user: "",
+      password: "",
+    }));
+  }, [method]);
+
+  if (auth.status === "authenticated") {
+    return <Redirect href="/dashboard" />;
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>Login</Text>
-      <View
-        style={{
-          flexDirection: "column",
-          justifyContent: "space-between",
-          marginVertical: 10,
-          gap: 10,
-        }}
-      >
-        <Input
-          className="w-72"
-          placeholder="Username"
-          value={form.user}
-          onChangeText={(text) => setForm({ ...form, user: text })}
-        />
-        <Input
-          className="w-72"
-          placeholder="Password"
-          secureTextEntry
-          value={form.password}
-          onChangeText={(text) => setForm({ ...form, password: text })}
-        />
-        <Button
-          variant="accent"
-          onPress={() =>
-            signIn(
-              form.user,
-              form.password,
-              form.instance ? form.instance : undefined
-            )
-          }
-        >
-          <Text className="text-white">Login</Text>
-        </Button>
-      </View>
-    </View>
+    <>
+      <KeyboardStickyView className="flex-col justify-end h-full bg-base-100 relative">
+        <View className="flex-col justify-end h-full bg-primary relative">
+          <View className="my-auto">
+            <Image
+              source={require("@/assets/images/linkwarden.png")}
+              className="w-[120px] h-[120px] mx-auto"
+            />
+          </View>
+          <Text className="text-base-100 text-7xl font-bold ml-8">Login</Text>
+          <View>
+            <Text
+              className="text-base-100 text-2xl mx-8 mt-3"
+              numberOfLines={1}
+            >
+              Login to{" "}
+              {form.instance === "https://cloud.linkwarden.app"
+                ? "cloud.linkwarden.app"
+                : form.instance}
+            </Text>
+            <TouchableOpacity
+              onPress={() => {
+                if (showInstanceField) {
+                  setForm({
+                    ...form,
+                    instance: "https://cloud.linkwarden.app",
+                  });
+                }
+                setShowInstanceField(!showInstanceField);
+              }}
+              className="mx-8 mt-1 self-start"
+            >
+              <Text className="text-neutral-content text-sm">
+                {!showInstanceField ? "Change server" : "Use official server"}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <Svg
+            viewBox="0 0 1440 320"
+            width={Dimensions.get("screen").width}
+            height={Dimensions.get("screen").width * (320 / 1440) + 2}
+          >
+            <Path
+              fill={rawTheme[colorScheme as ThemeName]["base-100"]}
+              fill-opacity="1"
+              d="M0,256L48,234.7C96,213,192,171,288,176C384,181,480,235,576,266.7C672,299,768,309,864,277.3C960,245,1056,171,1152,122.7C1248,75,1344,53,1392,42.7L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+            />
+          </Svg>
+          <SafeAreaView
+            edges={["bottom"]}
+            className="flex-col justify-end h-auto duration-100 pt-10 bg-base-100 -mt-2 pb-10 gap-4 w-full px-4"
+          >
+            {showInstanceField && (
+              <Input
+                className="w-full text-xl p-3 leading-tight h-12"
+                textAlignVertical="center"
+                placeholder="Instance URL"
+                selectTextOnFocus={false}
+                value={form.instance}
+                onChangeText={(text) => setForm({ ...form, instance: text })}
+              />
+            )}
+            {method === "password" ? (
+              <>
+                <Input
+                  className="w-full text-xl p-3 leading-tight h-12"
+                  textAlignVertical="center"
+                  placeholder="Email or Username"
+                  value={form.user}
+                  onChangeText={(text) => setForm({ ...form, user: text })}
+                />
+                <Input
+                  className="w-full text-xl p-3 leading-tight h-12"
+                  textAlignVertical="center"
+                  placeholder="Password"
+                  secureTextEntry
+                  value={form.password}
+                  onChangeText={(text) => setForm({ ...form, password: text })}
+                />
+              </>
+            ) : (
+              <Input
+                className="w-full text-xl p-3 leading-tight h-12"
+                textAlignVertical="center"
+                placeholder="Access Token"
+                secureTextEntry
+                value={form.token}
+                onChangeText={(text) => setForm({ ...form, token: text })}
+              />
+            )}
+
+            <TouchableOpacity
+              onPress={() =>
+                setMethod(method === "password" ? "token" : "password")
+              }
+              className="w-fit mx-auto"
+            >
+              <Text className="text-primary w-fit text-center">
+                {method === "password"
+                  ? "Login with Access Token"
+                  : "Login with Username/Password"}
+              </Text>
+            </TouchableOpacity>
+
+            <Button
+              variant="accent"
+              size="lg"
+              isLoading={isLoading}
+              onPress={async () => {
+                if (
+                  ((form.user && form.password) || form.token) &&
+                  form.instance
+                ) {
+                  setIsLoading(true);
+                  await signIn(
+                    form.user,
+                    form.password,
+                    form.instance,
+                    form.token
+                  );
+                  setIsLoading(false);
+                }
+              }}
+            >
+              <Text className="text-white text-xl">Login</Text>
+            </Button>
+            <TouchableOpacity
+              className="w-fit mx-auto"
+              onPress={() => SheetManager.show("support-sheet")}
+            >
+              <Text className="text-neutral text-center w-fit">Need help?</Text>
+            </TouchableOpacity>
+          </SafeAreaView>
+        </View>
+      </KeyboardStickyView>
+      <KeyboardToolbar />
+    </>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#ffffff",
-  },
-});

apps/mobile/components/ActionSheets/AddLinkSheet.tsx

@@ -1,23 +1,39 @@
-import { Text, View } from "react-native";
+import { Alert, Text, View } from "react-native";
 import { useRef, useState } from "react";
 import ActionSheet, { ActionSheetRef } from "react-native-actions-sheet";
 import Input from "@/components/ui/Input";
 import { Button } from "@/components/ui/Button";
 import { useAddLink } from "@linkwarden/router/links";
 import useAuthStore from "@/store/auth";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function AddLinkSheet() {
   const actionSheetRef = useRef<ActionSheetRef>(null);
   const { auth } = useAuthStore();
   const addLink = useAddLink(auth);
   const [link, setLink] = useState("");
+  const { colorScheme } = useColorScheme();
+
+  const insets = useSafeAreaInsets();
 
   return (
-    <ActionSheet ref={actionSheetRef} gestureEnabled>
+    <ActionSheet
+      ref={actionSheetRef}
+      gestureEnabled
+      indicatorStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["neutral-content"],
+      }}
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+      safeAreaInsets={insets}
+    >
       <View className="px-8 py-5">
         <Input
           placeholder="e.g. https://example.com"
-          className="mb-4"
+          className="mb-4 bg-base-100"
           value={link}
           onChangeText={setLink}
         />
@@ -32,11 +48,13 @@ export default function AddLinkSheet() {
                   setLink("");
                 },
                 onError: (error) => {
+                  Alert.alert("Error", "There was an error adding the link.");
                   console.error("Error adding link:", error);
                 },
               }
             )
           }
+          isLoading={addLink.isPending}
           variant="accent"
           className="mb-2"
         >
@@ -51,7 +69,7 @@ export default function AddLinkSheet() {
           variant="outline"
           className="mb-2"
         >
-          <Text>Cancel</Text>
+          <Text className="text-base-content">Cancel</Text>
         </Button>
       </View>
     </ActionSheet>

apps/mobile/components/ActionSheets/EditLinkSheet.tsx

@@ -1,4 +1,4 @@
-import { View, Text } from "react-native";
+import { View, Text, Alert } from "react-native";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import ActionSheet, {
   FlatList,
@@ -16,8 +16,12 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@linkwarden/types";
-import { IconSymbol } from "../ui/IconSymbol";
 import { useCollections } from "@linkwarden/router/collections";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { Folder, ChevronRight, Check } from "lucide-react-native";
+import useTmpStore from "@/store/tmp";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 const Main = (props: SheetProps<"edit-link-sheet">) => {
   const { auth } = useAuthStore();
@@ -29,6 +33,7 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
   >(props.payload?.link);
   const editLink = useUpdateLink(auth);
   const router = useSheetRouter("edit-link-sheet");
+  const { colorScheme } = useColorScheme();
 
   useEffect(() => {
     if (params?.link) {
@@ -36,11 +41,13 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
     }
   }, [params?.link]);
 
+  const { tmp, updateTmp } = useTmpStore();
+
   return (
     <View className="px-8 py-5">
       <Input
         placeholder="Name"
-        className="mb-4"
+        className="mb-4 bg-base-100"
         value={link?.name || ""}
         onChangeText={(text) => link?.id && setLink({ ...link, name: text })}
       />
@@ -48,7 +55,7 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
       {props.payload?.link?.url && (
         <Input
           placeholder="URL"
-          className="mb-4"
+          className="mb-4 bg-base-100"
           value={link?.url || ""}
           onChangeText={(text) => link?.id && setLink({ ...link, url: text })}
         />
@@ -60,16 +67,19 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
         onPress={() => router?.navigate("collections", { link })}
       >
         <View className="flex-row items-center gap-2 w-[90%]">
-          <IconSymbol
+          <Folder
             size={20}
-            name="folder.fill"
+            fill={link?.collection.color || "gray"}
             color={link?.collection.color || "gray"}
           />
-          <Text numberOfLines={1} className="w-[90%]">
+          <Text numberOfLines={1} className="w-[90%] text-base-content">
             {link?.collection.name}
           </Text>
         </View>
-        <IconSymbol size={16} name="chevron.right" color={"gray"} />
+        <ChevronRight
+          size={16}
+          color={rawTheme[colorScheme as ThemeName]["neutral"]}
+        />
       </Button>
 
       {/* <Button variant="input" className="mb-4 h-auto">
@@ -87,13 +97,14 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
         ) : (
           <Text className="text-gray-500">No tags</Text>
         )}
-        <IconSymbol size={16} name="chevron.right" color={"gray"} />
+        <ChevronRight size={16} color={"gray"} />
       </Button> */}
 
       <Input
         multiline
+        textAlignVertical="top"
         placeholder="Description"
-        className="mb-4 h-28"
+        className="mb-4 h-28 bg-base-100"
         value={link?.description || ""}
         onChangeText={(text) =>
           link?.id && setLink({ ...link, description: text })
@@ -104,13 +115,20 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
         onPress={() =>
           editLink.mutate(link as LinkIncludingShortenedCollectionAndTags, {
             onSuccess: () => {
+              if (link && tmp.link)
+                updateTmp({
+                  link,
+                });
+
               SheetManager.hide("edit-link-sheet");
             },
             onError: (error) => {
-              console.error("Error adding link:", error);
+              Alert.alert("Error", "There was an error editing the link.");
+              console.error("Error editing link:", error);
             },
           })
         }
+        isLoading={editLink.isPending}
         variant="accent"
         className="mb-2"
       >
@@ -124,7 +142,7 @@ const Main = (props: SheetProps<"edit-link-sheet">) => {
         variant="outline"
         className="mb-2"
       >
-        <Text>Cancel</Text>
+        <Text className="text-base-content">Cancel</Text>
       </Button>
     </View>
   );
@@ -141,6 +159,7 @@ const Collections = () => {
   >("edit-link-sheet", "collections");
   const params = useSheetRouteParams("edit-link-sheet", "collections");
   const collections = useCollections(auth);
+  const { colorScheme } = useColorScheme();
 
   const filteredCollections = useMemo(() => {
     if (!collections.data) return [];
@@ -170,20 +189,23 @@ const Collections = () => {
       return (
         <Button variant="input" className="mb-2" onPress={onSelect}>
           <View className="flex-row items-center gap-2 w-[75%]">
-            <IconSymbol
+            <Folder
               size={20}
-              name="folder.fill"
+              fill={collection.color || "gray"}
               color={collection.color || "gray"}
             />
-            <Text numberOfLines={1} className="w-full">
+            <Text numberOfLines={1} className="w-full text-base-content">
               {collection.name}
             </Text>
           </View>
           <View className="flex-row items-center gap-2">
             {params.link?.collection.id === collection.id && (
-              <IconSymbol size={16} name="checkmark" color="" />
+              <Check
+                size={16}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
             )}
-            <Text className="text-gray-600">
+            <Text className="text-neutral">
               {collection._count?.links ?? 0}
             </Text>
           </View>
@@ -197,7 +219,7 @@ const Collections = () => {
     <View className="px-8 py-5 max-h-[80vh]">
       <Input
         placeholder="Search collections"
-        className="mb-4"
+        className="mb-4 bg-base-100"
         value={searchQuery}
         onChangeText={setSearchQuery}
       />
@@ -207,7 +229,10 @@ const Collections = () => {
         keyExtractor={(e, i) => i.toString()}
         renderItem={renderItem}
         ListEmptyComponent={
-          <Text style={{ textAlign: "center", color: "#666", marginTop: 20 }}>
+          <Text
+            style={{ textAlign: "center", marginTop: 20 }}
+            className="text-neutral"
+          >
             No collections match “{searchQuery}”
           </Text>
         }
@@ -229,12 +254,23 @@ const routes: Route[] = [
 ];
 
 export default function EditLinkSheet() {
+  const { colorScheme } = useColorScheme();
+
+  const insets = useSafeAreaInsets();
+
   return (
     <ActionSheet
       gestureEnabled
+      indicatorStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["neutral-content"],
+      }}
       enableRouterBackNavigation={true}
       routes={routes}
       initialRoute="main"
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+      safeAreaInsets={insets}
     />
   );
 }

apps/mobile/components/ActionSheets/NewCollectionSheet.tsx

@@ -0,0 +1,92 @@
+import { Alert, Text, View } from "react-native";
+import { useRef, useState } from "react";
+import ActionSheet, { ActionSheetRef } from "react-native-actions-sheet";
+import Input from "@/components/ui/Input";
+import { Button } from "@/components/ui/Button";
+import useAuthStore from "@/store/auth";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { useCreateCollection } from "@linkwarden/router/collections";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function NewCollectionSheet() {
+  const actionSheetRef = useRef<ActionSheetRef>(null);
+  const { auth } = useAuthStore();
+  const createCollection = useCreateCollection(auth);
+  const [collection, setCollection] = useState({
+    name: "",
+    description: "",
+  });
+  const { colorScheme } = useColorScheme();
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      ref={actionSheetRef}
+      gestureEnabled
+      indicatorStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["neutral-content"],
+      }}
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+      safeAreaInsets={insets}
+    >
+      <View className="px-8 py-5">
+        <Input
+          placeholder="Name"
+          className="mb-4 bg-base-100"
+          value={collection.name}
+          onChangeText={(text) => setCollection({ ...collection, name: text })}
+        />
+
+        <Input
+          placeholder="Description"
+          className="mb-4 bg-base-100"
+          value={collection.description}
+          onChangeText={(text) =>
+            setCollection({ ...collection, description: text })
+          }
+        />
+
+        <Button
+          onPress={() =>
+            createCollection.mutate(
+              { name: collection.name, description: collection.description },
+              {
+                onSuccess: () => {
+                  actionSheetRef.current?.hide();
+                  setCollection({ name: "", description: "" });
+                },
+                onError: (error) => {
+                  Alert.alert(
+                    "Error",
+                    "There was an error creating the collection."
+                  );
+                  console.error("Error creating collection:", error);
+                },
+              }
+            )
+          }
+          isLoading={createCollection.isPending}
+          variant="accent"
+          className="mb-2"
+        >
+          <Text className="text-white">Save Collection</Text>
+        </Button>
+
+        <Button
+          onPress={() => {
+            actionSheetRef.current?.hide();
+            setCollection({ name: "", description: "" });
+          }}
+          variant="outline"
+          className="mb-2"
+        >
+          <Text className="text-base-content">Cancel</Text>
+        </Button>
+      </View>
+    </ActionSheet>
+  );
+}

apps/mobile/components/ActionSheets/Sheets.tsx

@@ -3,18 +3,20 @@ import {
   RouteDefinition,
   SheetDefinition,
 } from "react-native-actions-sheet";
+import SupportSheet from "./SupportSheet";
 import AddLinkSheet from "./AddLinkSheet";
 import EditLinkSheet from "./EditLinkSheet";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@linkwarden/types";
+import NewCollectionSheet from "./NewCollectionSheet";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
 
+registerSheet("support-sheet", SupportSheet);
 registerSheet("add-link-sheet", AddLinkSheet);
 registerSheet("edit-link-sheet", EditLinkSheet);
+registerSheet("new-collection-sheet", NewCollectionSheet);
 
 declare module "react-native-actions-sheet" {
   interface Sheets {
+    "support-sheet": SheetDefinition;
     "add-link-sheet": SheetDefinition;
     "edit-link-sheet": SheetDefinition<{
       payload: {
@@ -29,6 +31,7 @@ declare module "react-native-actions-sheet" {
         }>;
       };
     }>;
+    "new-collection-sheet": SheetDefinition;
   }
 }
 

apps/mobile/components/ActionSheets/SupportSheet.tsx

@@ -0,0 +1,47 @@
+import { Text, View } from "react-native";
+import { useState } from "react";
+import ActionSheet from "react-native-actions-sheet";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import * as Clipboard from "expo-clipboard";
+import { Button } from "../ui/Button";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function SupportSheet() {
+  const { colorScheme } = useColorScheme();
+  const [copied, setCopied] = useState(false);
+
+  async function handleEmailPress() {
+    await Clipboard.setStringAsync("support@linkwarden.app");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      indicatorStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["neutral-content"],
+      }}
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-100"],
+      }}
+      safeAreaInsets={insets}
+    >
+      <View className="px-8 py-5 flex-col gap-4">
+        <Text className="text-2xl font-bold text-base-content">Need help?</Text>
+        <Text className="text-base-content">
+          Whether you have a question or need assistance, feel free to reach out
+          to us at support@linkwarden.app
+        </Text>
+        <Button onPress={handleEmailPress} variant="outline">
+          <Text className="text-base-content">
+            {copied ? "Copied!" : "Copy Support Email"}
+          </Text>
+        </Button>
+      </View>
+    </ActionSheet>
+  );
+}

apps/mobile/components/CollectionListing.tsx

@@ -0,0 +1,132 @@
+import { View, Text, Pressable, Platform, Alert } from "react-native";
+import { decode } from "html-entities";
+import { CollectionIncludingMembersAndLinkCount } from "@linkwarden/types";
+import useAuthStore from "@/store/auth";
+import { useRouter } from "expo-router";
+import * as ContextMenu from "zeego/context-menu";
+import { cn } from "@linkwarden/lib/utils";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { CalendarDays, Folder, Link } from "lucide-react-native";
+import { useDeleteCollection } from "@linkwarden/router/collections";
+
+type Props = {
+  collection: CollectionIncludingMembersAndLinkCount;
+};
+
+const CollectionListing = ({ collection }: Props) => {
+  const { auth } = useAuthStore();
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  const deleteCollection = useDeleteCollection(auth);
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger asChild>
+        <Pressable
+          className={cn(
+            "p-5 flex-row justify-between",
+            "bg-base-100",
+            Platform.OS !== "android" && "active:bg-base-200/50"
+          )}
+          onLongPress={() => {}}
+          onPress={() => router.navigate(`/collections/${collection.id}`)}
+          android_ripple={{
+            color: colorScheme === "dark" ? "rgba(255,255,255,0.2)" : "#ddd",
+            borderless: false,
+          }}
+        >
+          <View className="w-full">
+            <View className="w-[90%] flex-col justify-between gap-3">
+              <View className="flex flex-row gap-2 items-center pr-1.5 self-start rounded-md">
+                <Folder
+                  size={16}
+                  fill={collection.color || ""}
+                  color={collection.color || ""}
+                />
+                <Text
+                  numberOfLines={2}
+                  className="font-medium text-lg text-base-content"
+                >
+                  {decode(collection.name)}
+                </Text>
+              </View>
+              {collection.description && (
+                <Text
+                  numberOfLines={2}
+                  className="font-light text-sm text-base-content"
+                >
+                  {decode(collection.description)}
+                </Text>
+              )}
+            </View>
+
+            <View className="flex-row gap-3">
+              <View className="flex flex-row gap-1 items-center mt-5 self-start">
+                <CalendarDays
+                  size={16}
+                  color={rawTheme[colorScheme as ThemeName]["neutral"]}
+                />
+                <Text
+                  numberOfLines={1}
+                  className="font-light text-xs text-base-content"
+                >
+                  {new Date(collection.createdAt as string).toLocaleString(
+                    "en-US",
+                    {
+                      year: "numeric",
+                      month: "short",
+                      day: "numeric",
+                    }
+                  )}
+                </Text>
+              </View>
+              <View className="flex flex-row gap-1 items-center mt-5 self-start">
+                <Link
+                  size={16}
+                  color={rawTheme[colorScheme as ThemeName]["neutral"]}
+                />
+                <Text
+                  numberOfLines={1}
+                  className="font-light text-xs text-base-content"
+                >
+                  {collection._count?.links}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </Pressable>
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Content avoidCollisions>
+        <ContextMenu.Item
+          key="delete-collection"
+          onSelect={() => {
+            return Alert.alert(
+              "Delete Collection",
+              "Are you sure you want to delete this collection? This action cannot be undone.",
+              [
+                {
+                  text: "Cancel",
+                  style: "cancel",
+                },
+                {
+                  text: "Delete",
+                  style: "destructive",
+                  onPress: () => {
+                    deleteCollection.mutate(collection.id as number);
+                  },
+                },
+              ]
+            );
+          }}
+        >
+          <ContextMenu.ItemTitle>Delete</ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default CollectionListing;

apps/mobile/components/DashboardItem.tsx

@@ -1,6 +1,4 @@
 import { Text, View } from "react-native";
-import { IconSymbol } from "./ui/IconSymbol";
-import { SFSymbols6_0 } from "sf-symbols-typescript";
 
 export default function DashboardItem({
   name,
@@ -10,23 +8,28 @@ export default function DashboardItem({
 }: {
   name: string;
   value: number;
-  icon: SFSymbols6_0;
+  icon: React.ReactNode;
   color: string;
 }) {
   return (
-    <View className="flex-1 flex-col gap-2 rounded-xl bg-white p-3">
+    <View className="flex-1 flex-col gap-2 rounded-xl bg-base-200 p-3">
       <View className="flex-row justify-between">
-        <View className="flex-col gap-2 items-start">
-          <IconSymbol name={icon} size={40} color={color} />
+        <View
+          className="flex-col gap-2 rounded-full aspect-square flex justify-center items-center"
+          style={{
+            backgroundColor: color,
+          }}
+        >
+          {icon}
         </View>
         <Text
-          className="text-4xl text-primary mt-0.5 text-right max-w-[75%]"
+          className="text-4xl text-base-content mt-0.5 text-right max-w-[75%]"
           numberOfLines={1}
         >
           {value || 0}
         </Text>
       </View>
-      <Text className="font-semibold text-gray-500">{name}</Text>
+      <Text className="font-semibold text-neutral">{name}</Text>
     </View>
   );
 }

apps/mobile/components/DashboardSection.tsx

@@ -0,0 +1,346 @@
+import {
+  FlatList,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewToken,
+} from "react-native";
+import React from "react";
+import clsx from "clsx";
+import DashboardItem from "@/components/DashboardItem";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import {
+  Clock8,
+  ChevronRight,
+  Pin,
+  Folder,
+  Hash,
+  Link,
+} from "lucide-react-native";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import LinkListing from "@/components/LinkListing";
+import { useColorScheme } from "nativewind";
+import { useRouter } from "expo-router";
+
+// Don't use prisma client's DashboardSectionType, it'll crash in production (React Native)
+type DashboardSectionType =
+  | "STATS"
+  | "RECENT_LINKS"
+  | "PINNED_LINKS"
+  | "COLLECTION";
+
+type DashboardSectionProps = {
+  sectionData: { type: DashboardSectionType };
+  collection?: any;
+  links?: any[];
+  tagsLength: number;
+  numberOfLinks: number;
+  collectionsLength: number;
+  numberOfPinnedLinks: number;
+  dashboardData: {
+    isLoading: boolean;
+    refetch: Function;
+    isRefetching: boolean;
+  };
+  collectionLinks?: any[];
+};
+
+const DashboardSection: React.FC<DashboardSectionProps> = ({
+  sectionData,
+  collection,
+  links = [],
+  tagsLength,
+  numberOfLinks,
+  collectionsLength,
+  numberOfPinnedLinks,
+  dashboardData,
+  collectionLinks = [],
+}) => {
+  const { colorScheme } = useColorScheme();
+
+  const router = useRouter();
+
+  switch (sectionData.type) {
+    case "STATS":
+      return (
+        <View className="flex-col gap-4 max-w-full px-5">
+          <View className="flex-row gap-4">
+            <DashboardItem
+              name={numberOfLinks === 1 ? "Link" : "Links"}
+              value={numberOfLinks}
+              icon={<Link size={23} color="white" />}
+              color="#9c00cc"
+            />
+            <DashboardItem
+              name={collectionsLength === 1 ? "Collection" : "Collections"}
+              value={collectionsLength}
+              icon={<Folder size={23} color="white" fill="white" />}
+              color="#0096cc"
+            />
+          </View>
+          <View className="flex-row gap-4">
+            <DashboardItem
+              name={tagsLength === 1 ? "Tag" : "Tags"}
+              value={tagsLength}
+              icon={<Hash size={23} color="white" />}
+              color="#00cc99"
+            />
+            <DashboardItem
+              name={"Pinned Links"}
+              value={numberOfPinnedLinks}
+              icon={<Pin size={23} color="white" fill="white" />}
+              color="#cc6d00"
+            />
+          </View>
+        </View>
+      );
+
+    case "RECENT_LINKS":
+      return (
+        <>
+          <View className="flex-row justify-between items-center px-5">
+            <View className="flex-row gap-2 items-center">
+              <View className={"flex-row items-center gap-2"}>
+                <Clock8
+                  size={30}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+                <Text className="text-2xl capitalize text-base-content">
+                  Recent Links
+                </Text>
+              </View>
+            </View>
+            <TouchableOpacity
+              className="flex-row items-center text-sm gap-1"
+              onPress={() => router.navigate("/(tabs)/dashboard/recent-links")}
+            >
+              <Text className="text-primary">View All</Text>
+              <ChevronRight
+                size={15}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {dashboardData.isLoading ||
+          (links.length > 0 && !dashboardData.isLoading) ? (
+            <FlatList
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              directionalLockEnabled
+              data={links || []}
+              refreshing={dashboardData.isLoading}
+              initialNumToRender={2}
+              keyExtractor={(item) => item.id?.toString() || ""}
+              renderItem={({ item }) => (
+                <RenderItem item={item} key={item.id?.toString()} />
+              )}
+              ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
+              contentContainerStyle={{
+                paddingHorizontal: 20,
+              }}
+              onViewableItemsChanged={({
+                viewableItems,
+              }: {
+                viewableItems: ViewToken[];
+              }) => {
+                const links = viewableItems.map(
+                  (e) => e.item
+                ) as LinkIncludingShortenedCollectionAndTags[];
+
+                if (
+                  !dashboardData.isRefetching &&
+                  links.some((e) => e.id && !e.preview)
+                ) {
+                  dashboardData.refetch();
+                }
+              }}
+              viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
+            />
+          ) : (
+            <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 mx-5">
+              <Clock8
+                size={40}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+              <Text className="text-center text-xl text-neutral">
+                No Recent Links
+              </Text>
+
+              {/* <View className="text-center w-full mt-4 flex-row flex-wrap gap-4 justify-center">
+                <Button onPress={() => setNewLinkModal(true)} variant="accent">
+                  <Icon name="bi-plus-lg" className="text-xl" />
+                  <Text>{t("add_link")}</Text>
+                </Button>
+                <ImportDropdown />
+              </View> */}
+            </View>
+          )}
+        </>
+      );
+
+    case "PINNED_LINKS":
+      return (
+        <>
+          <View className="flex-row justify-between items-center px-5">
+            <View className="flex-row gap-2 items-center">
+              <View className={"flex-row items-center gap-2"}>
+                <Pin
+                  size={30}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+                <Text className="text-2xl capitalize text-base-content">
+                  Pinned Links
+                </Text>
+              </View>
+            </View>
+            <TouchableOpacity
+              className="flex-row items-center text-sm gap-1"
+              onPress={() => router.navigate("/(tabs)/dashboard/pinned-links")}
+            >
+              <Text className="text-primary">View All</Text>
+              <ChevronRight
+                size={15}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {dashboardData.isLoading ||
+          links?.some((e: any) => e.pinnedBy && e.pinnedBy[0]) ? (
+            <FlatList
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              data={links.filter((e: any) => e.pinnedBy && e.pinnedBy[0]) || []}
+              refreshing={dashboardData.isLoading}
+              initialNumToRender={2}
+              keyExtractor={(item) => item.id?.toString() || ""}
+              renderItem={({ item }) => (
+                <RenderItem item={item} key={item.id?.toString()} />
+              )}
+              ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
+              contentContainerStyle={{
+                paddingHorizontal: 20,
+              }}
+              onViewableItemsChanged={({
+                viewableItems,
+              }: {
+                viewableItems: ViewToken[];
+              }) => {
+                const links = viewableItems.map(
+                  (e) => e.item
+                ) as LinkIncludingShortenedCollectionAndTags[];
+
+                if (
+                  !dashboardData.isRefetching &&
+                  links.some((e) => e.id && !e.preview)
+                ) {
+                  dashboardData.refetch();
+                }
+              }}
+              viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
+            />
+          ) : (
+            <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 mx-5">
+              <Pin
+                size={40}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+              <Text className="text-center text-xl text-neutral">
+                No Pinned Links
+              </Text>
+            </View>
+          )}
+        </>
+      );
+
+    case "COLLECTION":
+      return collection?.id ? (
+        <>
+          <View className="flex-row justify-between items-center px-5">
+            <View className="flex-row gap-2 items-center max-w-[60%]">
+              <View className={clsx("flex-row items-center gap-2")}>
+                <Folder
+                  size={30}
+                  fill={collection.color || "#0ea5e9"}
+                  color={collection.color || "#0ea5e9"}
+                />
+                <Text
+                  className="text-2xl capitalize w-full text-base-content"
+                  numberOfLines={1}
+                >
+                  {collection.name}
+                </Text>
+              </View>
+            </View>
+            <TouchableOpacity
+              className="flex-row items-center text-sm gap-1 whitespace-nowrap"
+              onPress={() =>
+                router.navigate(
+                  `/(tabs)/dashboard/collection?collectionId=${collection.id}`
+                )
+              }
+            >
+              <Text className="text-primary">View All</Text>
+              <ChevronRight
+                size={15}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+            </TouchableOpacity>
+          </View>
+
+          {dashboardData.isLoading || collectionLinks.length > 0 ? (
+            <FlatList
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              data={collectionLinks || []}
+              refreshing={dashboardData.isLoading}
+              initialNumToRender={2}
+              keyExtractor={(item) => item.id?.toString() || ""}
+              renderItem={({ item }) => (
+                <RenderItem item={item} key={item.id?.toString()} />
+              )}
+              ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
+              contentContainerStyle={{
+                paddingHorizontal: 20,
+              }}
+              onViewableItemsChanged={({
+                viewableItems,
+              }: {
+                viewableItems: ViewToken[];
+              }) => {
+                const links = viewableItems.map(
+                  (e) => e.item
+                ) as LinkIncludingShortenedCollectionAndTags[];
+
+                if (
+                  !dashboardData.isRefetching &&
+                  links.some((e) => e.id && !e.preview)
+                ) {
+                  dashboardData.refetch();
+                }
+              }}
+              viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
+            />
+          ) : (
+            <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 mx-5">
+              <Text className="text-center text-xl text-neutral">
+                Empty Collection
+              </Text>
+            </View>
+          )}
+        </>
+      ) : null;
+
+    default:
+      return null;
+  }
+};
+
+export default DashboardSection;
+
+const RenderItem = React.memo(
+  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
+    return <LinkListing link={item} dashboard />;
+  }
+);

apps/mobile/components/ElementNotSupported.tsx

@@ -10,8 +10,8 @@ export default function ElementNotSupported({
   onPress: () => void;
 }) {
   return (
-    <View className="border-y border-gray-200 my-2 py-5 flex justify-center items-center">
-      <Text>{message}</Text>
+    <View className="border-y border-neutral-content my-2 py-5 flex justify-center items-center">
+      <Text className="text-neutral">{message}</Text>
       <Button onPress={onPress} title={buttonTitle} />
     </View>
   );

apps/mobile/components/Formats/ImageFormat.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect, useState } from "react";
+import * as FileSystem from "expo-file-system";
+import NetInfo from "@react-native-community/netinfo";
+import useAuthStore from "@/store/auth";
+import { ArchivedFormat } from "@linkwarden/types";
+import { Link as LinkType } from "@linkwarden/prisma/client";
+import WebView from "react-native-webview";
+import { Image, Platform, ScrollView } from "react-native";
+
+type Props = {
+  link: LinkType;
+  setIsLoading: (state: boolean) => void;
+  format: ArchivedFormat.png | ArchivedFormat.jpeg;
+};
+
+export default function ImageFormat({ link, setIsLoading, format }: Props) {
+  const FORMAT = format;
+
+  const extension = format === ArchivedFormat.png ? "png" : "jpeg";
+
+  const { auth } = useAuthStore();
+  const [content, setContent] = useState<string>("");
+  const [dimension, setDimension] = useState<{
+    width: number;
+    height: number;
+  }>();
+
+  useEffect(() => {
+    if (content)
+      Image.getSize(content, (width, height) => {
+        setDimension({ width, height });
+      });
+  }, [content]);
+
+  useEffect(() => {
+    async function loadCacheOrFetch() {
+      const filePath =
+        FileSystem.documentDirectory +
+        `archivedData/${extension}/link_${link.id}.${extension}`;
+
+      await FileSystem.makeDirectoryAsync(
+        filePath.substring(0, filePath.lastIndexOf("/")),
+        {
+          intermediates: true,
+        }
+      ).catch(() => {});
+
+      const [info] = await Promise.all([FileSystem.getInfoAsync(filePath)]);
+
+      if (info.exists) {
+        setContent(filePath);
+      }
+
+      const net = await NetInfo.fetch();
+
+      if (net.isConnected) {
+        const apiUrl = `${auth.instance}/api/v1/archives/${link.id}?format=${FORMAT}`;
+
+        try {
+          const result = await FileSystem.downloadAsync(apiUrl, filePath, {
+            headers: { Authorization: `Bearer ${auth.session}` },
+          });
+
+          setContent(result.uri);
+        } catch (e) {
+          console.error("Failed to fetch content", e);
+        }
+      }
+    }
+
+    loadCacheOrFetch();
+  }, [link]);
+
+  if (Platform.OS === "ios")
+    return (
+      content &&
+      dimension && (
+        <ScrollView maximumZoomScale={10}>
+          <Image
+            source={{ uri: content }}
+            onLoadEnd={() => setIsLoading(false)}
+            style={{
+              width: "100%",
+              height: "auto",
+              aspectRatio: dimension.width / dimension.height,
+            }}
+            resizeMode="contain"
+          />
+        </ScrollView>
+      )
+    );
+  else
+    return (
+      content && (
+        <WebView
+          style={{
+            flex: 1,
+          }}
+          source={{
+            baseUrl: content,
+            html: `
+            <!DOCTYPE html>
+            <html>
+              <head>
+                <style>
+                  body {
+                    margin: 0;
+                    padding: 0;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                  }
+                  img {
+                    max-width: 100%;
+                    height: auto;
+                  }
+                </style>
+              </head>
+              <body>
+                <img src="${content}" />
+              </body>
+            </html>
+          `,
+          }}
+          scalesPageToFit
+          originWhitelist={["*"]}
+          mixedContentMode="always"
+          javaScriptEnabled={true}
+          allowFileAccess={true}
+          allowFileAccessFromFileURLs={true}
+          allowUniversalAccessFromFileURLs={true}
+          onLoadEnd={() => setIsLoading(false)}
+        />
+      )
+    );
+}

apps/mobile/components/Formats/PdfFormat.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react";
+import * as FileSystem from "expo-file-system";
+import NetInfo from "@react-native-community/netinfo";
+import useAuthStore from "@/store/auth";
+import { ArchivedFormat } from "@linkwarden/types";
+import { Link as LinkType } from "@linkwarden/prisma/client";
+import Pdf from "react-native-pdf";
+
+type Props = {
+  link: LinkType;
+  setIsLoading: (state: boolean) => void;
+};
+
+export default function PdfFormat({ link, setIsLoading }: Props) {
+  const FORMAT = ArchivedFormat.pdf;
+
+  const { auth } = useAuthStore();
+  const [content, setContent] = useState<string>("");
+
+  useEffect(() => {
+    async function loadCacheOrFetch() {
+      const filePath =
+        FileSystem.documentDirectory + `archivedData/pdf/link_${link.id}.pdf`;
+
+      await FileSystem.makeDirectoryAsync(
+        filePath.substring(0, filePath.lastIndexOf("/")),
+        {
+          intermediates: true,
+        }
+      ).catch(() => {});
+
+      const [info] = await Promise.all([FileSystem.getInfoAsync(filePath)]);
+
+      if (info.exists) {
+        setContent(filePath);
+      }
+
+      const net = await NetInfo.fetch();
+
+      if (net.isConnected) {
+        const apiUrl = `${auth.instance}/api/v1/archives/${link.id}?format=${FORMAT}`;
+
+        try {
+          const result = await FileSystem.downloadAsync(apiUrl, filePath, {
+            headers: { Authorization: `Bearer ${auth.session}` },
+          });
+
+          setContent(result.uri);
+        } catch (e) {
+          console.error("Failed to fetch content", e);
+        }
+      }
+    }
+
+    loadCacheOrFetch();
+  }, [link]);
+
+  return (
+    content && (
+      <Pdf
+        style={{
+          flex: 1,
+        }}
+        source={{ uri: content }}
+        onLoadComplete={() => setIsLoading(false)}
+        onPressLink={(uri) => {
+          console.log(`Link pressed: ${uri}`);
+        }}
+      />
+    )
+  );
+}

apps/mobile/components/Formats/ReadableFormat.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+import { View, Text, ScrollView, TouchableOpacity } from "react-native";
+import * as FileSystem from "expo-file-system";
+import NetInfo from "@react-native-community/netinfo";
+import useAuthStore from "@/store/auth";
+import { useRouter } from "expo-router";
+import { useWindowDimensions } from "react-native";
+import RenderHtml from "@linkwarden/react-native-render-html";
+import ElementNotSupported from "@/components/ElementNotSupported";
+import { decode } from "html-entities";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { CalendarDays, Link } from "lucide-react-native";
+import { ArchivedFormat } from "@linkwarden/types";
+import { Link as LinkType } from "@linkwarden/prisma/client";
+
+type Props = {
+  link: LinkType;
+  setIsLoading: (state: boolean) => void;
+};
+
+export default function ReadableFormat({ link, setIsLoading }: Props) {
+  const FORMAT = ArchivedFormat.readability;
+
+  const { auth } = useAuthStore();
+  const [content, setContent] = useState<string>("");
+  const { width } = useWindowDimensions();
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  useEffect(() => {
+    async function loadCacheOrFetch() {
+      const filePath =
+        FileSystem.documentDirectory +
+        `archivedData/readable/link_${link.id}.html`;
+
+      await FileSystem.makeDirectoryAsync(
+        filePath.substring(0, filePath.lastIndexOf("/")),
+        {
+          intermediates: true,
+        }
+      ).catch(() => {});
+
+      const [info] = await Promise.all([FileSystem.getInfoAsync(filePath)]);
+
+      if (info.exists) {
+        const rawContent = await FileSystem.readAsStringAsync(filePath);
+        setContent(rawContent);
+      }
+
+      const net = await NetInfo.fetch();
+
+      if (net.isConnected) {
+        const apiUrl = `${auth.instance}/api/v1/archives/${link.id}?format=${FORMAT}`;
+
+        try {
+          const response = await fetch(apiUrl, {
+            headers: { Authorization: `Bearer ${auth.session}` },
+          });
+
+          const data = (await response.json()).content;
+          setContent(data);
+          await FileSystem.writeAsStringAsync(filePath, data, {
+            encoding: FileSystem.EncodingType.UTF8,
+          });
+        } catch (e) {
+          console.error("Failed to fetch content", e);
+        }
+      }
+    }
+
+    loadCacheOrFetch();
+  }, [link]);
+
+  return (
+    content && (
+      <ScrollView
+        className="flex-1 bg-base-100"
+        contentContainerClassName="p-4"
+        nestedScrollEnabled
+      >
+        <Text className="text-2xl font-bold mb-2.5 text-base-content">
+          {decode(link.name || link.description || link.url || "")}
+        </Text>
+
+        <TouchableOpacity
+          className="flex-row items-center gap-1 mb-2.5 pr-5"
+          onPress={() => router.replace(`/links/${link.id}`)}
+        >
+          <Link
+            size={16}
+            color={rawTheme[colorScheme as ThemeName]["neutral"]}
+          />
+          <Text className="text-base text-neutral flex-1" numberOfLines={1}>
+            {link.url}
+          </Text>
+        </TouchableOpacity>
+
+        <View className="flex-row items-center gap-1 mb-2.5">
+          <CalendarDays
+            size={16}
+            color={rawTheme[colorScheme as ThemeName]["neutral"]}
+          />
+          <Text className="text-base text-neutral">
+            {new Date(link?.importDate || link.createdAt).toLocaleString(
+              "en-US",
+              {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              }
+            )}
+          </Text>
+        </View>
+
+        <View className="border-t border-neutral-content mt-2.5 mb-5" />
+
+        <RenderHtml
+          contentWidth={width}
+          source={{ html: content }}
+          renderers={{
+            table: () => (
+              <ElementNotSupported
+                onPress={() => router.replace(`/links/${link.id}`)}
+              />
+            ),
+          }}
+          onHTMLLoaded={() => setIsLoading(false)}
+          tagsStyles={{
+            p: { fontSize: 18, lineHeight: 28, marginVertical: 10 },
+          }}
+          baseStyle={{
+            color: rawTheme[colorScheme as ThemeName]["base-content"],
+          }}
+        />
+      </ScrollView>
+    )
+  );
+}

apps/mobile/components/Formats/WebpageFormat.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import * as FileSystem from "expo-file-system";
+import NetInfo from "@react-native-community/netinfo";
+import useAuthStore from "@/store/auth";
+import { ArchivedFormat } from "@linkwarden/types";
+import { Link as LinkType } from "@linkwarden/prisma/client";
+import WebView from "react-native-webview";
+
+type Props = {
+  link: LinkType;
+  setIsLoading: (state: boolean) => void;
+};
+
+export default function WebpageFormat({ link, setIsLoading }: Props) {
+  const FORMAT = ArchivedFormat.monolith;
+
+  const { auth } = useAuthStore();
+  const [content, setContent] = useState<string>("");
+
+  useEffect(() => {
+    async function loadCacheOrFetch() {
+      const filePath =
+        FileSystem.documentDirectory +
+        `archivedData/webpage/link_${link.id}.html`;
+
+      await FileSystem.makeDirectoryAsync(
+        filePath.substring(0, filePath.lastIndexOf("/")),
+        {
+          intermediates: true,
+        }
+      ).catch(() => {});
+
+      const [info] = await Promise.all([FileSystem.getInfoAsync(filePath)]);
+
+      if (info.exists) {
+        setContent(filePath);
+      }
+
+      const net = await NetInfo.fetch();
+
+      if (net.isConnected) {
+        const apiUrl = `${auth.instance}/api/v1/archives/${link.id}?format=${FORMAT}`;
+
+        try {
+          const result = await FileSystem.downloadAsync(apiUrl, filePath, {
+            headers: { Authorization: `Bearer ${auth.session}` },
+          });
+
+          setContent(result.uri);
+        } catch (e) {
+          console.error("Failed to fetch content", e);
+        }
+      }
+    }
+
+    loadCacheOrFetch();
+  }, [link]);
+
+  return (
+    content && (
+      <WebView
+        style={{
+          flex: 1,
+        }}
+        source={{
+          uri: content,
+          baseUrl: FileSystem.documentDirectory,
+        }}
+        scalesPageToFit
+        originWhitelist={["*"]}
+        mixedContentMode="always"
+        javaScriptEnabled={true}
+        allowFileAccess={true}
+        allowFileAccessFromFileURLs={true}
+        allowUniversalAccessFromFileURLs={true}
+        onLoadEnd={() => setIsLoading(false)}
+      />
+    )
+  );
+}

apps/mobile/components/LinkListing.tsx

@@ -1,8 +1,18 @@
-import { View, Text, Image, Pressable, Platform, Alert } from "react-native";
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  Platform,
+  Alert,
+  ActivityIndicator,
+  Linking,
+} from "react-native";
 import { decode } from "html-entities";
 import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
-import { IconSymbol } from "@/components/ui/IconSymbol";
 import { ArchivedFormat } from "@linkwarden/types";
+import getFormatBasedOnPreference from "@linkwarden/lib/getFormatBasedOnPreference";
+import getOriginalFormat from "@linkwarden/lib/getOriginalFormat";
 import {
   atLeastOneFormatAvailable,
   formatAvailable,
@@ -15,6 +25,12 @@ import { SheetManager } from "react-native-actions-sheet";
 import * as Clipboard from "expo-clipboard";
 import { cn } from "@linkwarden/lib/utils";
 import { useUser } from "@linkwarden/router/user";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { CalendarDays, Folder } from "lucide-react-native";
+import useDataStore from "@/store/data";
+import { useEffect, useState } from "react";
+import { deleteLinkCache } from "@/lib/cache";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -26,32 +42,59 @@ const LinkListing = ({ link, dashboard }: Props) => {
   const router = useRouter();
   const updateLink = useUpdateLink(auth);
   const { data: user } = useUser(auth);
+  const { colorScheme } = useColorScheme();
+  const { data } = useDataStore();
 
   const deleteLink = useDeleteLink(auth);
 
-  let shortendURL;
+  const [url, setUrl] = useState("");
 
-  try {
-    if (link.url) {
-      shortendURL = new URL(link.url).host.toLowerCase();
+  useEffect(() => {
+    try {
+      if (link.url) {
+        setUrl(new URL(link.url).host.toLowerCase());
+      }
+    } catch (error) {
+      console.log(error);
     }
-  } catch (error) {
-    console.log(error);
-  }
+  }, [link]);
 
   return (
     <ContextMenu.Root>
       <ContextMenu.Trigger asChild>
         <Pressable
           className={cn(
-            "p-5 flex-row justify-between bg-white",
-            Platform.OS === "android"
-              ? "active:bg-white"
-              : "active:bg-gray-200",
+            "p-5 flex-row justify-between",
+            dashboard ? "bg-base-200" : "bg-base-100",
+            Platform.OS !== "android" && "active:bg-base-200/50",
             dashboard && "rounded-xl"
           )}
-          onPress={() => router.push(`/links/${link.id}`)}
-          android_ripple={{ color: "#ddd", borderless: false }}
+          onLongPress={() => {}}
+          onPress={() => {
+            if (user) {
+              const format = getFormatBasedOnPreference({
+                link,
+                preference: user.linksRouteTo,
+              });
+
+              data.preferredBrowser === "app"
+                ? router.navigate(
+                    format !== null
+                      ? `/links/${link.id}?format=${format}`
+                      : `/links/${link.id}`
+                  )
+                : Linking.openURL(
+                    format !== null
+                      ? auth.instance +
+                          `/preserved/${link?.id}?format=${format}`
+                      : (link.url as string)
+                  );
+            }
+          }}
+          android_ripple={{
+            color: colorScheme === "dark" ? "rgba(255,255,255,0.2)" : "#ddd",
+            borderless: false,
+          }}
         >
           <View
             className={cn(
@@ -60,23 +103,32 @@ const LinkListing = ({ link, dashboard }: Props) => {
             )}
           >
             <View className="w-[65%] flex-col justify-between">
-              <Text numberOfLines={2} className="font-medium text-lg">
+              <Text
+                numberOfLines={2}
+                className="font-medium text-lg text-base-content"
+              >
                 {decode(link.name || link.description || link.url)}
               </Text>
 
-              {shortendURL && (
-                <Text numberOfLines={1} className="mt-1.5 font-light text-sm">
-                  {shortendURL}
+              {url && (
+                <Text
+                  numberOfLines={1}
+                  className="mt-1.5 font-light text-sm text-base-content"
+                >
+                  {url}
                 </Text>
               )}
 
               <View className="flex flex-row gap-1 items-center mt-1.5 pr-1.5 self-start rounded-md">
-                <IconSymbol
-                  name="folder.fill"
+                <Folder
                   size={16}
+                  fill={link.collection.color || ""}
                   color={link.collection.color || ""}
                 />
-                <Text numberOfLines={1} className="font-light text-xs">
+                <Text
+                  numberOfLines={1}
+                  className="font-light text-xs text-base-content"
+                >
                   {link.collection.name}
                 </Text>
               </View>
@@ -94,13 +146,24 @@ const LinkListing = ({ link, dashboard }: Props) => {
                     }}
                     className="rounded-md h-[60px] w-[90px] object-cover scale-105"
                   />
+                ) : !link.preview ? (
+                  <ActivityIndicator
+                    size="small"
+                    className="h-[60px] w-[90px]"
+                  />
                 ) : (
                   <View className="h-[60px] w-[90px]" />
                 )}
               </View>
               <View className="flex flex-row gap-1 items-center mt-5 self-start">
-                <IconSymbol name="calendar" size={16} color="gray" />
-                <Text numberOfLines={1} className="font-light text-xs">
+                <CalendarDays
+                  size={16}
+                  color={rawTheme[colorScheme as ThemeName]["neutral"]}
+                />
+                <Text
+                  numberOfLines={1}
+                  className="font-light text-xs text-base-content"
+                >
                   {new Date(link.createdAt as string).toLocaleString("en-US", {
                     year: "numeric",
                     month: "short",
@@ -115,21 +178,39 @@ const LinkListing = ({ link, dashboard }: Props) => {
 
       <ContextMenu.Content avoidCollisions>
         <ContextMenu.Item
-          key="open-link"
-          onSelect={() => router.push(`/links/${link.id}`)}
-        >
-          <ContextMenu.ItemTitle>Open Link</ContextMenu.ItemTitle>
-        </ContextMenu.Item>
+          key="open-original"
+          onSelect={() => {
+            if (link) {
+              const format = getOriginalFormat(link);
 
-        {link.url && (
-          <ContextMenu.Item
-            key="copy-url"
-            onSelect={async () => {
-              await Clipboard.setStringAsync(link.url as string);
-            }}
-          >
-            <ContextMenu.ItemTitle>Copy URL</ContextMenu.ItemTitle>
-          </ContextMenu.Item>
+              data.preferredBrowser === "app"
+                ? router.navigate(
+                    format !== null
+                      ? `/links/${link.id}?format=${format}`
+                      : `/links/${link.id}`
+                  )
+                : Linking.openURL(
+                    format !== null
+                      ? auth.instance +
+                          `/preserved/${link?.id}?format=${format}`
+                      : (link.url as string)
+                  );
+            }
+          }}
+        >
+          <ContextMenu.ItemTitle>Open Original</ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+        {link?.url && (
+          <>
+            <ContextMenu.Item
+              key="copy-url"
+              onSelect={async () => {
+                await Clipboard.setStringAsync(link.url as string);
+              }}
+            >
+              <ContextMenu.ItemTitle>Copy URL</ContextMenu.ItemTitle>
+            </ContextMenu.Item>
+          </>
         )}
 
         <ContextMenu.Item
@@ -172,7 +253,7 @@ const LinkListing = ({ link, dashboard }: Props) => {
                 <ContextMenu.Item
                   key="preserved-formats-webpage"
                   onSelect={() =>
-                    router.push(
+                    router.navigate(
                       `/links/${link.id}?format=${ArchivedFormat.monolith}`
                     )
                   }
@@ -184,7 +265,7 @@ const LinkListing = ({ link, dashboard }: Props) => {
                 <ContextMenu.Item
                   key="preserved-formats-screenshot"
                   onSelect={() =>
-                    router.push(
+                    router.navigate(
                       `/links/${link.id}?format=${
                         link.image?.endsWith(".png")
                           ? ArchivedFormat.png
@@ -200,7 +281,7 @@ const LinkListing = ({ link, dashboard }: Props) => {
                 <ContextMenu.Item
                   key="preserved-formats-pdf"
                   onSelect={() =>
-                    router.push(
+                    router.navigate(
                       `/links/${link.id}?format=${ArchivedFormat.pdf}`
                     )
                   }
@@ -212,7 +293,7 @@ const LinkListing = ({ link, dashboard }: Props) => {
                 <ContextMenu.Item
                   key="preserved-formats-readable"
                   onSelect={() =>
-                    router.push(
+                    router.navigate(
                       `/links/${link.id}?format=${ArchivedFormat.readability}`
                     )
                   }
@@ -239,7 +320,11 @@ const LinkListing = ({ link, dashboard }: Props) => {
                   text: "Delete",
                   style: "destructive",
                   onPress: () => {
-                    deleteLink.mutate(link.id as number);
+                    deleteLink.mutate(link.id as number, {
+                      onSuccess: async () => {
+                        await deleteLinkCache(link.id as number);
+                      },
+                    });
                   },
                 },
               ]

apps/mobile/components/Links.tsx

@@ -0,0 +1,87 @@
+import {
+  View,
+  FlatList,
+  Text,
+  ActivityIndicator,
+  ViewToken,
+} from "react-native";
+import LinkListing from "@/components/LinkListing";
+import React, { useState } from "react";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import Spinner from "@/components/ui/Spinner";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+
+const RenderItem = React.memo(
+  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
+    return <LinkListing link={item} />;
+  }
+);
+
+type Props = {
+  links: LinkIncludingShortenedCollectionAndTags[];
+  data: any;
+};
+
+export default function Links({ links, data }: Props) {
+  const { colorScheme } = useColorScheme();
+  const [promptedRefetch, setPromptedRefetch] = useState(false);
+
+  return data.isLoading ? (
+    <View className="flex justify-center h-screen items-center">
+      <ActivityIndicator size="large" />
+      <Text className="text-base mt-2.5 text-neutral">Loading...</Text>
+    </View>
+  ) : (
+    <FlatList
+      contentInsetAdjustmentBehavior="automatic"
+      ListHeaderComponent={() => <></>}
+      data={links || []}
+      refreshControl={
+        <Spinner
+          refreshing={data.isRefetching && promptedRefetch}
+          onRefresh={async () => {
+            setPromptedRefetch(true);
+            await data.refetch();
+            setPromptedRefetch(false);
+          }}
+          progressBackgroundColor={
+            rawTheme[colorScheme as ThemeName]["base-200"]
+          }
+          colors={[rawTheme[colorScheme as ThemeName]["base-content"]]}
+        />
+      }
+      refreshing={data.isRefetching && promptedRefetch}
+      initialNumToRender={4}
+      keyExtractor={(item) => item.id?.toString() || ""}
+      renderItem={({ item }) => (
+        <RenderItem item={item} key={item.id?.toString()} />
+      )}
+      onEndReached={() => data.fetchNextPage()}
+      onEndReachedThreshold={0.5}
+      ItemSeparatorComponent={() => (
+        <View className="bg-neutral-content h-px" />
+      )}
+      ListEmptyComponent={
+        <View className="flex justify-center py-10 items-center">
+          <Text className="text-center text-xl text-neutral">
+            Nothing found...
+          </Text>
+        </View>
+      }
+      onViewableItemsChanged={({
+        viewableItems,
+      }: {
+        viewableItems: ViewToken[];
+      }) => {
+        const links = viewableItems.map(
+          (e) => e.item
+        ) as LinkIncludingShortenedCollectionAndTags[];
+
+        if (!data.isRefetching && links.some((e) => e.id && !e.preview))
+          data.refetch();
+      }}
+      viewabilityConfig={{ itemVisiblePercentThreshold: 50 }}
+    />
+  );
+}

apps/mobile/components/Modals/AddLink.tsx

@@ -1,17 +0,0 @@
-import { PropsWithChildren } from "react";
-import { IconSymbol } from "../ui/IconSymbol";
-import ModalBase from "../ModalBase";
-import { Text } from "react-native";
-
-type Props = PropsWithChildren<{
-  isVisible: boolean;
-  onClose: () => void;
-}>;
-
-export default function AddLink({ isVisible, onClose }: Props) {
-  return (
-    // <ModalBase isVisible={isVisible} onClose={onClose}>
-    <Text>Hi</Text>
-    // </ModalBase>
-  );
-}