fix: add useEffect to reset faviconLoaded state on link.url change

- Updated ConfirmationModal to use a callback for toggleModal.
- Modified DeleteUserModal to handle admin checks more robustly.
- Removed unnecessary config usage in SettingsSidebar and updated links.
- Cleaned up TagListing by removing unused context logging.
- Enhanced admin page to redirect non-admin users to the dashboard.
- Simplified API for archiving links by removing unused actions.
- Updated billing settings page for better UI consistency.
- Adjusted password settings page for responsive design.
- Deleted obsolete worker-console page and redirected to background-jobs.
- Added new background-jobs page with worker stats and preservation actions.
- Introduced new API endpoints for fetching worker stats and managing preservations.
- Created new hooks for managing worker-related actions in the router.
- Updated localization files to reflect new UI changes and actions.
- Removed deprecated preservation file handling from filesystem management.

.devcontainer/devcontainer.json

@@ -1,22 +1,22 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/typescript-node
 {
-	"name": "Node.js & TypeScript",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
+  "name": "Node.js & TypeScript",
+  // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:1-20-bullseye",
 
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
+  // Features to add to the dev container. More info: https://containers.dev/features.
+  // "features": {},
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
 
-	// Configure tool-specific properties.
-	// "customizations": {},
+  // Configure tool-specific properties.
+  // "customizations": {},
 
-	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
-	"remoteUser": "root"
+  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
+  "remoteUser": "root"
 }

.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

@@ -1,33 +1,473 @@
-NEXTAUTH_SECRET=very_sensitive_secret
-DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
-NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_URL=http://localhost:3000/api/v1/auth
+NEXTAUTH_SECRET=
+
+# Manual installation database settings
+# Example: DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
+DATABASE_URL=
+
+# Docker installation database settings
+POSTGRES_PASSWORD=
 
 # Additional Optional Settings
-
 PAGINATION_TAKE_COUNT=
 STORAGE_FOLDER=
 AUTOSCROLL_TIMEOUT=
 NEXT_PUBLIC_DISABLE_REGISTRATION=
+NEXT_PUBLIC_CREDENTIALS_ENABLED=
+DISABLE_NEW_SSO_USERS=
+MAX_LINKS_PER_USER=
+ARCHIVE_TAKE_COUNT=
+BROWSER_TIMEOUT=
+IGNORE_UNAUTHORIZED_CA=
+IGNORE_HTTPS_ERRORS=
+IGNORE_URL_SIZE_LIMIT=
+NEXT_PUBLIC_DEMO=
+NEXT_PUBLIC_DEMO_USERNAME=
+NEXT_PUBLIC_DEMO_PASSWORD=
+NEXT_PUBLIC_ADMIN=
+NEXT_PUBLIC_MAX_FILE_BUFFER=
+PDF_MAX_BUFFER=
+SCREENSHOT_MAX_BUFFER=
+READABILITY_MAX_BUFFER=
+PREVIEW_MAX_BUFFER=
+MONOLITH_MAX_BUFFER=
+MONOLITH_CUSTOM_OPTIONS=
+IMPORT_LIMIT=
+PLAYWRIGHT_LAUNCH_OPTIONS_EXECUTABLE_PATH=
+PLAYWRIGHT_WS_URL=
+MAX_WORKERS=
+DISABLE_PRESERVATION=
+NEXT_PUBLIC_RSS_POLLING_INTERVAL_MINUTES=
+RSS_SUBSCRIPTION_LIMIT_PER_USER=
+TEXT_CONTENT_LIMIT=
+SEARCH_FILTER_LIMIT=
+INDEX_TAKE_COUNT=
+MEILI_TIMEOUT=
+
+# AI Settings
+NEXT_PUBLIC_OLLAMA_ENDPOINT_URL=
+OLLAMA_MODEL=
+
+# https://ai-sdk.dev/providers/openai-compatible-providers
+OPENAI_API_KEY=
+OPENAI_MODEL=
+# Optional: Set a custom OpenAI base URL and name (for third-party providers)
+CUSTOM_OPENAI_BASE_URL=
+CUSTOM_OPENAI_NAME=
+
+# https://sdk.vercel.ai/providers/ai-sdk-providers/azure
+AZURE_API_KEY=
+AZURE_RESOURCE_NAME=
+AZURE_MODEL=
+
+# https://sdk.vercel.ai/providers/ai-sdk-providers/anthropic
+ANTHROPIC_API_KEY=
+ANTHROPIC_MODEL=
+
+# https://github.com/OpenRouterTeam/ai-sdk-provider
+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=
 
 # AWS S3 Settings
 SPACES_KEY=
 SPACES_SECRET=
 SPACES_ENDPOINT=
+SPACES_BUCKET_NAME=
 SPACES_REGION=
+SPACES_FORCE_PATH_STYLE=
 
 # SMTP Settings
 NEXT_PUBLIC_EMAIL_PROVIDER=
 EMAIL_FROM=
 EMAIL_SERVER=
+BASE_URL=
 
-# Stripe settings (You don't need these, it's for the cloud instance payments)
-NEXT_PUBLIC_STRIPE_IS_ACTIVE=
-STRIPE_SECRET_KEY=
-MONTHLY_PRICE_ID=
-YEARLY_PRICE_ID=
-NEXT_PUBLIC_TRIAL_PERIOD_DAYS=
-NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL=
-BASE_URL=http://localhost:3000
+# Proxy settings
+PROXY=
+PROXY_USERNAME=
+PROXY_PASSWORD=
+PROXY_BYPASS=
 
-# Docker postgres settings
-POSTGRES_PASSWORD=
+# PDF archive settings
+PDF_MARGIN_TOP=
+PDF_MARGIN_BOTTOM=
+
+#################
+# SSO Providers #
+#################
+
+# 42 School
+NEXT_PUBLIC_FORTYTWO_ENABLED=
+FORTYTWO_CUSTOM_NAME=
+FORTYTWO_CLIENT_ID=
+FORTYTWO_CLIENT_SECRET=
+
+# Apple
+NEXT_PUBLIC_APPLE_ENABLED=
+APPLE_CUSTOM_NAME=
+APPLE_ID=
+APPLE_SECRET=
+
+# Atlassian
+NEXT_PUBLIC_ATLASSIAN_ENABLED=
+ATLASSIAN_CUSTOM_NAME=
+ATLASSIAN_CLIENT_ID=
+ATLASSIAN_CLIENT_SECRET=
+ATLASSIAN_SCOPE=
+
+# Auth0
+NEXT_PUBLIC_AUTH0_ENABLED=
+AUTH0_CUSTOM_NAME=
+AUTH0_ISSUER=
+AUTH0_CLIENT_SECRET=
+AUTH0_CLIENT_ID=
+
+# Authelia
+NEXT_PUBLIC_AUTHELIA_ENABLED=
+AUTHELIA_CLIENT_ID=
+AUTHELIA_CLIENT_SECRET=
+AUTHELIA_WELLKNOWN_URL=
+
+# Authentik
+NEXT_PUBLIC_AUTHENTIK_ENABLED=
+AUTHENTIK_CUSTOM_NAME=
+AUTHENTIK_ISSUER=
+AUTHENTIK_CLIENT_ID=
+AUTHENTIK_CLIENT_SECRET=
+
+# Azure AD B2C
+NEXT_PUBLIC_AZURE_AD_B2C_ENABLED=
+AZURE_AD_B2C_TENANT_NAME=
+AZURE_AD_B2C_CLIENT_ID=
+AZURE_AD_B2C_CLIENT_SECRET=
+AZURE_AD_B2C_PRIMARY_USER_FLOW=
+
+# Azure AD
+NEXT_PUBLIC_AZURE_AD_ENABLED=
+AZURE_AD_CLIENT_ID=
+AZURE_AD_CLIENT_SECRET=
+AZURE_AD_TENANT_ID=
+
+# Battle.net
+NEXT_PUBLIC_BATTLENET_ENABLED=
+BATTLENET_CUSTOM_NAME=
+BATTLENET_CLIENT_ID=
+BATTLENET_CLIENT_SECRET=
+BATTLENET_ISSUER=
+
+# Box
+NEXT_PUBLIC_BOX_ENABLED=
+BOX_CUSTOM_NAME=
+BOX_CLIENT_ID=
+BOX_CLIENT_SECRET=
+
+# Bungie
+NEXT_PUBLIC_BUNGIE_ENABLED=
+BUNGIE_CUSTOM_NAME=
+BUNGIE_CLIENT_ID=
+BUNGIE_CLIENT_SECRET=
+BUNGIE_API_KEY=
+
+# Cognito
+NEXT_PUBLIC_COGNITO_ENABLED=
+COGNITO_CUSTOM_NAME=
+COGNITO_CLIENT_ID=
+COGNITO_CLIENT_SECRET=
+COGNITO_ISSUER=
+
+# Coinbase
+NEXT_PUBLIC_COINBASE_ENABLED=
+COINBASE_CUSTOM_NAME=
+COINBASE_CLIENT_ID=
+COINBASE_CLIENT_SECRET=
+
+# Discord
+NEXT_PUBLIC_DISCORD_ENABLED=
+DISCORD_CUSTOM_NAME=
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+
+# Dropbox
+NEXT_PUBLIC_DROPBOX_ENABLED=
+DROPBOX_CUSTOM_NAME=
+DROPBOX_CLIENT_ID=
+DROPBOX_CLIENT_SECRET=
+
+# DuendeIndentityServer6
+NEXT_PUBLIC_DUENDE_IDS6_ENABLED=
+DUENDE_IDS6_CUSTOM_NAME=
+DUENDE_IDS6_CLIENT_ID=
+DUENDE_IDS6_CLIENT_SECRET=
+DUENDE_IDS6_ISSUER=
+
+# EVE Online
+NEXT_PUBLIC_EVEONLINE_ENABLED=
+EVEONLINE_CUSTOM_NAME=
+EVEONLINE_CLIENT_ID=
+EVEONLINE_CLIENT_SECRET=
+
+# Facebook
+NEXT_PUBLIC_FACEBOOK_ENABLED=
+FACEBOOK_CUSTOM_NAME=
+FACEBOOK_CLIENT_ID=
+FACEBOOK_CLIENT_SECRET=
+
+# FACEIT
+NEXT_PUBLIC_FACEIT_ENABLED=
+FACEIT_CUSTOM_NAME=
+FACEIT_CLIENT_ID=
+FACEIT_CLIENT_SECRET=
+
+# Foursquare
+NEXT_PUBLIC_FOURSQUARE_ENABLED=
+FOURSQUARE_CUSTOM_NAME=
+FOURSQUARE_CLIENT_ID=
+FOURSQUARE_CLIENT_SECRET=
+FOURSQUARE_APIVERSION=
+
+# Freshbooks
+NEXT_PUBLIC_FRESHBOOKS_ENABLED=
+FRESHBOOKS_CUSTOM_NAME=
+FRESHBOOKS_CLIENT_ID=
+FRESHBOOKS_CLIENT_SECRET=
+
+# FusionAuth
+NEXT_PUBLIC_FUSIONAUTH_ENABLED=
+FUSIONAUTH_CUSTOM_NAME=
+FUSIONAUTH_CLIENT_ID=
+FUSIONAUTH_CLIENT_SECRET=
+FUSIONAUTH_ISSUER=
+FUSIONAUTH_TENANT_ID=
+
+# GitHub
+NEXT_PUBLIC_GITHUB_ENABLED=
+GITHUB_CUSTOM_NAME=
+GITHUB_ID=
+GITHUB_SECRET=
+
+# GitLab
+NEXT_PUBLIC_GITLAB_ENABLED=
+GITLAB_CUSTOM_NAME=
+GITLAB_CLIENT_ID=
+GITLAB_CLIENT_SECRET=
+GITLAB_AUTH_URL=
+
+# Google
+NEXT_PUBLIC_GOOGLE_ENABLED=
+GOOGLE_CUSTOM_NAME=
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# HubSpot
+NEXT_PUBLIC_HUBSPOT_ENABLED=
+HUBSPOT_CUSTOM_NAME=
+HUBSPOT_CLIENT_ID=
+HUBSPOT_CLIENT_SECRET=
+
+# IdentityServer4
+NEXT_PUBLIC_IDS4_ENABLED=
+IDS4_CUSTOM_NAME=
+IDS4_CLIENT_ID=
+IDS4_CLIENT_SECRET=
+IDS4_ISSUER=
+
+# Kakao
+NEXT_PUBLIC_KAKAO_ENABLED=
+KAKAO_CUSTOM_NAME=
+KAKAO_CLIENT_ID=
+KAKAO_CLIENT_SECRET=
+
+# Keycloak
+NEXT_PUBLIC_KEYCLOAK_ENABLED=
+KEYCLOAK_CUSTOM_NAME=
+KEYCLOAK_ISSUER=
+KEYCLOAK_CLIENT_ID=
+KEYCLOAK_CLIENT_SECRET=
+
+# LINE
+NEXT_PUBLIC_LINE_ENABLED=
+LINE_CUSTOM_NAME=
+LINE_CLIENT_ID=
+LINE_CLIENT_SECRET=
+
+# LinkedIn
+NEXT_PUBLIC_LINKEDIN_ENABLED=
+LINKEDIN_CUSTOM_NAME=
+LINKEDIN_CLIENT_ID=
+LINKEDIN_CLIENT_SECRET=
+
+# Mailchimp
+NEXT_PUBLIC_MAILCHIMP_ENABLED=
+MAILCHIMP_CUSTOM_NAME=
+MAILCHIMP_CLIENT_ID=
+MAILCHIMP_CLIENT_SECRET=
+
+# Mail.ru
+NEXT_PUBLIC_MAILRU_ENABLED=
+MAILRU_CUSTOM_NAME=
+MAILRU_CLIENT_ID=
+MAILRU_CLIENT_SECRET=
+
+# Naver
+NEXT_PUBLIC_NAVER_ENABLED=
+NAVER_CUSTOM_NAME=
+NAVER_CLIENT_ID=
+NAVER_CLIENT_SECRET=
+
+# Netlify
+NEXT_PUBLIC_NETLIFY_ENABLED=
+NETLIFY_CUSTOM_NAME=
+NETLIFY_CLIENT_ID=
+NETLIFY_CLIENT_SECRET=
+
+# Okta
+NEXT_PUBLIC_OKTA_ENABLED=
+OKTA_CUSTOM_NAME=
+OKTA_CLIENT_ID=
+OKTA_CLIENT_SECRET=
+OKTA_ISSUER=
+
+# OneLogin
+NEXT_PUBLIC_ONELOGIN_ENABLED=
+ONELOGIN_CUSTOM_NAME=
+ONELOGIN_CLIENT_ID=
+ONELOGIN_CLIENT_SECRET=
+ONELOGIN_ISSUER=
+
+# Osso
+NEXT_PUBLIC_OSSO_ENABLED=
+OSSO_CUSTOM_NAME=
+OSSO_CLIENT_ID=
+OSSO_CLIENT_SECRET=
+OSSO_ISSUER=
+
+# osu!
+NEXT_PUBLIC_OSU_ENABLED=
+OSU_CUSTOM_NAME=
+OSU_CLIENT_ID=
+OSU_CLIENT_SECRET=
+
+# Patreon
+NEXT_PUBLIC_PATREON_ENABLED=
+PATREON_CUSTOM_NAME=
+PATREON_CLIENT_ID=
+PATREON_CLIENT_SECRET=
+
+# Pinterest
+NEXT_PUBLIC_PINTEREST_ENABLED=
+PINTEREST_CUSTOM_NAME=
+PINTEREST_CLIENT_ID=
+PINTEREST_CLIENT_SECRET=
+
+# Pipedrive
+NEXT_PUBLIC_PIPEDRIVE_ENABLED=
+PIPEDRIVE_CUSTOM_NAME=
+PIPEDRIVE_CLIENT_ID=
+PIPEDRIVE_CLIENT_SECRET=
+
+# Reddit
+NEXT_PUBLIC_REDDIT_ENABLED=
+REDDIT_CUSTOM_NAME=
+REDDIT_CLIENT_ID=
+REDDIT_CLIENT_SECRET=
+
+# Salesforce
+NEXT_PUBLIC_SALESFORCE_ENABLED=
+SALESFORCE_CUSTOM_NAME=
+SALESFORCE_CLIENT_ID=
+SALESFORCE_CLIENT_SECRET=
+
+# Slack
+NEXT_PUBLIC_SLACK_ENABLED=
+SLACK_CUSTOM_NAME=
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
+# Spotify
+NEXT_PUBLIC_SPOTIFY_ENABLED=
+SPOTIFY_CUSTOM_NAME=
+SPOTIFY_CLIENT_ID=
+SPOTIFY_CLIENT_SECRET=
+
+# Strava
+NEXT_PUBLIC_STRAVA_ENABLED=
+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=
+TODOIST_CLIENT_ID=
+TODOIST_CLIENT_SECRET=
+
+# Twitch
+NEXT_PUBLIC_TWITCH_ENABLED=
+TWITCH_CUSTOM_NAME=
+TWITCH_CLIENT_ID=
+TWITCH_CLIENT_SECRET=
+
+# United Effects
+NEXT_PUBLIC_UNITED_EFFECTS_ENABLED=
+UNITED_EFFECTS_CUSTOM_NAME=
+UNITED_EFFECTS_CLIENT_ID=
+UNITED_EFFECTS_CLIENT_SECRET=
+UNITED_EFFECTS_ISSUER=
+
+# VK
+NEXT_PUBLIC_VK_ENABLED=
+VK_CUSTOM_NAME=
+VK_CLIENT_ID=
+VK_CLIENT_SECRET=
+
+# Wikimedia
+NEXT_PUBLIC_WIKIMEDIA_ENABLED=
+WIKIMEDIA_CUSTOM_NAME=
+WIKIMEDIA_CLIENT_ID=
+WIKIMEDIA_CLIENT_SECRET=
+
+# Wordpress.com
+NEXT_PUBLIC_WORDPRESS_ENABLED=
+WORDPRESS_CUSTOM_NAME=
+WORDPRESS_CLIENT_ID=
+WORDPRESS_CLIENT_SECRET=
+
+# Yandex
+NEXT_PUBLIC_YANDEX_ENABLED=
+YANDEX_CUSTOM_NAME=
+YANDEX_CLIENT_ID=
+YANDEX_CLIENT_SECRET=
+
+# Zitadel
+NEXT_PUBLIC_ZITADEL_ENABLED=
+ZITADEL_CUSTOM_NAME=
+ZITADEL_CLIENT_ID=
+ZITADEL_CLIENT_SECRET=
+ZITADEL_ISSUER=
+
+# Zoho
+NEXT_PUBLIC_ZOHO_ENABLED=
+ZOHO_CUSTOM_NAME=
+ZOHO_CLIENT_ID=
+ZOHO_CLIENT_SECRET=
+
+# Zoom
+NEXT_PUBLIC_ZOOM_ENABLED=
+ZOOM_CUSTOM_NAME=
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=

