add option to disable preservation

fixed placeholder in german translation (delete collection)

.env.sample

@@ -1,11 +1,12 @@
-NEXTAUTH_SECRET=very_sensitive_secret
 NEXTAUTH_URL=http://localhost:3000/api/v1/auth
+NEXTAUTH_SECRET=
 
 # Manual installation database settings
-DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
+# Example: DATABASE_URL=postgresql://user:password@localhost:5432/linkwarden
+DATABASE_URL=
 
 # Docker installation database settings
-POSTGRES_PASSWORD=super_secret_password
+POSTGRES_PASSWORD=
 
 # Additional Optional Settings
 PAGINATION_TAKE_COUNT=
@@ -15,11 +16,27 @@ NEXT_PUBLIC_DISABLE_REGISTRATION=
 NEXT_PUBLIC_CREDENTIALS_ENABLED=
 DISABLE_NEW_SSO_USERS=
 RE_ARCHIVE_LIMIT=
-NEXT_PUBLIC_MAX_FILE_SIZE=
 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=
+MONOLITH_MAX_BUFFER=
+MONOLITH_CUSTOM_OPTIONS=
+PDF_MAX_BUFFER=
+SCREENSHOT_MAX_BUFFER=
+READABILITY_MAX_BUFFER=
+PREVIEW_MAX_BUFFER=
+IMPORT_LIMIT=
+PLAYWRIGHT_LAUNCH_OPTIONS_EXECUTABLE_PATH=
+MAX_WORKERS=
+DISABLE_PRESERVATION=
 
 # AWS S3 Settings
 SPACES_KEY=
@@ -33,11 +50,21 @@ SPACES_FORCE_PATH_STYLE=
 NEXT_PUBLIC_EMAIL_PROVIDER=
 EMAIL_FROM=
 EMAIL_SERVER=
+BASE_URL=
 
+# Proxy settings
+PROXY=
+PROXY_USERNAME=
+PROXY_PASSWORD=
+PROXY_BYPASS=
 
-#
+# PDF archive settings
-# SSO Providers
+PDF_MARGIN_TOP=
-#
+PDF_MARGIN_BOTTOM=
+
+#################
+# SSO Providers #
+#################
 
 # 42 School
 NEXT_PUBLIC_FORTYTWO_ENABLED=
@@ -65,6 +92,12 @@ 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=
@@ -72,12 +105,25 @@ 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=
-BATLLENET_ISSUER=
+BATTLENET_ISSUER=
 
 # Box
 NEXT_PUBLIC_BOX_ENABLED=
@@ -166,8 +212,8 @@ FUSIONAUTH_TENANT_ID=
 # GitHub
 NEXT_PUBLIC_GITHUB_ENABLED=
 GITHUB_CUSTOM_NAME=
-GITHUB_CLIENT_ID=
+GITHUB_ID=
-GITHUB_CLIENT_SECRET=
+GITHUB_SECRET=
 
 # GitLab
 NEXT_PUBLIC_GITLAB_ENABLED=

.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/playwright-tests.yml

@@ -0,0 +1,143 @@
+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: Install playwright
+        if: steps.cache-playwright.outputs.cache-hit != 'true'
+        run: yarn playwright install --with-deps
+
+      - name: Setup project
+        run: |
+          yarn prisma generate
+          yarn build
+          yarn prisma migrate deploy
+
+      - name: Start linkwarden server and worker
+        run: yarn start &
+
+      - name: Run Tests
+        run: npx 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

@@ -42,8 +42,15 @@ prisma/dev.db
 # tests
 /tests
 /test-results/
+/blob-report/
 /playwright-report/
 /playwright/.cache/
+/playwright/.auth/
 
 # docker
 pgdata
+certificates
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.prettierignore

@@ -1,6 +1,6 @@
 node_modules
 .next
-public
+/public
 
 *.lock
 *.log

.vscode/settings.json

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

ARCHITECTURE.md

