Merge pull request #1379 from linkwarden/dev

bug fix

.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"
 }

.env.sample

@@ -1,25 +1,462 @@
-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=
-RE_ARCHIVE_LIMIT=
+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=
+
+# 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=
 
-# Docker postgres settings
-POSTGRES_PASSWORD=
+# Proxy settings
+PROXY=
+PROXY_USERNAME=
+PROXY_PASSWORD=
+PROXY_BYPASS=
+
+# 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=
+
+# 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/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/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,139 @@
+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
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: 'yarn'
+
+      - 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 -y
+
+      - 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,5 +1,5 @@
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
@@ -7,7 +7,7 @@
 /coverage
 
 # next.js
-/.next/
+.next
 /out/
 
 # production
@@ -34,16 +34,21 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+# tests
+/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
+certificates
+
 # generated files and folders
 /data
 .idea
 prisma/dev.db
-
-# tests
-/tests
-/test-results/
-/playwright-report/
-/playwright/.cache/
-
-# docker
-pgdata
+data.ms
+.turbo

.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\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
+}

Dockerfile

@@ -1,4 +1,16 @@
-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:22.14-bullseye-slim AS main-app
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -6,18 +18,42 @@ RUN mkdir /data
 
 WORKDIR /data
 
-COPY ./package.json ./yarn.lock ./playwright.config.ts ./
+COPY ./apps/web/package.json ./apps/web/playwright.config.ts ./apps/web/
 
-# Increase timeout to pass github actions arm64 build
-RUN yarn install --network-timeout 10000000
+COPY ./apps/worker/package.json ./apps/worker/
 
-RUN npx playwright install-deps && \
+COPY ./packages ./packages
+
+COPY ./yarn.lock ./package.json ./
+
+RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn \
+    set -eux && \
+    yarn install --network-timeout 10000000 && \
+    # 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
 
-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,95 +1,119 @@
 <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://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=36942308"><img src="https://img.shields.io/badge/Hacker%20News-280-%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, PDF, and readable view of each webpage.
+- 📸 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)
-- 📂 Organize links by collection, name, description and multiple tags.
+- ✨ 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 with the world.
+- 🎛️ Customize the permissions of each member.
+- 🌐 Share your collected links and preserved formats with the world.
 - 📌 Pin your favorite links to dashboard.
 - 🔍 Full text search, filter and sort for easy retrieval.
 - 📱 Responsive design and supports most modern browsers.
 - 🌓 Dark/Light mode support.
-- 🧩 Browser extension, managed by the community. [Star it here!](https://github.com/linkwarden/browser-extension)
-- ⬇️ Import your bookmarks from other browsers.
-- ⚡️ Powerful API.
+- 🧩 Browser extension. [Star it here!](https://github.com/linkwarden/browser-extension)
+- 🔄 Browser Synchronization (using [Floccus](https://floccus.org)!)
+- ⬇️ Import and export your bookmarks.
+- 🔐 SSO integration. (Enterprise and Self-hosted users only)
+- 📦 Installable Progressive Web App (PWA).
+- 🍎 iOS Shortcut to save Links to Linkwarden.
+- 🔑 API keys.
+- ✅ Bulk actions.
+- 👥 User administration.
+- 🌐 Support for Other Languages (i18n).
+- 📁 Image and PDF Uploads.
+- 🎨 Custom Icons for Links and Collections.
+- 🔔 RSS Feed Subscription.
+- ✨ And many more features. (Literally!)
+
+## 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!
 
@@ -100,3 +124,9 @@ Here are the other ways to support/cheer this project:
 - 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/.env.sample

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

apps/mobile/.gitignore

@@ -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/.npmrc

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

apps/mobile/app.json

@@ -0,0 +1,55 @@
+{
+  "expo": {
+    "name": "Linkwarden",
+    "slug": "linkwarden",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "linkwarden",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": true,
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.linkwarden"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.anonymous.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"
+        }
+      ],
+      "expo-secure-store",
+      "expo-share-intent",
+      "./plugins/with-daynight-transparent-nav"
+    ],
+    "experiments": {
+      "typedRoutes": true
+    },
+    "androidStatusBar": {
+      "backgroundColor": "#ffffff",
+      "barStyle": "dark-content",
+      "translucent": false
+    },
+    "androidNavigationBar": {
+      "backgroundColor": "#ffffff",
+      "barStyle": "dark-content"
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+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 { 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"],
+          },
+          default: {
+            borderTopWidth: 0,
+            backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+            elevation: 0,
+          },
+        }),
+      }}
+    >
+      <Tabs.Screen
+        name="dashboard"
+        options={{
+          title: "Dashboard",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <House size={26} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="links"
+        options={{
+          title: "Links",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <Link size={26} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          headerShown: false,
+          tabBarIcon: ({ color }) => <Settings size={26} color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}

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

@@ -0,0 +1,84 @@
+import { useLinks } from "@linkwarden/router/links";
+import { View, StyleSheet, FlatList, Platform } from "react-native";
+import useAuthStore from "@/store/auth";
+import LinkListing from "@/components/LinkListing";
+import { useLocalSearchParams, useNavigation } from "expo-router";
+import React, { useEffect, useState } from "react";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import { useCollections } from "@linkwarden/router/collections";
+
+const RenderItem = React.memo(
+  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
+    return <LinkListing link={item} />;
+  }
+);
+
+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);
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerTitle:
+        section === "pinned-links"
+          ? "Pinned Links"
+          : section === "recent-links"
+            ? "Recent Links"
+            : section === "collection"
+              ? collections.data?.find((c) => c.id?.toString() === collectionId)
+                  ?.name || "Collection"
+              : "Links",
+    });
+  }, [section, 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}
+    >
+      <FlatList
+        contentInsetAdjustmentBehavior="automatic"
+        ListHeaderComponent={() => <></>}
+        data={links || []}
+        onRefresh={() => data.refetch()}
+        refreshing={data.isRefetching}
+        initialNumToRender={4}
+        keyExtractor={(item) => item.id?.toString() || ""}
+        renderItem={({ item }) => (
+          <RenderItem item={item} key={item.id?.toString()} />
+        )}
+        onEndReached={() => data.fetchNextPage()}
+        onEndReachedThreshold={0.5}
+        ItemSeparatorComponent={() => <View className="bg-base-200 h-px" />}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 83,
+    },
+    default: {},
+  }),
+});

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

@@ -0,0 +1,86 @@
+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 RootLayout() {
+  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="more-options" disabled>
+                  <DropdownMenu.ItemTitle>
+                    More Coming Soon!
+                  </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,401 @@
+import {
+  FlatList,
+  Platform,
+  RefreshControl,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useDashboardData } from "@linkwarden/router/dashboardData";
+import useAuthStore from "@/store/auth";
+import React, { useEffect, useMemo, useState } from "react";
+import { DashboardSection, DashboardSectionType } from "@prisma/client";
+import { useUser } from "@linkwarden/router/user";
+import { useCollections } from "@linkwarden/router/collections";
+import { useTags } from "@linkwarden/router/tags";
+import clsx from "clsx";
+import DashboardItem from "@/components/DashboardItem";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import LinkListing from "@/components/LinkListing";
+import { useRouter } from "expo-router";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import {
+  Clock8,
+  ChevronRight,
+  Pin,
+  Folder,
+  Hash,
+  Link,
+} from "lucide-react-native";
+
+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 = [] } = useCollections(auth);
+  const { data: tags = [] } = useTags(auth);
+
+  const { colorScheme } = useColorScheme();
+
+  const router = useRouter();
+
+  const [dashboardSections, setDashboardSections] = useState<
+    DashboardSection[]
+  >(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]);
+
+  interface SectionProps {
+    sectionData: { type: DashboardSectionType };
+    collection?: any;
+    links?: any[];
+    tagsLength: number;
+    numberOfLinks: number;
+    collectionsLength: number;
+    numberOfPinnedLinks: number;
+    dashboardData: { isLoading: boolean };
+    collectionLinks?: any[];
+  }
+
+  const Section: React.FC<SectionProps> = ({
+    sectionData,
+    collection,
+    links = [],
+    tagsLength,
+    numberOfLinks,
+    collectionsLength,
+    numberOfPinnedLinks,
+    dashboardData,
+    collectionLinks = [],
+  }) => {
+    switch (sectionData.type) {
+      case DashboardSectionType.STATS:
+        return (
+          <View className="flex-col gap-4 max-w-full px-5">
+            <View className="flex-row gap-4">
+              <DashboardItem
+                name={numberOfLinks === 1 ? "Link" : "Links"}
+                value={numberOfLinks}
+                icon={<Link 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 DashboardSectionType.RECENT_LINKS:
+        return (
+          <>
+            <View className="flex-row justify-between items-center px-5">
+              <View className="flex-row gap-2 items-center">
+                <View className={"flex-row items-center gap-2"}>
+                  <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,
+                }}
+              />
+            ) : (
+              <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 DashboardSectionType.PINNED_LINKS:
+        return (
+          <>
+            <View className="flex-row justify-between items-center px-5">
+              <View className="flex-row gap-2 items-center">
+                <View className={"flex-row items-center gap-2"}>
+                  <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]) || []
+                }
+                // onRefresh={() => data.refetch()}
+                refreshing={dashboardData.isLoading}
+                initialNumToRender={2}
+                keyExtractor={(item) => item.id?.toString() || ""}
+                renderItem={({ item }) => (
+                  <RenderItem item={item} key={item.id?.toString()} />
+                )}
+                ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
+                contentContainerStyle={{
+                  paddingHorizontal: 20,
+                }}
+              />
+            ) : (
+              <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 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 DashboardSectionType.COLLECTION:
+        return collection?.id ? (
+          <>
+            <View className="flex-row justify-between items-center px-5">
+              <View className="flex-row gap-2 items-center max-w-[60%]">
+                <View className={clsx("flex-row items-center gap-2")}>
+                  <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 || []}
+                // onRefresh={() => data.refetch()}
+                refreshing={dashboardData.isLoading}
+                initialNumToRender={2}
+                keyExtractor={(item) => item.id?.toString() || ""}
+                renderItem={({ item }) => (
+                  <RenderItem item={item} key={item.id?.toString()} />
+                )}
+                ItemSeparatorComponent={() => <View style={{ width: 10 }} />}
+                contentContainerStyle={{
+                  paddingHorizontal: 20,
+                }}
+              />
+            ) : (
+              <View className="flex-col gap-2 justify-center items-center h-40 p-10 rounded-xl bg-base-200 mx-5">
+                <Text className="text-center text-xl text-neutral">
+                  Empty Collection
+                </Text>
+              </View>
+            )}
+          </>
+        ) : null;
+
+      default:
+        return null;
+    }
+  };
+
+  const RenderItem = React.memo(
+    ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
+      return <LinkListing link={item} dashboard />;
+    }
+  );
+
+  return (
+    <SafeAreaView
+      style={styles.container}
+      collapsable={false}
+      collapsableChildren={false}
+      className="bg-base-100 h-full"
+    >
+      <ScrollView
+        refreshControl={
+          <RefreshControl
+            refreshing={dashboardData.isLoading || userData.isLoading}
+            onRefresh={() => {
+              dashboardData.refetch();
+              userData.refetch();
+            }}
+          />
+        }
+        contentContainerStyle={{
+          flexDirection: "column",
+          gap: 15,
+          paddingVertical: 20,
+        }}
+        className="bg-base-100"
+        contentInsetAdjustmentBehavior="automatic"
+      >
+        {orderedSections.map((sectionData) => {
+          return (
+            <Section
+              key={sectionData.id}
+              sectionData={sectionData}
+              collection={collections.find(
+                (c) => c.id === sectionData.collectionId
+              )}
+              collectionLinks={
+                sectionData.collectionId
+                  ? collectionLinks[sectionData.collectionId]
+                  : []
+              }
+              links={links}
+              tagsLength={tags.length}
+              numberOfLinks={numberOfLinks}
+              collectionsLength={collections.length}
+              numberOfPinnedLinks={numberOfPinnedLinks}
+              dashboardData={dashboardData}
+            />
+          );
+        })}
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 49,
+    },
+    default: {},
+  }),
+});

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 RootLayout() {
+  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",
+          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,62 @@
+import { useLinks } from "@linkwarden/router/links";
+import { View, StyleSheet, FlatList, Platform } from "react-native";
+import useAuthStore from "@/store/auth";
+import LinkListing from "@/components/LinkListing";
+import { useLocalSearchParams } from "expo-router";
+import React from "react";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+
+const RenderItem = React.memo(
+  ({ item }: { item: LinkIncludingShortenedCollectionAndTags }) => {
+    return <LinkListing link={item} />;
+  }
+);
+
+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}
+    >
+      <FlatList
+        contentInsetAdjustmentBehavior="automatic"
+        ListHeaderComponent={() => <></>}
+        data={links || []}
+        onRefresh={() => data.refetch()}
+        refreshing={data.isRefetching}
+        initialNumToRender={4}
+        keyExtractor={(item) => item.id?.toString() || ""}
+        renderItem={({ item }) => (
+          <RenderItem item={item} key={item.id?.toString()} />
+        )}
+        onEndReached={() => data.fetchNextPage()}
+        onEndReachedThreshold={0.5}
+        ItemSeparatorComponent={() => (
+          <View className="bg-neutral-content h-px" />
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: Platform.select({
+    ios: {
+      paddingBottom: 83,
+    },
+    default: {},
+  }),
+});

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