.eslintrc.json

@@ -1,6 +1,7 @@
 {
   "extends": "next/core-web-vitals",
   "rules": {
-    "react-hooks/exhaustive-deps": "off"
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off"
   }
 }

.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/ISSUE_TEMPLATE/ask-a-question.md

@@ -0,0 +1,20 @@
+---
+name: Ask a Question
+about: Ask about a particular topic
+title: ''
+labels: question
+assignees: ''
+
+---
+
+**Is your question related to a problem or code? Please describe.**
+A clear and concise description of what the problem or code is. Ex. I'm confused about how [...] works, or I'm facing an issue when [...]
+
+**Describe what you've tried to solve this question**
+Explain what steps or research you've already taken to try and understand or solve this.
+
+**Include any code or screenshots (if applicable)**
+Add any code snippets, error messages, or screenshots that might help others understand your question better.
+
+**Additional context**
+Include any additional context or details that might help get a clearer understanding of your question.

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,8 +1,8 @@
 ---
-name: Bug report
+name: Bug Report
 about: Create a report to help us improve
 title: ''
-labels: ''
+labels: bug
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/feature-request.md

@@ -1,8 +1,8 @@
 ---
-name: Feature request
+name: Feature Request
 about: Suggest an idea for this project
 title: ''
-labels: ''
+labels: enhancement
 assignees: ''
 
 ---

.github/ISSUE_TEMPLATE/installation-problem.yml

@@ -0,0 +1,13 @@
+name: Installation Problem
+title: Installation Problem
+description: Report an issue with installation
+labels: installation
+body:
+  - type: textarea
+    id: feature-description
+    validations:
+      required: true
+    attributes:
+      label: For installation issues, please visit discord.linkwarden.app
+      description: "Invite link: https://discord.com/invite/CtuYV47nuJ"
+      placeholder: Please do not submit installation issues on GitHub.

.github/SECURITY.md

@@ -1,17 +1,19 @@
-# Security Policy
+# Security
 
-## Supported Versions
+The Linkwarden team and community take security bugs in Linkwarden seriously. We appreciate your efforts to responsibly disclose your findings, and will make every effort to acknowledge your contributions.
 
-| Version | Supported |
-| ------- | --------- |
-| 1.x.x   | ✅        |
+# Reporting Security Issues
 
-## Reporting a Vulnerability
+**Please do not report security vulnerabilities through public GitHub issues.**
 