@@ -0,0 +1,45 @@
+# Architecture
+
+This is a summary of the architecture of Linkwarden. It's intended as a primer for collaborators to get a high-level understanding of the project.
+
+When you start Linkwarden, there are mainly two components that run:
+
+- The NextJS app, This is the main app and it's responsible for serving the frontend and handling the API routes.
+- [The Background Worker](https://github.com/linkwarden/linkwarden/blob/main/scripts/worker.ts), This is a separate `ts-node` process that runs in the background and is responsible for archiving links.
+
+## Main Tech Stack
+
+- [NextJS](https://github.com/vercel/next.js)
+- [TypeScript](https://github.com/microsoft/TypeScript)
+- [Tailwind](https://github.com/tailwindlabs/tailwindcss)
+- [DaisyUI](https://github.com/saadeghi/daisyui)
+- [Prisma](https://github.com/prisma/prisma)
+- [Playwright](https://github.com/microsoft/playwright)
+- [Zustand](https://github.com/pmndrs/zustand)
+
+## Folder Structure
+
+Here's a summary of the main files and folders in the project:
+
+```
+linkwarden
+├── components         # React components
+├── hooks              # React reusable hooks
+├── layouts            # Layouts for pages
+├── lib
+│   ├── api            # Server-side functions (controllers, etc.)
+│   ├── client         # Client-side functions
+│   └── shared         # Shared functions between client and server
+├── pages              # Pages and API routes
+├── prisma             # Prisma schema and migrations
+├── scripts
+│   ├── migration      # Scripts for breaking changes
+│   └── worker.ts      # Background worker for archiving links
+├── store              # Zustand stores
+├── styles             # Styles
+└── types              # TypeScript types
+```
+
+## Versioning
+
+We use semantic versioning for the project. You can track the changes from the [Releases](https://github.com/linkwarden/linkwarden/releases).

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.80-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:18.18-bullseye-slim AS main-app
 
 ARG DEBIAN_FRONTEND=noninteractive
 
@@ -8,10 +20,15 @@ WORKDIR /data
 
 COPY ./package.json ./yarn.lock ./playwright.config.ts ./
 
-# Increase timeout to pass github actions arm64 build
+RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn \
-RUN --mount=type=cache,sharing=locked,target=/usr/local/share/.cache/yarn yarn install --network-timeout 10000000
+    set -eux && \
+    yarn install --network-timeout 10000000
 
-RUN npx playwright install-deps && \
+# 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 && \
+    npx playwright install --with-deps chromium && \
     apt-get clean && \
     yarn cache clean
 
@@ -20,4 +37,6 @@ COPY . .
 RUN yarn prisma generate && \
     yarn build
 
+EXPOSE 3000
+
 CMD yarn prisma migrate deploy && yarn start

README.md

@@ -1,17 +1,21 @@
 <div align="center">
   <img src="./assets/logo.png" width="100px" />
   <h1>Linkwarden</h1>
+  <h3>Bookmark Preservation for Individuals and Teams</h3>
 
 <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://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>
 
-<img alt="GitHub commits since latest release" src="https://img.shields.io/github/commits-since/linkwarden/linkwarden/latest/dev?style=for-the-badge&label=COMMITS%20SINCE%20LATEST%20RELEASE">
+<a href="https://github.com/linkwarden/linkwarden/actions/workflows/release-container.yml"><img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/linkwarden/linkwarden/release-container.yml"></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) | [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)
 
 </div>
 
@@ -24,7 +28,7 @@ The objective is to organize useful webpages and articles you find across the we
 Additionally, Linkwarden is designed with collaboration in mind, sharing links with the public and/or allowing multiple users to work together seamlessly.
 
 > [!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](https://docs.linkwarden.app/self-hosting/installation) Linkwarden, no problem! You'll still have access to all the premium features.
+> 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).
 
 <img src="./assets/dashboard.png" />
 
@@ -57,9 +61,9 @@ We've forked the old version from the current repository into [this repo](https:
 
 ## Features
 
-- 📸 Auto capture a screenshot, PDF, and readable view of each webpage.
+- 📸 Auto capture a screenshot, PDF, single html file, and readable view of each webpage.
 - 🏛️ Send your webpage to Wayback Machine ([archive.org](https://archive.org)) for a snapshot. (Optional)
-- 📂 Organize links by collection, name, description and multiple tags.
+- 📂 Organize links by collection, sub-collection, name, description and multiple tags.
 - 👥 Collaborate on gathering links in a collection.
 - 🎛️ Customize the permissions of each member.
 - 🌐 Share your collected links and preserved formats with the world.
@@ -68,9 +72,20 @@ We've forked the old version from the current repository into [this repo](https:
 - 📱 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)
+- 🔄 Browser Synchronization (using [Floccus](https://floccus.org)!)
 - ⬇️ Import and export your bookmarks.
 - 🔐 SSO integration. (Enterprise and Self-hosted users only)
-- ✨ And so many more features!
+- 📦 Installable Progressive Web App (PWA).
+- 🍏 iOS and MacOS Apps, maintained by [JGeek00](https://github.com/JGeek00).
+- 🍎 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.
+- ⚙️ Customizable View and Adjustable Columns.
+- ✨ And many more features. (Literally!)
 
 ## Like what we're doing? Give us a Star ⭐
 
@@ -94,7 +109,7 @@ We _usually_ go after the [popular suggestions](https://github.com/linkwarden/li
 
 Make sure to check out our [public roadmap](https://github.com/orgs/linkwarden/projects/1).
 
-## Docs
+## Documentation
 
 For information on how to get started or to set up your own instance, please visit the [documentation](https://docs.linkwarden.app).
 
@@ -106,7 +121,7 @@ If you want to contribute, Thanks! Start by checking our [public roadmap](https:
 
 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!
 
-## 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!
 

android/.gitignore

@@ -1,101 +0,0 @@
-# Using Android gitignore template: https://github.com/github/gitignore/blob/HEAD/Android.gitignore
-
-# Built application files
-*.apk
-*.aar
-*.ap_
-*.aab
-
-# Files for the ART/Dalvik VM
-*.dex
-
-# Java class files
-*.class
-
-# Generated files
-bin/
-gen/
-out/
-#  Uncomment the following line in case you need and you don't have the release build type files in your app
-# release/
-
-# Gradle files
-.gradle/
-build/
-
-# Local configuration file (sdk path, etc)
-local.properties
-
-# Proguard folder generated by Eclipse
-proguard/
-
-# Log Files
-*.log
-
-# Android Studio Navigation editor temp files
-.navigation/
-
-# Android Studio captures folder
-captures/
-
-# IntelliJ
-*.iml
-.idea/workspace.xml
-.idea/tasks.xml
-.idea/gradle.xml
-.idea/assetWizardSettings.xml
-.idea/dictionaries
-.idea/libraries
-# Android Studio 3 in .gitignore file.
-.idea/caches
-.idea/modules.xml
-# Comment next line if keeping position of elements in Navigation Editor is relevant for you
-.idea/navEditor.xml
-
-# Keystore files
-# Uncomment the following lines if you do not want to check your keystore files in.
-#*.jks
-#*.keystore
-
-# External native build folder generated in Android Studio 2.2 and later
-.externalNativeBuild
-.cxx/
-
-# Google Services (e.g. APIs or Firebase)
-# google-services.json
-
-# Freeline
-freeline.py
-freeline/
-freeline_project_description.json
-
-# fastlane
-fastlane/report.xml
-fastlane/Preview.html
-fastlane/screenshots
-fastlane/test_output
-fastlane/readme.md
-
-# Version control
-vcs.xml
-
-# lint
-lint/intermediates/
-lint/generated/
-lint/outputs/
-lint/tmp/
-# lint/reports/
-
-# Android Profiling
-*.hprof
-
-# Cordova plugins for Capacitor
-capacitor-cordova-android-plugins
-
-# Copied web assets
-app/src/main/assets/public
-
-# Generated Config files
-app/src/main/assets/capacitor.config.json
-app/src/main/assets/capacitor.plugins.json
-app/src/main/res/xml/config.xml

android/app/.gitignore

@@ -1,2 +0,0 @@
-/build/*
-!/build/.npmkeep

android/app/build.gradle

@@ -1,54 +0,0 @@
-apply plugin: 'com.android.application'
-
-android {
-    namespace "com.example.app"
-    compileSdkVersion rootProject.ext.compileSdkVersion
-    defaultConfig {
-        applicationId "com.example.app"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
-        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
-        aaptOptions {
-             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
-             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
-            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
-        }
-    }
-    buildTypes {
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-repositories {
-    flatDir{
-        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
-    }
-}
-
-dependencies {
-    implementation fileTree(include: ['*.jar'], dir: 'libs')
-    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
-    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
-    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
-    implementation project(':capacitor-android')
-    testImplementation "junit:junit:$junitVersion"
-    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
-    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
-    implementation project(':capacitor-cordova-android-plugins')
-}
-
-apply from: 'capacitor.build.gradle'
-
-try {
-    def servicesJSON = file('google-services.json')
-    if (servicesJSON.text) {
-        apply plugin: 'com.google.gms.google-services'
-    }
-} catch(Exception e) {
-    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
-}

android/app/capacitor.build.gradle

@@ -1,19 +0,0 @@
-// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
-
-android {
-  compileOptions {
-      sourceCompatibility JavaVersion.VERSION_17
-      targetCompatibility JavaVersion.VERSION_17
-  }
-}
-
-apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
-dependencies {
-
-
-}
-
-
-if (hasProperty('postBuildExtras')) {
-  postBuildExtras()
-}

android/app/proguard-rules.pro

@@ -1,21 +0,0 @@
-# Add project specific ProGuard rules here.
-# You can control the set of applied configuration files using the
-# proguardFiles setting in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
-
-# Uncomment this to preserve the line number information for
-# debugging stack traces.
-#-keepattributes SourceFile,LineNumberTable
-
-# If you keep the line number information, uncomment this to
-# hide the original source file name.
-#-renamesourcefileattribute SourceFile

android/app/src/androidTest/java/com/getcapacitor/myapp/ExampleInstrumentedTest.java

@@ -1,26 +0,0 @@
-package com.getcapacitor.myapp;
-
-import static org.junit.Assert.*;
-
-import android.content.Context;
-import androidx.test.ext.junit.runners.AndroidJUnit4;
-import androidx.test.platform.app.InstrumentationRegistry;
-import org.junit.Test;
-import org.junit.runner.RunWith;
-
-/**
- * Instrumented test, which will execute on an Android device.
- *
- * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
- */
-@RunWith(AndroidJUnit4.class)
-public class ExampleInstrumentedTest {
-
-    @Test
-    public void useAppContext() throws Exception {
-        // Context of the app under test.
-        Context appContext = InstrumentationRegistry.getInstrumentation().getTargetContext();
-
-        assertEquals("com.getcapacitor.app", appContext.getPackageName());
-    }
-}

android/app/src/main/AndroidManifest.xml

@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <application
-        android:allowBackup="true"
-        android:icon="@mipmap/ic_launcher"
-        android:label="@string/app_name"
-        android:roundIcon="@mipmap/ic_launcher_round"
-        android:supportsRtl="true"
-        android:theme="@style/AppTheme">
-
-        <activity
-            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
-            android:name=".MainActivity"
-            android:label="@string/title_activity_main"
-            android:theme="@style/AppTheme.NoActionBarLaunch"
-            android:launchMode="singleTask"
-            android:exported="true">
-
-            <intent-filter>
-                <action android:name="android.intent.action.MAIN" />
-                <category android:name="android.intent.category.LAUNCHER" />
-            </intent-filter>
-
-        </activity>
-
-        <provider
-            android:name="androidx.core.content.FileProvider"
-            android:authorities="${applicationId}.fileprovider"
-            android:exported="false"
-            android:grantUriPermissions="true">
-            <meta-data
-                android:name="android.support.FILE_PROVIDER_PATHS"
-                android:resource="@xml/file_paths"></meta-data>
-        </provider>
-    </application>
-
-    <!-- Permissions -->
-
-    <uses-permission android:name="android.permission.INTERNET" />
-</manifest>

android/app/src/main/java/com/example/app/MainActivity.java

@@ -1,5 +0,0 @@
-package com.example.app;
-
-import com.getcapacitor.BridgeActivity;
-
-public class MainActivity extends BridgeActivity {}

android/app/src/main/res/drawable-v24/ic_launcher_foreground.xml

@@ -1,34 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:aapt="http://schemas.android.com/aapt"
-    android:width="108dp"
-    android:height="108dp"
-    android:viewportHeight="108"
-    android:viewportWidth="108">
-    <path
-        android:fillType="evenOdd"
-        android:pathData="M32,64C32,64 38.39,52.99 44.13,50.95C51.37,48.37 70.14,49.57 70.14,49.57L108.26,87.69L108,109.01L75.97,107.97L32,64Z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1">
-        <aapt:attr name="android:fillColor">
-            <gradient
-                android:endX="78.5885"
-                android:endY="90.9159"
-                android:startX="48.7653"
-                android:startY="61.0927"
-                android:type="linear">
-                <item
-                    android:color="#44000000"
-                    android:offset="0.0" />
-                <item
-                    android:color="#00000000"
-                    android:offset="1.0" />
-            </gradient>
-        </aapt:attr>
-    </path>
-    <path
-        android:fillColor="#FFFFFF"
-        android:fillType="nonZero"
-        android:pathData="M66.94,46.02L66.94,46.02C72.44,50.07 76,56.61 76,64L32,64C32,56.61 35.56,50.11 40.98,46.06L36.18,41.19C35.45,40.45 35.45,39.3 36.18,38.56C36.91,37.81 38.05,37.81 38.78,38.56L44.25,44.05C47.18,42.57 50.48,41.71 54,41.71C57.48,41.71 60.78,42.57 63.68,44.05L69.11,38.56C69.84,37.81 70.98,37.81 71.71,38.56C72.44,39.3 72.44,40.45 71.71,41.19L66.94,46.02ZM62.94,56.92C64.08,56.92 65,56.01 65,54.88C65,53.76 64.08,52.85 62.94,52.85C61.8,52.85 60.88,53.76 60.88,54.88C60.88,56.01 61.8,56.92 62.94,56.92ZM45.06,56.92C46.2,56.92 47.13,56.01 47.13,54.88C47.13,53.76 46.2,52.85 45.06,52.85C43.92,52.85 43,53.76 43,54.88C43,56.01 43.92,56.92 45.06,56.92Z"
-        android:strokeColor="#00000000"
-        android:strokeWidth="1" />
-</vector>

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

@@ -1,170 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="108dp"
-    android:height="108dp"
-    android:viewportHeight="108"
-    android:viewportWidth="108">
-    <path
-        android:fillColor="#26A69A"
-        android:pathData="M0,0h108v108h-108z" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M9,0L9,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,0L19,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,0L29,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,0L39,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,0L49,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,0L59,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,0L69,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,0L79,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M89,0L89,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M99,0L99,108"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,9L108,9"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,19L108,19"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,29L108,29"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,39L108,39"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,49L108,49"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,59L108,59"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,69L108,69"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,79L108,79"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,89L108,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M0,99L108,99"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,29L89,29"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,39L89,39"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,49L89,49"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,59L89,59"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,69L89,69"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M19,79L89,79"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M29,19L29,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M39,19L39,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M49,19L49,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M59,19L59,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M69,19L69,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-    <path
-        android:fillColor="#00000000"
-        android:pathData="M79,19L79,89"
-        android:strokeColor="#33FFFFFF"
-        android:strokeWidth="0.8" />
-</vector>

android/app/src/main/res/layout/activity_main.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    tools:context=".MainActivity">
-
-    <WebView
-        android:layout_width="match_parent"
-        android:layout_height="match_parent" />
-</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

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

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

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

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
-</resources>

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

@@ -1,7 +0,0 @@
-<?xml version='1.0' encoding='utf-8'?>
-<resources>
-    <string name="app_name">linkwarden</string>
-    <string name="title_activity_main">linkwarden</string>
-    <string name="package_name">com.example.app</string>
-    <string name="custom_url_scheme">com.example.app</string>
-</resources>

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

@@ -1,22 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<resources>
-
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
-        <!-- Customize your theme here. -->
-        <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
-    </style>
-
-    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <item name="windowActionBar">false</item>
-        <item name="windowNoTitle">true</item>
-        <item name="android:background">@null</item>
-    </style>
-
-
-    <style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
-        <item name="android:background">@drawable/splash</item>
-    </style>
-</resources>

android/app/src/main/res/xml/file_paths.xml

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<paths xmlns:android="http://schemas.android.com/apk/res/android">
-    <external-path name="my_images" path="." />
-    <cache-path name="my_cache_images" path="." />
-</paths>

android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java

@@ -1,18 +0,0 @@
-package com.getcapacitor.myapp;
-
-import static org.junit.Assert.*;
-
-import org.junit.Test;
-
-/**
- * Example local unit test, which will execute on the development machine (host).
- *
- * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
- */
-public class ExampleUnitTest {
-
-    @Test
-    public void addition_isCorrect() throws Exception {
-        assertEquals(4, 2 + 2);
-    }
-}

android/build.gradle

@@ -1,29 +0,0 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
-buildscript {
-    
-    repositories {
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath 'com.android.tools.build:gradle:8.0.0'
-        classpath 'com.google.gms:google-services:4.3.15'
-
-        // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files
-    }
-}
-
-apply from: "variables.gradle"
-
-allprojects {
-    repositories {
-        google()
-        mavenCentral()
-    }
-}
-
-task clean(type: Delete) {
-    delete rootProject.buildDir
-}

android/capacitor.settings.gradle

@@ -1,3 +0,0 @@
-// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
-include ':capacitor-android'
-project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')

android/gradle.properties

@@ -1,22 +0,0 @@
-# Project-wide Gradle settings.
-
-# IDE (e.g. Android Studio) users:
-# Gradle settings configured through the IDE *will override*
-# any settings specified in this file.
-
-# For more details on how to configure your build environment visit
-# http://www.gradle.org/docs/current/userguide/build_environment.html
-
-# Specifies the JVM arguments used for the daemon process.
-# The setting is particularly useful for tweaking memory settings.
-org.gradle.jvmargs=-Xmx1536m
-
-# When configured, Gradle will run in incubating parallel mode.
-# This option should only be used with decoupled projects. More details, visit
-# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
-# org.gradle.parallel=true
-
-# AndroidX package structure to make it clearer which packages are bundled with the
-# Android operating system, and which are packaged with your app's APK
-# https://developer.android.com/topic/libraries/support-library/androidx-rn
-android.useAndroidX=true

android/gradle/wrapper/gradle-wrapper.properties

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

android/gradlew

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

android/gradlew.bat

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

android/settings.gradle

@@ -1,5 +0,0 @@
-include ':app'
-include ':capacitor-cordova-android-plugins'
-project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
-
-apply from: 'capacitor.settings.gradle'

android/variables.gradle

@@ -1,16 +0,0 @@
-ext {
-    minSdkVersion = 22
-    compileSdkVersion = 33
-    targetSdkVersion = 33
-    androidxActivityVersion = '1.7.0'
-    androidxAppCompatVersion = '1.6.1'
-    androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.10.0'
-    androidxFragmentVersion = '1.5.6'
-    coreSplashScreenVersion = '1.0.0'
-    androidxWebkitVersion = '1.6.1'
-    junitVersion = '4.13.2'
-    androidxJunitVersion = '1.1.5'
-    androidxEspressoCoreVersion = '3.5.1'
-    cordovaAndroidVersion = '10.1.1'
-}

capacitor.config.ts

@@ -1,19 +0,0 @@
-import { CapacitorConfig } from "@capacitor/cli";
-
-const config: CapacitorConfig = {
-  appId: "com.example.app",
-  appName: "linkwarden",
-  webDir: "out",
-  server: {
-    androidScheme: "https",
-    url: "http://localhost:3000",
-    cleartext: true,
-  },
-  plugins: {
-    CapacitorHttp: {
-      enabled: true,
-    },
-  },
-};
-
-export default config;

components/AccentSubmitButton.tsx

@@ -1,29 +0,0 @@
-type Props = {
-  onClick?: Function;
-  label: string;
-  loading?: boolean;
-  className?: string;
-  type?: "button" | "submit" | "reset" | undefined;
-};
-
-export default function AccentSubmitButton({
-  onClick,
-  label,
-  loading,
-  className,
-  type,
-}: Props) {
-  return (
-    <button
-      type={type ? type : undefined}
-      className={`border primary-btn-gradient select-none duration-200 bg-black border-[oklch(var(--p))] hover:border-[#0070b5] rounded-lg text-center px-4 py-2 text-white active:scale-95 tracking-wider w-fit flex justify-center items-center gap-2 ${
-        className || ""
-      }`}
-      onClick={() => {
-        if (loading !== undefined && !loading && onClick) onClick();
-      }}
-    >
-      <p className="font-bold">{label}</p>
-    </button>
-  );
-}

components/Announcement.tsx

@@ -0,0 +1,39 @@
+import Link from "next/link";
+import React, { MouseEventHandler } from "react";
+import { Trans } from "next-i18next";
+
+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-2xl 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"
+                key={0}
+              />,
+            ]}
+          />
+        </p>
+        <button
+          onClick={toggleAnnouncementBar}
+          className="btn btn-ghost btn-square btn-sm"
+        >
+          <i className="bi-x text-xl"></i>
+        </button>
+      </div>
+    </div>
+  );
+}

components/AnnouncementBar.tsx

@@ -1,33 +0,0 @@
-import Link from "next/link";
-import React, { MouseEventHandler } from "react";
-
-type Props = {
-  toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
-};
-
-export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
-  return (
-    <div className="fixed w-full z-20 bg-base-200">
-      <div className="w-full h-10 rainbow flex items-center justify-center">
-        <div className="w-fit font-semibold">
-          🎉️ See what&apos;s new in{" "}
-          <Link
-            href="https://blog.linkwarden.app/releases/v2.4"
-            target="_blank"
-            className="underline hover:opacity-50 duration-100"
-          >
-            Linkwarden v2.4
-          </Link>
-          ! 🥳️
-        </div>
-
-        <button
-          className="fixed right-3 hover:opacity-50 duration-100"
-          onClick={toggleAnnouncementBar}
-        >
-          <i className="bi-x text-neutral text-2xl"></i>
-        </button>
-      </div>
-    </div>
-  );
-}

components/ClickAwayHandler.tsx

@@ -8,19 +8,38 @@ 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) {
+    function handleClickOutside(event: MouseEvent) {
-      if (
+      const clickedElement = event.target as HTMLElement;
-        ref.current &&
+      if (ref.current && !ref.current.contains(clickedElement)) {
-        !ref.current.contains(event.target as HTMLInputElement)
+        const refZIndex = getZIndex(ref.current);
-      ) {
+        const clickedZIndex = getZIndex(clickedElement);
-        onClickOutside(event);
+        if (clickedZIndex <= refZIndex) {
+          onClickOutside(event);
+        }
       }
     }
+
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);

components/CollectionCard.tsx

@@ -1,23 +1,28 @@
 import Link from "next/link";
-import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import {
+  AccountSettings,
+  CollectionIncludingMembersAndLinkCount,
+} from "@/types/global";
 import React, { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
-import useAccountStore from "@/store/account";
 import EditCollectionModal from "./ModalContent/EditCollectionModal";
 import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
 import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import { useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
 
-type Props = {
+export default function CollectionCard({
+  collection,
+}: {
   collection: CollectionIncludingMembersAndLinkCount;
-  className?: string;
+}) {
-};
+  const { t } = useTranslation();
-
-export default function CollectionCard({ collection, className }: Props) {
   const { settings } = useLocalSettingsStore();
-  const { account } = useAccountStore();
+  const { data: user = {} } = useUser();
 
   const formattedDate = new Date(collection.createdAt as string).toLocaleString(
     "en-US",
@@ -30,28 +35,24 @@ export default function CollectionCard({ collection, className }: Props) {
 
   const permissions = usePermissions(collection.id as number);
 
-  const [collectionOwner, setCollectionOwner] = useState({
+  const [collectionOwner, setCollectionOwner] = useState<
-    id: null as unknown as number,
+    Partial<AccountSettings>
-    name: "",
+  >({});
-    username: "",
-    image: "",
-    archiveAsScreenshot: undefined as unknown as boolean,
-    archiveAsPDF: undefined as unknown as boolean,
-  });
 
   useEffect(() => {
     const fetchOwner = async () => {
-      if (collection && collection.ownerId !== account.id) {
+      if (collection && collection.ownerId !== user.id) {
         const owner = await getPublicUserData(collection.ownerId as number);
         setCollectionOwner(owner);
-      } else if (collection && collection.ownerId === account.id) {
+      } else if (collection && collection.ownerId === user.id) {
         setCollectionOwner({
-          id: account.id as number,
+          id: user.id as number,
-          name: account.name,
+          name: user.name,
-          username: account.username as string,
+          username: user.username as string,
-          image: account.image as string,
+          image: user.image as string,
-          archiveAsScreenshot: account.archiveAsScreenshot as boolean,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
-          archiveAsPDF: account.archiveAsPDF as boolean,
+          archiveAsMonolith: user.archiveAsMonolith as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
         });
       }
     };
@@ -70,12 +71,13 @@ export default function CollectionCard({ collection, className }: Props) {
         <div
           tabIndex={0}
           role="button"
+          onMouseDown={dropdownTriggerer}
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
           <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
-          {permissions === true ? (
+          {permissions === true && (
             <li>
               <div
                 role="button"
@@ -84,11 +86,12 @@ export default function CollectionCard({ collection, className }: Props) {
                   (document?.activeElement as HTMLElement)?.blur();
                   setEditCollectionModal(true);
                 }}
+                className="whitespace-nowrap"
               >
-                Edit Collection Info
+                {t("edit_collection_info")}
               </div>
             </li>
-          ) : undefined}
+          )}
           <li>
             <div
               role="button"
@@ -97,8 +100,11 @@ export default function CollectionCard({ collection, className }: Props) {
                 (document?.activeElement as HTMLElement)?.blur();
                 setEditCollectionSharingModal(true);
               }}
+              className="whitespace-nowrap"
             >
-              {permissions === true ? "Share and Collaborate" : "View Team"}
+              {permissions === true
+                ? t("share_and_collaborate")
+                : t("view_team")}
             </div>
           </li>
           <li>
@@ -109,8 +115,11 @@ export default function CollectionCard({ collection, className }: Props) {
                 (document?.activeElement as HTMLElement)?.blur();
                 setDeleteCollectionModal(true);
               }}
+              className="whitespace-nowrap"
             >
-              {permissions === true ? "Delete Collection" : "Leave Collection"}
+              {permissions === true
+                ? t("delete_collection")
+                : t("leave_collection")}
             </div>
           </li>
         </ul>
@@ -119,12 +128,12 @@ export default function CollectionCard({ collection, className }: Props) {
         className="flex items-center absolute bottom-3 left-3 z-10 btn px-2 btn-ghost rounded-full"
         onClick={() => setEditCollectionSharingModal(true)}
       >
-        {collectionOwner.id ? (
+        {collectionOwner.id && (
           <ProfilePhoto
             src={collectionOwner.image || undefined}
             name={collectionOwner.name}
           />
-        ) : undefined}
+        )}
         {collection.members
           .sort((a, b) => (a.userId as number) - (b.userId as number))
           .map((e, i) => {
@@ -138,13 +147,13 @@ export default function CollectionCard({ collection, className }: Props) {
             );
           })
           .slice(0, 3)}
-        {collection.members.length - 3 > 0 ? (
+        {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>
-        ) : null}
+        )}
       </div>
       <Link
         href={`/collections/${collection.id}`}
@@ -168,12 +177,12 @@ export default function CollectionCard({ collection, className }: Props) {
           <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 ? (
+                {collection.isPublic && (
                   <i
-                    className="bi-globe-americas drop-shadow text-neutral"
+                    className="bi-globe2 drop-shadow text-neutral"
                     title="This collection is being shared publicly."
                   ></i>
-                ) : undefined}
+                )}
                 <i
                   className="bi-link-45deg text-lg text-neutral"
                   title="This collection is being shared publicly."
@@ -193,24 +202,24 @@ export default function CollectionCard({ collection, className }: Props) {
           </div>
         </div>
       </Link>
-      {editCollectionModal ? (
+      {editCollectionModal && (
         <EditCollectionModal
           onClose={() => setEditCollectionModal(false)}
           activeCollection={collection}
         />
-      ) : undefined}
+      )}
-      {editCollectionSharingModal ? (
+      {editCollectionSharingModal && (
         <EditCollectionSharingModal
           onClose={() => setEditCollectionSharingModal(false)}
           activeCollection={collection}
         />
-      ) : undefined}
+      )}
-      {deleteCollectionModal ? (
+      {deleteCollectionModal && (
         <DeleteCollectionModal
           onClose={() => setDeleteCollectionModal(false)}
           activeCollection={collection}
         />
-      ) : undefined}
+      )}
     </div>
   );
 }

components/CollectionListing.tsx

@@ -0,0 +1,398 @@
+import React, { useEffect, useMemo, useState } from "react";
+import Tree, {
+  mutateTree,
+  moveItemOnTree,
+  RenderItemParams,
+  TreeItem,
+  TreeData,
+  ItemId,
+  TreeSourcePosition,
+  TreeDestinationPosition,
+} from "@atlaskit/tree";
+import { Collection } from "@prisma/client";
+import Link from "next/link";
+import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
+import { useRouter } from "next/router";
+import toast from "react-hot-toast";
+import { useTranslation } from "next-i18next";
+import { useCollections, useUpdateCollection } from "@/hooks/store/collections";
+import { useUpdateUser, useUser } from "@/hooks/store/user";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
+
+interface ExtendedTreeItem extends TreeItem {
+  data: Collection;
+}
+
+const CollectionListing = () => {
+  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,
+      })
+    );
+  };
+
+  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 updatedCollectionOrder = [...user.collectionOrder];
+
+    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);
+          },
+        }
+      );
+    }
+
+    if (
+      destination.index !== undefined &&
+      destination.parentId === source.parentId &&
+      source.parentId === "root"
+    ) {
+      updatedCollectionOrder.includes(movedCollectionId) &&
+        updatedCollectionOrder.splice(source.index, 1);
+
+      updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);
+
+      await updateUser.mutateAsync({
+        ...user,
+        collectionOrder: updatedCollectionOrder,
+      });
+    } else if (
+      destination.index !== undefined &&
+      destination.parentId === "root"
+    ) {
+      updatedCollectionOrder.splice(destination.index, 0, movedCollectionId);
+
+      updateUser.mutate({
+        ...user,
+        collectionOrder: updatedCollectionOrder,
+      });
+    } else if (
+      source.parentId === "root" &&
+      destination.parentId &&
+      destination.parentId !== "root"
+    ) {
+      updatedCollectionOrder.splice(source.index, 1);
+
+      await updateUser.mutateAsync({
+        ...user,
+        collectionOrder: updatedCollectionOrder,
+      });
+    }
+  };
+
+  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)}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+        onDragEnd={onDragEnd}
+        isDragEnabled
+        isNestingEnabled
+      />
+    );
+};
+
+export default CollectionListing;
+
+const renderItem = (
+  { item, onExpand, onCollapse, provided }: RenderItemParams,
+  currentPath: string
+) => {
+  const collection = item.data;
+
+  return (
+    <div ref={provided.innerRef} {...provided.draggableProps} className="mb-1">
+      <div
+        className={`${
+          currentPath === `/collections/${collection.id}`
+            ? "bg-primary/20 is-active"
+            : "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 capitalize`}
+          >
+            {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-2xl"
+                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>
+  );
+};
+
+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);
+    });
+  }
+
+  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;
+    }
+  });
+
+  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 };
+};