@@ -0,0 +1,33 @@
+import { Stack } from "expo-router";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { Platform } from "react-native";
+
+export default function RootLayout() {
+  const { 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"],
+        },
+        headerStyle: {
+          backgroundColor:
+            Platform.OS === "ios"
+              ? "transparent"
+              : colorScheme === "dark"
+                ? rawTheme["dark"]["base-100"]
+                : "white",
+        },
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,211 @@
+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 {
+  Check,
+  FileText,
+  Globe,
+  LogOut,
+  Moon,
+  Smartphone,
+  Sun,
+} from "lucide-react-native";
+import useDataStore from "@/store/data";
+import { ArchivedFormat } from "@/types/global";
+
+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]);
+
+  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">
+            Default Behavior for Opening Links
+          </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({
+                  preferredFormat: null,
+                })
+              }
+            >
+              <View className="flex-row items-center gap-2">
+                <Globe
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-base-content">Open original content</Text>
+              </View>
+              {data.preferredFormat === null ? (
+                <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({
+                  preferredFormat: ArchivedFormat.readability,
+                })
+              }
+            >
+              <View className="flex-row items-center gap-2">
+                <FileText
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].neutral}
+                />
+                <Text className="text-base-content">Open reader view</Text>
+              </View>
+              {data.preferredFormat === ArchivedFormat.readability ? (
+                <Check
+                  size={20}
+                  color={rawTheme[colorScheme as ThemeName].primary}
+                />
+              ) : null}
+            </TouchableOpacity>
+          </View>
+        </View>
+
+        <Text className="mx-auto text-sm text-neutral">
+          Linkwarden for {Platform.OS === "ios" ? "iOS" : "Android"}{" "}
+          {nativeApplicationVersion}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

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,186 @@
+import {
+  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 { SheetProvider } from "react-native-actions-sheet";
+import "@/components/ActionSheets/Sheets";
+import { useColorScheme } from "nativewind";
+import { lightTheme, darkTheme } from "../lib/theme";
+import { Platform, 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 { QueryClient } from "@tanstack/react-query";
+import * as FileSystem from "expo-file-system";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 60 * 24,
+      refetchOnMount: true,
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
+export default function RootLayout() {
+  const [isLoading, setIsLoading] = useState(true);
+  const { colorScheme } = useColorScheme();
+  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(() => {
+    (async () => {
+      if (auth.status === "unauthenticated") {
+        queryClient.cancelQueries();
+        queryClient.clear();
+        mmkvPersister.removeClient?.();
+
+        const CACHE_DIR =
+          FileSystem.documentDirectory + "archivedData/readable/";
+        await FileSystem.deleteAsync(CACHE_DIR, { idempotent: true });
+      }
+    })();
+  }, [auth.status]);
+
+  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();
+      }}
+    >
+      <View
+        style={[{ flex: 1 }, colorScheme === "dark" ? darkTheme : lightTheme]}
+      >
+        <SheetProvider>
+          {!isLoading && (
+            <Stack
+              screenOptions={{
+                navigationBarColor:
+                  rawTheme[colorScheme as ThemeName]["base-200"],
+                headerShown: false,
+                contentStyle: {
+                  backgroundColor:
+                    rawTheme[colorScheme as ThemeName]["base-100"],
+                },
+                ...Platform.select({
+                  android: {
+                    statusBarStyle: colorScheme === "dark" ? "light" : "dark",
+                    statusBarBackgroundColor:
+                      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",
+                  navigationBarColor:
+                    rawTheme[colorScheme as ThemeName]["base-100"],
+                  headerStyle: {
+                    backgroundColor:
+                      colorScheme === "dark"
+                        ? rawTheme["dark"]["base-100"]
+                        : "white",
+                  },
+                }}
+              />
+              <Stack.Screen
+                name="login"
+                options={{
+                  navigationBarColor:
+                    rawTheme[colorScheme as ThemeName]["base-100"],
+                  ...Platform.select({
+                    android: {
+                      statusBarStyle:
+                        colorScheme === "light" ? "light" : "dark",
+                      statusBarBackgroundColor:
+                        rawTheme[colorScheme as ThemeName]["primary"],
+                    },
+                  }),
+                }}
+              />
+              <Stack.Screen
+                name="incoming"
+                options={{
+                  navigationBarColor:
+                    rawTheme[colorScheme as ThemeName]["base-100"],
+                }}
+              />
+              <Stack.Screen name="+not-found" />
+            </Stack>
+          )}
+        </SheetProvider>
+      </View>
+    </PersistQueryClientProvider>
+  );
+}

apps/mobile/app/incoming.tsx

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

apps/mobile/app/index.tsx

@@ -0,0 +1,12 @@
+import useAuthStore from "@/store/auth";
+import { Redirect } from "expo-router";
+
+export default function HomeScreen() {
+  const { auth } = useAuthStore();
+
+  if (auth.session) {
+    return <Redirect href="/(tabs)/dashboard" />;
+  } else {
+    return <Redirect href="/login" />;
+  }
+}

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

@@ -0,0 +1,186 @@
+import React, { useEffect, useMemo, useState } from "react";
+import {
+  View,
+  ActivityIndicator,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+} from "react-native";
+import { WebView } from "react-native-webview";
+import * as FileSystem from "expo-file-system";
+import NetInfo from "@react-native-community/netinfo";
+import useAuthStore from "@/store/auth";
+import { useLocalSearchParams, useRouter } from "expo-router";
+import { useUser } from "@linkwarden/router/user";
+import { generateLinkHref } from "@linkwarden/lib/generateLinkHref";
+import { useWindowDimensions } from "react-native";
+import RenderHtml from "@linkwarden/react-native-render-html";
+import ElementNotSupported from "@/components/ElementNotSupported";
+import { decode } from "html-entities";
+import { useGetLink } from "@linkwarden/router/links";
+import { useColorScheme } from "nativewind";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { CalendarDays, Link } from "lucide-react-native";
+
+const CACHE_DIR = FileSystem.documentDirectory + "archivedData/readable/";
+const htmlPath = (id: string) => `${CACHE_DIR}link_${id}.html`;
+
+async function ensureCacheDir() {
+  const info = await FileSystem.getInfoAsync(CACHE_DIR);
+  if (!info.exists) {
+    await FileSystem.makeDirectoryAsync(CACHE_DIR, { intermediates: true });
+  }
+}
+
+export default function LinkScreen() {
+  const { auth } = useAuthStore();
+  const { id, format } = useLocalSearchParams();
+  const { data: user } = useUser(auth);
+  const [url, setUrl] = useState<string>();
+  const [htmlContent, setHtmlContent] = useState<string>("");
+  const [isLoading, setIsLoading] = useState(true);
+  const { width } = useWindowDimensions();
+  const router = useRouter();
+  const { colorScheme } = useColorScheme();
+
+  const { data: link } = useGetLink({ id: Number(id), auth, enabled: true });
+
+  useEffect(() => {
+    async function loadCacheOrFetch() {
+      await ensureCacheDir();
+      const htmlFile = htmlPath(id as string);
+
+      const [htmlInfo] = await Promise.all([FileSystem.getInfoAsync(htmlFile)]);
+
+      if (format === "3" && htmlInfo.exists) {
+        const rawHtml = await FileSystem.readAsStringAsync(htmlFile);
+        setHtmlContent(rawHtml);
+        setIsLoading(false);
+      }
+
+      const net = await NetInfo.fetch();
+      if (net.isConnected) {
+        await fetchLinkData();
+      }
+    }
+
+    if (user?.id && link?.id && !url) {
+      loadCacheOrFetch();
+    }
+  }, [user, link]);
+
+  async function fetchLinkData() {
+    if (link?.id && format === "3") {
+      const apiUrl = `${auth.instance}/api/v1/archives/${link.id}?format=${format}`;
+      setUrl(apiUrl);
+      try {
+        const response = await fetch(apiUrl, {
+          headers: { Authorization: `Bearer ${auth.session}` },
+        });
+        const html = (await response.json()).content;
+        setHtmlContent(html);
+        await FileSystem.writeAsStringAsync(htmlPath(id as string), html, {
+          encoding: FileSystem.EncodingType.UTF8,
+        });
+      } catch (e) {
+        console.error("Failed to fetch HTML content", e);
+      } finally {
+        setIsLoading(false);
+      }
+    } else if (link?.id && !format && user) {
+      setUrl(
+        generateLinkHref(link, { ...user, password: "" }, auth.instance, true)
+      );
+    } else if (link?.id && format) {
+      setUrl(`${auth.instance}/api/v1/archives/${link.id}?format=${format}`);
+    }
+  }
+
+  return (
+    <>
+      {format === "3" && htmlContent ? (
+        <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/${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) as string
+              ).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: htmlContent }}
+            renderers={{
+              table: () => (
+                <ElementNotSupported
+                  onPress={() => router.replace(`/links/${id}`)}
+                />
+              ),
+            }}
+            tagsStyles={{
+              p: { fontSize: 18, lineHeight: 28, marginVertical: 10 },
+            }}
+            baseStyle={{
+              color: rawTheme[colorScheme as ThemeName]["base-content"],
+            }}
+          />
+        </ScrollView>
+      ) : url ? (
+        <WebView
+          className={isLoading ? "opacity-0" : "flex-1"}
+          source={{
+            uri: url,
+            headers: format ? { 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>
+      )}
+    </>
+  );
+}

apps/mobile/app/login.tsx

@@ -0,0 +1,104 @@
+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 { useState } from "react";
+import { View, Text, Dimensions, TouchableOpacity } from "react-native";
+import Svg, { Path } from "react-native-svg";
+
+export default function HomeScreen() {
+  const { auth, signIn } = useAuthStore();
+  const { colorScheme } = useColorScheme();
+  const [method, setMethod] = useState<"password" | "token">("password");
+
+  const [form, setForm] = useState({
+    user: "",
+    password: "",
+    token: "",
+    instance: "",
+  });
+
+  if (auth.status === "authenticated") {
+    return <Redirect href="/dashboard" />;
+  }
+
+  return (
+    <View className="flex-col justify-end h-full bg-primary">
+      <Text className="text-base-100 text-7xl font-bold ml-8">Login</Text>
+      <Svg
+        viewBox="0 0 1440 320"
+        width={Dimensions.get("screen").width}
+        height={100}
+      >
+        <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>
+      <View className="flex-col justify-end h-1/3 bg-base-100 -mt-2 pb-10 gap-4 w-full px-4">
+        {method === "password" ? (
+          <>
+            <Input
+              className="w-full text-xl p-3 leading-tight"
+              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"
+              textAlignVertical="center"
+              placeholder="Password"
+              secureTextEntry
+              value={form.password}
+              onChangeText={(text) => setForm({ ...form, password: text })}
+            />
+          </>
+        ) : (
+          <Input
+            className="w-full text-xl p-3 leading-tight"
+            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 instead"
+              : "Login with Username/Password instead"}
+          </Text>
+        </TouchableOpacity>
+
+        <Button
+          variant="accent"
+          size="lg"
+          onPress={() =>
+            signIn(
+              form.user,
+              form.password,
+              form.instance ? form.instance : undefined
+            )
+          }
+        >
+          <Text className="text-white">Login</Text>
+        </Button>
+        <TouchableOpacity className="w-fit mx-auto">
+          <Text className="text-neutral text-center w-fit">Need help?</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

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";
+
+export default function AddLinkSheet() {
+  const actionSheetRef = useRef<ActionSheetRef>(null);
+  const { auth } = useAuthStore();
+  const addLink = useAddLink(auth);
+  const [link, setLink] = useState("");
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <ActionSheet
+      ref={actionSheetRef}
+      gestureEnabled
+      indicatorStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["neutral-content"],
+      }}
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+    >
+      <View className="px-8 py-5">
+        <Input
+          placeholder="e.g. https://example.com"
+          className="mb-4 bg-base-100"
+          value={link}
+          onChangeText={setLink}
+        />
+
+        <Button
+          onPress={() =>
+            addLink.mutate(
+              { url: link },
+              {
+                onSuccess: () => {
+                  actionSheetRef.current?.hide();
+                  setLink("");
+                },
+                onError: (error) => {
+                  Alert.alert("Error", "There was an error adding the link.");
+                  console.error("Error adding link:", error);
+                },
+              }
+            )
+          }
+          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,263 @@
+import { View, Text, Alert } 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,
+} from "@linkwarden/types";
+import { useCollections } from "@linkwarden/router/collections";
+import { rawTheme, ThemeName } from "@/lib/colors";
+import { useColorScheme } from "nativewind";
+import { Folder, ChevronRight, Check } from "lucide-react-native";
+
+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 editLink = useUpdateLink(auth);
+  const router = useSheetRouter("edit-link-sheet");
+  const { colorScheme } = useColorScheme();
+
+  useEffect(() => {
+    if (params?.link) {
+      setLink(params.link);
+    }
+  }, [params?.link]);
+
+  return (
+    <View className="px-8 py-5">
+      <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">
+        {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-gray-200 rounded-md h-7 px-2 py-1"
+              >
+                <Text numberOfLines={1}>{tag.name}</Text>
+              </View>
+            ))}
+          </View>
+        ) : (
+          <Text className="text-gray-500">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={() =>
+          editLink.mutate(link as LinkIncludingShortenedCollectionAndTags, {
+            onSuccess: () => {
+              SheetManager.hide("edit-link-sheet");
+            },
+            onError: (error) => {
+              Alert.alert("Error", "There was an error editing the link.");
+              console.error("Error editing link:", error);
+            },
+          })
+        }
+        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 = () => {
+        // 1. Create a brand-new link object with the new collection
+        const updatedLink = {
+          ...currentLink!,
+          collection,
+        };
+
+        // 2. Navigate back to "main", passing the updated link as payload
+        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="px-8 py-5 max-h-[80vh]">
+      <Input
+        placeholder="Search collections"
+        className="mb-4 bg-base-100"
+        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>
+        }
+        contentContainerStyle={{ paddingBottom: 20 }}
+      />
+    </View>
+  );
+};
+
+const routes: Route[] = [
+  {
+    name: "main",
+    component: Main,
+  },
+  {
+    name: "collections",
+    component: Collections,
+  },
+];
+
+export default function EditLinkSheet() {
+  const { colorScheme } = useColorScheme();
+
+  return (
+    <ActionSheet
+      gestureEnabled
+      indicatorStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["neutral-content"],
+      }}
+      enableRouterBackNavigation={true}
+      routes={routes}
+      initialRoute="main"
+      containerStyle={{
+        backgroundColor: rawTheme[colorScheme as ThemeName]["base-200"],
+      }}
+    />
+  );
+}

apps/mobile/components/ActionSheets/Sheets.tsx

@@ -0,0 +1,32 @@
+import {
+  registerSheet,
+  RouteDefinition,
+  SheetDefinition,
+} from "react-native-actions-sheet";
+import AddLinkSheet from "./AddLinkSheet";
+import EditLinkSheet from "./EditLinkSheet";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+
+registerSheet("add-link-sheet", AddLinkSheet);
+registerSheet("edit-link-sheet", EditLinkSheet);
+
+declare module "react-native-actions-sheet" {
+  interface Sheets {
+    "add-link-sheet": SheetDefinition;
+    "edit-link-sheet": SheetDefinition<{
+      payload: {
+        link: LinkIncludingShortenedCollectionAndTags;
+      };
+      routes: {
+        main: RouteDefinition<{
+          link: LinkIncludingShortenedCollectionAndTags;
+        }>;
+        collections: RouteDefinition<{
+          link: LinkIncludingShortenedCollectionAndTags;
+        }>;
+      };
+    }>;
+  }
+}
+
+export {};

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/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/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,285 @@
+import { View, Text, Image, Pressable, Platform, Alert } from "react-native";
+import { decode } from "html-entities";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import { ArchivedFormat } from "@linkwarden/types";
+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";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  dashboard?: boolean;
+};
+
+const LinkListing = ({ link, dashboard }: Props) => {
+  const { auth } = useAuthStore();
+  const router = useRouter();
+  const updateLink = useUpdateLink(auth);
+  const { data: user } = useUser(auth);
+  const { colorScheme } = useColorScheme();
+  const { data } = useDataStore();
+
+  const deleteLink = useDeleteLink(auth);
+
+  let shortendURL;
+
+  try {
+    if (link.url) {
+      shortendURL = new URL(link.url).host.toLowerCase();
+    }
+  } catch (error) {
+    console.log(error);
+  }
+
+  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={() =>
+            router.push(
+              data.preferredFormat
+                ? `/links/${link.id}?format=${data.preferredFormat}`
+                : `/links/${link.id}`
+            )
+          }
+          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>
+
+              {shortendURL && (
+                <Text
+                  numberOfLines={1}
+                  className="mt-1.5 font-light text-sm text-base-content"
+                >
+                  {shortendURL}
+                </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 || ""}
+                  color={link.collection.color || ""}
+                />
+                <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"
+                  />
+                ) : (
+                  <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-link"
+          onSelect={() => router.push(`/links/${link.id}`)}
+        >
+          <ContextMenu.ItemTitle>Open Link</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={async () => {
+            const isAlreadyPinned =
+              link?.pinnedBy && link.pinnedBy[0] ? true : false;
+
+            await 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.push(
+                      `/links/${link.id}?format=${ArchivedFormat.monolith}`
+                    )
+                  }
+                >
+                  <ContextMenu.ItemTitle>Webpage</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              )}
+              {formatAvailable(link, "image") && (
+                <ContextMenu.Item
+                  key="preserved-formats-screenshot"
+                  onSelect={() =>
+                    router.push(
+                      `/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.push(
+                      `/links/${link.id}?format=${ArchivedFormat.pdf}`
+                    )
+                  }
+                >
+                  <ContextMenu.ItemTitle>PDF</ContextMenu.ItemTitle>
+                </ContextMenu.Item>
+              )}
+              {formatAvailable(link, "readable") && (
+                <ContextMenu.Item
+                  key="preserved-formats-readable"
+                  onSelect={() =>
+                    router.push(
+                      `/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: () => {
+                    deleteLink.mutate(link.id as number);
+                  },
+                },
+              ]
+            );
+          }}
+        >
+          <ContextMenu.ItemTitle>Delete</ContextMenu.ItemTitle>
+        </ContextMenu.Item>
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default LinkListing;

apps/mobile/components/Modals/AddLink.tsx

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

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/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/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/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/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,80 @@
+{
+  "name": "@linkwarden/mobile",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.2",
+    "@linkwarden/lib": "*",
+    "@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-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-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-gesture-handler": "~2.20.2",
+    "react-native-ios-context-menu": "3.1.0",
+    "react-native-ios-utilities": "5.1.2",
+    "react-native-mmkv": "^3.2.0",
+    "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.12",
+    "@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,97 @@
+import { create } from "zustand";
+import * as SecureStore from "expo-secure-store";
+import { router } from "expo-router";
+import { MobileAuth } from "@linkwarden/types";
+
+type AuthStore = {
+  auth: MobileAuth;
+  signIn: (username: string, password: string, instance?: string) => void;
+  signOut: () => void;
+  setAuth: () => void;
+};
+
+const useAuthStore = create<AuthStore>((set) => ({
+  auth: {
+    instance: "",
+    session: null,
+    status: "loading",
+  },
+  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: "",
+          session: null,
+          status: "unauthenticated",
+        },
+      });
+    }
+  },
+  signIn: async (
+    username,
+    password,
+    instance = process.env.NODE_ENV === "production"
+      ? "https://cloud.linkwarden.app"
+      : (process.env.EXPO_PUBLIC_LINKWARDEN_URL as string)
+  ) => {
+    if (process.env.EXPO_PUBLIC_SHOW_LOGS === "true")
+      console.log("Signing into", instance);
+
+    await fetch(instance + "/api/v1/session", {
+      method: "POST",
+      body: JSON.stringify({ username, password }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }).then(async (res) => {
+      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 {
+        set({
+          auth: {
+            instance,
+            session: null,
+            status: "unauthenticated",
+          },
+        });
+      }
+    });
+  },
+  signOut: async () => {
+    await SecureStore.deleteItemAsync("TOKEN");
+    set({
+      auth: {
+        instance: "",
+        session: null,
+        status: "unauthenticated",
+      },
+    });
+
+    router.replace("/login");
+  },
+}));
+
+export default useAuthStore;

apps/mobile/store/data.ts

@@ -0,0 +1,37 @@
+import { create } from "zustand";
+import { MobileData } from "@linkwarden/types";
+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: "light",
+    preferredFormat: null,
+  },
+  setData: async () => {
+    const dataString = JSON.parse((await AsyncStorage.getItem("data")) || "{}");
+
+    colorScheme.set(dataString.theme || "light");
+
+    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/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,
+  jpeg,
+  pdf,
+  readability,
+  monolith,
+}

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/Announcement.tsx