-First off, we really appreciate the time you spent!
+Instead, please use the GitHub Security Advisory ["Report a Vulnerability"](https://github.com/linkwarden/linkwarden/security/advisories/new) tab.
 
-If you found a vulnerability, these are the ways you can reach us:
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message:
+[security@linkwarden.app](mailto:security@linkwarden.app)
 
-Email: [security@linkwarden.app](mailto:security@linkwarden.app)
 
-Or you can directly DM me via Twitter: [@daniel31x13](https://twitter.com/Daniel31X13).
+After the initial reply to your report, the security team will keep you informed of the progress towards a fix and full announcement, and may ask for additional information or guidance.
+
+# Preferred Languages
+
+We prefer all communications to be in English.

.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/check-branch.yml

@@ -0,0 +1,18 @@
+name: Check pull request source branch
+on:
+  pull_request_target:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - edited
+jobs:
+  check-branches:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check branches
+        run: |
+          if [ ${{ github.head_ref }} != "dev" ] && [ ${{ github.base_ref }} == "main" ]; then
+            echo "Merge requests to main branch are only allowed from dev branch. Please rebase your changes to dev branch."
+            exit 1
+          fi

.github/workflows/locale-action.yml

@@ -0,0 +1,42 @@
+name: Manage i18n pull requests
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize, ready_for_review]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  rewrite-author:
+    if: github.event.pull_request.head.ref == 'i18n'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout i18n branch
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+
+      - name: Skip if already rewritten
+        run: |
+          if [ "$(git show -s --format='%an')" = 'LinkwardenBot' ]; then
+            echo "Already rewritten – skipping."
+            exit 0
+          fi
+
+      - name: Configure bot identity
+        run: |
+          git config user.name  "LinkwardenBot"
+          git config user.email "bot@linkwarden.app"
+
+      - name: Amend just the PR commits
+        env:
+          BASE_SHA: ${{ github.event.pull_request.base.sha }}
+        run: |
+          git rebase --committer-date-is-author-date --exec 'git commit --amend --no-edit --allow-empty --author="LinkwardenBot <bot@linkwarden.app>"' "$BASE_SHA"
+
+      - name: Push rewritten history
+        run: git push --force-with-lease origin HEAD:i18n

.github/workflows/playwright-tests.yml

@@ -0,0 +1,145 @@
+name: Linkwarden Playwright Tests
+
+on:
+  push:
+    branches:
+      - main
+      - qacomet/**
+  pull_request:
+  workflow_dispatch:
+
+env:
+  PGHOST: localhost
+  PGPORT: 5432
+  PGUSER: postgres
+  PGPASSWORD: password
+  PGDATABASE: postgres
+
+  TEST_POSTGRES_USER: test_linkwarden_user
+  TEST_POSTGRES_PASSWORD: password
+  TEST_POSTGRES_DATABASE: test_linkwarden_db
+  TEST_POSTGRES_DATABASE_TEMPLATE: test_linkwarden_db_template
+  TEST_POSTGRES_HOST: localhost
+  TEST_POSTGREST_PORT: 5432
+  PRODUCTION_POSTGRES_DATABASE: linkwarden_db
+
+  NEXTAUTH_SECRET: very_sensitive_secret
+  NEXTAUTH_URL: http://localhost:3000/api/v1/auth
+
+  # Manual installation database settings
+  DATABASE_URL: postgresql://test_linkwarden_user:password@localhost:5432/test_linkwarden_db
+
+  # Docker installation database settings
+  POSTGRES_PASSWORD: password
+
+  TEST_USERNAME: test-user
+  TEST_PASSWORD: password
+
+jobs:
+  playwright-test-runner:
+    strategy:
+      matrix:
+        test_case: ['@login']
+    timeout-minutes: 20
+    runs-on:
+      - ubuntu-22.04
+    services:
+      postgres:
+        image: postgres:16-alpine
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: password
+          POSTGRES_DB: postgres
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Use Node.js and Enable Yarn 4
+        uses: actions/setup-node@v4
+        with:
+          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"
+          psql -h localhost -U postgres -d postgres -c "CREATE USER ${{ env.TEST_POSTGRES_USER }} WITH PASSWORD '${{ env.TEST_POSTGRES_PASSWORD }}';"
+          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 --immutable
+
+      - name: Cache playwright dependencies
+        uses: awalsh128/cache-apt-pkgs-action@latest
+        with:
+          packages: |
+            ffmpeg fonts-freefont-ttf fonts-ipafont-gothic fonts-tlwg-loma-otf
+            fonts-unifont fonts-wqy-zenhei gstreamer1.0-libav gstreamer1.0-plugins-bad
+            gstreamer1.0-plugins-base gstreamer1.0-plugins-good libaa1 libass9
+            libasyncns0 libavc1394-0 libavcodec58 libavdevice58 libavfilter7
+            libavformat58 libavutil56 libbluray2 libbs2b0 libcaca0 libcdio-cdda2
+            libcdio-paranoia2 libcdio19 libcdparanoia0 libchromaprint1 libcodec2-1.0
+            libdc1394-25 libdca0 libdecor-0-0 libdv4 libdvdnav4 libdvdread8 libegl-mesa0
+            libegl1 libevdev2 libevent-2.1-7 libfaad2 libffi7 libflac8 libflite1
+            libfluidsynth3 libfreeaptx0 libgles2 libgme0 libgsm1 libgssdp-1.2-0
+            libgstreamer-gl1.0-0 libgstreamer-plugins-bad1.0-0
+            libgstreamer-plugins-base1.0-0 libgstreamer-plugins-good1.0-0 libgupnp-1.2-1
+            libgupnp-igd-1.0-4 libharfbuzz-icu0 libhyphen0 libiec61883-0
+            libinstpatch-1.0-2 libjack-jackd2-0 libkate1 libldacbt-enc2 liblilv-0-0
+            libltc11 libmanette-0.2-0 libmfx1 libmjpegutils-2.1-0 libmodplug1
+            libmp3lame0 libmpcdec6 libmpeg2encpp-2.1-0 libmpg123-0 libmplex2-2.1-0
+            libmysofa1 libnice10 libnotify4 libopenal-data libopenal1 libopengl0
+            libopenh264-6 libopenmpt0 libopenni2-0 libopus0 liborc-0.4-0
+            libpocketsphinx3 libpostproc55 libpulse0 libqrencode4 libraw1394-11
+            librubberband2 libsamplerate0 libsbc1 libsdl2-2.0-0 libserd-0-0 libshine3
+            libshout3 libsndfile1 libsndio7.0 libsord-0-0 libsoundtouch1 libsoup-3.0-0
+            libsoup-3.0-common libsoxr0 libspandsp2 libspeex1 libsphinxbase3
+            libsratom-0-0 libsrt1.4-gnutls libsrtp2-1 libssh-gcrypt-4 libswresample3
+            libswscale5 libtag1v5 libtag1v5-vanilla libtheora0 libtwolame0 libudfread0
+            libv4l-0 libv4lconvert0 libva-drm2 libva-x11-2 libva2 libvdpau1
+            libvidstab1.1 libvisual-0.4-0 libvo-aacenc0 libvo-amrwbenc0 libvorbisenc2
+            libvpx7 libwavpack1 libwebrtc-audio-processing1 libwildmidi2 libwoff1
+            libx264-163 libxcb-shape0 libxv1 libxvidcore4 libzbar0 libzimg2
+            libzvbi-common libzvbi0 libzxingcore1 ocl-icd-libopencl1 timgm6mb-soundfont
+            xfonts-cyrillic xfonts-encodings xfonts-scalable xfonts-utils
+
+      - name: Cache playwright browsers
+        id: cache-playwright
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+
+      - name: Setup project
+        run: |
+          yarn prisma:generate
+          yarn web:build
+          yarn prisma:deploy
+
+      - name: Start linkwarden server and worker
+        run: yarn concurrently:start &
+
+      - name: Run Tests
+        run: yarn workspace @linkwarden/web playwright test --grep ${{ matrix.test_case }}
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: test-results
+          retention-days: 30

.github/workflows/release-container.yml

@@ -1,6 +1,7 @@
 name: Create and publish a container image on release
 
 on:
+  workflow_dispatch:
   push:
     tags:
       - "*"
@@ -27,7 +28,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Log in to the Container registry
-        uses: docker/login-action@v2
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.REGISTRY }}
           username: ${{ github.actor }}
@@ -40,7 +41,7 @@ jobs:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v3
+        uses: docker/build-push-action@v6
         with:
           context: .
           push: true

.gitignore

@@ -1,13 +1,14 @@
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
 
 # next.js
-/.next/
+.next
 /out/
 
 # production
@@ -34,16 +35,25 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# generated files and folders
-/data
-.idea
-prisma/dev.db
-
 # tests
-/tests
-/test-results/
-/playwright-report/
-/playwright/.cache/
+/apps/web/tests
+/apps/web/test-results/
+/apps/web/blob-report/
+/apps/web/playwright-report/
+/apps/web/playwright/.cache/
+/apps/web/playwright/.auth/
 
 # docker
-pgdata
+pgdata
+certificates
+
+# generated files and folders
+/data
+/data.ms
+meilisearch
+meili_data
+.idea
+prisma/dev.db
+.turbo
+
+service-account-file.json

.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+.next
+/public
+
+*.lock
+*.log
+
+.github
+
+data
+pgdata

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
+}

.yarnrc.yml

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

Dockerfile

@@ -1,4 +1,22 @@
-FROM node:18.18-bullseye-slim
+# Stage: monolith-builder
+# Purpose: Uses the Rust image to build monolith
+# Notes:
+#  - Fine to leave extra here, as only the resulting binary is copied out
+FROM docker.io/rust:1.86-bullseye AS monolith-builder
+
+RUN set -eux && cargo install --locked monolith
+
+# Stage: main-app
+# Purpose: Compiles the frontend and
+# Notes:
+#  - Nothing extra should be left here.  All commands should cleanup
+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
 
@@ -6,18 +24,47 @@ RUN mkdir /data
 
 WORKDIR /data
 
-COPY ./package.json ./yarn.lock ./playwright.config.ts ./
+RUN corepack enable
 
-# Increase timeout to pass github actions arm64 build
-RUN yarn install --network-timeout 10000000
+COPY ./.yarnrc.yml ./
 
-RUN npx playwright install-deps && \
+COPY ./apps/web/package.json ./apps/web/playwright.config.ts ./apps/web/
+
+COPY ./apps/worker/package.json ./apps/worker/
+
+COPY ./packages ./packages
+
+COPY ./yarn.lock ./package.json ./
+
+RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn \
+    set -eux && \
+    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 && \
+    apt-get autoremove && \
+    apt-get clean && \
+    rm -rf /var/lib/apt/lists/*
+
+# Copy the compiled monolith binary from the builder stage
+COPY --from=monolith-builder /usr/local/cargo/bin/monolith /usr/local/bin/monolith
+
+RUN set -eux && \
     apt-get clean && \
     yarn cache clean
 
 COPY . .
 
-RUN yarn prisma generate && \
-    yarn build
+RUN yarn prisma:generate && \
+    yarn web:build && \
+    rm -rf apps/web/.next/cache
 
-CMD yarn prisma migrate deploy && yarn start
+HEALTHCHECK --interval=30s \
+            --timeout=5s \
+            --start-period=10s \
+            --retries=3 \
+            CMD [ "/usr/bin/curl", "--silent", "--fail", "http://127.0.0.1:3000/" ]
+
+EXPOSE 3000
+
+CMD ["sh", "-c", "yarn prisma:deploy && yarn concurrently:start"]

README.md

@@ -1,94 +1,138 @@
 <div align="center">
   <img src="./assets/logo.png" width="100px" />
   <h1>Linkwarden</h1>
+  <h3>Bookmarks, Evolved</h3>
 
-<a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat-square" alt="Discord"></a>
-<img alt="GitHub commits since latest release (by SemVer including pre-releases)" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/v1.1.0/dev">
-<img src="https://img.shields.io/github/languages/top/linkwarden/linkwarden?style=flat-square" alt="Top Language">
-<img src="https://img.shields.io/github/stars/linkwarden/linkwarden?style=flat-square" alt="Github Stars">
+<a href="https://trendshift.io/repositories/4006" target="_blank"><img src="https://trendshift.io/api/badge/repositories/4006" alt="linkwarden%2Flinkwarden | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+
+<a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat" alt="Discord"></a>
+<a href="https://twitter.com/LinkwardenHQ"><img src="https://img.shields.io/twitter/follow/linkwarden" alt="Twitter"></a> <a href="https://news.ycombinator.com/item?id=43856801"><img src="https://img.shields.io/badge/Hacker%20News-301-%23FF6600"></img></a>
+
+<a href="https://github.com/linkwarden/linkwarden/releases"><img alt="GitHub release" src="https://img.shields.io/github/v/release/linkwarden/linkwarden"></a>
+<a href="https://crowdin.com/project/linkwarden">
+<img src="https://badges.crowdin.net/linkwarden/localized.svg" alt="Crowdin" /></a>
+<a href="https://opencollective.com/linkwarden"><img src="https://img.shields.io/opencollective/all/linkwarden" alt="Open Collective"></a>
 
 </div>
 
 <div align='center'>
 
-[Website](https://linkwarden.app) | [Getting Started](https://docs.linkwarden.app) | [Features](https://github.com/linkwarden/linkwarden#features) | [Roadmap](https://github.com/orgs/linkwarden/projects/1) | [Screenshots](https://github.com/linkwarden/linkwarden#screenshots) | [Support ❤](https://github.com/linkwarden/linkwarden#support-)
+[« LAUNCH DEMO »](https://demo.linkwarden.app)
+
+[Cloud](https://cloud.linkwarden.app) · [Website](https://linkwarden.app) · [Features](https://github.com/linkwarden/linkwarden#features) · [Docs](https://docs.linkwarden.app)
+
+<img src="./assets/home.png" />
 
 </div>
 
 ## Intro & motivation
 
-**Linkwarden is a self-hosted, open-source collaborative bookmark manager to collect, organize and archive webpages.** The objective is to organize useful webpages and articles you find across the web in one place, and since useful webpages can go away (see the inevitability of [Link Rot](https://www.howtogeek.com/786227/what-is-link-rot-and-how-does-it-threaten-the-web/)), Linkwarden also saves a copy of each webpage as a Screenshot and PDF, ensuring accessibility even if the original content is no longer available.
+**Linkwarden is a self-hosted, open-source collaborative bookmark manager to collect, read, annotate, and fully preserve what matters, all in one place.**
 
-Additionally, Linkwarden is designed with collaboration in mind, sharing links with the public and/or allowing multiple users to work together seamlessly.
+The objective is to organize useful webpages and articles you find across the web in one place, and since useful webpages can go away (see the inevitability of [Link Rot](https://en.wikipedia.org/wiki/Link_rot)), Linkwarden also saves a copy of each webpage as a Screenshot and PDF, ensuring accessibility even if the original content is no longer available.
 
-<img src="./assets/showcase_image.png" />
+In addition to preservation, Linkwarden provides a user-friendly reading and annotation experience that blends the simplicity of a “read-it-later” tool with the reliability of a web archive. Whether you’re highlighting key ideas, jotting down thoughts, or revisiting content long after it’s disappeared from the web, Linkwarden keeps your knowledge accessible and organized.
 
-> **Note**
-> Our official [Cloud](https://linkwarden.app/#pricing) offering provides the simplest way to begin using Linkwarden and it's the preferred choice for many due to its time-saving benefits. <br> Your subscription supports our hosting infrastructure and ongoing development. <br> Alternatively, if you prefer [self-hosting](https://docs.linkwarden.app/self-hosting/installation) Linkwarden, no problem! You'll still have access to all the premium features.
+Linkwarden is also designed with collaboration in mind, enabling you to share links with the public and/or collaborate seamlessly with multiple users.
 
-<details>
-<summary><b>A bit of a "history"</b></summary>
-Linkwarden has been completely rebuilt and redesigned from ground up, so pretty much the only thing it has in common with its predecessor is the idea behind it - bookmark management.
-
-**What happened to the old version?**
-We highly recommend that you don't use the old version because it is no longer maintained and has far fewer features. However, if you still want to check it out, we've forked the old version from the current repository into [this repo](https://github.com/linkwarden/linkwarden-old).
-
-</details>
+> [!TIP]  
+> Our official [Cloud](https://linkwarden.app/#pricing) offering provides the simplest way to begin using Linkwarden and it's the preferred choice for many due to its time-saving benefits. <br> Your subscription supports our hosting infrastructure and ongoing development. <br> Alternatively, if you prefer self-hosting Linkwarden, you can do so by following our [Installation documentation](https://docs.linkwarden.app/self-hosting/installation).
 
 ## Features
 
-- 📸 Auto capture a screenshot and a PDF of each link.
-- 🏛️ Send your webpage to Wayback Machine archive.org for a snapshot.
-- 📂 Organize links by collection, name, description and multiple tags.
-- 👥 Collaborate on gathering links in a collection.
-- 🔐 Customize the permissions of each member.
-- 🌐 Share your collected links with the world.
-- 📌 Pin your favorite links to dashboard.
-- 🔍 Search, filter and sort by link details.
-- 📱 Responsive design and supports most browsers.
-- 🌓 Dark/Light mode support.
-- 🧩 Browser extension, managed by the community [check it out!](https://github.com/linkwarden/browser-extension)
-- ⬇️ Import your bookmarks from other browsers.
+- 📸 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)!)
+- ⬆️ 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 ⭐
+
+![Star Us](https://raw.githubusercontent.com/linkwarden/linkwarden/main/assets/star_repo.gif)
+
+## We're building our Community 🌐
+
+Join and follow us in the following platforms to stay up to date about the most recent features and for support:
+
+<a href="https://discord.com/invite/CtuYV47nuJ"><img src="https://img.shields.io/discord/1117993124669702164?logo=discord&style=flat" alt="Discord"></a>
+
+<a href="https://twitter.com/LinkwardenHQ"><img src="https://img.shields.io/twitter/follow/linkwarden" alt="Twitter"></a>
+
+<a href="https://fosstodon.org/@linkwarden"><img src="https://img.shields.io/mastodon/follow/110748840237143200?domain=https%3A%2F%2Ffosstodon.org" alt="Mastodon"></a>
 
 ## Suggestions
 
-We usually go after the [popular suggestions](https://github.com/linkwarden/linkwarden/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc). Feel free to open a [new issue](https://github.com/linkwarden/linkwarden/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) to suggest one - others might be interested too! :)
+We _usually_ go after the [popular suggestions](https://github.com/linkwarden/linkwarden/issues?q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc). Feel free to open a [new issue](https://github.com/linkwarden/linkwarden/issues/new?assignees=&labels=enhancement&projects=&template=feature_request.md&title=) to suggest one - others might be interested too! :)
 
 ## Roadmap
 
 Make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/projects/1).
 
-## Docs
+## Community Projects
 
-For information on how to get started or to set up your own instance, please visit the [documentation](https://docs.linkwarden.app).
+Here are some community-maintained projects that are built around Linkwarden:
 
-## Main Tech Stack
-
-- NextJS
-- TypeScript
-- Tailwind
-- Prisma
-- Zustand
+- [My Links](https://apps.apple.com/ca/app/my-links-for-linkwarden/id6504573402) - iOS and MacOS Apps, maintained by [JGeek00](https://github.com/JGeek00).
+- [LinkDroid](https://fossdroid.com/a/linkdroid-for-linkwarden.html) - Android App with share sheet integration, [source code](https://github.com/Dacid99/LinkDroid-for-Linkwarden).
+- [LinkGuardian](https://github.com/Elbullazul/LinkGuardian) - An Android client for Linkwarden. Built with Kotlin and Jetpack compose.
+- [StarWarden](https://github.com/rtuszik/starwarden) - A browser extension to save your starred GitHub repositories to Linkwarden.
 
 ## Development
 
-If you want to contribute, Thanks! Start by checking our [public roadmap](https://github.com/orgs/linkwarden/projects/1), there you'll see a [README for contributers](https://github.com/orgs/linkwarden/projects/1?pane=issue&itemId=34708277) for the rest of the info on how to contribute to this repo.
+If you want to contribute, Thanks! Start by choosing one of our [popular suggestions](https://github.com/linkwarden/linkwarden/issues?q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc), just please stay in touch with [@daniel31x13](https://github.com/daniel31x13) before starting.
+
+# Translations
+
+If you want to help us translate Linkwarden to your language, please check out our [Crowdin page](https://crowdin.com/project/linkwarden) and start translating. We would love to have your help!
+
+To start translating a new language, please create an issue so we can set it up for you. New languages will be added once they reach at least 50% translation completion.
+
+<a href="https://crowdin.com/project/linkwarden">
+<img src="https://badges.crowdin.net/linkwarden/localized.svg" alt="Crowdin" /></a>
 
 ## Security
 
 If you found a security vulnerability, please do **not** create a public issue, instead send an email to [security@linkwarden.app](mailto:security@linkwarden.app) stating the vulnerability. Thanks!
 
-## Screenshots
-
-<div align="center">
-<img src="./assets/collections.png" height="150" />
-
-<img src="./assets/collaborators.png" height="150" />
-
-<img src="./assets/link_details.png" height="150" />
-</div>
-
-## Support ❤
+## Support <3
 
 Other than using our official [Cloud](https://linkwarden.app/#pricing) offering, any [donations](https://opencollective.com/linkwarden) are highly appreciated as well!
 
@@ -96,7 +140,12 @@ Here are the other ways to support/cheer this project:
 
 - Starring this repository.
 - Joining us on [Discord](https://discord.com/invite/CtuYV47nuJ).
-- Following @daniel31x13 on [Mastodon](https://mastodon.social/@daniel31x13), [Twitter](https://twitter.com/daniel31x13) and [GitHub](https://github.com/daniel31x13).
 - Referring Linkwarden to a friend.
 
 If you did any of the above, Thanksss! Otherwise thanks.
+
+## Thanks to All the Contributors 💪
+
+Huge thanks to these guys for spending their time helping Linkwarden grow. They rock! ⚡️
+
+<img src="https://contributors-img.web.app/image?repo=linkwarden/linkwarden" alt="Contributors"/>

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/.env.sample

@@ -0,0 +1,2 @@
+LINKWARDEN_URL=
+EXPO_PUBLIC_SHOW_LOGS=

apps/mobile/.gitignore

@@ -0,0 +1,46 @@
+# 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/
+
+service-account-file.json
+
+.env.local

apps/mobile/app.json

@@ -0,0 +1,108 @@
+{
+  "expo": {
+    "name": "Linkwarden",
+    "slug": "linkwarden",
+    "version": "1.1.1",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "linkwarden",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "app.linkwarden",
+      "entitlements": {
+        "com.apple.security.application-groups": ["group.app.linkwarden"]
+      },
+      "infoPlist": {
+        "ITSAppUsesNonExemptEncryption": false,
+        "NSAppTransportSecurity": {
+          "NSAllowsArbitraryLoads": true
+        }
+      }
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/maskable_logo.jpeg",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "app.linkwarden"
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#FFFFFF",
+          "dark": {
+            "image": "./assets/images/splash-icon.png",
+            "resizeMode": "contain",
+            "backgroundColor": "#171717"
+          }
+        }
+      ],
+      "expo-secure-store",
+      [
+        "expo-share-intent",
+        {
+          "iosAppGroupIdentifier": "group.app.linkwarden",
+          "iosActivationRules": "SUBQUERY (extensionItems, $extensionItem, SUBQUERY ($extensionItem.attachments, $attachment, (ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO \"public.url\" OR ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO \"public.text\" OR ANY $attachment.registeredTypeIdentifiers UTI-CONFORMS-TO \"public.plain-text\")).@count > 0).@count > 0",
+          "androidIntentFilters": ["text/*"]
+        }
+      ],
+      [
+        "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

@@ -0,0 +1,81 @@
+import { Tabs } from "expo-router";
+import React from "react";
+import { Platform } from "react-native";
+import HapticTab from "@/components/HapticTab";
+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();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarBackground: TabBarBackground,
+        tabBarActiveTintColor: rawTheme[colorScheme as ThemeName].primary,
+        tabBarInactiveTintColor: rawTheme[colorScheme as ThemeName].neutral,
+        tabBarButton: HapticTab,
+        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,
+          },
+        }),
+      }}
+    >
+      <Tabs.Screen
+        name="dashboard"
+        options={{
+          title: "Dashboard",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <House size={24} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="links"
+        options={{
+          title: "Links",
+          headerShown: false,
+          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
+        name="settings"
+        options={{
+          title: "Settings",
+          headerShown: false,
+          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/global";
+
+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

@@ -0,0 +1,72 @@
+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, useMemo } from "react";
+import { useCollections } from "@linkwarden/router/collections";
+import Links from "@/components/Links";
+
+export default function LinksScreen() {
+  const { auth } = useAuthStore();
+  const { search, section, collectionId } = useLocalSearchParams<{
+    search?: string;
+    section?: "pinned-links" | "recent-links" | "collection";
+    collectionId?: string;
+  }>();
+
+  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: title,
+      headerSearchBarOptions: {
+        placeholder: `Search ${title}`,
+      },
+    });
+  }, [title, navigation]);
+
+  const { links, data } = useLinks(
+    {
+      sort: 0,
+      searchQueryString: decodeURIComponent(search ?? ""),
+      collectionId: Number(collectionId),
+      pinnedOnly: section === "pinned-links",
+    },
+    auth
+  );
+
+  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)/dashboard/_layout.tsx

@@ -0,0 +1,89 @@
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Stack, useRouter } from "expo-router";
+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 Layout() {
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerLargeTitle: true,
+        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",
+          headerRight: () => (
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <TouchableOpacity>
+                  <Plus
+                    size={21}
+                    color={rawTheme[colorScheme as ThemeName].primary}
+                  />
+                </TouchableOpacity>
+              </DropdownMenu.Trigger>
+
+              <DropdownMenu.Content>
+                <DropdownMenu.Item
+                  key="new-link"
+                  onSelect={() => SheetManager.show("add-link-sheet")}
+                >
+                  <DropdownMenu.ItemTitle>New Link</DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  key="new-collection"
+                  onSelect={() => SheetManager.show("new-collection-sheet")}
+                >
+                  <DropdownMenu.ItemTitle>
+                    New Collection
+                  </DropdownMenu.ItemTitle>
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          ),
+        }}
+      />
+      <Stack.Screen
+        name="[section]"
+        options={{
+          headerTitle: "Links",
+          headerBackTitle: "Back",
+          headerSearchBarOptions: {
+            placeholder: "Search",
+            autoCapitalize: "none",
+            headerIconColor: colorScheme === "dark" ? "white" : "black",
+            onChangeText: (e) => {
+              router.setParams({
+                search: encodeURIComponent(e.nativeEvent.text),
+              });
+            },
+          },
+        }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,147 @@
+import {
+  ActivityIndicator,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
+import React, { useEffect, useMemo, useState } from "react";
+import { useDashboardData } from "@linkwarden/router/dashboardData";
+import useAuthStore from "@/store/auth";
+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 { 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();
+  const {
+    data: { links = [], numberOfPinnedLinks, collectionLinks = {} } = {
+      links: [],
+    },
+    ...dashboardData
+  } = useDashboardData(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<
+    DashboardSectionType[]
+  >(user?.dashboardSections || []);
+
+  const [numberOfLinks, setNumberOfLinks] = useState(0);
+
+  useEffect(() => {
+    setDashboardSections(user?.dashboardSections || []);
+  }, [user?.dashboardSections]);
+
+  useEffect(() => {
+    setNumberOfLinks(
+      collections?.reduce?.(
+        (accumulator, collection) =>
+          accumulator + (collection._count as any).links,
+        0
+      )
+    );
+  }, [collections]);
+
+  const orderedSections = useMemo(() => {
+    return [...dashboardSections].sort((a, b) => {
+      const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+      const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+      return orderA - orderB;
+    });
+  }, [dashboardSections]);
+
+  const [pullRefreshing, setPullRefreshing] = useState(false);
+
+  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>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 49,
+      flexDirection: "column",
+      gap: 15,
+      paddingVertical: 20,
+    },
+    default: {
+      flexDirection: "column",
+      gap: 15,
+      paddingVertical: 20,
+    },
+  }),
+});

apps/mobile/app/(tabs)/links/_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: "Links",
+        headerLargeTitle: true,
+        headerTransparent: Platform.OS === "ios" ? true : false,
+        headerShadowVisible: false,
+        headerBlurEffect:
+          colorScheme === "dark" ? "systemMaterialDark" : "systemMaterial",
+        headerTintColor: colorScheme === "dark" ? "white" : "black",
+        headerSearchBarOptions: {
+          placeholder: "Search Links",
+          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)/links/index.tsx

@@ -0,0 +1,39 @@
+import { useLinks } from "@linkwarden/router/links";
+import { View, StyleSheet, Platform } from "react-native";
+import useAuthStore from "@/store/auth";
+import { useLocalSearchParams } from "expo-router";
+import React from "react";
+import Links from "@/components/Links";
+
+export default function LinksScreen() {
+  const { auth } = useAuthStore();
+  const { search } = useLocalSearchParams<{ search?: string }>();
+
+  const { links, data } = useLinks(
+    {
+      sort: 0,
+      searchQueryString: decodeURIComponent(search ?? ""),
+    },
+    auth
+  );
+
+  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)/settings/_layout.tsx

@@ -0,0 +1,43 @@
+import { Stack } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Platform } from "react-native";
+
+export default function Layout() {
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <Stack
+      screenOptions={{
+        headerTitle: "Settings",
+        headerLargeTitle: true,
+        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"],
+        },
+        headerBackTitle: "Back",
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+                ? rawTheme["dark"]["base-100"]
+                : "white",
+        },
+      }}
+    >
+      <Stack.Screen name="index" />
+      <Stack.Screen
+        name="preferredCollection"
+        options={{
+          headerTitle: "Preferred Collection",
+          headerLargeTitle: false,
+        }}
+      />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,273 @@
+import useAuthStore from "@/store/auth";
+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,
+  ChevronRight,
+  ExternalLink,
+  Folder,
+  LogOut,
+  Mail,
+  Moon,
+  Smartphone,
+  Sun,
+} from "lucide-react-native";
+import useDataStore from "@/store/data";
+import * as Clipboard from "expo-clipboard";
+import { useRouter } from "expo-router";
+
+export default function SettingsScreen() {
+  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]);
+
+  const router = useRouter();
+
+  return (
+    <View
+      style={styles.container}
+      collapsable={false}
+      collapsableChildren={false}
+      className="bg-base-100"
+    >
+      <ScrollView
+        contentContainerStyle={{
+          padding: 20,
+        }}
+        contentContainerClassName="flex-col gap-6"
+        contentInsetAdjustmentBehavior="automatic"
+      >
+        <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">Save Shared Links To</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={() => router.navigate("/settings/preferredCollection")}
+            >
+              <View className="flex-row items-center gap-2">
+                <Folder
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-base-content">Preferred collection</Text>
+              </View>
+              <View className="flex-row items-center gap-2">
+                <Text numberOfLines={1} className="text-neutral max-w-[140px]">
+                  {data.preferredCollection?.name || "None"}
+                </Text>
+                <ChevronRight
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+              </View>
+            </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: Platform.select({
+    ios: {
+      flex: 1,
+      paddingBottom: 83,
+    },
+    default: {
+      flex: 1,
+    },
+  }),
+});

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

@@ -0,0 +1,99 @@
+import { View, Text, FlatList, TouchableOpacity } from "react-native";
+import React, { useCallback, useMemo, useState } from "react";
+import useAuthStore from "@/store/auth";
+import useDataStore from "@/store/data";
+import { useCollections } from "@linkwarden/router/collections";
+import { CollectionIncludingMembersAndLinkCount } from "@linkwarden/types/global";
+import Input from "@/components/ui/Input";
+import { Folder, Check } from "lucide-react-native";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+
+const PreferredCollectionScreen = () => {
+  const { auth } = useAuthStore();
+  const { data, updateData } = useDataStore();
+  const collections = useCollections(auth);
+  const { colorScheme } = useColorScheme();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredCollections = useMemo(() => {
+    if (!collections.data) return [];
+    const q = searchQuery.trim().toLowerCase();
+    if (q === "") return collections.data;
+    return collections.data.filter((col) => col.name.toLowerCase().includes(q));
+  }, [collections.data, searchQuery]);
+
+  const renderCollection = useCallback(
+    ({
+      item: collection,
+    }: {
+      item: CollectionIncludingMembersAndLinkCount;
+    }) => {
+      const isSelected = data.preferredCollection?.id === collection.id;
+
+      return (
+        <TouchableOpacity
+          className="bg-base-200 rounded-lg px-4 py-3 mb-3 flex-row items-center justify-between"
+          onPress={() => updateData({ preferredCollection: collection })}
+        >
+          <View className="flex-row items-center gap-2 w-[70%]">
+            <Folder
+              size={20}
+              fill={collection.color || "gray"}
+              color={collection.color || "gray"}
+            />
+            <Text numberOfLines={1} className="text-base-content">
+              {collection.name}
+            </Text>
+          </View>
+          <View className="flex-row items-center gap-2">
+            {isSelected ? (
+              <Check
+                size={16}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+            ) : null}
+            <Text className="text-neutral">
+              {collection._count?.links ?? 0}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    [colorScheme, data.preferredCollection?.id, updateData]
+  );
+
+  return (
+    <View className="flex-1 bg-base-100">
+      <FlatList
+        data={filteredCollections}
+        keyExtractor={(item) => item.id?.toString() || ""}
+        renderItem={renderCollection}
+        contentContainerStyle={{
+          paddingHorizontal: 20,
+          paddingTop: 20,
+          paddingBottom: 20,
+        }}
+        contentInsetAdjustmentBehavior="automatic"
+        ListHeaderComponent={
+          <Input
+            placeholder="Search collections"
+            className="mb-4 bg-base-200 h-10"
+            value={searchQuery}
+            onChangeText={setSearchQuery}
+          />
+        }
+        ListEmptyComponent={
+          <Text
+            style={{ textAlign: "center", marginTop: 20 }}
+            className="text-neutral"
+          >
+            No collections match “{searchQuery}”
+          </Text>
+        }
+      />
+    </View>
+  );
+};
+
+export default PreferredCollectionScreen;

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/global";
+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/+not-found.tsx

@@ -0,0 +1,20 @@
+import { Link, Stack } from "expo-router";
+import { View, StyleSheet } from "react-native";
+
+export default function NotFoundScreen() {
+  return (
+    <>
+      <Stack.Screen options={{ title: "Oops! This screen doesn't exist." }} />
+      <View style={styles.container}>
+        <Link href="/">Go to home screen</Link>
+      </View>
+    </>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+});

apps/mobile/app/_layout.tsx

@@ -0,0 +1,322 @@
+import {
+  router,
+  Stack,
+  usePathname,
+  useRootNavigationState,
+  useRouter,
+} from "expo-router";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
+import { mmkvPersister } from "@/lib/queryPersister";
+import { useState, useEffect } from "react";
+import "../styles/global.css";
+import { SheetManager, SheetProvider } from "react-native-actions-sheet";
+import "@/components/ActionSheets/Sheets";
+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/global";
+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
+      client={queryClient}
+      persistOptions={{
+        persister: mmkvPersister,
+        maxAge: Infinity,
+        dehydrateOptions: {
+          shouldDehydrateMutation: () => true,
+          shouldDehydrateQuery: () => true,
+        },
+      }}
+      onSuccess={() => {
+        setIsLoading(false);
+        queryClient.invalidateQueries();
+      }}
+    >
+      <RootComponent isLoading={isLoading} auth={auth} />
+    </PersistQueryClientProvider>
+  );
+}
+
+const RootComponent = ({
+  isLoading,
+  auth,
+}: {
+  isLoading: boolean;
+  auth: MobileAuth;
+}) => {
+  const { colorScheme } = useColorScheme();
+  const updateLink = useUpdateLink({ auth, Alert });
+  const deleteLink = useDeleteLink({ auth, Alert });
+
+  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={() => {
+                                const isAlreadyPinned =
+                                  tmp.link?.pinnedBy && tmp.link.pinnedBy[0]
+                                    ? true
+                                    : false;
+                                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: async () => {
+                                        deleteLink.mutate(
+                                          tmp.link?.id as number
+                                        );
+
+                                        await deleteLinkCache(
+                                          tmp.link?.id as number
+                                        );
+
+                                        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,97 @@
+import React, { useEffect, useState } from "react";
+import {
+  SafeAreaView,
+  View,
+  Text,
+  ActivityIndicator,
+  Alert,
+  TouchableOpacity,
+} 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";
+import { SheetManager } from "react-native-actions-sheet";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types/global";
+
+export default function IncomingScreen() {
+  const { auth } = useAuthStore();
+  const router = useRouter();
+  const { data, updateData } = useDataStore();
+  const addLink = useAddLink({ auth });
+  const { colorScheme } = useColorScheme();
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  useEffect(() => {
+    if (auth.status === "authenticated" && data.shareIntent.url)
+      addLink.mutate(
+        {
+          url: data.shareIntent.url,
+          collection: { id: data.preferredCollection?.id },
+        },
+        {
+          onSuccess: (e) => {
+            setLink(e as unknown as LinkIncludingShortenedCollectionAndTags);
+            setShowSuccess(true);
+            setTimeout(() => {
+              updateData({
+                shareIntent: {
+                  hasShareIntent: false,
+                  url: "",
+                },
+              });
+              router.replace("/dashboard");
+            }, 1500);
+          },
+          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">
+      <View className="flex-1 items-center justify-center">
+        {data?.shareIntent.url && showSuccess && link ? (
+          <>
+            <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>
+            <TouchableOpacity
+              className="w-fit mx-auto mt-5"
+              onPress={() =>
+                SheetManager.show("edit-link-sheet", {
+                  payload: {
+                    link: link,
+                  },
+                })
+              }
+            >
+              <Text className="text-neutral text-center w-fit">Edit Link</Text>
+            </TouchableOpacity>
+          </>
+        ) : (
+          <>
+            <ActivityIndicator size="large" />
+            <Text className="mt-3 text-base text-base-content opacity-70">
+              One sec…
+            </Text>
+          </>
+        )}
+      </View>
+    </SafeAreaView>
+  );
+}

apps/mobile/app/index.tsx

@@ -0,0 +1,77 @@
+import { Button } from "@/components/ui/Button";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import useAuthStore from "@/store/auth";
+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 { auth } = useAuthStore();
+  const { colorScheme } = useColorScheme();
+
+  if (auth.session) {
+    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

@@ -0,0 +1,111 @@
+import React, { useEffect, useState } from "react";
+import { View, ActivityIndicator, Text, Platform } from "react-native";
+import { WebView } from "react-native-webview";
+import useAuthStore from "@/store/auth";
+import { useLocalSearchParams } from "expo-router";
+import { useUser } from "@linkwarden/router/user";
+import { useGetLink } from "@linkwarden/router/links";
+import useTmpStore from "@/store/tmp";
+import { ArchivedFormat } from "@linkwarden/types/global";
+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 [isLoading, setIsLoading] = useState(true);
+
+  const { data: link } = useGetLink({ id: Number(id), auth, enabled: true });
+
+  const { updateTmp } = useTmpStore();
+
+  useEffect(() => {
+    if (link?.id && user?.id)
+      updateTmp({
+        link,
+        user: {
+          id: user.id,
+        },
+      });
+
+    return () =>
+      updateTmp({
+        link: null,
+      });
+  }, [link, user]);
+
+  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 (
+    <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 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-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

@@ -0,0 +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 { 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 { auth, signIn } = useAuthStore();
+  const { colorScheme } = useColorScheme();
+  const [method, setMethod] = useState<"password" | "token">("password");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [form, setForm] = useState({
+    user: "",
+    password: "",
+    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 (
+    <>
+      <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 />
+    </>
+  );
+}

apps/mobile/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ["babel-preset-expo", { jsxImportSource: "nativewind" }],
+      "nativewind/babel",
+    ],
+  };
+};

apps/mobile/components/ActionSheets/AddLinkSheet.tsx

@@ -0,0 +1,72 @@
+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, Alert });
+  const [link, setLink] = useState("");
+  const { colorScheme } = useColorScheme();
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      ref={actionSheetRef}
+      gestureEnabled
+      indicatorStyle={{
+        display: "none",
+      }}
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+      safeAreaInsets={insets}
+    >
+      <View className="px-8 py-5">
+        <Text className="font-semibold text-lg mx-auto mb-5 text-base-content">
+          New Link
+        </Text>
+
+        <Input
+          placeholder="e.g. https://example.com"
+          className="mb-4 bg-base-100"
+          value={link}
+          onChangeText={setLink}
+        />
+
+        <Button
+          onPress={() => {
+            addLink.mutate({ url: link });
+
+            actionSheetRef.current?.hide();
+            setLink("");
+          }}
+          isLoading={addLink.isPending}
+          variant="accent"
+          className="mb-2"
+        >
+          <Text className="text-white">Save to Linkwarden</Text>
+        </Button>
+
+        <Button
+          onPress={() => {
+            actionSheetRef.current?.hide();
+            setLink("");
+          }}
+          variant="outline"
+          className="mb-2"
+        >
+          <Text className="text-base-content">Cancel</Text>
+        </Button>
+      </View>
+    </ActionSheet>
+  );
+}

apps/mobile/components/ActionSheets/EditLinkSheet.tsx

@@ -0,0 +1,396 @@
+import { View, Text, Alert, TouchableOpacity } from "react-native";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import ActionSheet, {
+  FlatList,
+  Route,
+  SheetManager,
+  SheetProps,
+  useSheetRouteParams,
+  useSheetRouter,
+} from "react-native-actions-sheet";
+import Input from "@/components/ui/Input";
+import { Button } from "@/components/ui/Button";
+import { useAddLink, useUpdateLink } from "@linkwarden/router/links";
+import useAuthStore from "@/store/auth";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+  TagIncludingLinkCount,
+} from "@linkwarden/types/global";
+import { useCollections } from "@linkwarden/router/collections";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { Folder, ChevronRight, ChevronLeft, Check } from "lucide-react-native";
+import useTmpStore from "@/store/tmp";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTags } from "@linkwarden/router/tags";
+
+const Main = (props: SheetProps<"edit-link-sheet">) => {
+  const { auth } = useAuthStore();
+
+  const params = useSheetRouteParams("edit-link-sheet", "main");
+
+  const [link, setLink] = useState<
+    LinkIncludingShortenedCollectionAndTags | undefined
+  >(props.payload?.link);
+  const updateLink = useUpdateLink({ auth, Alert });
+  const router = useSheetRouter("edit-link-sheet");
+  const { colorScheme } = useColorScheme();
+
+  useEffect(() => {
+    if (params?.link) {
+      setLink(params.link);
+    }
+  }, [params?.link]);
+
+  const { tmp, updateTmp } = useTmpStore();
+
+  return (
+    <View className="px-8 py-5">
+      <Text className="font-semibold text-lg mx-auto mb-5 text-base-content">
+        Edit Link
+      </Text>
+
+      <Input
+        placeholder="Name"
+        className="mb-4 bg-base-100"
+        value={link?.name || ""}
+        onChangeText={(text) => link?.id && setLink({ ...link, name: text })}
+      />
+
+      {props.payload?.link?.url && (
+        <Input
+          placeholder="URL"
+          className="mb-4 bg-base-100"
+          value={link?.url || ""}
+          onChangeText={(text) => link?.id && setLink({ ...link, url: text })}
+        />
+      )}
+
+      <Button
+        variant="input"
+        className="mb-4"
+        onPress={() => router?.navigate("collections", { link })}
+      >
+        <View className="flex-row items-center gap-2 w-[90%]">
+          <Folder
+            size={20}
+            fill={link?.collection.color || "gray"}
+            color={link?.collection.color || "gray"}
+          />
+          <Text numberOfLines={1} className="w-[90%] text-base-content">
+            {link?.collection.name}
+          </Text>
+        </View>
+        <ChevronRight
+          size={16}
+          color={rawTheme[colorScheme as ThemeName]["neutral"]}
+        />
+      </Button>
+
+      <Button
+        variant="input"
+        className="mb-4 h-auto"
+        onPress={() => router?.navigate("tags", { link })}
+      >
+        {link?.tags && link?.tags.length > 0 ? (
+          <View className="flex-row flex-wrap items-center gap-2 w-[90%]">
+            {link.tags.map((tag) => (
+              <View
+                key={tag.id}
+                className="bg-neutral rounded-md h-7 px-2 py-1"
+              >
+                <Text numberOfLines={1} className="text-base-100">
+                  {tag.name}
+                </Text>
+              </View>
+            ))}
+          </View>
+        ) : (
+          <Text className="text-neutral">No tags</Text>
+        )}
+        <ChevronRight size={16} color={"gray"} />
+      </Button>
+
+      <Input
+        multiline
+        textAlignVertical="top"
+        placeholder="Description"
+        className="mb-4 h-28 bg-base-100"
+        value={link?.description || ""}
+        onChangeText={(text) =>
+          link?.id && setLink({ ...link, description: text })
+        }
+      />
+
+      <Button
+        onPress={() => {
+          updateLink.mutate(link as LinkIncludingShortenedCollectionAndTags);
+          if (link && tmp.link)
+            updateTmp({
+              link,
+            });
+          SheetManager.hide("edit-link-sheet");
+        }}
+        isLoading={updateLink.isPending}
+        variant="accent"
+        className="mb-2"
+      >
+        <Text className="text-white">Save</Text>
+      </Button>
+
+      <Button
+        onPress={() => {
+          SheetManager.hide("edit-link-sheet");
+        }}
+        variant="outline"
+        className="mb-2"
+      >
+        <Text className="text-base-content">Cancel</Text>
+      </Button>
+    </View>
+  );
+};
+
+const Collections = () => {
+  const { auth } = useAuthStore();
+  const addLink = useAddLink({ auth });
+  const [searchQuery, setSearchQuery] = useState("");
+  const router = useSheetRouter("edit-link-sheet");
+  const { link: currentLink } = useSheetRouteParams<
+    "edit-link-sheet",
+    "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 [];
+    const q = searchQuery.trim().toLowerCase();
+    if (q === "") return collections.data;
+    return collections.data.filter((col) => col.name.toLowerCase().includes(q));
+  }, [collections.data, searchQuery]);
+
+  const renderItem = useCallback(
+    ({
+      item: collection,
+    }: {
+      item: CollectionIncludingMembersAndLinkCount;
+    }) => {
+      const onSelect = () => {
+        const updatedLink = {
+          ...currentLink,
+          collection,
+        };
+
+        router?.popToTop();
+        router?.navigate("main", { link: updatedLink });
+      };
+
+      return (
+        <Button variant="input" className="mb-2" onPress={onSelect}>
+          <View className="flex-row items-center gap-2 w-[75%]">
+            <Folder
+              size={20}
+              fill={collection.color || "gray"}
+              color={collection.color || "gray"}
+            />
+            <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 && (
+              <Check
+                size={16}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+            )}
+            <Text className="text-neutral">
+              {collection._count?.links ?? 0}
+            </Text>
+          </View>
+        </Button>
+      );
+    },
+    [addLink, params.link, router]
+  );
+
+  return (
+    <View className="py-5 max-h-[80vh]">
+      <TouchableOpacity
+        className="flex-row items-center gap-1 top-6 left-8 absolute"
+        onPress={() => {
+          router?.popToTop();
+          router?.navigate("main", { link: currentLink });
+        }}
+      >
+        <ChevronLeft
+          size={18}
+          color={rawTheme[colorScheme as ThemeName]["primary"]}
+        />
+        <Text className="text-primary">Back</Text>
+      </TouchableOpacity>
+      <Text className="font-semibold text-lg mx-auto mb-5 text-base-content">
+        Collection
+      </Text>
+      <Input
+        placeholder="Search collections"
+        className="mb-4 bg-base-100 mx-8"
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+      />
+
+      <FlatList
+        data={[...filteredCollections]}
+        keyExtractor={(e, i) => i.toString()}
+        renderItem={renderItem}
+        ListEmptyComponent={
+          <Text
+            style={{ textAlign: "center", marginTop: 20 }}
+            className="text-neutral"
+          >
+            No collections match “{searchQuery}”
+          </Text>
+        }
+        contentContainerClassName="px-8"
+      />
+    </View>
+  );
+};
+
+const Tags = () => {
+  const { auth } = useAuthStore();
+  const addLink = useAddLink({ auth });
+  const [searchQuery, setSearchQuery] = useState("");
+  const router = useSheetRouter("edit-link-sheet");
+  const params = useSheetRouteParams("edit-link-sheet", "tags");
+  const tags = useTags(auth);
+  const { colorScheme } = useColorScheme();
+  const [updatedLink, setUpdatedLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(params.link);
+
+  const filteredTags = useMemo(() => {
+    if (!tags.data) return [];
+    const q = searchQuery.trim().toLowerCase();
+    if (q === "") return tags.data;
+    return tags.data.filter((tag) => tag.name.toLowerCase().includes(q));
+  }, [tags.data, searchQuery]);
+
+  const renderItem = useCallback(
+    ({ item: tag }: { item: TagIncludingLinkCount }) => {
+      const onSelect = () => {
+        const isSelected = (updatedLink?.tags || []).some(
+          (t) => t.id === tag.id
+        );
+        const nextTags = isSelected
+          ? (updatedLink?.tags || []).filter((t) => t.id !== tag.id)
+          : [...(updatedLink?.tags || []), tag];
+
+        setUpdatedLink({
+          ...updatedLink,
+          tags: nextTags,
+        });
+      };
+
+      return (
+        <Button variant="input" className="mb-2" onPress={onSelect}>
+          <View className="flex-row items-center gap-2 w-[75%]">
+            <Text numberOfLines={1} className="w-full text-base-content">
+              {tag.name}
+            </Text>
+          </View>
+          <View className="flex-row items-center gap-2">
+            {updatedLink?.tags.find((e) => e.id === tag.id) && (
+              <Check
+                size={16}
+                color={rawTheme[colorScheme as ThemeName].primary}
+              />
+            )}
+            <Text className="text-neutral">{tag._count?.links ?? 0}</Text>
+          </View>
+        </Button>
+      );
+    },
+    [addLink, params.link, router]
+  );
+
+  return (
+    <View className="py-5 max-h-[80vh]">
+      <TouchableOpacity
+        className="flex-row items-center gap-1 top-6 left-8 absolute"
+        onPress={() => {
+          router?.popToTop();
+          router?.navigate("main", { link: updatedLink });
+        }}
+      >
+        <ChevronLeft
+          size={18}
+          color={rawTheme[colorScheme as ThemeName]["primary"]}
+        />
+        <Text className="text-primary">Back</Text>
+      </TouchableOpacity>
+      <Text className="font-semibold text-lg mx-auto mb-5 text-base-content">
+        Tags
+      </Text>
+      <Input
+        placeholder="Search tags"
+        className="mb-4 bg-base-100 mx-8"
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+      />
+
+      <FlatList
+        data={filteredTags}
+        keyExtractor={(e, i) => i.toString()}
+        renderItem={renderItem}
+        ListEmptyComponent={
+          <Text
+            style={{ textAlign: "center", marginTop: 20 }}
+            className="text-neutral"
+          >
+            No tags match “{searchQuery}”
+          </Text>
+        }
+        contentContainerClassName="px-8"
+      />
+    </View>
+  );
+};
+
+const routes: Route[] = [
+  {
+    name: "main",
+    component: Main,
+  },
+  {
+    name: "collections",
+    component: Collections,
+  },
+  {
+    name: "tags",
+    component: Tags,
+  },
+];
+
+export default function EditLinkSheet() {
+  const { colorScheme } = useColorScheme();
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      indicatorStyle={{
+        display: "none",
+      }}
+      routes={routes}
+      initialRoute="main"
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+      safeAreaInsets={insets}
+    />
+  );
+}

apps/mobile/components/ActionSheets/NewCollectionSheet.tsx

@@ -0,0 +1,96 @@
+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={{
+        display: "none",
+      }}
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+      safeAreaInsets={insets}
+    >
+      <View className="px-8 py-5">
+        <Text className="font-semibold text-lg mx-auto mb-5 text-base-content">
+          New Collection
+        </Text>
+
+        <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

@@ -0,0 +1,41 @@
+import {
+  registerSheet,
+  RouteDefinition,
+  SheetDefinition,
+} from "react-native-actions-sheet";
+import SupportSheet from "./SupportSheet";
+import AddLinkSheet from "./AddLinkSheet";
+import EditLinkSheet from "./EditLinkSheet";
+import NewCollectionSheet from "./NewCollectionSheet";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types/global";
+
+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: {
+        link: LinkIncludingShortenedCollectionAndTags;
+      };
+      routes: {
+        main: RouteDefinition<{
+          link: LinkIncludingShortenedCollectionAndTags;
+        }>;
+        collections: RouteDefinition<{
+          link: LinkIncludingShortenedCollectionAndTags;
+        }>;
+        tags: RouteDefinition<{
+          link: LinkIncludingShortenedCollectionAndTags;
+        }>;
+      };
+    }>;
+    "new-collection-sheet": SheetDefinition;
+  }
+}
+
+export {};

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/global";
+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, Alert });
+
+  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

@@ -0,0 +1,35 @@
+import { Text, View } from "react-native";
+
+export default function DashboardItem({
+  name,
+  value,
+  icon,
+  color,
+}: {
+  name: string;
+  value: number;
+  icon: React.ReactNode;
+  color: string;
+}) {
+  return (
+    <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 rounded-full aspect-square flex justify-center items-center"
+          style={{
+            backgroundColor: color,
+          }}
+        >
+          {icon}
+        </View>
+        <Text
+          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-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/global";
+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

@@ -0,0 +1,18 @@
+import { View, Text, Button } from "react-native";
+
+export default function ElementNotSupported({
+  message = "This element is currently not supported in this view.",
+  buttonTitle = "Open original",
+  onPress,
+}: {
+  message?: string;
+  buttonTitle?: string;
+  onPress: () => void;
+}) {
+  return (
+    <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/global";
+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/global";
+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/global";
+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/global";
+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/HapticTab.tsx

@@ -0,0 +1,18 @@
+import { BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
+import { PlatformPressable } from "@react-navigation/elements";
+import * as Haptics from "expo-haptics";
+
+export default function HapticTab(props: BottomTabBarButtonProps) {
+  return (
+    <PlatformPressable
+      {...props}
+      onPressIn={(ev) => {
+        if (process.env.EXPO_OS === "ios") {
+          // Add a soft haptic feedback when pressing down on the tabs.
+          Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        }
+        props.onPressIn?.(ev);
+      }}
+    />
+  );
+}

apps/mobile/components/LinkListing.tsx

@@ -0,0 +1,339 @@
+import {
+  View,
+  Text,
+  Image,
+  Pressable,
+  Platform,
+  Alert,
+  ActivityIndicator,
+  Linking,
+} from "react-native";
+import { decode } from "html-entities";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types/global";
+import { ArchivedFormat } from "@linkwarden/types/global";
+import getFormatBasedOnPreference from "@linkwarden/lib/getFormatBasedOnPreference";
+import getOriginalFormat from "@linkwarden/lib/getOriginalFormat";
+import {
+  atLeastOneFormatAvailable,
+  formatAvailable,
+} from "@linkwarden/lib/formatStats";
+import useAuthStore from "@/store/auth";
+import { useRouter } from "expo-router";
+import * as ContextMenu from "zeego/context-menu";
+import { useDeleteLink, useUpdateLink } from "@linkwarden/router/links";
+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;
+  dashboard?: boolean;
+};
+
+const LinkListing = ({ link, dashboard }: Props) => {
+  const { auth } = useAuthStore();
+  const router = useRouter();
+  const updateLink = useUpdateLink({ auth, Alert });
+  const { data: user } = useUser(auth);
+  const { colorScheme } = useColorScheme();
+  const { data } = useDataStore();
+
+  const deleteLink = useDeleteLink({ auth, Alert });
+
+  const [url, setUrl] = useState("");
+
+  useEffect(() => {
+    try {
+      if (link.url) {
+        setUrl(new URL(link.url).host.toLowerCase());
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }, [link.url]);
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger asChild>
+        <Pressable
+          className={cn(
+            "p-5 flex-row justify-between",
+            dashboard ? "bg-base-200" : "bg-base-100",
+            Platform.OS !== "android" && "active:bg-base-200/50",
+            dashboard && "rounded-xl"
+          )}
+          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(
+              "flex-row justify-between",
+              dashboard ? "w-80" : "w-full"
+            )}
+          >
+            <View className="w-[65%] flex-col justify-between">
+              <Text
+                numberOfLines={2}
+                className="font-medium text-lg text-base-content"
+              >
+                {decode(link.name || link.description || link.url)}
+              </Text>
+
+              {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">
+                <Folder
+                  size={16}
+                  fill={link.collection.color || "#0ea5e9"}
+                  color={link.collection.color || "#0ea5e9"}
+                />
+                <Text
+                  numberOfLines={1}
+                  className="font-light text-xs text-base-content"
+                >
+                  {link.collection.name}
+                </Text>
+              </View>
+            </View>
+
+            <View className="flex-col items-end">
+              <View className="rounded-lg overflow-hidden relative">
+                {formatAvailable(link, "preview") ? (
+                  <Image
+                    source={{
+                      uri: `${auth.instance}/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`,
+                      headers: {
+                        Authorization: `Bearer ${auth.session}`,
+                      },
+                    }}
+                    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">
+                <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",
+                    day: "numeric",
+                  })}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </Pressable>
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Content avoidCollisions>
+        <ContextMenu.Item
+          key="open-original"
+          onSelect={() => {
+            if (link) {
+              const format = getOriginalFormat(link);
+
+              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
+          key="pin-link"
+          onSelect={() => {
+            const isAlreadyPinned =
+              link?.pinnedBy && link.pinnedBy[0] ? true : false;
+
+            updateLink.mutateAsync({
+              ...link,
+              pinnedBy: (isAlreadyPinned
+                ? [{ id: undefined }]
+                : [{ id: user?.id }]) as any,
+            });
+          }}
+        >
+          <ContextMenu.ItemTitle>
+            {link.pinnedBy && link.pinnedBy[0] ? "Unpin Link" : "Pin Link"}
+          </ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+
+        <ContextMenu.Item
+          key="edit-link"
+          onSelect={() => {
+            SheetManager.show("edit-link-sheet", {
+              payload: { link: link },
+            });
+          }}
+        >
+          <ContextMenu.ItemTitle>Edit Link</ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+
+        {link.url && atLeastOneFormatAvailable(link) && (
+          <ContextMenu.Sub>
+            <ContextMenu.SubTrigger key="preserved-formats">
+              <ContextMenu.ItemTitle>Preserved Formats</ContextMenu.ItemTitle>
+            </ContextMenu.SubTrigger>
+            <ContextMenu.SubContent>
+              {formatAvailable(link, "monolith") && (
+                <ContextMenu.Item
+                  key="preserved-formats-webpage"
+                  onSelect={() =>
+                    router.navigate(
+                      `/links/${link.id}?format=${ArchivedFormat.monolith}`
+                    )
+                  }
+                >
+                  <ContextMenu.ItemTitle>Webpage</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              )}
+              {formatAvailable(link, "image") && (
+                <ContextMenu.Item
+                  key="preserved-formats-screenshot"
+                  onSelect={() =>
+                    router.navigate(
+                      `/links/${link.id}?format=${
+                        link.image?.endsWith(".png")
+                          ? ArchivedFormat.png
+                          : ArchivedFormat.jpeg
+                      }`
+                    )
+                  }
+                >
+                  <ContextMenu.ItemTitle>Screenshot</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              )}
+              {formatAvailable(link, "pdf") && (
+                <ContextMenu.Item
+                  key="preserved-formats-pdf"
+                  onSelect={() =>
+                    router.navigate(
+                      `/links/${link.id}?format=${ArchivedFormat.pdf}`
+                    )
+                  }
+                >
+                  <ContextMenu.ItemTitle>PDF</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              )}
+              {formatAvailable(link, "readable") && (
+                <ContextMenu.Item
+                  key="preserved-formats-readable"
+                  onSelect={() =>
+                    router.navigate(
+                      `/links/${link.id}?format=${ArchivedFormat.readability}`
+                    )
+                  }
+                >
+                  <ContextMenu.ItemTitle>Readable</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              )}
+            </ContextMenu.SubContent>
+          </ContextMenu.Sub>
+        )}
+
+        <ContextMenu.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: async () => {
+                    deleteLink.mutate(link.id as number);
+
+                    await deleteLinkCache(link.id as number);
+                  },
+                },
+              ]
+            );
+          }}
+        >
+          <ContextMenu.ItemTitle>Delete</ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default LinkListing;

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/global";
+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/TagListing.tsx

@@ -0,0 +1,120 @@
+import { View, Text, Pressable, Platform, Alert } from "react-native";
+import { decode } from "html-entities";
+import { TagIncludingLinkCount } from "@linkwarden/types/global";
+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, Hash, Link } from "lucide-react-native";
+import { useRemoveTag } from "@linkwarden/router/tags";
+
+type Props = {
+  tag: TagIncludingLinkCount;
+};
+
+const TagListing = ({ tag }: Props) => {
+  const { auth } = useAuthStore();
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  const deleteCollection = useRemoveTag(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(`/tags/${tag.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">
+                <Hash
+                  size={16}
+                  color={rawTheme[colorScheme as ThemeName]["primary"]}
+                />
+                <Text
+                  numberOfLines={2}
+                  className="font-medium text-lg text-base-content"
+                >
+                  {decode(tag.name)}
+                </Text>
+              </View>
+            </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(tag.createdAt).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"
+                >
+                  {tag._count?.links}
+                </Text>
+              </View>
+            </View>
+          </View>
+        </Pressable>
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Content avoidCollisions>
+        <ContextMenu.Item
+          key="delete-tag"
+          onSelect={() => {
+            return Alert.alert(
+              "Delete Tag",
+              "Are you sure you want to delete this Tag? This action cannot be undone.",
+              [
+                {
+                  text: "Cancel",
+                  style: "cancel",
+                },
+                {
+                  text: "Delete",
+                  style: "destructive",
+                  onPress: () => {
+                    deleteCollection.mutate(tag.id as number);
+                  },
+                },
+              ]
+            );
+          }}
+        >
+          <ContextMenu.ItemTitle>Delete</ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default TagListing;

apps/mobile/components/ui/Button.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef } from "react";
+import {
+  TouchableOpacity,
+  Text,
+  View,
+  ActivityIndicator,
+  type TouchableOpacityProps,
+} from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@linkwarden/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-lg disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-slate-500 text-white",
+        primary: "bg-primary text-base-content",
+        accent: "bg-accent border border-violet-400 text-white",
+        destructive: "bg-destructive text-white",
+        outline: "border border-base-content",
+        secondary: "bg-secondary text-secondary-foreground",
+        input:
+          "bg-base-100 rounded-lg px-4 justify-between flex-row font-normal",
+        metal: "bg-neutral-content text-base-content border border-neutral/30",
+        ghost: "",
+        simple: "bg-base-200",
+        link: "text-primary underline-offset-",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 px-2 py-1 text-xs",
+        lg: "h-12 px-8",
+        full: "w-full px-4 py-2",
+        icon: "h-8 w-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export type ButtonProps = TouchableOpacityProps &
+  VariantProps<typeof buttonVariants> & {
+    isLoading?: boolean;
+    children: React.ReactNode;
+    className?: string;
+  };
+
+export const Button = forwardRef<
+  React.ElementRef<typeof TouchableOpacity>,
+  ButtonProps
+>(
+  (
+    {
+      variant = "default",
+      size,
+      className,
+      isLoading = false,
+      children,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const combinedClasses = cn(buttonVariants({ variant, size }), className);
+
+    return (
+      <TouchableOpacity
+        ref={ref}
+        className={combinedClasses}
+        activeOpacity={0.8}
+        disabled={disabled || isLoading}
+        {...props}
+      >
+        {isLoading ? <ActivityIndicator /> : children}
+      </TouchableOpacity>
+    );
+  }
+);
+
+Button.displayName = "Button";

apps/mobile/components/ui/IconSymbol.ios.tsx

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

apps/mobile/components/ui/IconSymbol.tsx

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

apps/mobile/components/ui/Icons.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import Svg, { Path, Circle, SvgProps } from "react-native-svg";
+
+export const Chromium = (props: SvgProps) => (
+  <Svg
+    width={21}
+    height={21}
+    viewBox="0 0 24 24"
+    fill="none"
+    strokeWidth={2}
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    {...props}
+  >
+    <Path d="M10.88 21.94 15.46 14" />
+    <Path d="M21.17 8H12" />
+    <Path d="M3.95 6.06 8.54 14" />
+    <Circle cx={12} cy={12} r={10} />
+    <Circle cx={12} cy={12} r={4} />
+  </Svg>
+);

apps/mobile/components/ui/Input.tsx

@@ -0,0 +1,20 @@
+import React, { forwardRef } from "react";
+import { TextInput, TextInputProps } from "react-native";
+import { cn } from "@linkwarden/lib/utils";
+
+const Input = forwardRef<TextInput, TextInputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <TextInput
+        ref={ref}
+        className={cn(
+          "bg-base-200 text-base-content rounded-lg px-4 py-2",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+
+export default Input;

apps/mobile/components/ui/Spinner.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from "react";
+import { RefreshControl, RefreshControlProps } from "react-native";
+
+const Spinner = forwardRef<RefreshControl, RefreshControlProps>(
+  (props, ref) => {
+    return <RefreshControl ref={ref} {...props} />;
+  }
+);
+
+export default Spinner;

apps/mobile/components/ui/TabBarBackground.ios.tsx

@@ -0,0 +1,22 @@
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { BlurView } from "expo-blur";
+import { StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function BlurTabBarBackground() {
+  return (
+    <BlurView
+      // System chrome material automatically adapts to the system's theme
+      // and matches the native tab bar appearance on iOS.
+      tint="systemChromeMaterial"
+      intensity={100}
+      style={StyleSheet.absoluteFill}
+    />
+  );
+}
+
+export function useBottomTabOverflow() {
+  const tabHeight = useBottomTabBarHeight();
+  const { bottom } = useSafeAreaInsets();
+  return tabHeight - bottom;
+}

apps/mobile/components/ui/TabBarBackground.tsx

@@ -0,0 +1,6 @@
+// This is a shim for web and Android where the tab bar is generally opaque.
+export default undefined;
+
+export function useBottomTabOverflow() {
+  return 0;
+}

apps/mobile/eas.json

@@ -0,0 +1,41 @@
+{
+  "cli": {
+    "version": ">= 16.20.1",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "preview": {
+      "android": {
+        "buildType": "apk"
+      }
+    },
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "simulator": {
+      "extends": "development",
+      "ios": {
+        "simulator": true
+      }
+    },
+    "production": {
+      "corepack": true,
+      "distribution": "store",
+      "autoIncrement": true,
+      "channel": "production"
+    }
+  },
+  "submit": {
+    "production": {
+      "ios": {
+        "ascAppId": "6752550960"
+      },
+      "android": {
+        "serviceAccountKeyPath": "./service-account-file.json",
+        "track": "internal",
+        "releaseStatus": "draft"
+      }
+    }
+  }
+}

apps/mobile/lib/cache.ts

@@ -0,0 +1,33 @@
+import * as FileSystem from "expo-file-system";
+
+export const clearCache = async () => {
+  await Promise.all([
+    FileSystem.deleteAsync(FileSystem.documentDirectory + "archivedData", {
+      idempotent: true,
+    }),
+    FileSystem.deleteAsync(FileSystem.documentDirectory + "mmkv", {
+      idempotent: true,
+    }),
+  ]);
+};
+
+export const deleteLinkCache = async (linkId: number) => {
+  const readablePath =
+    FileSystem.documentDirectory + `archivedData/readable/link_${linkId}.html`;
+  const webpagePath =
+    FileSystem.documentDirectory + `archivedData/webpage/link_${linkId}.html`;
+  const jpegPath =
+    FileSystem.documentDirectory + `archivedData/jpeg/link_${linkId}.jpeg`;
+  const pngPath =
+    FileSystem.documentDirectory + `archivedData/png/link_${linkId}.png`;
+  const pdfPath =
+    FileSystem.documentDirectory + `archivedData/pdf/link_${linkId}.pdf`;
+
+  await Promise.all([
+    FileSystem.deleteAsync(readablePath, { idempotent: true }),
+    FileSystem.deleteAsync(webpagePath, { idempotent: true }),
+    FileSystem.deleteAsync(jpegPath, { idempotent: true }),
+    FileSystem.deleteAsync(pngPath, { idempotent: true }),
+    FileSystem.deleteAsync(pdfPath, { idempotent: true }),
+  ]);
+};

apps/mobile/lib/colors.ts

@@ -0,0 +1,33 @@
+// lib/theme/colors.ts
+export type ThemeName = "light" | "dark";
+
+export const rawTheme = {
+  light: {
+    primary: "#0369A1",
+    secondary: "#0891B2",
+    accent: "#6D28D9",
+    neutral: "#6B7280",
+    "neutral-content": "#D1D5DB",
+    "base-100": "#FFFFFF",
+    "base-200": "#F3F4F6",
+    "base-content": "#0A0A0A",
+    info: "#A5F3FC",
+    success: "#22C55E",
+    warning: "#FACC15",
+    error: "#DC2626",
+  },
+  dark: {
+    primary: "#7DD3FC",
+    secondary: "#22D3EE",
+    accent: "#6D28D9",
+    neutral: "#9CA3AF",
+    "neutral-content": "#404040",
+    "base-100": "#171717",
+    "base-200": "#262626",
+    "base-content": "#FAFAFA",
+    info: "#009EE4",
+    success: "#00B17D",
+    warning: "#EAC700",
+    error: "#F1293C",
+  },
+};

apps/mobile/lib/queryClient.ts

@@ -0,0 +1,14 @@
+import { QueryClient } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 60 * 24,
+      refetchOnMount: true,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+export { queryClient };

apps/mobile/lib/queryPersister.ts

@@ -0,0 +1,31 @@
+import { MMKV } from "react-native-mmkv";
+import { Persister } from "@tanstack/react-query-persist-client";
+
+const storage = new MMKV({ id: "react-query" });
+
+export const mmkvPersister: Persister = {
+  persistClient: async (client) => {
+    try {
+      const json = JSON.stringify(client);
+      storage.set("REACT_QUERY_CACHE", json);
+    } catch (e) {
+      console.error("Error persisting client:", e);
+    }
+  },
+  restoreClient: async () => {
+    try {
+      const json = storage.getString("REACT_QUERY_CACHE");
+      return json ? JSON.parse(json) : undefined;
+    } catch (e) {
+      console.error("Error restoring client:", e);
+      return undefined;
+    }
+  },
+  removeClient: async () => {
+    try {
+      storage.delete("REACT_QUERY_CACHE");
+    } catch (e) {
+      console.error("Error removing client:", e);
+    }
+  },
+};

apps/mobile/lib/theme.ts

@@ -0,0 +1,23 @@
+import { vars } from "nativewind";
+import { rawTheme, ThemeName } from "./colors";
+
+const hexToRgb = (hex: string) => {
+  const [r, g, b] = hex
+    .replace(/^#/, "")
+    .match(/.{2}/g)!
+    .map((h) => parseInt(h, 16));
+  return `${r} ${g} ${b}`;
+};
+
+const makeVars = (scheme: ThemeName) =>
+  vars(
+    Object.fromEntries(
+      Object.entries(rawTheme[scheme]).map(([key, hex]) => [
+        `--color-${key}`,
+        hexToRgb(hex),
+      ])
+    ) as Record<string, string>
+  );
+
+export const lightTheme = makeVars("light");
+export const darkTheme = makeVars("dark");

apps/mobile/metro.config.js

@@ -0,0 +1,6 @@
+const { getDefaultConfig } = require("expo/metro-config");
+const { withNativeWind } = require("nativewind/metro");
+
+const config = getDefaultConfig(__dirname);
+
+module.exports = withNativeWind(config, { input: "./styles/global.css" });

apps/mobile/nativewind-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.

apps/mobile/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "@linkwarden/mobile",
+  "main": "expo-router/entry",
+  "version": "0.0.0",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.2",
+    "@linkwarden/lib": "*",
+    "@linkwarden/prisma": "*",
+    "@linkwarden/react-native-render-html": "^6.3.4",
+    "@linkwarden/router": "*",
+    "@linkwarden/types": "*",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-community/netinfo": "11.4.1",
+    "@react-native-menu/menu": "1.2.2",
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "@tanstack/react-query": "^5.51.15",
+    "@tanstack/react-query-persist-client": "^5.51.15",
+    "class-variance-authority": "^0.7.1",
+    "expo": "~52.0.18",
+    "expo-application": "~6.0.2",
+    "expo-blur": "~14.0.1",
+    "expo-build-properties": "~0.13.3",
+    "expo-clipboard": "~7.0.1",
+    "expo-constants": "~17.0.3",
+    "expo-dev-client": "~5.0.6",
+    "expo-file-system": "~18.0.12",
+    "expo-font": "~13.0.1",
+    "expo-haptics": "~14.0.0",
+    "expo-linking": "~7.0.5",
+    "expo-router": "4.0.20",
+    "expo-secure-store": "~14.0.0",
+    "expo-share-intent": "^3.2.3",
+    "expo-splash-screen": "~0.29.18",
+    "expo-status-bar": "~2.0.0",
+    "expo-symbols": "~0.2.0",
+    "expo-system-ui": "~4.0.6",
+    "expo-updates": "~0.27.4",
+    "expo-web-browser": "~14.0.1",
+    "html-entities": "^2.6.0",
+    "lucide-react-native": "^0.536.0",
+    "nativewind": "^4.1.23",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-native": "0.76.9",
+    "react-native-actions-sheet": "^0.9.7",
+    "react-native-blob-util": "^0.23.2",
+    "react-native-edge-to-edge": "^1.7.0",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-ios-context-menu": "3.1.3",
+    "react-native-ios-utilities": "5.1.7",
+    "react-native-keyboard-controller": "^1.19.0",
+    "react-native-mmkv": "^3.2.0",
+    "react-native-pdf": "^7.0.3",
+    "react-native-reanimated": "3.16.2",
+    "react-native-safe-area-context": "4.12.0",
+    "react-native-screens": "~4.1.0",
+    "react-native-svg": "^15.12.1",
+    "react-native-web": "~0.19.13",
+    "react-native-webview": "13.12.5",
+    "tailwindcss": "^3.4.17",
+    "zeego": "^3.0.6",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "18.3.1",
+    "@types/react-test-renderer": "^18.3.0",
+    "jest": "^29.2.1",
+    "jest-expo": "~52.0.2",
+    "react-test-renderer": "18.3.1",
+    "typescript": "^5.8.3"
+  },
+  "private": true
+}

apps/mobile/plugins/with-daynight-transparent-nav.js

@@ -0,0 +1,43 @@
+const { withAndroidStyles } = require("@expo/config-plugins");
+function mutateStylesXml(xml) {
+  const styles = xml.resources?.style ?? [];
+  let appTheme = styles.find((s) => s.$?.name === "AppTheme");
+  if (!appTheme) {
+    appTheme = {
+      $: { name: "AppTheme", parent: "Theme.AppCompat.DayNight.NoActionBar" },
+      item: [],
+    };
+    styles.push(appTheme);
+  }
+
+  appTheme.$ = appTheme.$ || {};
+  appTheme.$.parent = "Theme.AppCompat.DayNight.NoActionBar";
+
+  appTheme.item = appTheme.item ?? [];
+
+  appTheme.item = appTheme.item.filter(
+    (i) => i?.$?.name !== "android:textColor"
+  );
+
+  const navItem = appTheme.item.find(
+    (i) => i.$?.name === "android:navigationBarColor"
+  );
+  if (navItem) {
+    navItem._ = "@android:color/transparent";
+  } else {
+    appTheme.item.push({
+      $: { name: "android:navigationBarColor" },
+      _: "@android:color/transparent",
+    });
+  }
+
+  xml.resources.style = styles;
+  return xml;
+}
+
+module.exports = function withDayNightTransparentNav(config) {
+  return withAndroidStyles(config, (c) => {
+    c.modResults = mutateStylesXml(c.modResults);
+    return c;
+  });
+};

apps/mobile/store/auth.ts

@@ -0,0 +1,157 @@
+import { create } from "zustand";
+import * as SecureStore from "expo-secure-store";
+import { router } from "expo-router";
+import { MobileAuth } from "@linkwarden/types/global";
+import { Alert } from "react-native";
+import { queryClient } from "@/lib/queryClient";
+import { mmkvPersister } from "@/lib/queryPersister";
+import { clearCache } from "@/lib/cache";
+
+type AuthStore = {
+  auth: MobileAuth;
+  signIn: (
+    username: string,
+    password: string,
+    instance: string,
+    token?: string
+  ) => Promise<void>;
+  signOut: () => Promise<void>;
+  setAuth: () => Promise<void>;
+};
+
+const useAuthStore = create<AuthStore>((set) => ({
+  auth: {
+    instance: "",
+    session: null,
+    status: "loading" as const,
+  },
+  setAuth: async () => {
+    const session = await SecureStore.getItemAsync("TOKEN");
+    const instance = await SecureStore.getItemAsync("INSTANCE");
+
+    if (session) {
+      set({
+        auth: {
+          instance,
+          session,
+          status: "authenticated",
+        },
+      });
+    } else {
+      set({
+        auth: {
+          instance: instance || "https://cloud.linkwarden.app",
+          session: null,
+          status: "unauthenticated",
+        },
+      });
+    }
+  },
+  signIn: async (username, password, instance, token) => {
+    if (process.env.EXPO_PUBLIC_SHOW_LOGS === "true")
+      console.log("Signing into", instance);
+
+    if (token) {
+      try {
+        // make a request to the API to validate the token
+        const res = await Promise.race([
+          fetch(instance + "/api/v1/users/me", {
+            method: "GET",
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          }),
+          new Promise<Response>((_, reject) =>
+            setTimeout(() => reject(new Error("TIMEOUT")), 30000)
+          ),
+        ]);
+
+        if (res.ok) {
+          await SecureStore.setItemAsync("INSTANCE", instance);
+          await SecureStore.setItemAsync("TOKEN", token);
+          set({
+            auth: {
+              session: token,
+              instance,
+              status: "authenticated",
+            },
+          });
+          router.replace("/(tabs)/dashboard");
+        } else {
+          Alert.alert("Error", "Invalid token");
+        }
+      } catch (err: any) {
+        if (err?.message === "TIMEOUT") {
+          Alert.alert(
+            "Request timed out",
+            "Unable to reach the server in time. Please check your network configuration and try again."
+          );
+        } else {
+          Alert.alert(
+            "Network error",
+            "Could not connect to the server. Please check your network configuration and try again."
+          );
+        }
+      }
+    } else {
+      try {
+        const res = await Promise.race([
+          fetch(`${instance}/api/v1/session`, {
+            method: "POST",
+            body: JSON.stringify({ username, password }),
+            headers: { "Content-Type": "application/json" },
+          }),
+          new Promise<Response>((_, reject) =>
+            setTimeout(() => reject(new Error("TIMEOUT")), 30000)
+          ),
+        ]);
+
+        if (res.ok) {
+          const data = await res.json();
+          const session = (data as any).response.token;
+
+          await SecureStore.setItemAsync("TOKEN", session);
+          await SecureStore.setItemAsync("INSTANCE", instance);
+          set({ auth: { session, instance, status: "authenticated" } });
+          router.replace("/(tabs)/dashboard");
+        } else {
+          Alert.alert("Error", "Invalid credentials");
+        }
+      } catch (err: any) {
+        if (err?.message === "TIMEOUT") {
+          Alert.alert(
+            "Request timed out",
+            "Unable to reach the server in time. Please check your network configuration and try again."
+          );
+        } else {
+          Alert.alert(
+            "Network error",
+            "Could not connect to the server. Please check your network configuration and try again."
+          );
+        }
+      }
+    }
+  },
+  signOut: async () => {
+    await SecureStore.deleteItemAsync("TOKEN");
+    await SecureStore.deleteItemAsync("INSTANCE");
+
+    queryClient.cancelQueries();
+    queryClient.clear();
+    mmkvPersister.removeClient?.();
+
+    await clearCache();
+
+    set({
+      auth: {
+        instance: "",
+        session: null,
+        status: "unauthenticated",
+      },
+    });
+
+    router.replace("/");
+  },
+}));
+
+export default useAuthStore;

apps/mobile/store/data.ts

@@ -0,0 +1,38 @@
+import { create } from "zustand";
+import { MobileData } from "@linkwarden/types/global";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { colorScheme } from "nativewind";
+
+type DataStore = {
+  data: MobileData;
+  updateData: (newData: Partial<MobileData>) => void;
+  setData: () => void;
+};
+
+const useDataStore = create<DataStore>((set, get) => ({
+  data: {
+    shareIntent: {
+      hasShareIntent: false,
+      url: "",
+    },
+    theme: "system",
+    preferredBrowser: "app",
+    preferredCollection: null,
+  },
+  setData: async () => {
+    const dataString = JSON.parse((await AsyncStorage.getItem("data")) || "{}");
+
+    colorScheme.set(dataString.theme || "system");
+
+    if (dataString)
+      set((state) => ({ data: { ...state.data, ...dataString } }));
+  },
+  updateData: async (patch) => {
+    const merged = { ...get().data, ...patch };
+    const { shareIntent, ...persistable } = merged;
+    await AsyncStorage.setItem("data", JSON.stringify(persistable));
+    set({ data: merged });
+  },
+}));
+
+export default useDataStore;

apps/mobile/store/tmp.ts

@@ -0,0 +1,26 @@
+import { create } from "zustand";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types/global";
+import { User } from "@linkwarden/prisma/client";
+
+type Tmp = {
+  link: LinkIncludingShortenedCollectionAndTags | null;
+  user: Pick<User, "id"> | null;
+};
+
+type TmpStore = {
+  tmp: Tmp;
+  updateTmp: (newData: Partial<Tmp>) => void;
+};
+
+const useTmpStore = create<TmpStore>((set, get) => ({
+  tmp: {
+    link: null,
+    user: null,
+  },
+  updateTmp: async (patch) => {
+    const merged = { ...get().tmp, ...patch };
+    set({ tmp: merged });
+  },
+}));
+
+export default useTmpStore;

apps/mobile/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/mobile/tailwind.config.js

@@ -0,0 +1,39 @@
+/** @type {import('tailwindcss').Config} */
+
+const { rawTheme } = require("./lib/colors");
+
+const hexToRgb = (hex) => {
+  const [r, g, b] = hex
+    .replace(/^#/, "")
+    .match(/.{2}/g)
+    .map((h) => parseInt(h, 16));
+  return `${r} ${g} ${b}`;
+};
+
+module.exports = {
+  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
+  presets: [require("nativewind/preset")],
+  darkMode: "media",
+  theme: {
+    extend: {
+      colors: Object.fromEntries(
+        Object.keys(rawTheme.light).map((key) => [
+          key,
+          `rgb(var(--color-${key}) / <alpha-value>)`,
+        ])
+      ),
+    },
+  },
+  plugins: [
+    ({ addBase }) => {
+      addBase({
+        ":root": Object.fromEntries(
+          Object.entries(rawTheme.light).map(([key, hex]) => [
+            `--color-${key}`,
+            hexToRgb(hex),
+          ])
+        ),
+      });
+    },
+  ],
+};

apps/mobile/tsconfig.json

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

apps/mobile/types/global.ts

@@ -0,0 +1,43 @@
+export enum Sort {
+  DateNewestFirst,
+  DateOldestFirst,
+  NameAZ,
+  NameZA,
+  DescriptionAZ,
+  DescriptionZA,
+}
+
+export type LinkRequestQuery = {
+  sort?: Sort;
+  cursor?: number;
+  collectionId?: number;
+  tagId?: number;
+  pinnedOnly?: boolean;
+  searchQueryString?: string;
+  searchByName?: boolean;
+  searchByUrl?: boolean;
+  searchByDescription?: boolean;
+  searchByTextContent?: boolean;
+  searchByTags?: boolean;
+};
+
+export type LinkIncludingShortenedCollectionAndTags = {
+  id: number;
+  name: string;
+  url: string;
+  description: string;
+  type: "url" | "image" | "pdf";
+  preview: string | null;
+  createdAt: string;
+  updatedAt: string;
+  collectionId: number;
+  tags: { id: number; name: string }[];
+};
+
+export enum ArchivedFormat {
+  png = 0,
+  jpeg = 1,
+  pdf = 2,
+  readability = 3,
+  monolith = 4,
+}

apps/mobile/types/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

apps/web/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

apps/web/components/AdminSidebar.tsx

@@ -0,0 +1,125 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "next-i18next";
+import { useUser } from "@linkwarden/router/user";
+import Image from "next/image";
+
+export default function AdminSidebar({ className }: { className?: string }) {
+  const { t } = useTranslation();
+  const LINKWARDEN_VERSION = process.env.version;
+
+  const { data: user } = useUser();
+
+  const router = useRouter();
+  const [active, setActive] = useState("");
+
+  useEffect(() => {
+    setActive(router.asPath);
+  }, [router]);
+
+  return (
+    <div
+      className={`bg-base-200 h-screen w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 flex flex-col gap-5 justify-between ${
+        className || ""
+      }`}
+    >
+      <div className="flex flex-col gap-1">
+        <div className="flex items-center justify-between mb-4">
+          {user?.theme === "light" ? (
+            <Image
+              src={"/linkwarden_light.png"}
+              width={640}
+              height={136}
+              alt="Linkwarden"
+              className="h-9 w-auto cursor-pointer"
+              onClick={() => router.push("/dashboard")}
+              priority
+            />
+          ) : (
+            <Image
+              src={"/linkwarden_dark.png"}
+              width={640}
+              height={136}
+              alt="Linkwarden"
+              className="h-9 w-auto cursor-pointer"
+              onClick={() => router.push("/dashboard")}
+              priority
+            />
+          )}
+        </div>
+        <Link href="/admin/user-administration">
+          <div
+            className={`${
+              active === "/admin/user-administration"
+                ? "bg-primary/20"
+                : "hover:bg-neutral/20"
+            } duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`}
+          >
+            <i className="bi-people text-primary text-xl drop-shadow"></i>
+            <p className="truncate w-full font-semibold text-sm">
+              {t("user_administration")}
+            </p>
+          </div>
+        </Link>
+
+        <Link href="/admin/background-jobs">
+          <div
+            className={`${
+              active === "/admin/background-jobs"
+                ? "bg-primary/20"
+                : "hover:bg-neutral/20"
+            } duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`}
+          >
+            <i className="bi-gear-wide-connected text-primary text-xl drop-shadow"></i>
+            <p className="truncate w-full font-semibold text-sm">
+              {t("background_jobs")}
+            </p>
+          </div>
+        </Link>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <Link
+          href={`https://github.com/linkwarden/linkwarden/releases`}
+          target="_blank"
+          className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
+        >
+          {t("linkwarden_version", { version: LINKWARDEN_VERSION })}
+        </Link>
+        <Link href="https://docs.linkwarden.app" target="_blank">
+          <div
+            className={`hover:bg-neutral/20 duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`}
+          >
+            <i className="bi-question-circle text-primary text-xl drop-shadow"></i>
+            <p className="truncate w-full font-semibold text-sm">{t("help")}</p>
+          </div>
+        </Link>
+        <Link href="https://github.com/linkwarden/linkwarden" target="_blank">
+          <div
+            className={`hover:bg-neutral/20 duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`}
+          >
+            <i className="bi-github text-primary text-xl drop-shadow"></i>
+            <p className="truncate w-full font-semibold text-sm">{t("github")}</p>
+          </div>
+        </Link>
+        <Link href="https://twitter.com/LinkwardenHQ" target="_blank">
+          <div
+            className={`hover:bg-neutral/20 duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`}
+          >
+            <i className="bi-twitter-x text-primary text-xl drop-shadow"></i>
+            <p className="truncate w-full font-semibold text-sm">{t("twitter")}</p>
+          </div>
+        </Link>
+        <Link href="https://fosstodon.org/@linkwarden" target="_blank">
+          <div
+            className={`hover:bg-neutral/20 duration-200 cursor-pointer flex items-center gap-2 rounded-lg px-3 py-1`}
+          >
+            <i className="bi-mastodon text-primary text-xl drop-shadow"></i>
+            <p className="truncate w-full font-semibold text-sm">{t("mastodon")}</p>
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+}