components/CopyButton.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+
+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 (
+    <div
+      className={`text-xl text-neutral btn btn-sm btn-square btn-ghost ${
+        copied ? "bi-check2 text-success" : "bi-copy"
+      }`}
+      onClick={handleCopy}
+    ></div>
+  );
+};
+
+export default CopyButton;

components/DashboardItem.tsx

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

components/Drawer.tsx

@@ -0,0 +1,81 @@
+import React, { ReactNode, useEffect } from "react";
+import { Drawer as D } from "vaul";
+import clsx from "clsx";
+
+type Props = {
+  toggleDrawer: Function;
+  children: ReactNode;
+  className?: string;
+  dismissible?: boolean;
+};
+
+export default function Drawer({
+  toggleDrawer,
+  className,
+  children,
+  dismissible = true,
+}: Props) {
+  const [drawerIsOpen, setDrawerIsOpen] = React.useState(true);
+
+  useEffect(() => {
+    if (window.innerWidth >= 640) {
+      document.body.style.overflow = "hidden";
+      document.body.style.position = "relative";
+      return () => {
+        document.body.style.overflow = "auto";
+        document.body.style.position = "";
+      };
+    }
+  }, []);
+
+  if (window.innerWidth < 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-2xl 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-2xl 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="right"
+      >
+        <D.Portal>
+          <D.Overlay className="fixed inset-0 bg-black/10 z-20" />
+          <D.Content className="bg-white flex flex-col h-full w-2/5 min-w-[30rem] mt-24 fixed bottom-0 right-0 z-40 !select-auto focus:outline-none">
+            <div
+              className={clsx(
+                "p-4 bg-base-100 flex-1 border-neutral-content border-l overflow-y-auto",
+                className
+              )}
+            >
+              {children}
+            </div>
+          </D.Content>
+        </D.Portal>
+      </D.Root>
+    );
+  }
+}