@@ -0,0 +1,37 @@
+import Link from "next/link";
+import React, { MouseEventHandler } from "react";
+import { Trans } from "next-i18next";
+import { Button } from "@/components/ui/button";
+
+type Props = {
+  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
+};
+
+export default function Announcement({ toggleAnnouncementBar }: Props) {
+  const announcementId = localStorage.getItem("announcementId");
+
+  return (
+    <div className="fixed mx-auto bottom-20 sm:bottom-10 w-full pointer-events-none p-5 z-30">
+      <div className="mx-auto pointer-events-auto p-2 flex justify-between gap-2 items-center border border-primary shadow-xl rounded-xl bg-base-300 backdrop-blur-sm bg-opacity-80 max-w-md">
+        <i className="bi-stars text-xl text-yellow-600 dark:text-yellow-500"></i>
+        <p className="w-4/5 text-center text-sm sm:text-base">
+          <Trans
+            i18nKey="new_version_announcement"
+            values={{ version: announcementId }}
+            components={[
+              <Link
+                href={`https://blog.linkwarden.app/releases/${announcementId}`}
+                target="_blank"
+                className="underline decoration-dotted underline-offset-4 hover:text-primary duration-100"
+                key={0}
+              />,
+            ]}
+          />
+        </p>
+        <Button variant="ghost" size="icon" onClick={toggleAnnouncementBar}>
+          <i className="bi-x text-xl"></i>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/components/Checkbox.tsx

@@ -0,0 +1,35 @@
+import { ChangeEventHandler } from "react";
+
+type Props = {
+  label: string;
+  state: boolean;
+  className?: string;
+  onClick: ChangeEventHandler<HTMLInputElement>;
+  disabled?: boolean;
+};
+
+export default function Checkbox({
+  label,
+  state,
+  className,
+  onClick,
+  disabled,
+}: Props) {
+  return (
+    <label
+      className={`label cursor-pointer flex gap-2 justify-start ${
+        className || ""
+      }`}
+      aria-disabled={disabled}
+    >
+      <input
+        type="checkbox"
+        checked={state}
+        onChange={onClick}
+        className="checkbox checkbox-primary"
+        disabled={disabled}
+      />
+      <span className="label-text">{label}</span>
+    </label>
+  );
+}

apps/web/components/ClickAwayHandler.tsx

@@ -8,19 +8,43 @@ type Props = {
   onMount?: (rect: DOMRect) => void;
 };
 
+function getZIndex(element: HTMLElement): number {
+  let zIndex = 0;
+  while (element) {
+    const zIndexStyle = window
+      .getComputedStyle(element)
+      .getPropertyValue("z-index");
+    const numericZIndex = Number(zIndexStyle);
+    if (zIndexStyle !== "auto" && !isNaN(numericZIndex)) {
+      zIndex = numericZIndex;
+      break;
+    }
+    element = element.parentElement as HTMLElement;
+  }
+  return zIndex;
+}
+
 function useOutsideAlerter(
   ref: RefObject<HTMLElement>,
   onClickOutside: Function
 ) {
   useEffect(() => {
-    function handleClickOutside(event: Event) {
-      if (
-        ref.current &&
-        !ref.current.contains(event.target as HTMLInputElement)
-      ) {
-        onClickOutside(event);
+    function handleClickOutside(event: MouseEvent) {
+      const clickedElement = event.target as HTMLElement;
+
+      if (clickedElement.closest("[data-ignore-click-away]")) {
+        return;
+      }
+
+      if (ref.current && !ref.current.contains(clickedElement)) {
+        const refZIndex = getZIndex(ref.current);
+        const clickedZIndex = getZIndex(clickedElement);
+        if (clickedZIndex <= refZIndex) {
+          onClickOutside(event);
+        }
       }
     }
+
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);

apps/web/components/CollectionCard.tsx

@@ -0,0 +1,225 @@
+import Link from "next/link";
+import {
+  AccountSettings,
+  CollectionIncludingMembersAndLinkCount,
+} from "@linkwarden/types";
+import React, { useEffect, useState } from "react";
+import ProfilePhoto from "./ProfilePhoto";
+import usePermissions from "@/hooks/usePermissions";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import EditCollectionModal from "./ModalContent/EditCollectionModal";
+import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
+import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
+import { useTranslation } from "next-i18next";
+import { useUser } from "@linkwarden/router/user";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "./ui/button";
+
+export default function CollectionCard({
+  collection,
+}: {
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const { t } = useTranslation();
+  const { data: user } = useUser();
+
+  const formattedDate = new Date(collection.createdAt as string).toLocaleString(
+    t("locale"),
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }
+  );
+
+  const permissions = usePermissions(collection.id as number);
+
+  const [collectionOwner, setCollectionOwner] = useState<
+    Partial<AccountSettings>
+  >({});
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (collection && collection.ownerId !== user?.id) {
+        const owner = await getPublicUserData(collection.ownerId as number);
+        setCollectionOwner(owner);
+      } else if (collection && collection.ownerId === user?.id) {
+        setCollectionOwner({
+          id: user?.id as number,
+          name: user?.name,
+          username: user?.username as string,
+          image: user?.image as string,
+          archiveAsScreenshot: user?.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user?.archiveAsMonolith as boolean,
+          archiveAsPDF: user?.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [collection]);
+
+  const [editCollectionModal, setEditCollectionModal] = useState(false);
+  const [editCollectionSharingModal, setEditCollectionSharingModal] =
+    useState(false);
+  const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
+
+  return (
+    <div className="relative">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="absolute top-3 right-3 z-20"
+          >
+            <i title="More" className="bi-three-dots text-xl" />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          sideOffset={4}
+          side="bottom"
+          align="end"
+          className="z-[30]"
+        >
+          {permissions === true && (
+            <DropdownMenuItem onSelect={() => setEditCollectionModal(true)}>
+              <i className="bi-pencil-square" />
+              {t("edit_collection_info")}
+            </DropdownMenuItem>
+          )}
+
+          <DropdownMenuItem
+            onSelect={() => setEditCollectionSharingModal(true)}
+          >
+            <i className="bi-globe" />
+            {permissions === true ? t("share_and_collaborate") : t("view_team")}
+          </DropdownMenuItem>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            onSelect={() => setDeleteCollectionModal(true)}
+            className="text-error"
+          >
+            {permissions === true ? (
+              <>
+                <i className="bi-trash" />
+                {t("delete_collection")}
+              </>
+            ) : (
+              <>
+                <i className="bi-box-arrow-left" />
+                {t("leave_collection")}
+              </>
+            )}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <div
+        className="flex items-center absolute bottom-3 left-3 z-10 px-1 py-1 rounded-full cursor-pointer hover:bg-base-content/20 transition-colors duration-200"
+        onClick={() => setEditCollectionSharingModal(true)}
+      >
+        {collectionOwner.id && (
+          <ProfilePhoto
+            src={collectionOwner.image || undefined}
+            name={collectionOwner.name}
+          />
+        )}
+        {collection.members
+          .sort((a, b) => (a.userId as number) - (b.userId as number))
+          .map((e, i) => {
+            return (
+              <ProfilePhoto
+                key={i}
+                src={e.user.image ? e.user.image : undefined}
+                name={e.user.name}
+                className="-ml-3"
+              />
+            );
+          })
+          .slice(0, 3)}
+        {collection.members.length - 3 > 0 && (
+          <div className={`avatar drop-shadow-md placeholder -ml-3`}>
+            <div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
+              <span>+{collection.members.length - 3}</span>
+            </div>
+          </div>
+        )}
+      </div>
+      <Link
+        href={`/collections/${collection.id}`}
+        style={{
+          backgroundImage: `linear-gradient(45deg, ${collection.color}30 10%, ${
+            user?.theme === "dark" ? "oklch(var(--b2))" : "oklch(var(--b2))"
+          } 50%, ${
+            user?.theme === "dark" ? "oklch(var(--b2))" : "oklch(var(--b2))"
+          } 100%)`,
+        }}
+        className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content"
+      >
+        <div className="card-body flex flex-col justify-between min-h-[12rem]">
+          <div className="flex justify-between">
+            <p className="card-title break-words line-clamp-2 w-full">
+              {collection.name}
+            </p>
+            <div className="w-8 h-8 ml-10"></div>
+          </div>
+
+          <div className="flex justify-end items-center">
+            <div className="text-right">
+              <div className="font-bold text-sm flex justify-end gap-1 items-center">
+                {collection.isPublic && (
+                  <i
+                    className="bi-globe2 drop-shadow text-neutral"
+                    title={t("collection_publicly_shared")}
+                  ></i>
+                )}
+                <i
+                  className="bi-link-45deg text-lg text-neutral"
+                  title={t("links")}
+                ></i>
+                {collection._count && collection._count.links}
+              </div>
+              <div className="flex items-center justify-end gap-1 text-neutral">
+                <p className="font-bold text-xs flex gap-1 items-center">
+                  <i
+                    className="bi-calendar3 text-neutral"
+                    title={t("collection_publicly_shared")}
+                  ></i>
+                  {formattedDate}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Link>
+      {editCollectionModal && (
+        <EditCollectionModal
+          onClose={() => setEditCollectionModal(false)}
+          activeCollection={collection}
+        />
+      )}
+      {editCollectionSharingModal && (
+        <EditCollectionSharingModal
+          onClose={() => setEditCollectionSharingModal(false)}
+          activeCollection={collection}
+        />
+      )}
+      {deleteCollectionModal && (
+        <DeleteCollectionModal
+          onClose={() => setDeleteCollectionModal(false)}
+          activeCollection={collection}
+        />
+      )}
+    </div>
+  );
+}

apps/web/components/CollectionListing.tsx

@@ -0,0 +1,498 @@
+import React, { useEffect, useMemo, useState } from "react";
+import Tree, {
+  mutateTree,
+  moveItemOnTree,
+  RenderItemParams,
+  TreeItem,
+  TreeData,
+  ItemId,
+  TreeSourcePosition,
+  TreeDestinationPosition,
+} from "@atlaskit/tree";
+import { Collection } from "@linkwarden/prisma/client";
+import Link from "next/link";
+import { CollectionIncludingMembersAndLinkCount } from "@linkwarden/types";
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import {
+  useCollections,
+  useUpdateCollection,
+} from "@linkwarden/router/collections";
+import { useUpdateUser, useUser } from "@linkwarden/router/user";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import Droppable from "./Droppable";
+import { cn } from "@linkwarden/lib";
+import { Active, useDndContext } from "@dnd-kit/core";
+
+interface ExtendedTreeItem extends TreeItem {
+  data: Collection;
+}
+
+const CollectionListing = () => {
+  const { active: droppableActive } = useDndContext();
+  const { t } = useTranslation();
+  const updateCollection = useUpdateCollection();
+  const { data: collections = [], isLoading } = useCollections();
+
+  const { data: user, refetch } = useUser();
+  const updateUser = useUpdateUser();
+
+  const router = useRouter();
+  const currentPath = router.asPath;
+
+  const [tree, setTree] = useState<TreeData | undefined>();
+
+  const initialTree = useMemo(() => {
+    if (collections.length > 0) {
+      return buildTreeFromCollections(
+        collections,
+        router,
+        tree,
+        user?.collectionOrder
+      );
+    } else return undefined;
+  }, [collections, user, router]);
+
+  useEffect(() => {
+    setTree(initialTree);
+  }, [initialTree]);
+
+  useEffect(() => {
+    if (user?.username) {
+      // refetch();
+      if (
+        (!user.collectionOrder || user.collectionOrder.length === 0) &&
+        collections.length > 0
+      )
+        updateUser.mutate({
+          ...user,
+          collectionOrder: collections
+            .filter((e) => e.parentId === null)
+            .map((e) => e.id as number),
+        });
+      else {
+        const newCollectionOrder: number[] = [...(user.collectionOrder || [])];
+
+        // Start with collections that are in both account.collectionOrder and collections
+        const existingCollectionIds = collections.map((c) => c.id as number);
+        const filteredCollectionOrder = user.collectionOrder.filter((id: any) =>
+          existingCollectionIds.includes(id)
+        );
+
+        // Add new collections that are not in account.collectionOrder and meet the specific conditions
+        collections.forEach((collection) => {
+          if (
+            !filteredCollectionOrder.includes(collection.id as number) &&
+            (!collection.parentId || collection.ownerId === user.id)
+          ) {
+            filteredCollectionOrder.push(collection.id as number);
+          }
+        });
+
+        // check if the newCollectionOrder is the same as the old one
+        if (
+          JSON.stringify(newCollectionOrder) !==
+          JSON.stringify(user.collectionOrder)
+        ) {
+          updateUser.mutateAsync({
+            ...user,
+            collectionOrder: newCollectionOrder,
+          });
+        }
+      }
+    }
+  }, [user, collections]);
+
+  const onExpand = (movedCollectionId: ItemId) => {
+    setTree((currentTree) =>
+      mutateTree(currentTree!, movedCollectionId, { isExpanded: true })
+    );
+  };
+
+  const onCollapse = (movedCollectionId: ItemId) => {
+    setTree((currentTree) =>
+      mutateTree(currentTree as TreeData, movedCollectionId, {
+        isExpanded: false,
+      })
+    );
+  };
+
+  function reorderTreeItems(
+    tree: TreeData,
+    movedCollectionId: ItemId,
+    source: TreeSourcePosition,
+    destination: TreeDestinationPosition
+  ) {
+    // Same parent reordering
+    if (source.parentId === destination.parentId) {
+      const parent = tree.items[source.parentId];
+      const children = [...parent.children];
+
+      // Remove from source index
+      children.splice(source.index, 1);
+      // Insert at destination index
+      if (destination.index !== undefined) {
+        children.splice(destination.index, 0, movedCollectionId);
+      }
+
+      parent.children = children;
+      return tree;
+    }
+
+    // Different parent move
+    const sourceParent = tree.items[source.parentId];
+    const destinationParent = tree.items[destination.parentId];
+
+    // Remove from source parent
+    sourceParent.children = sourceParent.children.filter(
+      (id) => id !== movedCollectionId
+    );
+
+    // Initialize children array if it doesn't exist
+    if (!destinationParent.children) {
+      destinationParent.children = [];
+    }
+
+    // If destination index is not specified, add to the end
+    const destinationIndex =
+      destination.index !== undefined
+        ? destination.index
+        : destinationParent.children.length;
+
+    // Add to destination parent
+    destinationParent.children.splice(destinationIndex, 0, movedCollectionId);
+
+    // Update destination parent properties
+    destinationParent.hasChildren = true;
+    destinationParent.isExpanded = true;
+
+    // Update the moved item's parent ID
+    tree.items[movedCollectionId].data.parentId = destination.parentId;
+
+    return tree;
+  }
+
+  function flattenTreeIds(
+    tree: TreeData,
+    nodeId: ItemId = "root",
+    result: Array<ItemId> = []
+  ) {
+    const node = tree.items[nodeId];
+
+    if (nodeId !== "root") {
+      result.push(node.id);
+    }
+
+    if (node.children && node.children.length > 0) {
+      node.children.forEach((childId) => {
+        flattenTreeIds(tree, childId, result);
+      });
+    }
+
+    return result;
+  }
+
+  const onDragEnd = async (
+    source: TreeSourcePosition,
+    destination: TreeDestinationPosition | undefined
+  ) => {
+    if (!destination || !tree) {
+      return;
+    }
+
+    if (
+      source.index === destination.index &&
+      source.parentId === destination.parentId
+    ) {
+      return;
+    }
+
+    const movedCollectionId = Number(
+      tree.items[source.parentId].children[source.index]
+    );
+
+    const movedCollection = collections.find((c) => c.id === movedCollectionId);
+
+    const destinationCollection = collections.find(
+      (c) => c.id === Number(destination.parentId)
+    );
+
+    if (
+      (movedCollection?.ownerId !== user?.id &&
+        destination.parentId !== source.parentId) ||
+      (destinationCollection?.ownerId !== user?.id &&
+        destination.parentId !== "root")
+    ) {
+      return toast.error(t("cant_change_collection_you_dont_own"));
+    }
+
+    setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
+
+    const newTree = reorderTreeItems(
+      tree,
+      movedCollectionId,
+      source,
+      destination
+    );
+
+    if (source.parentId !== destination.parentId) {
+      await updateCollection.mutateAsync(
+        {
+          ...movedCollection,
+          parentId:
+            destination.parentId && destination.parentId !== "root"
+              ? Number(destination.parentId)
+              : destination.parentId === "root"
+                ? "root"
+                : null,
+        },
+        {
+          onError: (error) => {
+            toast.error(error.message);
+          },
+        }
+      );
+    }
+
+    await updateUser.mutateAsync({
+      ...user,
+      collectionOrder: flattenTreeIds(newTree),
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="skeleton h-4 w-full"></div>
+        <div className="skeleton h-4 w-full"></div>
+        <div className="skeleton h-4 w-full"></div>
+      </div>
+    );
+  } else if (!tree) {
+    return (
+      <p className="text-neutral text-xs font-semibold truncate w-full px-2 mt-5 mb-8">
+        {t("you_have_no_collections")}
+      </p>
+    );
+  } else
+    return (
+      <Tree
+        tree={tree}
+        renderItem={(itemProps) =>
+          renderItem({ ...itemProps }, currentPath, droppableActive)
+        }
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+        onDragEnd={onDragEnd}
+        isDragEnabled
+        isNestingEnabled
+      />
+    );
+};
+
+export default CollectionListing;
+
+const renderItem = (
+  { item, onExpand, onCollapse, provided }: RenderItemParams,
+  currentPath: string,
+  droppableActive: Active | null
+) => {
+  const collection = item.data;
+
+  return (
+    <Droppable
+      id={`side-bar-collection-${collection.id}`}
+      data={{
+        name: collection.name,
+        id: collection.id,
+        ownerId: collection.ownerId,
+      }}
+      className="group"
+    >
+      <div
+        ref={provided.innerRef}
+        {...provided.draggableProps}
+        className="mb-1"
+      >
+        <div
+          className={cn(
+            currentPath === `/collections/${collection.id}`
+              ? "bg-primary/20 is-active"
+              : droppableActive
+                ? "select-none"
+                : "hover:bg-neutral/20",
+            "duration-100 flex gap-1 items-center pr-2 pl-1 rounded-md"
+          )}
+        >
+          {Dropdown(item as ExtendedTreeItem, onExpand, onCollapse)}
+
+          <Link
+            href={`/collections/${collection.id}`}
+            className="w-full"
+            {...provided.dragHandleProps}
+          >
+            <div
+              className={`py-1 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
+            >
+              {collection.icon ? (
+                <Icon
+                  icon={collection.icon}
+                  size={30}
+                  weight={(collection.iconWeight || "regular") as IconWeight}
+                  color={collection.color}
+                  className="-mr-[0.15rem]"
+                />
+              ) : (
+                <i
+                  className="bi-folder-fill text-xl"
+                  style={{ color: collection.color }}
+                ></i>
+              )}
+
+              <p className="truncate w-full">{collection.name}</p>
+
+              {collection.isPublic && (
+                <i
+                  className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
+                  title="This collection is being shared publicly."
+                ></i>
+              )}
+              <div className="drop-shadow text-neutral text-xs">
+                {collection._count?.links}
+              </div>
+            </div>
+          </Link>
+        </div>
+      </div>
+    </Droppable>
+  );
+};
+
+const Dropdown = (
+  item: ExtendedTreeItem,
+  onExpand: (id: ItemId) => void,
+  onCollapse: (id: ItemId) => void
+) => {
+  if (item.children && item.children.length > 0) {
+    return item.isExpanded ? (
+      <button onClick={() => onCollapse(item.id)}>
+        <div className="bi-caret-down-fill opacity-50 hover:opacity-100 duration-200"></div>
+      </button>
+    ) : (
+      <button onClick={() => onExpand(item.id)}>
+        <div className="bi-caret-right-fill opacity-40 hover:opacity-100 duration-200"></div>
+      </button>
+    );
+  }
+  // return <span>&bull;</span>;
+  return <div></div>;
+};
+
+const buildTreeFromCollections = (
+  collections: CollectionIncludingMembersAndLinkCount[],
+  router: ReturnType<typeof useRouter>,
+  tree?: TreeData,
+  order?: number[]
+): TreeData => {
+  if (order) {
+    collections.sort((a: any, b: any) => {
+      return order.indexOf(a.id) - order.indexOf(b.id);
+    });
+  }
+
+  function getTotalLinkCount(collectionId: number): number {
+    const collection = items[collectionId];
+    if (!collection) {
+      return 0;
+    }
+
+    let totalLinkCount = (collection.data as any)._count?.links || 0;
+
+    if (collection.hasChildren) {
+      collection.children.forEach((childId) => {
+        totalLinkCount += getTotalLinkCount(childId as number);
+      });
+    }
+
+    return totalLinkCount;
+  }
+
+  const items: { [key: string]: ExtendedTreeItem } = collections.reduce(
+    (acc: any, collection) => {
+      acc[collection.id as number] = {
+        id: collection.id,
+        children: [],
+        hasChildren: false,
+        isExpanded: tree?.items[collection.id as number]?.isExpanded || false,
+        data: {
+          id: collection.id,
+          parentId: collection.parentId,
+          name: collection.name,
+          description: collection.description,
+          color: collection.color,
+          icon: collection.icon,
+          iconWeight: collection.iconWeight,
+          isPublic: collection.isPublic,
+          ownerId: collection.ownerId,
+          createdAt: collection.createdAt,
+          updatedAt: collection.updatedAt,
+          _count: {
+            links: collection._count?.links,
+          },
+        },
+      };
+      return acc;
+    },
+    {}
+  );
+
+  const activeCollectionId = Number(router.asPath.split("/collections/")[1]);
+
+  if (activeCollectionId) {
+    for (const item in items) {
+      const collection = items[item];
+      if (Number(item) === activeCollectionId && collection.data.parentId) {
+        // get all the parents of the active collection recursively until root and set isExpanded to true
+        let parentId = collection.data.parentId || null;
+        while (parentId && items[parentId]) {
+          items[parentId].isExpanded = true;
+          parentId = items[parentId].data.parentId;
+        }
+      }
+    }
+  }
+
+  collections.forEach((collection) => {
+    const parentId = collection.parentId;
+    if (parentId && items[parentId] && collection.id) {
+      items[parentId].children.push(collection.id);
+      items[parentId].hasChildren = true;
+    }
+  });
+
+  collections.forEach((collection) => {
+    const collectionId = collection.id;
+    if (items[collectionId as number] && collection.id) {
+      const linkCount = getTotalLinkCount(collectionId as number);
+      (items[collectionId as number].data as any)._count.links = linkCount;
+    }
+  });
+
+  const rootId = "root";
+  items[rootId] = {
+    id: rootId,
+    children: (collections
+      .filter(
+        (c) =>
+          c.parentId === null || !collections.find((i) => i.id === c.parentId)
+      )
+      .map((c) => c.id) || "") as unknown as string[],
+    hasChildren: true,
+    isExpanded: true,
+    data: { name: "Root" } as Collection,
+  };
+
+  return { rootId, items };
+};

apps/web/components/ConfirmationModal.tsx

@@ -0,0 +1,50 @@
+import React, { ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+import { useTranslation } from "next-i18next";
+import Modal from "./Modal";
+import { Separator } from "./ui/separator";
+
+type Props = {
+  toggleModal: Function;
+  className?: string;
+  children: ReactNode;
+  title: string;
+  onConfirmed: Function;
+  dismissible?: boolean;
+};
+
+export default function ConfirmationModal({
+  toggleModal,
+  className,
+  children,
+  title,
+  onConfirmed,
+}: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Modal toggleModal={toggleModal} className={className}>
+      <p className="text-xl font-thin">{title}</p>
+      <Separator className="mb-3 mt-1" />
+      {children}
+      <div className="w-full flex items-center justify-end gap-2 mt-3">
+        <Button
+          variant="ghost"
+          className="hover:bg-base-200"
+          onClick={() => toggleModal()}
+        >
+          {t("cancel")}
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={async () => {
+            await onConfirmed();
+            toggleModal();
+          }}
+        >
+          {t("confirm")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

apps/web/components/CopyButton.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { Button } from "./ui/button";
+
+type Props = {
+  text: string;
+};
+
+const CopyButton: React.FC<Props> = ({ text }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <Button variant="ghost" type="button" size="icon" onClick={handleCopy}>
+      {copied ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="h-5 w-5 text-success"
+          viewBox="0 0 16 16"
+        >
+          <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="h-5 w-5"
+          viewBox="0 0 16 16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 
+               2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 
+               1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 
+               0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 
+               0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 
+               2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
+          />
+        </svg>
+      )}
+    </Button>
+  );
+};
+
+export default CopyButton;

apps/web/components/DashboardItem.tsx

@@ -0,0 +1,23 @@
+export default function dashboardItem({
+  name,
+  value,
+  icon,
+}: {
+  name: string;
+  value: number;
+  icon: string;
+}) {
+  return (
+    <div className="flex items-center justify-between w-full rounded-xl border border-neutral-content p-3 bg-gradient-to-tr from-neutral-content/70 to-50% to-base-200">
+      <div className="w-14 aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
+        <i className={`${icon} text-primary text-3xl drop-shadow`}></i>
+      </div>
+      <div className="ml-4 flex flex-col justify-center">
+        <p className="text-neutral text-xs tracking-wider text-right">{name}</p>
+        <p className="font-thin text-4xl text-primary mt-0.5 text-right">
+          {value || 0}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/web/components/DashboardLayoutDropdown.tsx

@@ -0,0 +1,398 @@
+import React, { useState, useMemo, useEffect } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from "@/components/ui/dropdown-menu";
+import { useTranslation } from "next-i18next";
+import { Button } from "@/components/ui/button";
+import TextInput from "./TextInput";
+import { useCollections } from "@linkwarden/router/collections";
+import {
+  DashboardSection,
+  DashboardSectionType,
+} from "@linkwarden/prisma/client";
+import { useUser } from "@linkwarden/router/user";
+import { useUpdateDashboardLayout } from "@linkwarden/router/dashboardData";
+import {
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  DndContext,
+  DragEndEvent,
+  MouseSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import { restrictToParentElement } from "@dnd-kit/modifiers";
+import { cn } from "@linkwarden/lib";
+
+interface DashboardSectionOption {
+  type: DashboardSectionType;
+  name: string;
+  collectionId?: number;
+  enabled: boolean;
+  order?: number;
+}
+
+export default function DashboardLayoutDropdown() {
+  const { t } = useTranslation();
+  const { data: user } = useUser();
+  const { data: collections = [] } = useCollections();
+  const updateDashboardLayout = useUpdateDashboardLayout();
+  const [searchTerm, setSearchTerm] = useState("");
+  const mouseSensor = useSensor(MouseSensor, {
+    // Require the mouse to move by 10 pixels before activating
+    activationConstraint: {
+      distance: 10,
+    },
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    // Press delay of 200ms, with tolerance of 5px of movement
+    activationConstraint: {
+      delay: 200,
+      tolerance: 5,
+    },
+  });
+  const sensors = useSensors(mouseSensor, touchSensor);
+
+  const [dashboardSections, setDashboardSections] = useState<
+    DashboardSection[]
+  >(user?.dashboardSections || []);
+
+  useEffect(() => {
+    setDashboardSections(user?.dashboardSections || []);
+  }, [user?.dashboardSections]);
+
+  const getSectionOrder = (
+    type: DashboardSectionType,
+    collectionId?: number
+  ): number | undefined => {
+    const section = dashboardSections.find(
+      (section) =>
+        section.type === type &&
+        (type === DashboardSectionType.COLLECTION
+          ? section.collectionId === collectionId
+          : true)
+    );
+    return section?.order;
+  };
+
+  const isSectionEnabled = (
+    type: DashboardSectionType,
+    collectionId?: number
+  ): boolean => {
+    return dashboardSections.some(
+      (section) =>
+        section.type === type &&
+        (type === DashboardSectionType.COLLECTION
+          ? section.collectionId === collectionId
+          : true)
+    );
+  };
+
+  const defaultSections: DashboardSectionOption[] = useMemo(
+    () => [
+      {
+        type: DashboardSectionType.STATS,
+        name: t("dashboard_stats"),
+        enabled: isSectionEnabled(DashboardSectionType.STATS),
+        order: getSectionOrder(DashboardSectionType.STATS),
+      },
+      {
+        type: DashboardSectionType.RECENT_LINKS,
+        name: t("recent_links"),
+        enabled: isSectionEnabled(DashboardSectionType.RECENT_LINKS),
+        order: getSectionOrder(DashboardSectionType.RECENT_LINKS),
+      },
+      {
+        type: DashboardSectionType.PINNED_LINKS,
+        name: t("pinned_links"),
+        enabled: isSectionEnabled(DashboardSectionType.PINNED_LINKS),
+        order: getSectionOrder(DashboardSectionType.PINNED_LINKS),
+      },
+    ],
+    [dashboardSections]
+  );
+
+  const collectionSections = useMemo(
+    () =>
+      collections.map((collection) => ({
+        type: DashboardSectionType.COLLECTION,
+        name: collection.name,
+        collectionId: collection.id,
+        enabled: isSectionEnabled(
+          DashboardSectionType.COLLECTION,
+          collection.id
+        ),
+        order: getSectionOrder(DashboardSectionType.COLLECTION, collection.id),
+      })),
+    [collections, dashboardSections]
+  );
+
+  const allSections = useMemo(
+    () => [...defaultSections, ...collectionSections],
+    [collectionSections, defaultSections]
+  );
+
+  const filteredSections = useMemo(() => {
+    let sections = allSections;
+
+    if (searchTerm.trim()) {
+      sections = sections.filter((section) =>
+        section.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    const enabledSections = sections
+      .filter((section) => section.enabled)
+      .sort((a, b) => {
+        if (a.order !== undefined && b.order !== undefined) {
+          return a.order - b.order;
+        }
+        if (a.order !== undefined) return -1;
+        if (b.order !== undefined) return 1;
+        return 0;
+      });
+
+    const disabledSections = sections.filter((section) => !section.enabled);
+
+    return [...enabledSections, ...disabledSections];
+  }, [allSections, searchTerm]);
+
+  const getSectionId = (section: DashboardSectionOption) =>
+    `${section.type}-${section.collectionId ?? "default"}`;
+
+  const handleCheckboxChange = (section: DashboardSectionOption) => {
+    const enabledSections = allSections.filter((s) => s.enabled);
+    const highestOrder =
+      enabledSections.length > 0
+        ? Math.max(...enabledSections.map((s) => s.order ?? 0))
+        : -1;
+
+    const updatedSections = allSections.map((s) => {
+      if (s.type === section.type && s.collectionId === section.collectionId) {
+        return {
+          ...s,
+          enabled: !s.enabled,
+          order: !s.enabled ? highestOrder + 1 : undefined,
+        };
+      }
+      return s;
+    });
+
+    updateDashboardLayout.mutateAsync(updatedSections);
+  };
+
+  const handleReorder = (sourceId: string, destId: string) => {
+    if (sourceId === destId) return;
+
+    // Get only enabled sections for reordering
+    const enabledSections = filteredSections.filter((s) => s.enabled);
+
+    const sourceIndex = enabledSections.findIndex(
+      (s) => getSectionId(s) === sourceId
+    );
+    const destIndex = enabledSections.findIndex(
+      (s) => getSectionId(s) === destId
+    );
+    if (sourceIndex < 0 || destIndex < 0) return;
+
+    // Reorder only the enabled sections
+    const reorderedEnabled = [...enabledSections];
+    const [moved] = reorderedEnabled.splice(sourceIndex, 1);
+    reorderedEnabled.splice(destIndex, 0, moved);
+
+    // Assign new order values based on the reordered enabled sections
+    const reorderedWithNewOrders = reorderedEnabled.map((section, idx) => ({
+      ...section,
+      order: idx,
+    }));
+
+    // Get disabled sections and combine with reordered enabled sections
+    const disabledSections = filteredSections.filter((s) => !s.enabled);
+    const updated = [...reorderedWithNewOrders, ...disabledSections];
+
+    updateDashboardLayout.mutateAsync(updated);
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const sourceId = active.id as string;
+    const destId = over.id as string;
+
+    // Only allow reordering enabled sections
+    const sourceSection = filteredSections.find(
+      (s) => getSectionId(s) === sourceId
+    );
+    const destSection = filteredSections.find(
+      (s) => getSectionId(s) === destId
+    );
+    if (sourceSection?.enabled && destSection?.enabled) {
+      handleReorder(sourceId, destId);
+    }
+  };
+
+  // Only include enabled sections in the sortable context
+  const sortableItems = filteredSections
+    .filter((section) => section.enabled)
+    .map(getSectionId);
+
+  return (
+    <DropdownMenu modal>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="sm" className="h-8">
+          <i className="bi-sliders2-vertical text-neutral" />
+          {t("edit_layout")}
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        className="min-w-72 pt-1 px-0 pb-0 select-none"
+        align="end"
+      >
+        <div className="flex flex-col gap-1">
+          <div className="flex flex-col gap-1 mx-2">
+            <p className="text-sm text-neutral mb-1">
+              {t("display_on_dashboard")}
+            </p>
+
+            <TextInput
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="py-0"
+              placeholder={t("search")}
+            />
+          </div>
+          <DndContext
+            modifiers={[restrictToParentElement]}
+            onDragEnd={handleDragEnd}
+            sensors={sensors}
+          >
+            <SortableContext
+              items={sortableItems}
+              strategy={verticalListSortingStrategy}
+            >
+              <ul className="max-h-60 overflow-y-auto px-2 pb-2">
+                {filteredSections.map((section) => {
+                  const color =
+                    section.type === "COLLECTION"
+                      ? collections.find((c) => c.id === section.collectionId)
+                          ?.color
+                      : undefined;
+
+                  return (
+                    <DraggableListItem
+                      key={getSectionId(section)}
+                      section={{ ...section, color }}
+                      onCheckboxChange={handleCheckboxChange}
+                    />
+                  );
+                })}
+
+                {filteredSections.length === 0 && (
+                  <li className="text-sm py-2 text-center text-neutral">
+                    {t("no_results_found")}
+                  </li>
+                )}
+              </ul>
+            </SortableContext>
+          </DndContext>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface DraggableListItemProps {
+  section: DashboardSectionOption & { color?: string };
+  onCheckboxChange: (section: DashboardSectionOption) => void;
+}
+
+function DraggableListItem({
+  section,
+  onCheckboxChange,
+}: DraggableListItemProps) {
+  const sectionId = `${section.type}-${section.collectionId ?? "default"}`;
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: sectionId,
+    disabled: !section.enabled,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <li
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={cn(
+        "select-none py-1 px-1 flex items-center justify-between",
+        section.enabled
+          ? "cursor-grab active:cursor-grabbing"
+          : "cursor-default",
+        isDragging && "opacity-50"
+      )}
+    >
+      <div className="flex items-center gap-2">
+        <input
+          id={`section-${section.type}-${section.collectionId ?? "default"}`}
+          className="checkbox checkbox-primary"
+          type="checkbox"
+          checked={section.enabled}
+          onChange={() => onCheckboxChange(section)}
+        />
+        <label
+          htmlFor={`section-${section.type}-${
+            section.collectionId ?? "default"
+          }`}
+          className={`text-sm pointer-events-none ${
+            section.enabled ? "opacity-100" : "opacity-50"
+          }`}
+        >
+          <i
+            className={`bi-${
+              section.type === "STATS"
+                ? "bar-chart-line"
+                : section.type === "RECENT_LINKS"
+                  ? "clock"
+                  : section.type === "PINNED_LINKS"
+                    ? "pin"
+                    : "folder-fill"
+            } ${section.type !== "COLLECTION" ? "text-primary" : ""} mr-1`}
+            style={
+              section.type === "COLLECTION" ? { color: section.color } : {}
+            }
+          />
+          {section.name}
+        </label>
+      </div>
+
+      <i
+        className={`bi-grip-vertical text-neutral ${
+          section.enabled ? "opacity-100" : "opacity-50"
+        }`}
+      />
+    </li>
+  );
+}

apps/web/components/DashboardLinks.tsx

@@ -0,0 +1,242 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import useLocalSettingsStore from "@/store/localSettings";
+import {
+  ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
+} from "@linkwarden/types";
+import { useEffect, useRef, useState } from "react";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import Image from "next/image";
+import {
+  atLeastOneFormatAvailable,
+  formatAvailable,
+} from "@linkwarden/lib/formatStats";
+import useOnScreen from "@/hooks/useOnScreen";
+import { useCollections } from "@linkwarden/router/collections";
+import { useUser } from "@linkwarden/router/user";
+import { useGetLink, useLinks } from "@linkwarden/router/links";
+import { useRouter } from "next/router";
+import openLink from "@/lib/client/openLink";
+import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
+import LinkFormats from "./LinkViews/LinkComponents/LinkFormats";
+import LinkTypeBadge from "./LinkViews/LinkComponents/LinkTypeBadge";
+import LinkPin from "./LinkViews/LinkComponents/LinkPin";
+import { Separator } from "./ui/separator";
+import { useDraggable } from "@dnd-kit/core";
+import { cn } from "@linkwarden/lib";
+
+export function DashboardLinks({
+  links,
+  isLoading,
+  type,
+}: {
+  links?: LinkIncludingShortenedCollectionAndTags[];
+  isLoading?: boolean;
+  type?: "collection" | "recent";
+}) {
+  return (
+    <div
+      className={`flex gap-5 overflow-x-auto overflow-y-hidden hide-scrollbar w-full min-h-72`}
+    >
+      {isLoading ? (
+        <div className="flex flex-col gap-4 min-w-60 w-60">
+          <div className="skeleton h-40 w-full"></div>
+          <div className="skeleton h-3 w-2/3"></div>
+          <div className="skeleton h-3 w-full"></div>
+          <div className="skeleton h-3 w-full"></div>
+          <div className="skeleton h-3 w-1/3"></div>
+        </div>
+      ) : (
+        links?.map((e, i) => <Card key={i} link={e} dashboardType={type} />)
+      )}
+    </div>
+  );
+}
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  editMode?: boolean;
+  dashboardType?: "collection" | "recent";
+};
+
+export function Card({ link, editMode, dashboardType }: Props) {
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `${link.id}-${dashboardType}`,
+    data: {
+      linkId: link.id,
+      dashboardType,
+    },
+  });
+  const { data: collections = [] } = useCollections();
+
+  const { data: user } = useUser();
+
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
+  const { links } = useLinks();
+
+  const router = useRouter();
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  const { refetch } = useGetLink({ id: link.id as number, isPublicRoute });
+
+  let shortendURL;
+
+  try {
+    if (link.url) {
+      shortendURL = new URL(link.url).host.toLowerCase();
+    }
+  } catch (error) {
+    console.log(error);
+  }
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id
+      ) as CollectionIncludingMembersAndLinkCount
+    );
+  }, [collections, links]);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisible = useOnScreen(ref);
+
+  const [linkModal, setLinkModal] = useState(false);
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    if (
+      isVisible &&
+      !link.preview?.startsWith("archives") &&
+      link.preview !== "unavailable"
+    ) {
+      interval = setInterval(async () => {
+        refetch().catch((error) => {
+          console.error("Error refetching link:", error);
+        });
+      }, 5000);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isVisible, link.preview]);
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        isDragging ? "opacity-30" : "opacity-100",
+        "relative group touch-manipulation select-none"
+      )}
+    >
+      <div
+        ref={ref}
+        className={`min-w-60 w-60 border border-solid border-neutral-content bg-base-200 duration-100 rounded-xl relative group h-full`}
+      >
+        <div
+          className="rounded-xl cursor-pointer h-full w-full flex flex-col justify-between"
+          onClick={() =>
+            !editMode && openLink(link, user, () => setLinkModal(true))
+          }
+          {...listeners}
+          {...attributes}
+        >
+          {show.image && (
+            <div>
+              <div className={`relative rounded-t-xl h-40 overflow-hidden`}>
+                {formatAvailable(link, "preview") ? (
+                  <Image
+                    src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+                    width={1280}
+                    height={720}
+                    alt=""
+                    className={`rounded-t-xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105`}
+                    style={show.icon ? { filter: "blur(1px)" } : undefined}
+                    draggable="false"
+                    onError={(e) => {
+                      const target = e.target as HTMLElement;
+                      target.style.display = "none";
+                    }}
+                  />
+                ) : link.preview === "unavailable" ? (
+                  <div className={`bg-gray-50 h-40 bg-opacity-80`}></div>
+                ) : (
+                  <div
+                    className={`h-40 bg-opacity-80 skeleton rounded-none`}
+                  ></div>
+                )}
+                {show.icon && (
+                  <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-xl flex items-center justify-center rounded-md">
+                    <LinkIcon link={link} />
+                  </div>
+                )}
+                {show.preserved_formats &&
+                  link.type === "url" &&
+                  atLeastOneFormatAvailable(link) && (
+                    <div className="absolute bottom-0 right-0 m-2 bg-base-200 bg-opacity-60 px-1 rounded-md">
+                      <LinkFormats link={link} />
+                    </div>
+                  )}
+              </div>
+              <Separator />
+            </div>
+          )}
+
+          <div className="flex flex-col justify-between h-full min-h-24">
+            <div className="p-3 flex flex-col justify-between h-full gap-2">
+              {show.name && (
+                <p className="line-clamp-2 w-full text-primary text-sm">
+                  {unescapeString(link.name)}
+                </p>
+              )}
+
+              {show.link && <LinkTypeBadge link={link} />}
+            </div>
+
+            {(show.collection || show.date) && (
+              <div>
+                <Separator className="mb-1" />
+
+                <div className="flex justify-between items-center text-xs text-neutral px-3 pb-1 gap-2">
+                  {show.collection && !isPublicRoute && (
+                    <div className="cursor-pointer truncate">
+                      <LinkCollection link={link} collection={collection} />
+                    </div>
+                  )}
+                  {show.date && <LinkDate link={link} />}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Overlay on hover */}
+        <div className="absolute pointer-events-none top-0 left-0 right-0 bottom-0 bg-base-100 bg-opacity-0 group-hover:bg-opacity-20 group-focus-within:opacity-20 rounded-xl duration-100"></div>
+        <LinkActions
+          link={link}
+          collection={collection}
+          linkModal={linkModal}
+          setLinkModal={(e) => setLinkModal(e)}
+          className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 text-neutral z-20"
+        />
+        {!isPublicRoute && <LinkPin link={link} />}
+      </div>
+    </div>
+  );
+}

apps/web/components/DragNDrop.tsx

@@ -0,0 +1,175 @@
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverlay,
+  DragStartEvent,
+  MouseSensor,
+  SensorDescriptor,
+  SensorOptions,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
+import { LinkIncludingShortenedCollectionAndTags } from "@linkwarden/types";
+import toast from "react-hot-toast";
+import { useUpdateLink } from "@linkwarden/router/links";
+import { useTranslation } from "react-i18next";
+import { restrictToWindowEdges, snapCenterToCursor } from "@dnd-kit/modifiers";
+import { customCollisionDetectionAlgorithm } from "@/lib/utils";
+import { useUpdateTag } from "@linkwarden/router/tags";
+
+interface DragNDropProps {
+  children: React.ReactNode;
+  /**
+   * The currently active link being dragged
+   */
+  activeLink: LinkIncludingShortenedCollectionAndTags | null;
+  /**
+   * All links available for drag and drop
+   */
+  links: LinkIncludingShortenedCollectionAndTags[];
+  setActiveLink: (link: LinkIncludingShortenedCollectionAndTags | null) => void;
+  /**
+   * Override the default sensors used for drag and drop.
+   */
+  sensors?: SensorDescriptor<SensorOptions>[];
+
+  /**
+   * Override onDragEnd function.
+   */
+  onDragEnd?: (event: DragEndEvent) => void;
+}
+
+/**
+ * Wrapper component for drag and drop functionality.
+ */
+export default function DragNDrop({
+  children,
+  activeLink,
+  links,
+  setActiveLink,
+  sensors: sensorProp,
+  onDragEnd: onDragEndProp,
+}: DragNDropProps) {
+  const { t } = useTranslation();
+  const updateTag = useUpdateTag();
+  const updateLink = useUpdateLink();
+  const mouseSensor = useSensor(MouseSensor, {
+    // Require the mouse to move by 10 pixels before activating
+    activationConstraint: {
+      distance: 10,
+    },
+  });
+  const touchSensor = useSensor(TouchSensor, {
+    // Press delay of 250ms, with tolerance of 5px of movement
+    activationConstraint: {
+      delay: 200,
+      tolerance: 5,
+    },
+  });
+
+  const sensors = useSensors(mouseSensor, touchSensor);
+
+  const handleDragStart = (event: DragStartEvent) => {
+    const draggedLink = links.find(
+      (link: any) => link.id === event.active.data.current?.linkId
+    );
+    setActiveLink(draggedLink || null);
+  };
+
+  const handleDragOverCancel = () => {
+    setActiveLink(null);
+  };
+
+  const handleDragEnd = async (event: DragEndEvent) => {
+    // If an onDragEnd prop is provided, use it instead of the default behavior
+    if (onDragEndProp) {
+      onDragEndProp(event);
+      return;
+    }
+    const { over } = event;
+    if (!over || !activeLink) return;
+
+    let updatedLink: LinkIncludingShortenedCollectionAndTags | null = null;
+
+    // if the link is dropped over a tag
+    if (over.data.current?.type === "tag") {
+      const isTagAlreadyExists = activeLink.tags.some(
+        (tag) => tag.name === over.data.current?.name
+      );
+      if (isTagAlreadyExists) {
+        toast.error(t("tag_already_added"));
+        return;
+      }
+      // to match the tags structure required to update the link
+      const allTags: { name: string }[] = activeLink.tags.map((tag) => ({
+        name: tag.name,
+      }));
+      const newTags = [...allTags, { name: over.data.current?.name as string }];
+      updatedLink = {
+        ...activeLink,
+        tags: newTags as any,
+      };
+    } else {
+      const collectionId = over.data.current?.id as number;
+      const collectionName = over.data.current?.name as string;
+      const ownerId = over.data.current?.ownerId as number;
+
+      // Immediately hide the drag overlay
+      setActiveLink(null);
+
+      // if the link dropped over the same collection, toast
+      if (activeLink.collection.id === collectionId) {
+        toast.error(t("link_already_in_collection"));
+        return;
+      }
+
+      updatedLink = {
+        ...activeLink,
+        collection: {
+          id: collectionId,
+          name: collectionName,
+          ownerId,
+        },
+      };
+    }
+
+    const load = toast.loading(t("updating"));
+    await updateLink.mutateAsync(updatedLink, {
+      onSettled: (_, error) => {
+        toast.dismiss(load);
+        if (error) {
+          toast.error(error.message);
+        } else {
+          toast.success(t("updated"));
+        }
+      },
+    });
+  };
+  return (
+    <DndContext
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragOverCancel}
+      modifiers={[snapCenterToCursor]}
+      sensors={sensorProp ? sensorProp : sensors}
+      collisionDetection={customCollisionDetectionAlgorithm}
+    >
+      {!!activeLink && (
+        // when drag end, immediately hide the overlay
+        <DragOverlay
+          style={{
+            zIndex: 100,
+            pointerEvents: "none",
+          }}
+        >
+          <div className="w-fit h-fit">
+            <LinkIcon link={activeLink} />
+          </div>
+        </DragOverlay>
+      )}
+      {children}
+    </DndContext>
+  );
+}

apps/web/components/Drawer.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode, useEffect } from "react";
+import { Drawer as D } from "vaul";
+import clsx from "clsx";
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+
+type Props = {
+  toggleDrawer: Function;
+  children: ReactNode;
+  className?: string;
+  dismissible?: boolean;
+  direction?: "left" | "right";
+};
+
+export default function Drawer({
+  toggleDrawer,
+  className,
+  children,
+  dismissible = true,
+  direction,
+}: Props) {
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
+  const { width } = useWindowDimensions();
+
+  useEffect(() => {
+    if (width >= 640) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "relative";
+      return () => {
+        document.body.style.overflow = "auto";
+        document.body.style.position = "";
+      };
+    }
+  }, []);
+
+  if (width < 640) {
+    return (
+      <D.Root
+        open={drawerIsOpen}
+        onClose={() => dismissible && setDrawerIsOpen(false)}
+        onAnimationEnd={(isOpen) => !isOpen && toggleDrawer()}
+        dismissible={dismissible}
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/40" />
+          <D.Content className="flex flex-col rounded-t-xl mt-24 fixed bottom-0 left-0 right-0 z-30 h-[90%] !select-auto focus:outline-none">
+            <div
+              className={clsx(
+                "p-4 bg-base-100 rounded-t-xl flex-1 border-neutral-content border-t overflow-y-auto",
+                className
+              )}
+              data-testid="mobile-modal-container"
+            >
+              <div data-testid="mobile-modal-slider" />
+              {children}
+            </div>
+          </D.Content>
+        </D.Portal>
+      </D.Root>
+    );
+  } else {
+    return (
+      <D.Root
+        open={drawerIsOpen}
+        onClose={() => dismissible && setDrawerIsOpen(false)}
+        onAnimationEnd={(isOpen) => !isOpen && toggleDrawer()}
+        dismissible={dismissible}
+        direction={direction || "right"}
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/10 z-20" />
+          <D.Content
+            className={clsx(
+              "bg-white flex flex-col h-full w-2/5 max-w-6xl min-w-[30rem] mt-24 fixed bottom-0 z-40 !select-auto focus:outline-none",
+              direction === "left" ? "left-0" : "right-0"
+            )}
+          >
+            <div
+              className={clsx(
+                "p-4 bg-base-100 flex-1 border-neutral-content overflow-y-auto",
+                direction === "left" ? "border-r" : "border-l",
+                className
+              )}
+            >
+              {children}
+            </div>
+          </D.Content>
+        </D.Portal>
+      </D.Root>
+    );
+  }
+}

apps/web/components/Dropdown.tsx

@@ -60,47 +60,49 @@ export default function Dropdown({
     }
   }, [points, dropdownHeight]);
 
-  return !points || pos ? (
-    <ClickAwayHandler
-      onMount={(e) => {
-        setDropdownHeight(e.height);
-        setDropdownWidth(e.width);
-      }}
-      style={
-        points
-          ? {
-              position: "fixed",
-              top: `${pos?.y}px`,
-              left: `${pos?.x}px`,
-            }
-          : undefined
-      }
-      onClickOutside={onClickOutside}
-      className={`${
-        className || ""
-      } py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
-    >
-      {items.map((e, i) => {
-        const inner = e && (
-          <div className="cursor-pointer rounded-md">
-            <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-              <p className="text-black dark:text-white select-none">{e.name}</p>
+  return (
+    (!points || pos) && (
+      <ClickAwayHandler
+        onMount={(e) => {
+          setDropdownHeight(e.height);
+          setDropdownWidth(e.width);
+        }}
+        style={
+          points
+            ? {
+                position: "fixed",
+                top: `${pos?.y}px`,
+                left: `${pos?.x}px`,
+              }
+            : undefined
+        }
+        onClickOutside={onClickOutside}
+        className={`${
+          className || ""
+        } py-1 shadow-md border border-neutral-content bg-base-200 rounded-md flex flex-col z-20`}
+      >
+        {items.map((e, i) => {
+          const inner = e && (
+            <div className="cursor-pointer rounded-md">
+              <div className="flex items-center gap-2 py-1 px-2 hover:bg-base-100 duration-100">
+                <p className="select-none">{e.name}</p>
+              </div>
             </div>
-          </div>
-        );
+          );
 
-        return e && e.href ? (
-          <Link key={i} href={e.href}>
-            {inner}
-          </Link>
-        ) : (
-          e && (
-            <div key={i} onClick={e.onClick}>
+          return e && e.href ? (
+            <Link key={i} href={e.href}>
               {inner}
-            </div>
-          )
-        );
-      })}
-    </ClickAwayHandler>
-  ) : null;
+            </Link>
+          ) : (
+            e && (
+              <div key={i} onClick={e.onClick}>
+                {inner}
+              </div>
+            )
+          );
+        })}
+      </ClickAwayHandler>
+    )
+  );
 }

apps/web/components/Droppable.tsx

@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { useDroppable } from "@dnd-kit/core";
+
+const Droppable = ({
+  children,
+  id,
+  data,
+  className,
+}: {
+  children: React.ReactNode;
+  id: string;
+  data?: {
+    /**
+     * Id of collection or tag to drop into.
+     */
+    id?: string;
+    /**
+     * Name of collection or tag to drop into.
+     */
+    name?: string;
+    ownerId?: string;
+    type?: "collection" | "tag";
+  };
+  className?: string;
+}) => {
+  const { setNodeRef, isOver } = useDroppable({
+    id,
+    data,
+  });
+
+  return (
+    <div
+      ref={setNodeRef}
+      className={cn(
+        isOver &&
+          "bg-primary/10 outline-2 outline-dashed outline-primary rounded-lg",
+        className
+      )}
+      data-over={isOver ? "true" : undefined}
+      style={{
+        position: "relative",
+        zIndex: isOver ? 1 : "auto",
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Droppable;

apps/web/components/HighlightDrawer.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import Drawer from "./Drawer";
+import {
+  useGetLinkHighlights,
+  useRemoveHighlight,
+} from "@linkwarden/router/highlights";
+import { useRouter } from "next/router";
+import clsx from "clsx";
+import Link from "next/link";
+import { useTranslation } from "next-i18next";
+import { Button } from "./ui/button";
+import { Separator } from "./ui/separator";
+
+type Props = {
+  onClose: Function;
+};
+
+const HighlightDrawer = ({ onClose }: Props) => {
+  const router = useRouter();
+  const { t } = useTranslation();
+
+  const { data } = useGetLinkHighlights(Number(router.query.id));
+  const removeHighlight = useRemoveHighlight(Number(router.query.id));
+
+  return (
+    <Drawer
+      toggleDrawer={onClose}
+      className="sm:h-screen items-center relative"
+      direction="left"
+    >
+      <div>
+        <h2 className="text-lg font-semibold">{t("notes_highlights")}</h2>
+        <Separator className="my-5" />
+        {data && data.length > 0 ? (
+          data.map((highlight) => {
+            const formattedDate = new Date(highlight.createdAt).toLocaleString(
+              "en-US",
+              {
+                year: "numeric",
+                month: "short",
+                day: "numeric",
+              }
+            );
+
+            return (
+              <Link key={highlight.id} href={`#highlight-${highlight.id}`}>
+                <div
+                  className={clsx(
+                    "p-2 mb-4 border-l-2 duration-150 cursor-pointer flex flex-col gap-1 relative group",
+                    highlight.color === "yellow"
+                      ? "border-yellow-500"
+                      : highlight.color === "green"
+                        ? "border-green-500"
+                        : highlight.color === "blue"
+                          ? "border-blue-500"
+                          : "border-red-500"
+                  )}
+                >
+                  <p
+                    className={clsx(
+                      "w-fit px-2 rounded-md mr-10",
+                      highlight.color === "yellow"
+                        ? "bg-yellow-500/70"
+                        : highlight.color === "green"
+                          ? "bg-green-500/70"
+                          : highlight.color === "blue"
+                            ? "bg-blue-500/70"
+                            : "bg-red-500/70"
+                    )}
+                  >
+                    {highlight.text}
+                  </p>
+                  {highlight.comment && <p>{highlight.comment}</p>}
+                  <p
+                    className="text-xs text-neutral"
+                    title={String(highlight.createdAt)}
+                  >
+                    {formattedDate}
+                  </p>
+
+                  <Button
+                    className="absolute top-2 right-2 text-neutral hover:text-red-500 group-hover:opacity-100 opacity-0 transition-opacity duration-150"
+                    variant="ghost"
+                    size="icon"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      removeHighlight.mutate(highlight.id);
+                    }}
+                  >
+                    <i className="bi-trash" />
+                  </Button>
+                </div>
+              </Link>
+            );
+          })
+        ) : (
+          <div className="text-neutral text-sm">{t("no_notes_highlights")}</div>
+        )}
+      </div>
+    </Drawer>
+  );
+};
+
+export default HighlightDrawer;

apps/web/components/Icon.tsx

@@ -0,0 +1,18 @@
+import React, { forwardRef } from "react";
+import * as Icons from "@phosphor-icons/react";
+
+type Props = {
+  icon: string;
+} & Icons.IconProps;
+
+const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }, ref) => {
+  const IconComponent: any = Icons[icon as keyof typeof Icons];
+
+  if (!IconComponent) {
+    return null;
+  } else return <IconComponent ref={ref} {...rest} />;
+});
+
+Icon.displayName = "Icon";
+
+export default Icon;

apps/web/components/IconGrid.tsx

@@ -0,0 +1,91 @@
+import { icons } from "@/lib/client/icons";
+import Fuse from "fuse.js";
+import { forwardRef, useMemo } from "react";
+import { FixedSizeGrid as Grid } from "react-window";
+
+const fuse = new Fuse(icons, {
+  keys: [{ name: "name", weight: 4 }, "tags", "categories"],
+  threshold: 0.2,
+  useExtendedSearch: true,
+});
+
+type Props = {
+  query: string;
+  color: string;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
+  iconName?: string;
+  setIconName: Function;
+};
+
+const IconGrid = ({ query, color, weight, iconName, setIconName }: Props) => {
+  const filteredIcons = useMemo(() => {
+    if (!query) {
+      return icons;
+    }
+    return fuse.search(query).map((result) => result.item);
+  }, [query]);
+
+  const columnCount = 6;
+  const rowCount = Math.ceil(filteredIcons.length / columnCount);
+  const GUTTER_SIZE = 5;
+
+  const Cell = ({ columnIndex, rowIndex, style }: any) => {
+    const index = rowIndex * columnCount + columnIndex;
+    if (index >= filteredIcons.length) return null; // Prevent overflow
+
+    const icon = filteredIcons[index];
+    const IconComponent = icon.Icon;
+
+    return (
+      <div
+        style={{
+          ...style,
+          left: style.left + GUTTER_SIZE,
+          top: style.top + GUTTER_SIZE,
+          width: style.width - GUTTER_SIZE,
+          height: style.height - GUTTER_SIZE,
+        }}
+        onClick={() => setIconName(icon.pascal_name)}
+        className={`cursor-pointer p-[6px] rounded-lg bg-base-100 w-full ${
+          icon.pascal_name === iconName
+            ? "outline outline-1 outline-primary"
+            : ""
+        }`}
+      >
+        <IconComponent size={32} weight={weight} color={color} />
+      </div>
+    );
+  };
+
+  const InnerElementType = forwardRef(({ style, ...rest }: any, ref) => (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        paddingLeft: GUTTER_SIZE,
+        paddingTop: GUTTER_SIZE,
+      }}
+      {...rest}
+    />
+  ));
+
+  InnerElementType.displayName = "InnerElementType";
+
+  return (
+    <Grid
+      columnCount={columnCount}
+      rowCount={rowCount}
+      columnWidth={50}
+      rowHeight={50}
+      innerElementType={InnerElementType}
+      width={320}
+      height={158}
+      itemData={filteredIcons}
+      className="hide-scrollbar ml-[4px] w-fit"
+    >
+      {Cell}
+    </Grid>
+  );
+};
+
+export default IconGrid;

apps/web/components/IconPicker.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react";
+import { useTranslation } from "next-i18next";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import IconPopover from "./IconPopover";
+import clsx from "clsx";
+import { Button } from "./ui/button";
+
+type Props = {
+  alignment?: string;
+  color: string;
+  setColor: Function;
+  iconName?: string;
+  setIconName: Function;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
+  setWeight: Function;
+  hideDefaultIcon?: boolean;
+  reset: Function;
+  className?: string;
+};
+
+const IconPicker = ({
+  alignment,
+  color,
+  setColor,
+  iconName,
+  setIconName,
+  weight,
+  setWeight,
+  hideDefaultIcon,
+  className,
+  reset,
+}: Props) => {
+  const { t } = useTranslation();
+  const [iconPicker, setIconPicker] = useState(false);
+
+  return (
+    <div className="relative">
+      <Button
+        onClick={() => setIconPicker(!iconPicker)}
+        variant="ghost"
+        className="w-20 h-20"
+        size="icon"
+      >
+        {iconName ? (
+          <Icon
+            icon={iconName}
+            size={60}
+            weight={(weight || "regular") as IconWeight}
+            color={color}
+          />
+        ) : !iconName && hideDefaultIcon ? (
+          <p className="p-1">{t("set_custom_icon")}</p>
+        ) : (
+          <i className="bi-folder-fill text-6xl" style={{ color: color }}></i>
+        )}
+      </Button>
+      {iconPicker && (
+        <IconPopover
+          alignment={alignment}
+          color={color}
+          setColor={setColor}
+          iconName={iconName}
+          setIconName={setIconName}
+          weight={weight}
+          setWeight={setWeight}
+          reset={reset}
+          onClose={() => setIconPicker(false)}
+          className={clsx(
+            className,
+            alignment || "lg:-translate-x-1/3 top-20 left-0"
+          )}
+        />
+      )}
+    </div>
+  );
+};
+
+export default IconPicker;

apps/web/components/IconPopover.tsx

@@ -0,0 +1,159 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import TextInput from "./TextInput";
+import Popover from "./Popover";
+import { HexColorPicker } from "react-colorful";
+import { useTranslation } from "next-i18next";
+import IconGrid from "./IconGrid";
+import clsx from "clsx";
+import { Button } from "./ui/button";
+
+type Props = {
+  alignment?: string;
+  color: string;
+  setColor: Function;
+  iconName?: string;
+  setIconName: Function;
+  weight: "light" | "regular" | "bold" | "fill" | "duotone" | "thin";
+  setWeight: Function;
+  reset: Function;
+  className?: string;
+  onClose: Function;
+  top?: number;
+  left?: number;
+};
+
+const IconPopover = ({
+  alignment,
+  color,
+  setColor,
+  iconName,
+  setIconName,
+  weight,
+  setWeight,
+  reset,
+  className,
+  onClose,
+  top,
+  left,
+}: Props) => {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+
+  const content = (
+    <Popover
+      onClose={() => onClose()}
+      className={clsx(
+        className,
+        "fade-in bg-base-200 border border-neutral-content p-3 w-[22.5rem] rounded-lg shadow-md pointer-events-auto",
+        top !== undefined && left !== undefined && `z-[1000]`
+      )}
+      style={{ top: top, left: left }}
+    >
+      <div className="flex flex-col gap-3 w-full h-full">
+        <TextInput
+          className="p-2 rounded w-full h-7 text-sm"
+          placeholder={t("search")}
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+
+        <div className="grid grid-cols-6 gap-1 w-full overflow-y-auto h-44 border border-neutral-content bg-base-100 rounded-md p-2">
+          <IconGrid
+            query={query}
+            color={color}
+            weight={weight}
+            iconName={iconName}
+            setIconName={setIconName}
+          />
+        </div>
+
+        <div className="flex gap-3 color-picker w-full justify-between">
+          <HexColorPicker
+            color={color}
+            onChange={(e) => setColor(e)}
+            className="border border-neutral-content rounded-lg"
+          />
+
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="regular"
+                checked={weight === "regular"}
+                onChange={() => setWeight("regular")}
+              />
+              {t("regular")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="thin"
+                checked={weight === "thin"}
+                onChange={() => setWeight("thin")}
+              />
+              {t("thin")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="light"
+                checked={weight === "light"}
+                onChange={() => setWeight("light")}
+              />
+              {t("light_icon")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="bold"
+                checked={weight === "bold"}
+                onChange={() => setWeight("bold")}
+              />
+              {t("bold")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="fill"
+                checked={weight === "fill"}
+                onChange={() => setWeight("fill")}
+              />
+              {t("fill")}
+            </label>
+            <label className="flex items-center cursor-pointer">
+              <input
+                type="radio"
+                className="radio radio-primary mr-2"
+                value="duotone"
+                checked={weight === "duotone"}
+                onChange={() => setWeight("duotone")}
+              />
+              {t("duotone")}
+            </label>
+          </div>
+        </div>
+        <div className="flex flex-row gap-2 justify-between items-center mt-2">
+          <Button size="sm" variant="ghost" onClick={() => reset()}>
+            <i className="bi-arrow-counterclockwise text-neutral" />
+            {t("reset_defaults")}
+          </Button>
+          <p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
+        </div>
+      </div>
+    </Popover>
+  );
+
+  if (top !== undefined && left !== undefined) {
+    return ReactDOM.createPortal(content, document.body);
+  }
+
+  return content;
+};
+
+export default IconPopover;

apps/web/components/ImportDropdown.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import importBookmarks from "@/lib/client/importBookmarks";
+import { MigrationFormat } from "@linkwarden/types";
+import { useTranslation } from "next-i18next";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "./ui/button";
+
+type Props = {};
+
+const ImportDropdown = ({}: Props) => {
+  const { t } = useTranslation();
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="metal">
+          <i className="bi-cloud-upload text-xl"></i>
+          {t("import_links")}
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent side="bottom" align="start">
+        {[
+          {
+            id: "import-linkwarden-file",
+            format: MigrationFormat.linkwarden,
+            label: t("from_linkwarden"),
+          },
+          {
+            id: "import-html-file",
+            format: MigrationFormat.htmlFile,
+            label: t("from_html"),
+          },
+          {
+            id: "import-pocket-file",
+            format: MigrationFormat.pocket,
+            label: t("from_pocket"),
+          },
+          {
+            id: "import-wallabag-file",
+            format: MigrationFormat.wallabag,
+            label: t("from_wallabag"),
+          },
+          {
+            id: "import-omnivore-file",
+            format: MigrationFormat.omnivore,
+            label: t("from_omnivore"),
+          },
+        ].map((item) => (
+          <DropdownMenuItem
+            asChild
+            key={item.id}
+            onSelect={(e) => e.preventDefault()}
+          >
+            <label htmlFor={item.id} className="whitespace-nowrap w-full">
+              {item.label}
+              <input
+                type="file"
+                id={item.id}
+                accept={
+                  item.id === "import-html-file"
+                    ? ".html"
+                    : item.id === "import-omnivore-file"
+                      ? ".zip"
+                      : item.id === "import-pocket-file"
+                        ? ".csv"
+                        : ".json"
+                }
+                className="hidden"
+                onChange={(e) => importBookmarks(e, item.format)}
+              />
+            </label>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+export default ImportDropdown;

apps/web/components/InputSelect/CollectionSelection.tsx

@@ -0,0 +1,143 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { styles } from "./styles";
+import { Option } from "@linkwarden/types/inputSelect";
+import CreatableSelect from "react-select/creatable";
+import Select from "react-select";
+import { useCollections } from "@linkwarden/router/collections";
+import clsx from "clsx";
+
+type Props = {
+  onChange: any;
+  showDefaultValue?: boolean;
+  defaultValue?:
+    | {
+        label: string;
+        value?: number;
+      }
+    | undefined;
+  creatable?: boolean;
+  autoFocus?: boolean;
+  onBlur?: any;
+  className?: string;
+};
+
+export default function CollectionSelection({
+  onChange,
+  defaultValue,
+  showDefaultValue = true,
+  creatable = true,
+  autoFocus,
+  onBlur,
+  className,
+}: Props) {
+  const { data: collections = [] } = useCollections();
+
+  const router = useRouter();
+
+  const [options, setOptions] = useState<Option[]>([]);
+
+  const collectionId = Number(router.query.id);
+
+  const activeCollection = collections.find((e) => {
+    return e.id === collectionId;
+  });
+
+  if (activeCollection && !defaultValue) {
+    defaultValue = {
+      value: activeCollection?.id,
+      label: activeCollection?.name,
+    };
+  }
+
+  const getParentNames = (parentId: number): string[] => {
+    const parentNames = [];
+    const parent = collections.find((e) => e.id === parentId);
+
+    if (parent) {
+      parentNames.push(parent.name);
+      if (parent.parentId) {
+        parentNames.push(...getParentNames(parent.parentId));
+      }
+    }
+
+    // Have the top level parent at beginning
+    return parentNames.reverse();
+  };
+
+  useEffect(() => {
+    const formattedCollections = collections
+      .map((e) => {
+        return {
+          value: e.id,
+          label: e.name,
+          parentsLabel:
+            ((e.parentId && getParentNames(e.parentId).join(" > ") + " > ") ||
+              "") + e.name,
+          ownerId: e.ownerId,
+          count: e._count,
+          parentId: e.parentId,
+        };
+      })
+      .sort((a, b) => {
+        return a.parentsLabel.localeCompare(b.parentsLabel);
+      });
+
+    setOptions(formattedCollections);
+  }, [collections]);
+
+  const customOption = ({ data, innerProps }: any) => {
+    return (
+      <div
+        {...innerProps}
+        className="px-2 py-2 last:border-0 border-b border-neutral-content hover:bg-neutral-content duration-100 cursor-pointer"
+      >
+        <div className="flex w-full justify-between items-center">
+          <span>{data.label}</span>
+          <span className="text-sm text-neutral">{data.count?.links}</span>
+        </div>
+        <div className="text-xs text-gray-600 dark:text-gray-300">
+          {data.parentsLabel}
+        </div>
+      </div>
+    );
+  };
+
+  if (creatable) {
+    return (
+      <CreatableSelect
+        isClearable={false}
+        className={clsx("react-select-container", className)}
+        classNamePrefix="react-select"
+        onChange={onChange}
+        options={options}
+        styles={styles}
+        autoFocus={autoFocus}
+        onBlur={onBlur}
+        defaultValue={showDefaultValue ? defaultValue : null}
+        components={{
+          Option: customOption,
+        }}
+        // menuPosition="fixed"
+      />
+    );
+  } else {
+    return (
+      <Select
+        isClearable={false}
+        className={clsx("react-select-container", className)}
+        classNamePrefix="react-select"
+        onChange={onChange}
+        options={options}
+        styles={styles}
+        autoFocus={autoFocus}
+        defaultValue={showDefaultValue ? defaultValue : null}
+        onBlur={onBlur}
+        components={{
+          Option: customOption,
+        }}
+        // menuPosition="fixed"
+      />
+    );
+  }
+}

apps/web/components/InputSelect/TagSelection.tsx

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import CreatableSelect from "react-select/creatable";
+import { styles } from "./styles";
+import { ArchivalTagOption, Option } from "@linkwarden/types/inputSelect";
+import { useTags } from "@linkwarden/router/tags";
+import { useTranslation } from "next-i18next";
+
+type Props = {
+  onChange: (e: any) => void;
+  options?: Option[] | ArchivalTagOption[];
+  isArchivalSelection?: boolean;
+  defaultValue?: {
+    value?: number;
+    label: string;
+  }[];
+  autoFocus?: boolean;
+  onBlur?: any;
+};
+
+export default function TagSelection({
+  onChange,
+  options,
+  isArchivalSelection,
+  defaultValue,
+  autoFocus,
+  onBlur,
+}: Props) {
+  const { data: tags = [] } = useTags();
+  const { t } = useTranslation();
+
+  const [tagOptions, setTagOptions] = useState<Option[]>([]);
+
+  useEffect(() => {
+    const formatedCollections = tags.map((e: any) => {
+      return { value: e.id, label: e.name };
+    });
+
+    setTagOptions(formatedCollections);
+  }, [tags]);
+
+  return (
+    <CreatableSelect
+      isClearable={false}
+      className="react-select-container text-sm"
+      classNamePrefix="react-select"
+      onChange={onChange}
+      options={isArchivalSelection ? options : tagOptions}
+      styles={styles}
+      value={isArchivalSelection ? [] : undefined}
+      defaultValue={isArchivalSelection ? undefined : defaultValue}
+      placeholder={t("tag_selection_placeholder")}
+      isMulti
+      autoFocus={autoFocus}
+      onBlur={onBlur}
+    />
+  );
+}

apps/web/components/InputSelect/styles.ts

@@ -8,20 +8,31 @@ export const styles: StylesConfig = {
     ...styles,
     fontFamily: font,
     cursor: "pointer",
-    backgroundColor: state.isSelected ? "#0ea5e9" : "inherit",
+    backgroundColor: state.isSelected ? "oklch(var(--p))" : "inherit",
     "&:hover": {
-      backgroundColor: state.isSelected ? "#0ea5e9" : "#e2e8f0",
+      backgroundColor: state.isSelected
+        ? "oklch(var(--p))"
+        : "oklch(var(--nc))",
     },
-    transition: "all 50ms",
+    transition: "all 100ms",
   }),
-  control: (styles) => ({
+  menu: (styles) => ({
+    ...styles,
+    zIndex: 10,
+  }),
+  control: (styles, state) => ({
     ...styles,
     fontFamily: font,
-    border: "none",
+    borderRadius: "0.375rem",
+    border: state.isFocused
+      ? "1px solid oklch(var(--p))"
+      : "1px solid oklch(var(--nc))",
+    boxShadow: "none",
+    minHeight: "2.6rem",
   }),
-  container: (styles) => ({
+  container: (styles, state) => ({
     ...styles,
-    border: "1px solid #e0f2fe",
+    height: "full",
     borderRadius: "0.375rem",
     lineHeight: "1.25rem",
     // "@media screen and (min-width: 1024px)": {
@@ -39,23 +50,34 @@ export const styles: StylesConfig = {
   placeholder: (styles) => ({
     ...styles,
     borderColor: "black",
+    color: "oklch(var(--n))",
   }),
   multiValue: (styles) => {
     return {
       ...styles,
-      backgroundColor: "#0ea5e9",
-      color: "white",
+      backgroundColor: "oklch(var(--b2))",
+      color: "oklch(var(--bc))",
+      display: "flex",
+      alignItems: "center",
+      gap: "0.1rem",
+      marginRight: "0.4rem",
     };
   },
   multiValueLabel: (styles) => ({
     ...styles,
-    color: "white",
+    color: "oklch(var(--bc))",
   }),
   multiValueRemove: (styles) => ({
     ...styles,
+    height: "1.2rem",
+    width: "1.2rem",
+    borderRadius: "100px",
+    transition: "all 100ms",
+    color: "oklch(var(--w))",
     ":hover": {
-      color: "white",
-      backgroundColor: "#38bdf8",
+      color: "red",
+      backgroundColor: "oklch(var(--nc))",
     },
   }),
+  menuPortal: (base) => ({ ...base, zIndex: 9999 }),
 };

apps/web/components/InstallApp.tsx

@@ -0,0 +1,52 @@
+import { isPWA } from "@/lib/utils";
+import React, { useState } from "react";
+import { Trans } from "next-i18next";
+import { Button } from "./ui/button";
+
+type Props = {};
+
+const InstallApp = (props: Props) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return isOpen && !isPWA() ? (
+    <div className="fixed left-0 right-0 bottom-10 w-full px-5">
+      <div className="mx-auto w-fit p-2 flex justify-between gap-2 items-center border border-neutral-content rounded-xl bg-base-300 backdrop-blur-md bg-opacity-80 max-w-md">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="w-8 h-8"
+          viewBox="0 0 50 50"
+        >
+          <path
+            fill="currentColor"
+            d="M30.3 13.7L25 8.4l-5.3 5.3l-1.4-1.4L25 5.6l6.7 6.7z"
+          />
+          <path fill="currentColor" d="M24 7h2v21h-2z" />
+          <path
+            fill="currentColor"
+            d="M35 40H15c-1.7 0-3-1.3-3-3V19c0-1.7 1.3-3 3-3h7v2h-7c-.6 0-1 .4-1 1v18c0 .6.4 1 1 1h20c.6 0 1-.4 1-1V19c0-.6-.4-1-1-1h-7v-2h7c1.7 0 3 1.3 3 3v18c0 1.7-1.3 3-3 3"
+          />
+        </svg>
+        <p className="w-4/5 text-[0.92rem]">
+          <Trans
+            i18nKey="pwa_install_prompt"
+            components={[
+              <a
+                className="underline"
+                target="_blank"
+                href="https://docs.linkwarden.app/getting-started/pwa-installation"
+                key={0}
+              />,
+            ]}
+          />
+        </p>
+        <Button onClick={() => setIsOpen(false)} variant="ghost" size="icon">
+          <i className="bi-x text-xl"></i>
+        </Button>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default InstallApp;

apps/web/components/LinkDetails.tsx

@@ -0,0 +1,661 @@
+import React, { useEffect, useState } from "react";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  ArchivedFormat,
+} from "@linkwarden/types";
+import Link from "next/link";
+import {
+  atLeastOneFormatAvailable,
+  formatAvailable,
+} from "@linkwarden/lib/formatStats";
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
+import { BeatLoader } from "react-spinners";
+import { useUser } from "@linkwarden/router/user";
+import { useUpdateLink, useUpdateFile } from "@linkwarden/router/links";
+import LinkIcon from "./LinkViews/LinkComponents/LinkIcon";
+import CopyButton from "./CopyButton";
+import { useRouter } from "next/router";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import Image from "next/image";
+import clsx from "clsx";
+import toast from "react-hot-toast";
+import CollectionSelection from "./InputSelect/CollectionSelection";
+import TagSelection from "./InputSelect/TagSelection";
+import unescapeString from "@/lib/client/unescapeString";
+import IconPopover from "./IconPopover";
+import TextInput from "./TextInput";
+import usePermissions from "@/hooks/usePermissions";
+import oklchVariableToHex from "@/lib/client/oklchVariableToHex";
+import { Button } from "./ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { Separator } from "./ui/separator";
+
+type Props = {
+  className?: string;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+  standalone?: boolean;
+  mode?: "view" | "edit";
+  setMode?: Function;
+  onUpdateArchive?: () => void;
+};
+
+export default function LinkDetails({
+  className,
+  activeLink,
+  standalone,
+  mode = "view",
+  setMode,
+  onUpdateArchive,
+}: Props) {
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  useEffect(() => {
+    setLink(activeLink);
+  }, [activeLink]);
+
+  const permissions = usePermissions(link.collection.id as number);
+
+  const { t } = useTranslation();
+  const { data: user } = useUser();
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== user?.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === user?.id) {
+        setCollectionOwner({
+          id: user?.id as number,
+          name: user?.name as string,
+          username: user?.username as string,
+          image: user?.image as string,
+          archiveAsScreenshot: user?.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user?.archiveAsScreenshot as boolean,
+          archiveAsPDF: user?.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      link &&
+      (collectionOwner.archiveAsScreenshot === true ? link.pdf : true) &&
+      (collectionOwner.archiveAsMonolith === true ? link.monolith : true) &&
+      (collectionOwner.archiveAsPDF === true ? link.pdf : true) &&
+      link.readable
+    );
+  };
+
+  const updateLink = useUpdateLink();
+  const updateFile = useUpdateFile();
+
+  const submit = async (e?: any) => {
+    e?.preventDefault();
+
+    const { updatedAt: b, ...oldLink } = activeLink;
+    const { updatedAt: a, ...newLink } = link;
+
+    if (JSON.stringify(oldLink) === JSON.stringify(newLink)) {
+      return;
+    }
+
+    const load = toast.loading(t("updating"));
+
+    await updateLink.mutateAsync(link, {
+      onSettled: (data, error) => {
+        toast.dismiss(load);
+
+        if (error) {
+          toast.error(error.message);
+        } else {
+          toast.success(t("updated"));
+          setMode && setMode("view");
+          setLink(data);
+        }
+      },
+    });
+  };
+
+  const setCollection = (e: any) => {
+    if (e?.__isNew__) e.value = null;
+    setLink({
+      ...link,
+      collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
+    });
+  };
+
+  const setTags = (e: any) => {
+    const tagNames = e.map((e: any) => ({ name: e.label }));
+    setLink({ ...link, tags: tagNames });
+  };
+
+  const [iconPopover, setIconPopover] = useState(false);
+
+  return (
+    <div className={clsx(className)} data-vaul-no-drag>
+      <div
+        className={clsx(
+          standalone && "sm:border sm:border-neutral-content sm:rounded-xl p-5"
+        )}
+      >
+        <div
+          className={clsx(
+            "overflow-hidden select-none relative group h-40 opacity-80",
+            standalone
+              ? "sm:max-w-xl -mx-5 -mt-5 sm:rounded-t-xl"
+              : "-mx-4 -mt-4"
+          )}
+        >
+          {formatAvailable(link, "preview") ? (
+            <Image
+              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+              width={1280}
+              height={720}
+              alt=""
+              className="object-cover scale-105 object-center h-full"
+              style={{
+                filter: "blur(1px)",
+              }}
+              onError={(e) => {
+                const target = e.target as HTMLElement;
+                target.style.display = "none";
+              }}
+            />
+          ) : link.preview === "unavailable" ? (
+            <div className="bg-gray-50 duration-100 h-40"></div>
+          ) : (
+            <div className="h-40 skeleton rounded-none"></div>
+          )}
+
+          {!standalone &&
+            (permissions === true || permissions?.canUpdate) &&
+            !isPublicRoute && (
+              <div className="absolute top-0 bottom-0 left-0 right-0 opacity-0 group-hover:opacity-100 duration-100 flex justify-end items-end">
+                <Button
+                  className="mb-2 mr-3 opacity-50 hover:opacity-100 p-0"
+                  size="sm"
+                >
+                  <label className="cursor-pointer py-1 px-2 w-full">
+                    {t("upload_banner")}
+                    <input
+                      type="file"
+                      accept="image/jpg, image/jpeg"
+                      onChange={async (e) => {
+                        const file = e.target.files?.[0];
+                        if (!file) return;
+
+                        const load = toast.loading(t("updating"));
+
+                        await updateFile.mutateAsync(
+                          {
+                            linkId: link.id as number,
+                            file,
+                          },
+                          {
+                            onSettled: (data, error) => {
+                              toast.dismiss(load);
+
+                              if (error) {
+                                toast.error(error.message);
+                              } else {
+                                toast.success(t("updated"));
+                                setLink({ updatedAt: data.updatedAt, ...link });
+                              }
+                            },
+                          }
+                        );
+                      }}
+                      className="hidden"
+                    />
+                  </label>
+                </Button>
+              </div>
+            )}
+        </div>
+
+        {!standalone &&
+        (permissions === true || permissions?.canUpdate) &&
+        !isPublicRoute ? (
+          <div className="-mt-14 ml-8 relative w-fit pb-2">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <LinkIcon
+                    link={link}
+                    className="hover:bg-opacity-70 duration-100 cursor-pointer"
+                    onClick={() => setIconPopover(true)}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="bottom">
+                  <p>{t("change_icon")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            {iconPopover && (
+              <IconPopover
+                color={link.color || oklchVariableToHex("--p")}
+                setColor={(color: string) => setLink({ ...link, color })}
+                weight={(link.iconWeight || "regular") as IconWeight}
+                setWeight={(iconWeight: string) =>
+                  setLink({ ...link, iconWeight })
+                }
+                iconName={link.icon as string}
+                setIconName={(icon: string) => setLink({ ...link, icon })}
+                reset={() =>
+                  setLink({
+                    ...link,
+                    color: "",
+                    icon: "",
+                    iconWeight: "",
+                  })
+                }
+                className="top-12"
+                onClose={() => {
+                  setIconPopover(false);
+                  submit();
+                }}
+              />
+            )}
+          </div>
+        ) : (
+          <div className="-mt-14 ml-8 relative w-fit pb-2">
+            <LinkIcon link={link} onClick={() => setIconPopover(true)} />
+          </div>
+        )}
+
+        <div className="sm:px-8 p-5 pb-8 pt-2">
+          {mode === "view" && (
+            <div className="text-xl mt-2 pr-7">
+              <p
+                className={clsx("relative w-fit", !link.name && "text-neutral")}
+              >
+                {unescapeString(link.name) || t("untitled")}
+              </p>
+            </div>
+          )}
+
+          {mode === "edit" && (
+            <>
+              <br />
+
+              <div>
+                <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+                  {t("name")}
+                </p>
+                <TextInput
+                  value={link.name}
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  placeholder={t("placeholder_example_link")}
+                  className="bg-base-200"
+                />
+              </div>
+            </>
+          )}
+
+          {link.url && mode === "view" ? (
+            <>
+              <br />
+
+              <p className="text-sm mb-2 text-neutral">{t("link")}</p>
+
+              <div className="relative">
+                <div className="rounded-md p-2 bg-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14">
+                  <Link href={link.url} title={link.url} target="_blank">
+                    {link.url}
+                  </Link>
+                  <div className="absolute right-0 px-2 bg-base-200">
+                    <CopyButton text={link.url} />
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : activeLink.url ? (
+            <>
+              <br />
+
+              <div>
+                <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+                  {t("link")}
+                </p>
+                <TextInput
+                  value={link.url || ""}
+                  onChange={(e) => setLink({ ...link, url: e.target.value })}
+                  placeholder={t("placeholder_example_link")}
+                  className="bg-base-200"
+                />
+              </div>
+            </>
+          ) : undefined}
+
+          <br />
+
+          <div className="relative">
+            <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+              {t("collection")}
+            </p>
+
+            {mode === "view" ? (
+              <div className="relative">
+                <Link
+                  href={
+                    isPublicRoute
+                      ? `/public/collections/${link.collection.id}`
+                      : `/collections/${link.collection.id}`
+                  }
+                  className="rounded-md p-2 bg-base-200 border border-base-200 hide-scrollbar overflow-x-auto whitespace-nowrap flex justify-between items-center gap-2 pr-14"
+                >
+                  <p>{link.collection.name}</p>
+                  <div className="absolute right-0 px-2 bg-base-200">
+                    {link.collection.icon ? (
+                      <Icon
+                        icon={link.collection.icon}
+                        size={30}
+                        weight={
+                          (link.collection.iconWeight ||
+                            "regular") as IconWeight
+                        }
+                        color={link.collection.color}
+                      />
+                    ) : (
+                      <i
+                        className="bi-folder-fill text-xl"
+                        style={{ color: link.collection.color }}
+                      ></i>
+                    )}
+                  </div>
+                </Link>
+              </div>
+            ) : (
+              <CollectionSelection
+                onChange={setCollection}
+                defaultValue={
+                  link.collection.id
+                    ? { value: link.collection.id, label: link.collection.name }
+                    : { value: null as unknown as number, label: "Unorganized" }
+                }
+                creatable={false}
+              />
+            )}
+          </div>
+
+          <br />
+
+          <div className="relative">
+            <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+              {t("tags")}
+            </p>
+
+            {mode === "view" ? (
+              <div className="flex gap-2 flex-wrap rounded-md p-2 bg-base-200 border border-base-200 w-full text-xs">
+                {link.tags && link.tags[0] ? (
+                  link.tags.map((tag) =>
+                    isPublicRoute ? (
+                      <div
+                        key={tag.id}
+                        className="bg-base-200 p-1 hover:bg-neutral-content rounded-md duration-100"
+                      >
+                        {tag.name}
+                      </div>
+                    ) : (
+                      <Link
+                        href={"/tags/" + tag.id}
+                        key={tag.id}
+                        className="bg-base-200 py-1 px-2 hover:bg-neutral-content rounded-sm duration-150"
+                      >
+                        {tag.name}
+                      </Link>
+                    )
+                  )
+                ) : (
+                  <div className="text-neutral text-base">{t("no_tags")}</div>
+                )}
+              </div>
+            ) : (
+              <TagSelection
+                onChange={setTags}
+                defaultValue={link.tags.map((e) => ({
+                  label: e.name,
+                  value: e.id,
+                }))}
+              />
+            )}
+          </div>
+
+          <br />
+
+          <div className="relative">
+            <p className="text-sm mb-2 text-neutral relative w-fit flex justify-between">
+              {t("description")}
+            </p>
+
+            {mode === "view" ? (
+              <div className="rounded-md p-2 bg-base-200 hyphens-auto">
+                {link.description ? (
+                  <p>{link.description}</p>
+                ) : (
+                  <p className="text-neutral">{t("no_description_provided")}</p>
+                )}
+              </div>
+            ) : (
+              <textarea
+                value={unescapeString(link.description) as string}
+                onChange={(e) =>
+                  setLink({ ...link, description: e.target.value })
+                }
+                placeholder={t("link_description_placeholder")}
+                className="resize-none w-full rounded-md p-2 h-32 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
+              />
+            )}
+          </div>
+
+          {mode === "view" && (
+            <div>
+              <br />
+
+              <div className="flex gap-1 items-center mb-2">
+                <p
+                  className="text-sm text-neutral"
+                  title={t("available_formats")}
+                >
+                  {link.url ? t("preserved_formats") : t("content")}
+                </p>
+
+                {onUpdateArchive &&
+                  (permissions === true || permissions?.canUpdate) &&
+                  !isPublicRoute &&
+                  link.url && (
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="text-neutral"
+                            onClick={onUpdateArchive}
+                          >
+                            <i className="bi-arrow-clockwise text-sm" />
+                          </Button>
+                        </TooltipTrigger>
+                        <TooltipContent side="bottom">
+                          <p>{t("refresh_preserved_formats")}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  )}
+              </div>
+
+              <div className={`flex flex-col rounded-md p-3 bg-base-200`}>
+                {formatAvailable(link, "monolith") ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("webpage")}
+                      icon={"bi-filetype-html"}
+                      format={ArchivedFormat.monolith}
+                      link={link}
+                      downloadable={true}
+                    />
+                    <Separator className="my-3" />
+                  </>
+                ) : undefined}
+
+                {formatAvailable(link, "image") ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("screenshot")}
+                      icon={"bi-file-earmark-image"}
+                      format={
+                        link?.image?.endsWith("png")
+                          ? ArchivedFormat.png
+                          : ArchivedFormat.jpeg
+                      }
+                      link={link}
+                      downloadable={true}
+                    />
+                    <Separator className="my-3" />
+                  </>
+                ) : undefined}
+
+                {formatAvailable(link, "pdf") ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("pdf")}
+                      icon={"bi-file-earmark-pdf"}
+                      format={ArchivedFormat.pdf}
+                      link={link}
+                      downloadable={true}
+                    />
+                    <Separator className="my-3" />
+                  </>
+                ) : undefined}
+
+                {formatAvailable(link, "readable") ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("readable")}
+                      icon={"bi-file-earmark-text"}
+                      format={ArchivedFormat.readability}
+                      link={link}
+                    />
+                    <Separator className="my-3" />
+                  </>
+                ) : undefined}
+
+                {!isReady() && !atLeastOneFormatAvailable(link) ? (
+                  <div
+                    className={`w-full h-full flex flex-col justify-center p-10`}
+                  >
+                    <BeatLoader
+                      color="oklch(var(--p))"
+                      className="mx-auto mb-3"
+                      size={30}
+                    />
+
+                    <p className="text-center text-xl">
+                      {t("preservation_in_queue")}
+                    </p>
+                    <p className="text-center text-lg">
+                      {t("check_back_later")}
+                    </p>
+                  </div>
+                ) : link.url &&
+                  !isReady() &&
+                  atLeastOneFormatAvailable(link) ? (
+                  <div
+                    className={`w-full h-full flex flex-col justify-center p-5`}
+                  >
+                    <BeatLoader
+                      color="oklch(var(--p))"
+                      className="mx-auto mb-3"
+                      size={20}
+                    />
+                    <p className="text-center">{t("there_are_more_formats")}</p>
+                    <p className="text-center text-sm">
+                      {t("check_back_later")}
+                    </p>
+                  </div>
+                ) : undefined}
+
+                {link.url && (
+                  <Link
+                    href={`https://web.archive.org/web/${link?.url?.replace(
+                      /(^\w+:|^)\/\//,
+                      ""
+                    )}`}
+                    target="_blank"
+                    className="text-neutral mx-auto duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
+                  >
+                    <p className="whitespace-nowrap">
+                      {t("view_latest_snapshot")}
+                    </p>
+                    <i className="bi-box-arrow-up-right" />
+                  </Link>
+                )}
+              </div>
+            </div>
+          )}
+
+          {mode === "view" ? (
+            <>
+              <br />
+
+              <p className="text-neutral text-xs text-center">
+                {t("saved")}{" "}
+                {new Date(link.createdAt || "").toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })}{" "}
+                at{" "}
+                {new Date(link.createdAt || "").toLocaleTimeString("en-US", {
+                  hour: "numeric",
+                  minute: "numeric",
+                })}
+              </p>
+            </>
+          ) : (
+            <>
+              <br />
+              <div className="flex justify-end items-center">
+                <Button
+                  variant="accent"
+                  disabled={JSON.stringify(activeLink) === JSON.stringify(link)}
+                  onClick={submit}
+                >
+                  {t("save_changes")}
+                </Button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/components/LinkListOptions.tsx

@@ -0,0 +1,293 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import SortDropdown from "./SortDropdown";
+import ViewDropdown from "./ViewDropdown";
+import { TFunction } from "i18next";
+import BulkDeleteLinksModal from "./ModalContent/BulkDeleteLinksModal";
+import BulkEditLinksModal from "./ModalContent/BulkEditLinksModal";
+import useCollectivePermissions from "@/hooks/useCollectivePermissions";
+import { useRouter } from "next/router";
+import useLinkStore from "@/store/links";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  Sort,
+  ViewMode,
+} from "@linkwarden/types";
+import { useArchiveAction, useBulkDeleteLinks } from "@linkwarden/router/links";
+import toast from "react-hot-toast";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import ConfirmationModal from "./ConfirmationModal";
+
+type Props = {
+  children: React.ReactNode;
+  t: TFunction<"translation", undefined>;
+  viewMode: ViewMode;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
+  sortBy: Sort;
+  setSortBy: Dispatch<SetStateAction<Sort>>;
+  editMode?: boolean;
+  setEditMode?: (mode: boolean) => void;
+  links: LinkIncludingShortenedCollectionAndTags[];
+};
+
+const LinkListOptions = ({
+  children,
+  t,
+  viewMode,
+  setViewMode,
+  sortBy,
+  setSortBy,
+  editMode,
+  setEditMode,
+  links,
+}: Props) => {
+  const { selectedLinks, setSelectedLinks } = useLinkStore();
+
+  const deleteLinksById = useBulkDeleteLinks();
+  const refreshPreservations = useArchiveAction();
+
+  const router = useRouter();
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
+  const [bulkRefreshPreservationsModal, setBulkRefreshPreservationsModal] =
+    useState(false);
+
+  useEffect(() => {
+    if (editMode && setEditMode) return setEditMode(false);
+  }, [router]);
+
+  const collectivePermissions = useCollectivePermissions(
+    selectedLinks.map((link) => link.collectionId as number)
+  );
+
+  const handleSelectAll = () => {
+    if (selectedLinks.length === links.length) {
+      setSelectedLinks([]);
+    } else {
+      setSelectedLinks(links.map((link) => link));
+    }
+  };
+
+  const bulkDeleteLinks = async () => {
+    const load = toast.loading(t("deleting"));
+
+    await deleteLinksById.mutateAsync(
+      selectedLinks.map((link) => link.id as number),
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setSelectedLinks([]);
+            setEditMode?.(false);
+            toast.success(t("deleted"));
+          }
+        },
+      }
+    );
+  };
+
+  const bulkRefreshPreservations = async () => {
+    const load = toast.loading(t("sending_request"));
+
+    await refreshPreservations.mutateAsync(
+      {
+        linkIds: selectedLinks.map((link) => link.id as number),
+      },
+      {
+        onSettled: (data, error) => {
+          toast.dismiss(load);
+          if (error) {
+            toast.error(error.message);
+          } else {
+            setSelectedLinks([]);
+            setEditMode?.(false);
+            toast.success(t("links_being_archived"));
+          }
+        },
+      }
+    );
+  };
+
+  return (
+    <>
+      <div className="flex justify-between items-center">
+        {children}
+
+        <div className="flex gap-3 items-center justify-end">
+          <div className="flex gap-2 items-center mt-2">
+            {links &&
+              links.length > 0 &&
+              editMode !== undefined &&
+              setEditMode && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => {
+                    setEditMode(!editMode);
+                    setSelectedLinks([]);
+                  }}
+                  className={
+                    editMode ? "bg-primary/20 hover:bg-primary/20" : ""
+                  }
+                >
+                  <i className="bi-pencil-fill text-neutral text-xl" />
+                </Button>
+              )}
+            <SortDropdown
+              sortBy={sortBy}
+              setSort={(value) => {
+                setSortBy(value);
+              }}
+              t={t}
+            />
+            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
+          </div>
+        </div>
+      </div>
+
+      {links && editMode && links.length > 0 && (
+        <div className="w-full flex justify-between items-center min-h-[32px]">
+          <div className="flex gap-3 ml-3">
+            <input
+              type="checkbox"
+              className="checkbox checkbox-primary"
+              onChange={() => handleSelectAll()}
+              checked={
+                selectedLinks.length === links.length && links.length > 0
+              }
+            />
+            {selectedLinks.length > 0 ? (
+              <span>
+                {selectedLinks.length === 1
+                  ? t("link_selected")
+                  : t("links_selected", { count: selectedLinks.length })}
+              </span>
+            ) : (
+              <span>{t("nothing_selected")}</span>
+            )}
+          </div>
+          <div className="flex gap-3">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={() => setBulkRefreshPreservationsModal(true)}
+                    disabled={selectedLinks.length === 0}
+                  >
+                    <i className="bi-arrow-clockwise" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t("refresh_preserved_formats")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={() => setBulkEditLinksModal(true)}
+                    variant="ghost"
+                    size="icon"
+                    disabled={
+                      selectedLinks.length === 0 ||
+                      !(
+                        collectivePermissions === true ||
+                        collectivePermissions?.canUpdate
+                      )
+                    }
+                  >
+                    <i className="bi-pencil-square" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t("edit")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    onClick={(e) => {
+                      e.shiftKey
+                        ? bulkDeleteLinks()
+                        : setBulkDeleteLinksModal(true);
+                    }}
+                    variant="ghost"
+                    size="icon"
+                    disabled={
+                      selectedLinks.length === 0 ||
+                      !(
+                        collectivePermissions === true ||
+                        collectivePermissions?.canDelete
+                      )
+                    }
+                  >
+                    <i className="bi-trash text-error" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p> {t("delete")}</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </div>
+      )}
+
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+            setEditMode?.(false);
+          }}
+        />
+      )}
+
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+            setEditMode?.(false);
+          }}
+        />
+      )}
+
+      {bulkRefreshPreservationsModal && (
+        <ConfirmationModal
+          toggleModal={() => {
+            setBulkRefreshPreservationsModal(false);
+          }}
+          onConfirmed={async () => {
+            await bulkRefreshPreservations();
+          }}
+          title={t("refresh_preserved_formats")}
+        >
+          <p className="mb-5">
+            {selectedLinks.length === 1
+              ? t("refresh_preserved_formats_confirmation_desc")
+              : t("refresh_multiple_preserved_formats_confirmation_desc", {
+                  count: selectedLinks.length,
+                })}
+          </p>
+        </ConfirmationModal>
+      )}
+    </>
+  );
+};
+
+export default LinkListOptions;

apps/web/components/LinkViews/LinkComponents/LinkActions.tsx

@@ -0,0 +1,201 @@
+import { useState } from "react";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@linkwarden/types";
+import usePermissions from "@/hooks/usePermissions";
+import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
+import { useTranslation } from "next-i18next";
+import { useDeleteLink, useGetLink } from "@linkwarden/router/links";
+import toast from "react-hot-toast";
+import LinkModal from "@/components/ModalContent/LinkModal";
+import { useRouter } from "next/router";
+import clsx from "clsx";
+import usePinLink from "@/lib/client/pinLink";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import ConfirmationModal from "@/components/ConfirmationModal";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+  linkModal: boolean;
+  className?: string;
+  setLinkModal: (value: boolean) => void;
+  ghost?: boolean;
+};
+
+export default function LinkActions({
+  link,
+  linkModal,
+  className,
+  setLinkModal,
+  ghost,
+}: Props) {
+  const { t } = useTranslation();
+
+  const permissions = usePermissions(link.collection.id as number);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public");
+
+  const { refetch } = useGetLink({
+    id: link.id as number,
+    isPublicRoute,
+  });
+
+  const pinLink = usePinLink();
+
+  const [editLinkModal, setEditLinkModal] = useState(false);
+  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
+  const [refreshPreservationsModal, setRefreshPreservationsModal] =
+    useState(false);
+
+  const deleteLink = useDeleteLink();
+
+  const updateArchive = async () => {
+    const load = toast.loading(t("sending_request"));
+
+    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+    toast.dismiss(load);
+
+    if (response.ok) {
+      refetch().catch((error) => {
+        console.error("Error fetching link:", error);
+      });
+
+      toast.success(t("link_being_archived"));
+    } else toast.error(data.response);
+  };
+
+  return (
+    <>
+      {isPublicRoute ? (
+        <Button
+          variant={ghost ? "ghost" : "simple"}
+          size="icon"
+          className={clsx(className, "cursor-pointer")}
+          onClick={() => setLinkModal(true)}
+        >
+          <i title="More" className="bi-info-circle text-xl" />
+        </Button>
+      ) : (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              asChild
+              variant={ghost ? "ghost" : "simple"}
+              size="icon"
+              className={clsx(className, "cursor-pointer")}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              <i title="More" className="bi-three-dots text-xl" />
+            </Button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent sideOffset={4} align="end">
+            <DropdownMenuItem onSelect={() => pinLink(link)}>
+              <i className="bi-pin" />
+
+              {link.pinnedBy && link.pinnedBy.length > 0
+                ? t("unpin")
+                : t("pin_to_dashboard")}
+            </DropdownMenuItem>
+
+            <DropdownMenuItem onSelect={() => setLinkModal(true)}>
+              <i className="bi-info-circle" />
+
+              {t("show_link_details")}
+            </DropdownMenuItem>
+
+            {(permissions === true || permissions?.canUpdate) && (
+              <DropdownMenuItem onSelect={() => setEditLinkModal(true)}>
+                <i className="bi-pencil-square" />
+
+                {t("edit_link")}
+              </DropdownMenuItem>
+            )}
+
+            {(permissions === true || permissions?.canDelete) && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="text-error"
+                  onClick={async (e) => {
+                    if (e.shiftKey) {
+                      const load = toast.loading(t("deleting"));
+                      await deleteLink.mutateAsync(link.id as number, {
+                        onSettled: (data, error) => {
+                          toast.dismiss(load);
+                          if (error) toast.error(error.message);
+                          else toast.success(t("deleted"));
+                        },
+                      });
+                    } else {
+                      setDeleteLinkModal(true);
+                    }
+                  }}
+                >
+                  <i className="bi-trash" />
+
+                  {t("delete")}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+      {editLinkModal && (
+        <LinkModal
+          onClose={() => setEditLinkModal(false)}
+          onPin={() => pinLink(link)}
+          onUpdateArchive={() => setRefreshPreservationsModal(true)}
+          onDelete={() => setDeleteLinkModal(true)}
+          link={link}
+          activeMode="edit"
+        />
+      )}
+      {deleteLinkModal && (
+        <DeleteLinkModal
+          onClose={() => setDeleteLinkModal(false)}
+          activeLink={link}
+        />
+      )}
+      {refreshPreservationsModal && (
+        <ConfirmationModal
+          toggleModal={() => {
+            setRefreshPreservationsModal(false);
+          }}
+          onConfirmed={async () => {
+            await updateArchive();
+          }}
+          title={t("refresh_preserved_formats")}
+        >
+          <p className="mb-5">
+            {t("refresh_preserved_formats_confirmation_desc")}
+          </p>
+        </ConfirmationModal>
+      )}
+      {linkModal && (
+        <LinkModal
+          onClose={() => setLinkModal(false)}
+          onPin={() => pinLink(link)}
+          onUpdateArchive={() => setRefreshPreservationsModal(true)}
+          onDelete={() => setDeleteLinkModal(true)}
+          link={link}
+        />
+      )}
+    </>
+  );
+}