components/Dropdown.tsx

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

components/FilterSearchDropdown.tsx

@@ -1,4 +1,8 @@
-import React from "react";
+import { dropdownTriggerer } from "@/lib/client/utils";
+import React, { useEffect } from "react";
+import { useTranslation } from "next-i18next";
+import { resetInfiniteQueryPagination } from "@/hooks/store/links";
+import { useQueryClient } from "@tanstack/react-query";
 
 type Props = {
   setSearchFilter: Function;
@@ -15,16 +19,20 @@ export default function FilterSearchDropdown({
   setSearchFilter,
   searchFilter,
 }: Props) {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
   return (
     <div className="dropdown dropdown-bottom dropdown-end">
       <div
         tabIndex={0}
         role="button"
+        onMouseDown={dropdownTriggerer}
         className="btn btn-sm btn-square btn-ghost"
       >
         <i className="bi-funnel text-neutral text-2xl"></i>
       </div>
-      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mt-1">
+      <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1">
         <li>
           <label
             className="label cursor-pointer flex justify-start"
@@ -37,10 +45,11 @@ export default function FilterSearchDropdown({
               className="checkbox checkbox-primary"
               checked={searchFilter.name}
               onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
                 setSearchFilter({ ...searchFilter, name: !searchFilter.name });
               }}
             />
-            <span className="label-text">Name</span>
+            <span className="label-text whitespace-nowrap">{t("name")}</span>
           </label>
         </li>
         <li>
@@ -55,10 +64,11 @@ export default function FilterSearchDropdown({
               className="checkbox checkbox-primary"
               checked={searchFilter.url}
               onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
                 setSearchFilter({ ...searchFilter, url: !searchFilter.url });
               }}
             />
-            <span className="label-text">Link</span>
+            <span className="label-text whitespace-nowrap">{t("link")}</span>
           </label>
         </li>
         <li>
@@ -73,34 +83,16 @@ export default function FilterSearchDropdown({
               className="checkbox checkbox-primary"
               checked={searchFilter.description}
               onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
                 setSearchFilter({
                   ...searchFilter,
                   description: !searchFilter.description,
                 });
               }}
             />
-            <span className="label-text">Description</span>
+            <span className="label-text whitespace-nowrap">
-          </label>
+              {t("description")}
-        </li>
+            </span>
-        <li>
-          <label
-            className="label cursor-pointer flex justify-start"
-            tabIndex={0}
-            role="button"
-          >
-            <input
-              type="checkbox"
-              name="search-filter-checkbox"
-              className="checkbox checkbox-primary"
-              checked={searchFilter.textContent}
-              onChange={() => {
-                setSearchFilter({
-                  ...searchFilter,
-                  textContent: !searchFilter.textContent,
-                });
-              }}
-            />
-            <span className="label-text">Full Content</span>
           </label>
         </li>
         <li>
@@ -115,13 +107,38 @@ export default function FilterSearchDropdown({
               className="checkbox checkbox-primary"
               checked={searchFilter.tags}
               onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
+                setSearchFilter({ ...searchFilter, tags: !searchFilter.tags });
+              }}
+            />
+            <span className="label-text whitespace-nowrap">{t("tags")}</span>
+          </label>
+        </li>
+        <li>
+          <label
+            className="label cursor-pointer flex justify-between"
+            tabIndex={0}
+            role="button"
+          >
+            <input
+              type="checkbox"
+              name="search-filter-checkbox"
+              className="checkbox checkbox-primary"
+              checked={searchFilter.textContent}
+              onChange={() => {
+                resetInfiniteQueryPagination(queryClient, ["links"]);
                 setSearchFilter({
                   ...searchFilter,
-                  tags: !searchFilter.tags,
+                  textContent: !searchFilter.textContent,
                 });
               }}
             />
-            <span className="label-text">Tags</span>
+            <span className="label-text whitespace-nowrap">
+              {t("full_content")}
+            </span>
+            <div className="ml-auto badge badge-sm badge-neutral whitespace-nowrap">
+              {t("slower")}
+            </div>
           </label>
         </li>
       </ul>

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;

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;

components/IconPicker.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import TextInput from "./TextInput";
+import Popover from "./Popover";
+import { HexColorPicker } from "react-colorful";
+import { useTranslation } from "next-i18next";
+import Icon from "./Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import IconGrid from "./IconGrid";
+import IconPopover from "./IconPopover";
+import clsx from "clsx";
+
+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">
+      <div
+        onClick={() => setIconPicker(!iconPicker)}
+        className="btn btn-square w-20 h-20"
+      >
+        {iconName ? (
+          <Icon
+            icon={iconName}
+            size={60}
+            weight={(weight || "regular") as IconWeight}
+            color={color || "#0ea5e9"}
+          />
+        ) : !iconName && hideDefaultIcon ? (
+          <p className="p-1">{t("set_custom_icon")}</p>
+        ) : (
+          <i
+            className="bi-folder-fill text-6xl"
+            style={{ color: color || "#0ea5e9" }}
+          ></i>
+        )}
+      </div>
+      {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;

components/IconPopover.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+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";
+
+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;
+};
+
+const IconPopover = ({
+  alignment,
+  color,
+  setColor,
+  iconName,
+  setIconName,
+  weight,
+  setWeight,
+  reset,
+  className,
+  onClose,
+}: Props) => {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+
+  return (
+    <Popover
+      onClose={() => onClose()}
+      className={clsx(
+        className,
+        "fade-in bg-base-200 border border-neutral-content p-3 w-[22.5rem] rounded-lg shadow-md"
+      )}
+    >
+      <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">
+          <div
+            className="btn btn-ghost btn-xs w-fit"
+            onClick={reset as React.MouseEventHandler<HTMLDivElement>}
+          >
+            {t("reset_defaults")}
+          </div>
+          <p className="text-neutral text-xs">{t("click_out_to_apply")}</p>
+        </div>
+      </div>
+    </Popover>
+  );
+};
+
+export default IconPopover;

components/InputSelect/CollectionSelection.tsx

@@ -1,22 +1,35 @@
-import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { styles } from "./styles";
 import { Options } from "./types";
 import CreatableSelect from "react-select/creatable";
+import Select from "react-select";
+import { useCollections } from "@/hooks/store/collections";
 
 type Props = {
   onChange: any;
-  defaultValue:
+  showDefaultValue?: boolean;
+  defaultValue?:
     | {
         label: string;
         value?: number;
       }
     | undefined;
+  creatable?: boolean;
+  autoFocus?: boolean;
+  onBlur?: any;
 };
 
-export default function CollectionSelection({ onChange, defaultValue }: Props) {
+export default function CollectionSelection({
-  const { collections } = useCollectionStore();
+  onChange,
+  defaultValue,
+  showDefaultValue = true,
+  creatable = true,
+  autoFocus,
+  onBlur,
+}: Props) {
+  const { data: collections = [] } = useCollections();
+
   const router = useRouter();
 
   const [options, setOptions] = useState<Options[]>([]);
@@ -36,22 +49,91 @@ export default function CollectionSelection({ onChange, defaultValue }: Props) {
 
   useEffect(() => {
     const formatedCollections = collections.map((e) => {
-      return { value: e.id, label: e.name, ownerId: e.ownerId };
+      return {
+        value: e.id,
+        label: e.name,
+        ownerId: e.ownerId,
+        count: e._count,
+        parentId: e.parentId,
+      };
     });
 
     setOptions(formatedCollections);
   }, [collections]);
 
-  return (
+  const getParentNames = (parentId: number): string[] => {
-    <CreatableSelect
+    const parentNames = [];
-      isClearable={false}
+    const parent = collections.find((e) => e.id === parentId);
-      className="react-select-container"
+
-      classNamePrefix="react-select"
+    if (parent) {
-      onChange={onChange}
+      parentNames.push(parent.name);
-      options={options}
+      if (parent.parentId) {
-      styles={styles}
+        parentNames.push(...getParentNames(parent.parentId));
-      defaultValue={defaultValue}
+      }
-      // menuPosition="fixed"
+    }
-    />
+
-  );
+    // Have the top level parent at beginning
+    return parentNames.reverse();
+  };
+
+  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">
+          {getParentNames(data?.parentId).length > 0 ? (
+            <>
+              {getParentNames(data.parentId).join(" > ")} {">"} {data.label}
+            </>
+          ) : (
+            data.label
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  if (creatable) {
+    return (
+      <CreatableSelect
+        isClearable={false}
+        className="react-select-container"
+        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="react-select-container"
+        classNamePrefix="react-select"
+        onChange={onChange}
+        options={options}
+        styles={styles}
+        autoFocus={autoFocus}
+        defaultValue={showDefaultValue ? defaultValue : null}
+        onBlur={onBlur}
+        components={{
+          Option: customOption,
+        }}
+        // menuPosition="fixed"
+      />
+    );
+  }
 }

components/InputSelect/TagSelection.tsx

@@ -1,24 +1,31 @@
-import useTagStore from "@/store/tags";
 import { useEffect, useState } from "react";
 import CreatableSelect from "react-select/creatable";
 import { styles } from "./styles";
 import { Options } from "./types";
+import { useTags } from "@/hooks/store/tags";
 
 type Props = {
   onChange: any;
   defaultValue?: {
-    value: number;
+    value?: number;
     label: string;
   }[];
+  autoFocus?: boolean;
+  onBlur?: any;
 };
 
-export default function TagSelection({ onChange, defaultValue }: Props) {
+export default function TagSelection({
-  const { tags } = useTagStore();
+  onChange,
+  defaultValue,
+  autoFocus,
+  onBlur,
+}: Props) {
+  const { data: tags = [] } = useTags();
 
   const [options, setOptions] = useState<Options[]>([]);
 
   useEffect(() => {
-    const formatedCollections = tags.map((e) => {
+    const formatedCollections = tags.map((e: any) => {
       return { value: e.id, label: e.name };
     });
 
@@ -34,8 +41,9 @@ export default function TagSelection({ onChange, defaultValue }: Props) {
       options={options}
       styles={styles}
       defaultValue={defaultValue}
-      // menuPosition="fixed"
       isMulti
+      autoFocus={autoFocus}
+      onBlur={onBlur}
     />
   );
 }

components/InputSelect/styles.ts

@@ -14,7 +14,11 @@ export const styles: StylesConfig = {
         ? "oklch(var(--p))"
         : "oklch(var(--nc))",
     },
-    transition: "all 50ms",
+    transition: "all 100ms",
+  }),
+  menu: (styles) => ({
+    ...styles,
+    zIndex: 10,
   }),
   control: (styles, state) => ({
     ...styles,
@@ -50,19 +54,28 @@ export const styles: StylesConfig = {
   multiValue: (styles) => {
     return {
       ...styles,
-      backgroundColor: "#0ea5e9",
+      backgroundColor: "oklch(var(--b2))",
-      color: "white",
+      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",
+      color: "red",
-      backgroundColor: "#38bdf8",
+      backgroundColor: "oklch(var(--nc))",
     },
   }),
   menuPortal: (base) => ({ ...base, zIndex: 9999 }),

components/InstallApp.tsx

@@ -0,0 +1,54 @@
+import { isPWA } from "@/lib/client/utils";
+import React, { useState } from "react";
+import { Trans } from "next-i18next";
+
+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)}
+          className="btn btn-ghost btn-square btn-sm"
+        >
+          <i className="bi-x text-xl"></i>
+        </button>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default InstallApp;

components/LinkDetails.tsx

@@ -0,0 +1,687 @@
+import React, { useEffect, useState } from "react";
+import {
+  LinkIncludingShortenedCollectionAndTags,
+  ArchivedFormat,
+} from "@/types/global";
+import Link from "next/link";
+import {
+  pdfAvailable,
+  readabilityAvailable,
+  monolithAvailable,
+  screenshotAvailable,
+  previewAvailable,
+} from "@/lib/shared/getArchiveValidity";
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
+import { BeatLoader } from "react-spinners";
+import { useUser } from "@/hooks/store/user";
+import {
+  useGetLink,
+  useUpdateLink,
+  useUpdatePreview,
+} from "@/hooks/store/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";
+
+type Props = {
+  className?: string;
+  activeLink: LinkIncludingShortenedCollectionAndTags;
+  standalone?: boolean;
+  mode?: "view" | "edit";
+  setMode?: Function;
+  onUpdateArchive?: Function;
+};
+
+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 getLink = useGetLink();
+  const { data: user = {} } = useUser();
+
+  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,
+          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 && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsMonolith === true
+        ? link.monolith && link.monolith !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      link.readable &&
+      link.readable !== "pending"
+    );
+  };
+
+  const atLeastOneFormatAvailable = () => {
+    return (
+      screenshotAvailable(link) ||
+      pdfAvailable(link) ||
+      readabilityAvailable(link) ||
+      monolithAvailable(link)
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getLink.mutateAsync({
+        id: link.id as number,
+      });
+    })();
+
+    let interval: any;
+
+    if (!isReady()) {
+      interval = setInterval(async () => {
+        await getLink.mutateAsync({
+          id: link.id as number,
+        });
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link.monolith]);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  const updateLink = useUpdateLink();
+  const updatePreview = useUpdatePreview();
+
+  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-2xl 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-2xl"
+              : "-mx-4 -mt-4"
+          )}
+        >
+          {previewAvailable(link) ? (
+            <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="duration-100 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">
+                <label className="btn btn-xs mb-2 mr-3 opacity-50 hover:opacity-100">
+                  {t("upload_preview_image")}
+                  <input
+                    type="file"
+                    accept="image/jpg, image/jpeg, image/png"
+                    onChange={async (e) => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+
+                      const load = toast.loading(t("updating"));
+
+                      await updatePreview.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>
+              </div>
+            )}
+        </div>
+
+        {!standalone &&
+        (permissions === true || permissions?.canUpdate) &&
+        !isPublicRoute ? (
+          <div className="-mt-14 ml-8 relative w-fit pb-2">
+            <div className="tooltip tooltip-bottom" data-tip={t("change_icon")}>
+              <LinkIcon
+                link={link}
+                className="hover:bg-opacity-70 duration-100 cursor-pointer"
+                onClick={() => setIconPopover(true)}
+              />
+            </div>
+            {iconPopover && (
+              <IconPopover
+                color={link.color || "#006796"}
+                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="max-w-xl 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-2xl"
+                        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 p-1 hover:bg-neutral-content btn btn-xs btn-ghost rounded-md"
+                      >
+                        {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("file")}
+                </p>
+
+                {onUpdateArchive &&
+                  (permissions === true || permissions?.canUpdate) &&
+                  !isPublicRoute && (
+                    <div
+                      className="tooltip tooltip-bottom"
+                      data-tip={t("refresh_preserved_formats")}
+                    >
+                      <button
+                        className="btn btn-xs btn-ghost btn-square text-neutral"
+                        onClick={() => onUpdateArchive()}
+                      >
+                        <i className="bi-arrow-clockwise text-sm" />
+                      </button>
+                    </div>
+                  )}
+              </div>
+
+              <div className={`flex flex-col rounded-md p-3 bg-base-200`}>
+                {monolithAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("webpage")}
+                      icon={"bi-filetype-html"}
+                      format={ArchivedFormat.monolith}
+                      link={link}
+                      downloadable={true}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {screenshotAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("screenshot")}
+                      icon={"bi-file-earmark-image"}
+                      format={
+                        link?.image?.endsWith("png")
+                          ? ArchivedFormat.png
+                          : ArchivedFormat.jpeg
+                      }
+                      link={link}
+                      downloadable={true}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {pdfAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("pdf")}
+                      icon={"bi-file-earmark-pdf"}
+                      format={ArchivedFormat.pdf}
+                      link={link}
+                      downloadable={true}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {readabilityAvailable(link) ? (
+                  <>
+                    <PreservedFormatRow
+                      name={t("readable")}
+                      icon={"bi-file-earmark-text"}
+                      format={ArchivedFormat.readability}
+                      link={link}
+                    />
+                    <hr className="m-3 border-t border-neutral-content" />
+                  </>
+                ) : undefined}
+
+                {!isReady() && !atLeastOneFormatAvailable() ? (
+                  <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-2xl">
+                      {t("preservation_in_queue")}
+                    </p>
+                    <p className="text-center text-lg">
+                      {t("check_back_later")}
+                    </p>
+                  </div>
+                ) : link.url && !isReady() && atLeastOneFormatAvailable() ? (
+                  <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
+                  className={clsx(
+                    "btn btn-accent text-white",
+                    JSON.stringify(activeLink) === JSON.stringify(link)
+                      ? "btn-disabled"
+                      : "dark:border-violet-400"
+                  )}
+                  onClick={submit}
+                >
+                  {t("save_changes")}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

components/LinkListOptions.tsx

@@ -0,0 +1,217 @@
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import FilterSearchDropdown from "./FilterSearchDropdown";
+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 { Sort, ViewMode } from "@/types/global";
+import { useBulkDeleteLinks, useLinks } from "@/hooks/store/links";
+import toast from "react-hot-toast";
+
+type Props = {
+  children: React.ReactNode;
+  t: TFunction<"translation", undefined>;
+  viewMode: ViewMode;
+  setViewMode: Dispatch<SetStateAction<ViewMode>>;
+  searchFilter?: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    tags: boolean;
+    textContent: boolean;
+  };
+  setSearchFilter?: (filter: {
+    name: boolean;
+    url: boolean;
+    description: boolean;
+    tags: boolean;
+    textContent: boolean;
+  }) => void;
+  sortBy: Sort;
+  setSortBy: Dispatch<SetStateAction<Sort>>;
+  editMode?: boolean;
+  setEditMode?: (mode: boolean) => void;
+};
+
+const LinkListOptions = ({
+  children,
+  t,
+  viewMode,
+  setViewMode,
+  searchFilter,
+  setSearchFilter,
+  sortBy,
+  setSortBy,
+  editMode,
+  setEditMode,
+}: Props) => {
+  const { selectedLinks, setSelectedLinks } = useLinkStore();
+
+  const deleteLinksById = useBulkDeleteLinks();
+
+  const { links } = useLinks();
+
+  const router = useRouter();
+
+  const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
+  const [bulkEditLinksModal, setBulkEditLinksModal] = 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([]);
+            toast.success(t("deleted"));
+          }
+        },
+      }
+    );
+  };
+
+  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 && (
+                <div
+                  role="button"
+                  onClick={() => {
+                    setEditMode(!editMode);
+                    setSelectedLinks([]);
+                  }}
+                  className={`btn btn-square btn-sm btn-ghost ${
+                    editMode
+                      ? "bg-primary/20 hover:bg-primary/20"
+                      : "hover:bg-neutral/20"
+                  }`}
+                >
+                  <i className="bi-pencil-fill text-neutral text-xl"></i>
+                </div>
+              )}
+            {searchFilter && setSearchFilter && (
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
+              />
+            )}
+            <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">
+            <button
+              onClick={() => setBulkEditLinksModal(true)}
+              className="btn btn-sm btn-accent text-white w-fit ml-auto"
+              disabled={
+                selectedLinks.length === 0 ||
+                !(
+                  collectivePermissions === true ||
+                  collectivePermissions?.canUpdate
+                )
+              }
+            >
+              {t("edit")}
+            </button>
+            <button
+              onClick={(e) => {
+                (document?.activeElement as HTMLElement)?.blur();
+                e.shiftKey ? bulkDeleteLinks() : setBulkDeleteLinksModal(true);
+              }}
+              className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
+              disabled={
+                selectedLinks.length === 0 ||
+                !(
+                  collectivePermissions === true ||
+                  collectivePermissions?.canDelete
+                )
+              }
+            >
+              {t("delete")}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {bulkDeleteLinksModal && (
+        <BulkDeleteLinksModal
+          onClose={() => {
+            setBulkDeleteLinksModal(false);
+          }}
+        />
+      )}
+
+      {bulkEditLinksModal && (
+        <BulkEditLinksModal
+          onClose={() => {
+            setBulkEditLinksModal(false);
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default LinkListOptions;

components/LinkViews/Layouts/CardView.tsx

@@ -1,16 +0,0 @@
-import LinkCard from "@/components/LinkViews/LinkCard";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-
-export default function CardView({
-  links,
-}: {
-  links: LinkIncludingShortenedCollectionAndTags[];
-}) {
-  return (
-    <div className="grid min-[1900px]:grid-cols-4 xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-      {links.map((e, i) => {
-        return <LinkCard key={i} link={e} count={i} />;
-      })}
-    </div>
-  );
-}

components/LinkViews/Layouts/GridView.tsx

@@ -1,16 +0,0 @@
-import LinkGrid from "@/components/LinkViews/LinkGrid";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-
-export default function GridView({
-  links,
-}: {
-  links: LinkIncludingShortenedCollectionAndTags[];
-}) {
-  return (
-    <div className="grid 2xl:grid-cols-3 xl:grid-cols-2 grid-cols-1 gap-5">
-      {links.map((e, i) => {
-        return <LinkGrid link={e} count={i} key={i} />;
-      })}
-    </div>
-  );
-}

components/LinkViews/Layouts/ListView.tsx

@@ -1,16 +0,0 @@
-import LinkList from "@/components/LinkViews/LinkList";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-
-export default function ListView({
-  links,
-}: {
-  links: LinkIncludingShortenedCollectionAndTags[];
-}) {
-  return (
-    <div className="flex flex-col">
-      {links.map((e, i) => {
-        return <LinkList key={i} link={e} count={i} />;
-      })}
-    </div>
-  );
-}

components/LinkViews/LinkCard.tsx

@@ -1,205 +0,0 @@
-import {
-  ArchivedFormat,
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import { useEffect, useRef, useState } from "react";
-import useLinkStore from "@/store/links";
-import useCollectionStore from "@/store/collections";
-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 { previewAvailable } from "@/lib/shared/getArchiveValidity";
-import Link from "next/link";
-import LinkIcon from "./LinkComponents/LinkIcon";
-import LinkGroupedIconURL from "./LinkComponents/LinkGroupedIconURL";
-import useOnScreen from "@/hooks/useOnScreen";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  count: number;
-  className?: string;
-};
-
-export default function LinkGrid({ link, count, className }: Props) {
-  const { collections } = useCollectionStore();
-
-  const { links, getLink } = useLinkStore();
-
-  let shortendURL;
-
-  try {
-    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);
-
-  useEffect(() => {
-    let interval: any;
-
-    if (
-      isVisible &&
-      !link.preview?.startsWith("archives") &&
-      link.preview !== "unavailable"
-    ) {
-      interval = setInterval(async () => {
-        getLink(link.id as number);
-      }, 5000);
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [isVisible, link.preview]);
-
-  const [showInfo, setShowInfo] = useState(false);
-
-  return (
-    <div
-      ref={ref}
-      className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative"
-    >
-      <Link
-        href={link.url || ""}
-        target="_blank"
-        className="rounded-2xl cursor-pointer"
-      >
-        <div className="relative rounded-t-2xl h-40 overflow-hidden">
-          {previewAvailable(link) ? (
-            <Image
-              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-              width={1280}
-              height={720}
-              alt=""
-              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={{ filter: "blur(2px)" }}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? (
-            <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-          ) : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          <div
-            style={
-              {
-                // background:
-                //   "radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent)",
-              }
-            }
-            className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md"
-          >
-            <LinkIcon link={link} />
-          </div>
-        </div>
-
-        <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
-
-        <div className="p-3 mt-1">
-          <p className="truncate w-full pr-8 text-primary">
-            {unescapeString(link.name || link.description) || link.url}
-          </p>
-
-          <div title={link.url || ""} className="w-fit">
-            <div className="flex gap-1 item-center select-none text-neutral mt-1">
-              <i className="bi-link-45deg text-lg mt-[0.15rem] leading-none"></i>
-              <p className="text-sm truncate">{shortendURL}</p>
-            </div>
-          </div>
-        </div>
-
-        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-
-        <div className="flex justify-between text-xs text-neutral px-3 pb-1">
-          <div className="cursor-pointer w-fit">
-            {collection ? (
-              <LinkCollection link={link} collection={collection} />
-            ) : undefined}
-          </div>
-          <LinkDate link={link} />
-        </div>
-      </Link>
-
-      {showInfo ? (
-        <div className="p-3 absolute z-30 top-0 left-0 right-0 bottom-0 bg-base-200 rounded-2xl fade-in overflow-y-auto">
-          <div
-            onClick={() => setShowInfo(!showInfo)}
-            className=" float-right btn btn-sm outline-none btn-circle btn-ghost z-10"
-          >
-            <i className="bi-x text-neutral text-2xl"></i>
-          </div>
-          <p className="text-neutral text-lg font-semibold">Description</p>
-
-          <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-          <p>
-            {link.description ? (
-              unescapeString(link.description)
-            ) : (
-              <span className="text-neutral text-sm">
-                No description provided.
-              </span>
-            )}
-          </p>
-          {link.tags[0] ? (
-            <>
-              <p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
-
-              <hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
-
-              <div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
-                <div className="flex gap-1 items-center flex-wrap">
-                  {link.tags.map((e, i) => (
-                    <Link
-                      href={"/tags/" + e.id}
-                      key={i}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      className="btn btn-xs btn-ghost truncate max-w-[19rem]"
-                    >
-                      #{e.name}
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            </>
-          ) : undefined}
-        </div>
-      ) : undefined}
-
-      <LinkActions
-        link={link}
-        collection={collection}
-        position="top-[10.75rem] right-3"
-        toggleShowInfo={() => setShowInfo(!showInfo)}
-        linkInfo={showInfo}
-      />
-    </div>
-  );
-}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -4,172 +4,189 @@ import {
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import usePermissions from "@/hooks/usePermissions";
-import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
-import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
+import { dropdownTriggerer } from "@/lib/client/utils";
-import useLinkStore from "@/store/links";
+import { useTranslation } from "next-i18next";
-import { toast } from "react-hot-toast";
+import { useDeleteLink, useGetLink } from "@/hooks/store/links";
-import useAccountStore from "@/store/account";
+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";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
-  position?: string;
+  btnStyle?: string;
-  toggleShowInfo?: () => void;
-  linkInfo?: boolean;
 };
 
-export default function LinkActions({
+export default function LinkActions({ link, btnStyle }: Props) {
-  link,
+  const { t } = useTranslation();
-  toggleShowInfo,
+
-  position,
-  linkInfo,
-}: Props) {
   const permissions = usePermissions(link.collection.id as number);
+  const getLink = useGetLink();
+
+  const pinLink = usePinLink();
 
   const [editLinkModal, setEditLinkModal] = useState(false);
+  const [linkModal, setLinkModal] = useState(false);
   const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
 
-  const { account } = useAccountStore();
+  const deleteLink = useDeleteLink();
 
-  const { removeLink, updateLink } = useLinkStore();
+  const updateArchive = async () => {
+    const load = toast.loading(t("sending_request"));
 
-  const pinLink = async () => {
+    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
+      method: "PUT",
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateLink({
-      ...link,
-      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
     });
 
+    const data = await response.json();
     toast.dismiss(load);
 
-    response.ok &&
+    if (response.ok) {
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+      await getLink.mutateAsync({ id: link.id as number });
+
+      toast.success(t("link_being_archived"));
+    } else toast.error(data.response);
   };
 
-  const deleteLink = async () => {
+  const router = useRouter();
-    const load = toast.loading("Deleting...");
 
-    const response = await removeLink(link.id as number);
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(`Link Deleted.`);
-  };
 
   return (
     <>
-      <div
+      {isPublicRoute ? (
-        className={`dropdown dropdown-left absolute ${
-          position || "top-3 right-3"
-        } z-20`}
-      >
         <div
-          tabIndex={0}
+          className="absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
-          role="button"
+          onMouseDown={dropdownTriggerer}
-          className="btn btn-ghost btn-sm btn-square text-neutral"
+          onClick={() => setLinkModal(true)}
         >
-          <i title="More" className="bi-three-dots text-xl" />
+          <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
+            <i title="More" className="bi-info-circle text-xl" />
+          </div>
         </div>
-        <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+      ) : (
-          {permissions === true ? (
+        <div
+          className={`dropdown dropdown-end absolute top-3 right-3 group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100 z-20`}
+        >
+          <div
+            tabIndex={0}
+            role="button"
+            onMouseDown={dropdownTriggerer}
+            className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}
+          >
+            <i title="More" className="bi-three-dots text-xl" />
+          </div>
+          <ul
+            className={
+              "dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box mt-1"
+            }
+          >
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  pinLink();
+                  pinLink(link);
                 }}
+                className="whitespace-nowrap"
               >
                 {link?.pinnedBy && link.pinnedBy[0]
-                  ? "Unpin"
+                  ? t("unpin")
-                  : "Pin to Dashboard"}
+                  : t("pin_to_dashboard")}
               </div>
             </li>
-          ) : undefined}
-          {linkInfo !== undefined && toggleShowInfo ? (
             <li>
               <div
                 role="button"
                 tabIndex={0}
                 onClick={() => {
                   (document?.activeElement as HTMLElement)?.blur();
-                  toggleShowInfo();
+                  setLinkModal(true);
                 }}
+                className="whitespace-nowrap"
               >
-                {!linkInfo ? "Show" : "Hide"} Link Details
+                {t("show_link_details")}
               </div>
             </li>
-          ) : undefined}
+            {(permissions === true || permissions?.canUpdate) && (
-          {permissions === true || permissions?.canUpdate ? (
+              <li>
-            <li>
+                <div
-              <div
+                  role="button"
-                role="button"
+                  tabIndex={0}
-                tabIndex={0}
+                  onClick={() => {
-                onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
-                  (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
-                  setEditLinkModal(true);
+                  }}
-                }}
+                  className="whitespace-nowrap"
-              >
+                >
-                Edit Link
+                  {t("edit_link")}
-              </div>
+                </div>
-            </li>
+              </li>
-          ) : undefined}
+            )}
-          <li>
+            {(permissions === true || permissions?.canDelete) && (
-            <div
+              <li>
-              role="button"
+                <div
-              tabIndex={0}
+                  role="button"
-              onClick={() => {
+                  tabIndex={0}
-                (document?.activeElement as HTMLElement)?.blur();
+                  onClick={async (e) => {
-                setPreservedFormatsModal(true);
+                    (document?.activeElement as HTMLElement)?.blur();
-              }}
+                    console.log(e.shiftKey);
-            >
+                    e.shiftKey
-              Preserved Formats
+                      ? (async () => {
-            </div>
+                          const load = toast.loading(t("deleting"));
-          </li>
-          {permissions === true || permissions?.canDelete ? (
-            <li>
-              <div
-                role="button"
-                tabIndex={0}
-                onClick={(e) => {
-                  (document?.activeElement as HTMLElement)?.blur();
-                  e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
-                }}
-              >
-                Delete
-              </div>
-            </li>
-          ) : undefined}
-        </ul>
-      </div>
 
-      {editLinkModal ? (
+                          await deleteLink.mutateAsync(link.id as number, {
-        <EditLinkModal
+                            onSettled: (data, error) => {
+                              toast.dismiss(load);
+
+                              if (error) {
+                                toast.error(error.message);
+                              } else {
+                                toast.success(t("deleted"));
+                              }
+                            },
+                          });
+                        })()
+                      : setDeleteLinkModal(true);
+                  }}
+                  className="whitespace-nowrap"
+                >
+                  {t("delete")}
+                </div>
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+      {editLinkModal && (
+        <LinkModal
           onClose={() => setEditLinkModal(false)}
-          activeLink={link}
+          onPin={() => pinLink(link)}
+          onUpdateArchive={updateArchive}
+          onDelete={() => setDeleteLinkModal(true)}
+          link={link}
+          activeMode="edit"
         />
-      ) : undefined}
+      )}
-      {deleteLinkModal ? (
+      {deleteLinkModal && (
         <DeleteLinkModal
           onClose={() => setDeleteLinkModal(false)}
           activeLink={link}
         />
-      ) : undefined}
+      )}
-      {preservedFormatsModal ? (
+      {linkModal && (
-        <PreservedFormatsModal
+        <LinkModal
-          onClose={() => setPreservedFormatsModal(false)}
+          onClose={() => setLinkModal(false)}
-          activeLink={link}
+          onPin={() => pinLink(link)}
+          onUpdateArchive={updateArchive}
+          onDelete={() => setDeleteLinkModal(true)}
+          link={link}
         />
-      ) : undefined}
+      )}
-      {/* {expandedLink ? (
-                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
-              ) : undefined} */}
     </>
   );
 }

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -0,0 +1,241 @@
+import {
+  ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useMemo, useRef, useState } from "react";
+import useLinkStore from "@/store/links";
+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 { previewAvailable } from "@/lib/shared/getArchiveValidity";
+import LinkIcon from "./LinkIcon";
+import useOnScreen from "@/hooks/useOnScreen";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
+import LinkTypeBadge from "./LinkTypeBadge";
+import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink, useLinks } from "@/hooks/store/links";
+import { useRouter } from "next/router";
+import useLocalSettingsStore from "@/store/localSettings";
+import LinkPin from "./LinkPin";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  columns: number;
+  className?: string;
+  editMode?: boolean;
+};
+
+export default function LinkCard({ link, columns, editMode }: Props) {
+  const { t } = useTranslation();
+
+  const heightMap = {
+    1: "h-44",
+    2: "h-40",
+    3: "h-36",
+    4: "h-32",
+    5: "h-28",
+    6: "h-24",
+    7: "h-20",
+    8: "h-20",
+  };
+
+  const imageHeightClass = useMemo(
+    () => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
+    [columns]
+  );
+
+  const { data: collections = [] } = useCollections();
+
+  const { data: user = {} } = useUser();
+
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
+  const {
+    data: { data: links = [] },
+  } = useLinks();
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    if (selectedLinks.includes(link)) {
+      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
+
+  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 permissions = usePermissions(collection?.id as number);
+
+  const router = useRouter();
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    if (
+      isVisible &&
+      !link.preview?.startsWith("archives") &&
+      link.preview !== "unavailable"
+    ) {
+      interval = setInterval(async () => {
+        getLink.mutateAsync({
+          id: link.id as number,
+          isPublicRoute: isPublicRoute,
+        });
+      }, 5000);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isVisible, link.preview]);
+
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border-primary bg-base-300"
+    : "border-neutral-content";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  return (
+    <div
+      ref={ref}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
+      onClick={() =>
+        selectable
+          ? handleCheckboxClick(link)
+          : editMode
+            ? toast.error(t("link_selection_error"))
+            : undefined
+      }
+    >
+      <div
+        className="rounded-2xl cursor-pointer h-full flex flex-col justify-between"
+        onClick={() =>
+          !editMode && window.open(generateLinkHref(link, user), "_blank")
+        }
+      >
+        {show.image && (
+          <div>
+            <div
+              className={`relative rounded-t-2xl ${imageHeightClass} overflow-hidden`}
+            >
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} 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 ${imageHeightClass} bg-opacity-80`}
+                ></div>
+              ) : (
+                <div
+                  className={`${imageHeightClass} bg-opacity-80 skeleton rounded-none`}
+                ></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
+            </div>
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+          </div>
+        )}
+
+        <div className="flex flex-col justify-between h-full min-h-24">
+          <div className="p-3 flex flex-col gap-2">
+            {show.name && (
+              <p className="truncate w-full text-primary text-sm">
+                {unescapeString(link.name)}
+              </p>
+            )}
+
+            {show.link && <LinkTypeBadge link={link} />}
+          </div>
+
+          {(show.collection || show.date) && (
+            <div>
+              <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+              <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-2xl duration-100"></div>
+      <LinkActions link={link} collection={collection} />
+      {!isPublicRoute && <LinkPin link={link} />}
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -1,7 +1,10 @@
+import Icon from "@/components/Icon";
 import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
+import { IconWeight } from "@phosphor-icons/react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import React from "react";
 
@@ -14,20 +17,33 @@ export default function LinkCollection({
 }) {
   const router = useRouter();
 
-  return (
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
-    <div
+
-      onClick={(e) => {
+  return !isPublicRoute && collection?.name ? (
-        e.preventDefault();
+    <>
-        router.push(`/collections/${link.collection.id}`);
+      <Link
-      }}
+        href={`/collections/${link.collection.id}`}
-      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+        onClick={(e) => {
-      title={collection?.name}
+          e.stopPropagation();
-    >
+        }}
-      <i
+        className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100 select-none"
-        className="bi-folder-fill text-lg drop-shadow"
+        title={collection?.name}
-        style={{ color: collection?.color }}
+      >
-      ></i>
+        {link.collection.icon ? (
-      <p className="truncate capitalize">{collection?.name}</p>
+          <Icon
-    </div>
+            icon={link.collection.icon}
-  );
+            size={20}
+            weight={(link.collection.iconWeight || "regular") as IconWeight}
+            color={link.collection.color}
+          />
+        ) : (
+          <i
+            className="bi-folder-fill text-lg"
+            style={{ color: link.collection.color }}
+          ></i>
+        )}
+        <p className="truncate capitalize">{collection?.name}</p>
+      </Link>
+    </>
+  ) : null;
 }

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -6,17 +6,16 @@ export default function LinkDate({
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
+  const formattedDate = new Date(
-    "en-US",
+    (link.importDate || link.createdAt) as string
-    {
+  ).toLocaleString("en-US", {
-      year: "numeric",
+    year: "numeric",
-      month: "short",
+    month: "short",
-      day: "numeric",
+    day: "numeric",
-    }
+  });
-  );
 
   return (
-    <div className="flex items-center gap-1 text-neutral">
+    <div className="flex items-center gap-1 text-neutral min-w-fit">
       <i className="bi-calendar3 text-lg"></i>
       <p>{formattedDate}</p>
     </div>

components/LinkViews/LinkComponents/LinkGroupedIconURL.tsx

@@ -1,53 +0,0 @@
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import Image from "next/image";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import React from "react";
-import Link from "next/link";
-
-export default function LinkGroupedIconURL({
-  link,
-}: {
-  link: LinkIncludingShortenedCollectionAndTags;
-}) {
-  const url =
-    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
-
-  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  return (
-    <Link href={link.url || ""} target="_blank">
-      <div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
-        {link.url && url && showFavicon ? (
-          <Image
-            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-            width={64}
-            height={64}
-            alt=""
-            className="w-5 h-5 rounded"
-            draggable="false"
-            onError={() => {
-              setShowFavicon(false);
-            }}
-          />
-        ) : showFavicon === false ? (
-          <i className="bi-link-45deg text-xl leading-none text-black"></i>
-        ) : link.type === "pdf" ? (
-          <i className={`bi-file-earmark-pdf`}></i>
-        ) : link.type === "image" ? (
-          <i className={`bi-file-earmark-image`}></i>
-        ) : undefined}
-        <p className="truncate bg-white text-black mr-1">
-          <p className="text-sm">{shortendURL}</p>
-        </p>
-      </div>
-    </Link>
-  );
-}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -1,48 +1,99 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
-import React from "react";
+import React, { useState } from "react";
+import Icon from "@/components/Icon";
+import { IconWeight } from "@phosphor-icons/react";
+import clsx from "clsx";
 
 export default function LinkIcon({
   link,
-  width,
+  className,
+  hideBackground,
+  onClick,
 }: {
   link: LinkIncludingShortenedCollectionAndTags;
-  width?: string;
+  className?: string;
+  hideBackground?: boolean;
+  onClick?: Function;
 }) {
+  let iconClasses: string = clsx(
+    "rounded flex item-center justify-center shadow select-none z-10 w-12 h-12",
+    !hideBackground && "rounded-md bg-white backdrop-blur-lg bg-opacity-50 p-1",
+    className
+  );
+
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
 
-  const iconClasses: string =
+  const [faviconLoaded, setFaviconLoaded] = useState(false);
-    "bg-white shadow rounded-md border-[2px] flex item-center justify-center border-white select-none z-10" +
-    " " +
-    (width || "w-12");
-
-  const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
 
   return (
-    <>
+    <div onClick={() => onClick && onClick()}>
-      {link.url && url && showFavicon ? (
+      {link.icon ? (
-        <Image
-          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-          width={64}
-          height={64}
-          alt=""
-          className={iconClasses}
-          draggable="false"
-          onError={() => {
-            setShowFavicon(false);
-          }}
-        />
-      ) : showFavicon === false ? (
         <div className={iconClasses}>
-          <i className="bi-link-45deg text-4xl text-black"></i>
+          <Icon
+            icon={link.icon}
+            size={30}
+            weight={(link.iconWeight || "regular") as IconWeight}
+            color={link.color || "#006796"}
+            className="m-auto"
+          />
         </div>
+      ) : link.type === "url" && url ? (
+        <>
+          <Image
+            src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+            width={64}
+            height={64}
+            alt=""
+            className={clsx(
+              iconClasses,
+              faviconLoaded ? "" : "absolute opacity-0"
+            )}
+            draggable="false"
+            onLoadingComplete={() => setFaviconLoaded(true)}
+            onError={() => setFaviconLoaded(false)}
+          />
+          {!faviconLoaded && (
+            <LinkPlaceholderIcon
+              iconClasses={iconClasses}
+              icon="bi-link-45deg"
+            />
+          )}
+        </>
       ) : link.type === "pdf" ? (
-        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
+        <LinkPlaceholderIcon
+          iconClasses={iconClasses}
+          icon="bi-file-earmark-pdf"
+        />
       ) : link.type === "image" ? (
-        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
+        <LinkPlaceholderIcon
-      ) : undefined}
+          iconClasses={iconClasses}
-    </>
+          icon="bi-file-earmark-image"
+        />
+      ) : // : link.type === "monolith" ? (
+      //   <LinkPlaceholderIcon
+      //     iconClasses={iconClasses + dimension}
+      //     size={size}
+      //     icon="bi-filetype-html"
+      //   />
+      // )
+      undefined}
+    </div>
   );
 }
+
+const LinkPlaceholderIcon = ({
+  iconClasses,
+  icon,
+}: {
+  iconClasses: string;
+  icon: string;
+}) => {
+  return (
+    <div className={clsx(iconClasses, "aspect-square text-4xl text-[#006796]")}>
+      <i className={`${icon} m-auto`}></i>
+    </div>
+  );
+};

components/LinkViews/LinkComponents/LinkList.tsx

@@ -0,0 +1,148 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+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 LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+import { isPWA } from "@/lib/client/utils";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
+import LinkTypeBadge from "./LinkTypeBadge";
+import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useLinks } from "@/hooks/store/links";
+import useLocalSettingsStore from "@/store/localSettings";
+import LinkPin from "./LinkPin";
+import { useRouter } from "next/router";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+  editMode?: boolean;
+};
+
+export default function LinkCardCompact({ link, editMode }: Props) {
+  const { t } = useTranslation();
+
+  const { data: collections = [] } = useCollections();
+
+  const { data: user = {} } = useUser();
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
+  const { links } = useLinks();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    const linkIndex = selectedLinks.findIndex(
+      (selectedLink) => selectedLink.id === link.id
+    );
+
+    if (linkIndex !== -1) {
+      const updatedLinks = [...selectedLinks];
+      updatedLinks.splice(linkIndex, 1);
+      setSelectedLinks(updatedLinks);
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
+
+  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 permissions = usePermissions(collection?.id as number);
+
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border border-primary bg-base-300"
+    : "border-transparent";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+  return (
+    <>
+      <div
+        className={`${selectedStyle} rounded-md border relative group items-center flex ${
+          !isPWA() ? "hover:bg-base-300 px-2 py-1" : "py-1"
+        } duration-200 w-full`}
+        onClick={() =>
+          selectable
+            ? handleCheckboxClick(link)
+            : editMode
+              ? toast.error(t("link_selection_error"))
+              : undefined
+        }
+      >
+        <div
+          className="flex items-center cursor-pointer w-full min-h-12"
+          onClick={() =>
+            !editMode && window.open(generateLinkHref(link, user), "_blank")
+          }
+        >
+          {show.icon && (
+            <div className="shrink-0">
+              <LinkIcon link={link} hideBackground />
+            </div>
+          )}
+
+          <div className="w-[calc(100%-56px)] ml-2">
+            {show.name && (
+              <p className="line-clamp-1 mr-8 text-primary select-none">
+                {unescapeString(link.name)}
+              </p>
+            )}
+
+            <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
+              <div className="flex items-center gap-x-3 text-neutral flex-wrap">
+                {show.link && <LinkTypeBadge link={link} />}
+                {show.collection && (
+                  <LinkCollection link={link} collection={collection} />
+                )}
+                {show.date && <LinkDate link={link} />}
+              </div>
+            </div>
+          </div>
+        </div>
+        {!isPublic && <LinkPin link={link} btnStyle="btn-ghost" />}
+        <LinkActions link={link} collection={collection} btnStyle="btn-ghost" />
+      </div>
+      <div className="last:hidden rounded-none my-0 mx-1 border-t border-base-300 h-[1px]"></div>
+    </>
+  );
+}

components/LinkViews/LinkComponents/LinkMasonry.tsx

@@ -0,0 +1,252 @@
+import {
+  ArchivedFormat,
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useMemo, useRef, useState } from "react";
+import useLinkStore from "@/store/links";
+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 { previewAvailable } from "@/lib/shared/getArchiveValidity";
+import Link from "next/link";
+import LinkIcon from "./LinkIcon";
+import useOnScreen from "@/hooks/useOnScreen";
+import { generateLinkHref } from "@/lib/client/generateLinkHref";
+import usePermissions from "@/hooks/usePermissions";
+import toast from "react-hot-toast";
+import LinkTypeBadge from "./LinkTypeBadge";
+import { useTranslation } from "next-i18next";
+import { useCollections } from "@/hooks/store/collections";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink, useLinks } from "@/hooks/store/links";
+import useLocalSettingsStore from "@/store/localSettings";
+import clsx from "clsx";
+import LinkPin from "./LinkPin";
+import { useRouter } from "next/router";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  columns: number;
+  editMode?: boolean;
+};
+
+export default function LinkMasonry({ link, editMode, columns }: Props) {
+  const { t } = useTranslation();
+
+  const heightMap = {
+    1: "h-44",
+    2: "h-40",
+    3: "h-36",
+    4: "h-32",
+    5: "h-28",
+    6: "h-24",
+    7: "h-20",
+    8: "h-20",
+  };
+
+  const imageHeightClass = useMemo(
+    () => (columns ? heightMap[columns as keyof typeof heightMap] : "h-40"),
+    [columns]
+  );
+
+  const { data: collections = [] } = useCollections();
+  const { data: user = {} } = useUser();
+
+  const { setSelectedLinks, selectedLinks } = useLinkStore();
+
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
+  const { links } = useLinks();
+  const getLink = useGetLink();
+
+  useEffect(() => {
+    if (!editMode) {
+      setSelectedLinks([]);
+    }
+  }, [editMode]);
+
+  const handleCheckboxClick = (
+    link: LinkIncludingShortenedCollectionAndTags
+  ) => {
+    if (selectedLinks.includes(link)) {
+      setSelectedLinks(selectedLinks.filter((e) => e !== link));
+    } else {
+      setSelectedLinks([...selectedLinks, link]);
+    }
+  };
+
+  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 permissions = usePermissions(collection?.id as number);
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : undefined;
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    if (
+      isVisible &&
+      !link.preview?.startsWith("archives") &&
+      link.preview !== "unavailable"
+    ) {
+      interval = setInterval(async () => {
+        getLink.mutateAsync({ id: link.id as number });
+      }, 5000);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [isVisible, link.preview]);
+
+  const selectedStyle = selectedLinks.some(
+    (selectedLink) => selectedLink.id === link.id
+  )
+    ? "border-primary bg-base-300"
+    : "border-neutral-content";
+
+  const selectable =
+    editMode &&
+    (permissions === true || permissions?.canCreate || permissions?.canDelete);
+
+  return (
+    <div
+      ref={ref}
+      className={`${selectedStyle} border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative group`}
+      onClick={() =>
+        selectable
+          ? handleCheckboxClick(link)
+          : editMode
+            ? toast.error(t("link_selection_error"))
+            : undefined
+      }
+    >
+      <div
+        className="rounded-2xl cursor-pointer"
+        onClick={() =>
+          !editMode && window.open(generateLinkHref(link, user), "_blank")
+        }
+      >
+        {show.image && previewAvailable(link) && (
+          <div>
+            <div className="relative rounded-t-2xl overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true&updatedAt=${link.updatedAt}`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className={`rounded-t-2xl select-none object-cover z-10 ${imageHeightClass} 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" ? null : (
+                <div
+                  className={`duration-100 ${imageHeightClass} bg-opacity-80 skeleton rounded-none`}
+                ></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
+            </div>
+
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+          </div>
+        )}
+
+        <div className="p-3 flex flex-col gap-2 h-full min-h-14">
+          {show.name && (
+            <p className="hyphens-auto w-full text-primary text-sm">
+              {unescapeString(link.name)}
+            </p>
+          )}
+
+          {show.link && <LinkTypeBadge link={link} />}
+
+          {show.description && link.description && (
+            <p className={clsx("hyphens-auto text-sm w-full")}>
+              {unescapeString(link.description)}
+            </p>
+          )}
+
+          {show.tags && link.tags && link.tags[0] && (
+            <div className="flex gap-1 items-center flex-wrap">
+              {link.tags.map((e, i) => (
+                <Link
+                  href={"/tags/" + e.id}
+                  key={i}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="btn btn-xs btn-ghost truncate max-w-[19rem]"
+                >
+                  #{e.name}
+                </Link>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {(show.collection || show.date) && (
+          <div>
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+            <div className="flex flex-wrap justify-between items-center text-xs text-neutral px-3 pb-1 w-full gap-x-2">
+              {!isPublic && show.collection && (
+                <div className="cursor-pointer truncate">
+                  <LinkCollection link={link} collection={collection} />
+                </div>
+              )}
+              {show.date && <LinkDate link={link} />}
+            </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-2xl duration-100"></div>
+      <LinkActions link={link} collection={collection} />
+      {!isPublic && <LinkPin link={link} />}
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkPin.tsx

@@ -0,0 +1,34 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { useRouter } from "next/router";
+import clsx from "clsx";
+import usePinLink from "@/lib/client/pinLink";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  btnStyle?: string;
+};
+
+export default function LinkPin({ link, btnStyle }: Props) {
+  const pinLink = usePinLink();
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+  const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0] ? true : false;
+
+  return (
+    <div
+      className="absolute top-3 right-[3.25rem] group-hover:opacity-100 group-focus-within:opacity-100 opacity-0 duration-100"
+      onClick={() => pinLink(link)}
+    >
+      <div className={clsx("btn btn-sm btn-square text-neutral", btnStyle)}>
+        <i
+          title="Pin"
+          className={clsx(
+            "text-xl",
+            isAlreadyPinned ? "bi-pin-fill" : "bi-pin"
+          )}
+        />
+      </div>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkTypeBadge.tsx

@@ -0,0 +1,36 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import Link from "next/link";
+import React from "react";
+
+export default function LinkTypeBadge({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  let shortendURL;
+
+  if (link.type === "url" && link.url) {
+    try {
+      shortendURL = new URL(link.url).host.toLowerCase();
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  return link.url && shortendURL ? (
+    <Link
+      href={link.url || ""}
+      target="_blank"
+      title={link.url || ""}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+      className="flex gap-1 item-center select-none text-neutral hover:opacity-70 duration-100 max-w-full w-fit"
+    >
+      <i className="bi-link-45deg text-lg leading-none"></i>
+      <p className="text-xs truncate">{shortendURL}</p>
+    </Link>
+  ) : (
+    <div className="badge badge-primary badge-sm select-none">{link.type}</div>
+  );
+}