Bump version

Bump base images
Fix auth proxy logout (#994 )
2026-03-04 17:03:12 +08:00 · 2025-02-22 19:28:47 +01:00 · 2025-02-19 16:14:34 +01:00 · 2025-02-19 07:27:04 +01:00 · 2025-02-19 06:44:21 +01:00 · 2025-02-18 22:45:26 +01:00
210 changed files with 14576 additions and 4669 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -2,7 +2,7 @@
 // README at: https://github.com/devcontainers/templates/tree/main/src/python
 {
 	"name": "Python 3",
-	"image": "mcr.microsoft.com/devcontainers/python:0-3.10",
+	"image": "mcr.microsoft.com/devcontainers/python:3.12",
 	"features": {
 		"ghcr.io/devcontainers/features/node:1": {}
 	},
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -0,0 +1,26 @@
+name: build
+
+on: workflow_dispatch
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      -
+        name: Checkout
+        uses: actions/checkout@v4
+      -
+        name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+      -
+        name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      -
+        name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          file: ./docker/default.Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: false
+          tags: sissbruecker/linkding:test
+          target: linkding
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -15,7 +15,7 @@ jobs:
      - name: Set up Python
        uses: actions/setup-python@v5
        with:
-          python-version: "3.10"
+          python-version: "3.12"
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
@@ -37,7 +37,7 @@ jobs:
      - name: Set up Python
        uses: actions/setup-python@v5
        with:
-          python-version: "3.10"
+          python-version: "3.12"
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
--- a/.gitignore
+++ b/.gitignore
@@ -192,7 +192,7 @@ typings/
 # Database file
 /data
 # ublock + chromium
-/uBlock0.chromium
+/uBOLite.chromium.mv3
 /chromium-profile
 # direnv
 /.direnv
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,148 @@
 # Changelog

+## v1.38.0 (09/02/2025)
+
+### What's Changed
+* Fix nav menu closing on mousedown in Safari by @sissbruecker in https://github.com/sissbruecker/linkding/pull/965
+* Allow customizing username when creating user through OIDC by @kyuuk in https://github.com/sissbruecker/linkding/pull/971
+* Improve accessibility of modal dialogs by @sissbruecker in https://github.com/sissbruecker/linkding/pull/974
+* Add option to collapse side panel by @sissbruecker in https://github.com/sissbruecker/linkding/pull/975
+* Convert tag modal into drawer by @sissbruecker in https://github.com/sissbruecker/linkding/pull/977
+* Add RSS link to shared bookmarks page by @sissbruecker in https://github.com/sissbruecker/linkding/pull/984
+* Add Additional iOS Shortcut to community section by @joshdick in https://github.com/sissbruecker/linkding/pull/968
+
+### New Contributors
+* @kyuuk made their first contribution in https://github.com/sissbruecker/linkding/pull/971
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.37.0...v1.38.0
+
+---
+
+## v1.37.0 (26/01/2025)
+
+### What's Changed
+* Add option to disable request logs by @dmarcoux in https://github.com/sissbruecker/linkding/pull/887
+* Add default robots.txt to block crawlers by @sissbruecker in https://github.com/sissbruecker/linkding/pull/959
+* Fix menu dropdown focus traps by @sissbruecker in https://github.com/sissbruecker/linkding/pull/944
+* Provide accessible name to radio groups by @sissbruecker in https://github.com/sissbruecker/linkding/pull/945
+* Add serchding to community projects, sort the list by alphabetical order by @ldwgchen in https://github.com/sissbruecker/linkding/pull/880
+* Add cosmicding To Community Resources by @vkhitrin in https://github.com/sissbruecker/linkding/pull/892
+* Add 3 new community projects by @sebw in https://github.com/sissbruecker/linkding/pull/949
+* Add a rust client library to community.md by @zbrox in https://github.com/sissbruecker/linkding/pull/914
+* Update community.md by @justusthane in https://github.com/sissbruecker/linkding/pull/897
+* Bump astro from 4.15.8 to 4.16.3 in /docs by @dependabot in https://github.com/sissbruecker/linkding/pull/884
+* Bump vite from 5.4.9 to 5.4.14 in /docs by @dependabot in https://github.com/sissbruecker/linkding/pull/953
+* Bump django from 5.1.1 to 5.1.5 by @dependabot in https://github.com/sissbruecker/linkding/pull/947
+* Bump nanoid from 3.3.7 to 3.3.8 by @dependabot in https://github.com/sissbruecker/linkding/pull/928
+* Bump astro from 4.16.3 to 4.16.18 in /docs by @dependabot in https://github.com/sissbruecker/linkding/pull/929
+* Bump nanoid from 3.3.7 to 3.3.8 in /docs by @dependabot in https://github.com/sissbruecker/linkding/pull/962
+
+### New Contributors
+* @ldwgchen made their first contribution in https://github.com/sissbruecker/linkding/pull/880
+* @dmarcoux made their first contribution in https://github.com/sissbruecker/linkding/pull/887
+* @vkhitrin made their first contribution in https://github.com/sissbruecker/linkding/pull/892
+* @sebw made their first contribution in https://github.com/sissbruecker/linkding/pull/949
+* @justusthane made their first contribution in https://github.com/sissbruecker/linkding/pull/897
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.36.0...v1.37.0
+
+---
+
+## v1.36.0 (02/10/2024)
+
+### What's Changed
+* Replace uBlock Origin with uBlock Origin Lite by @sissbruecker in https://github.com/sissbruecker/linkding/pull/866
+* Add LAST_MODIFIED attribute when exporting by @ixzhao in https://github.com/sissbruecker/linkding/pull/860
+* Return client error status code for invalid form submissions by @sissbruecker in https://github.com/sissbruecker/linkding/pull/849
+* Fix header.svg text by @vladh in https://github.com/sissbruecker/linkding/pull/850
+* Do not clear fields in POST requests (API behavior change) by @sissbruecker in https://github.com/sissbruecker/linkding/pull/852
+* Prevent duplicates when editing by @sissbruecker in https://github.com/sissbruecker/linkding/pull/853
+* Fix jumping details modal on back navigation by @sissbruecker in https://github.com/sissbruecker/linkding/pull/854
+* Fix select dropdown menu background in dark theme by @sissbruecker in https://github.com/sissbruecker/linkding/pull/858
+* Do not escape valid characters in custom CSS by @sissbruecker in https://github.com/sissbruecker/linkding/pull/863
+* Simplify Docker build by @sissbruecker in https://github.com/sissbruecker/linkding/pull/865
+* Improve error handling for auto tagging by @sissbruecker in https://github.com/sissbruecker/linkding/pull/855
+* Bump rollup from 4.13.0 to 4.22.4 by @dependabot in https://github.com/sissbruecker/linkding/pull/851
+* Bump rollup from 4.21.3 to 4.22.4 in /docs by @dependabot in https://github.com/sissbruecker/linkding/pull/856
+
+### New Contributors
+* @vladh made their first contribution in https://github.com/sissbruecker/linkding/pull/850
+* @ixzhao made their first contribution in https://github.com/sissbruecker/linkding/pull/860
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.35.0...v1.36.0
+
+---
+
+## v1.35.0 (23/09/2024)
+
+### What's Changed
+* Add configuration options for pagination by @sissbruecker in https://github.com/sissbruecker/linkding/pull/835
+* Show placeholder if there is no preview image by @sissbruecker in https://github.com/sissbruecker/linkding/pull/842
+* Allow bookmarks to have empty title and description by @sissbruecker in https://github.com/sissbruecker/linkding/pull/843
+* Add clear buttons in bookmark form by @sissbruecker in https://github.com/sissbruecker/linkding/pull/846
+* Add basic fail2ban support by @sissbruecker in https://github.com/sissbruecker/linkding/pull/847
+* Add documentation website by @sissbruecker in https://github.com/sissbruecker/linkding/pull/833
+* Add go-linkding to community projects by @piero-vic in https://github.com/sissbruecker/linkding/pull/836
+* Fix a broken link to options documentation by @zbrox in https://github.com/sissbruecker/linkding/pull/844
+* Use HTTPS repository link for devcontainer by @voltagex in https://github.com/sissbruecker/linkding/pull/837
+* Bump requests version to 3.23.3 by @voltagex in https://github.com/sissbruecker/linkding/pull/839
+* Bump path-to-regexp and astro in /docs by @dependabot in https://github.com/sissbruecker/linkding/pull/840
+* Bump dependencies by @sissbruecker in https://github.com/sissbruecker/linkding/pull/841
+
+### New Contributors
+* @piero-vic made their first contribution in https://github.com/sissbruecker/linkding/pull/836
+* @voltagex made their first contribution in https://github.com/sissbruecker/linkding/pull/839
+* @zbrox made their first contribution in https://github.com/sissbruecker/linkding/pull/844
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.34.0...v1.35.0
+
+---
+
+## v1.34.0 (16/09/2024)
+
+### What's Changed
+* Fix several issues around browser back navigation by @sissbruecker in https://github.com/sissbruecker/linkding/pull/825
+* Speed up response times for certain actions by @sissbruecker in https://github.com/sissbruecker/linkding/pull/829
+* Implement IPv6 capability by @itz-Jana in https://github.com/sissbruecker/linkding/pull/826
+
+### New Contributors
+* @itz-Jana made their first contribution in https://github.com/sissbruecker/linkding/pull/826
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.33.0...v1.34.0
+
+---
+
+## v1.33.0 (14/09/2024)
+
+### What's Changed
+* Theme improvements by @sissbruecker in https://github.com/sissbruecker/linkding/pull/822
+* Speed up navigation by @sissbruecker in https://github.com/sissbruecker/linkding/pull/824
+* Rename "SingeFileError" to "SingleFileError" by @curiousleo in https://github.com/sissbruecker/linkding/pull/823
+* Bump svelte from 4.2.12 to 4.2.19 by @dependabot in https://github.com/sissbruecker/linkding/pull/806
+
+### New Contributors
+* @curiousleo made their first contribution in https://github.com/sissbruecker/linkding/pull/823
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.32.0...v1.33.0
+
+---
+
+## v1.32.0 (10/09/2024)
+
+### What's Changed
+* Allow configuring landing page for unauthenticated users by @sissbruecker in https://github.com/sissbruecker/linkding/pull/808
+* Allow configuring guest user profile by @sissbruecker in https://github.com/sissbruecker/linkding/pull/809
+* Return bookmark tags in RSS feeds by @sissbruecker in https://github.com/sissbruecker/linkding/pull/810
+* Additional filter parameters for RSS feeds by @sissbruecker in https://github.com/sissbruecker/linkding/pull/811
+* Allow pre-filling notes in new bookmark form by @sissbruecker in https://github.com/sissbruecker/linkding/pull/812
+* Fix inconsistent tag order in bookmarks by @sissbruecker in https://github.com/sissbruecker/linkding/pull/819
+* Fix auto-tagging when URL includes port by @sissbruecker in https://github.com/sissbruecker/linkding/pull/820
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.31.1...v1.32.0
+
+---
+
 ## v1.31.1 (30/08/2024)

 ### What's Changed
--- a/1
+++ b/1
@@ -13,3 +13,4 @@ format:
 	black bookmarks
 	black siteroot
 	npx prettier bookmarks/frontend --write
+	npx prettier bookmarks/styles --write
--- a/README.md
+++ b/README.md
@@ -1,25 +1,11 @@
 <div align="center">
    <br>
    <a href="https://github.com/sissbruecker/linkding">
-        <img src="docs/header.svg" height="50">
+        <img src="assets/header.svg" height="50">
    </a>
    <br>
 </div>

-## Overview
- [Introduction](#introduction)
- [Installation](#installation)
-  - [Using Docker](#using-docker)
-  - [Using Docker Compose](#using-docker-compose)
-  - [User Setup](#user-setup)
-  - [Reverse Proxy Setup](#reverse-proxy-setup)
-  - [Managed Hosting Options](#managed-hosting-options)
- [Documentation](#documentation)
- [Browser Extension](#browser-extension)
- [Community](#community)
- [Acknowledgements + Donations](#acknowledgements--donations)
- [Development](#development)
-
 ##  Introduction

 linkding is a bookmark manager that you can host yourself.
@@ -49,219 +35,33 @@ The name comes from:

 **Screenshot:**

-![Screenshot](/docs/linkding-screenshot.png?raw=true "Screenshot")
+![Screenshot](/docs/public/linkding-screenshot.png?raw=true "Screenshot")

-## Installation
+## Getting Started

-linkding is designed to be run with container solutions like [Docker](https://docs.docker.com/get-started/).
-The Docker image is compatible with ARM platforms, so it can be run on a Raspberry Pi.
-
-linkding uses an SQLite database by default.
-Alternatively linkding supports PostgreSQL, see the [database options](docs/Options.md#LD_DB_ENGINE) for more information.
-
-###  Using Docker
-
-The Docker image comes in several variants. To use a different image than the default, replace `latest` with the desired tag in the commands below, or in the docker-compose file.
-
-<table>
-  <thead>
-    <tr>
-      <th>Tag</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>latest</code></td>
-      <td>Provides the basic functionality of linkding</td>
-    </tr>
-    <tr>
-      <td><code>latest-plus</code></td>
-      <td>
-        Includes feature for archiving websites as HTML snapshots
-        <ul>
-          <li>Significantly larger image size as it includes a Chromium installation</li>
-          <li>Requires more runtime memory to run Chromium</li>
-          <li>Requires more disk space for storing HTML snapshots</li>
-        </ul>            
-      </td>
-    </tr>
-    <tr>
-      <td><code>latest-alpine</code></td>
-      <td><code>latest</code>, but based on Alpine Linux. 🧪 Experimental</td>
-    </tr>    
-    <tr>
-      <td><code>latest-plus-alpine</code></td>
-      <td><code>latest-plus</code>, but based on Alpine Linux. 🧪 Experimental</td>
-    </tr>    
-  </tbody>
-</table>
-
-To install linkding using Docker you can just run the image from [Docker Hub](https://hub.docker.com/repository/docker/sissbruecker/linkding):
-```shell
-docker run --name linkding -p 9090:9090 -v {host-data-folder}:/etc/linkding/data -d sissbruecker/linkding:latest
-```
-
-In the command above, replace the `{host-data-folder}` placeholder with an absolute path to a folder on your host system where you want to store the linkding database.
-
-If everything completed successfully, the application should now be running and can be accessed at http://localhost:9090.
-
-To upgrade the installation to a new version, remove the existing container, pull the latest version of the linkding Docker image, and then start a new container using the same command that you used above. There is a [shell script](https://github.com/sissbruecker/linkding/blob/master/install-linkding.sh) available to automate these steps. The script can be configured using environment variables, or you can just modify it.
-
-To complete the setup, you still have to [create an initial user](#user-setup), so that you can access your installation.
-
-###  Using Docker Compose
-
-To install linkding using [Docker Compose](https://docs.docker.com/compose/), you can use the [`docker-compose.yml`](https://github.com/sissbruecker/linkding/blob/master/docker-compose.yml) file. Copy the [`.env.sample`](https://github.com/sissbruecker/linkding/blob/master/.env.sample) file to `.env`, configure the parameters, and then run:
-```shell
-docker-compose up -d
-```
-
-To complete the setup, you still have to [create an initial user](#user-setup), so that you can access your installation.
-
-### User Setup
-
-For security reasons, the linkding Docker image does not provide an initial user, so you have to create one after setting up an installation. To do so, replace the credentials in the following command and run it:
-
-**Docker**
-```shell
-docker exec -it linkding python manage.py createsuperuser --username=joe --email=joe@example.com
-```
-
-**Docker Compose**
-```shell
-docker-compose exec linkding python manage.py createsuperuser --username=joe --email=joe@example.com
-```
-
-The command will prompt you for a secure password. After the command has completed you can start using the application by logging into the UI with your credentials.
-
-Alternatively you can automatically create an initial superuser on startup using the [`LD_SUPERUSER_NAME` option](docs/Options.md#LD_SUPERUSER_NAME).
-
-### Reverse Proxy Setup
-
-When using a reverse proxy, such as Nginx or Apache, you may need to configure your proxy to correctly forward the `Host` header to linkding, otherwise certain requests, such as login, might fail.
-
-<details>
-<summary>Apache</summary>
-
-Apache2 does not change the headers by default, and should not
-need additional configuration.
-
-An example virtual host that proxies to linkding might look like:
-```
-<VirtualHost *:9100>
-    <Proxy *>
-        Order deny,allow
-        Allow from all
-    </Proxy>
-
-    ProxyPass / http://linkding:9090/
-    ProxyPassReverse / http://linkding:9090/
-</VirtualHost>
-```
-
-For a full example, see the docker-compose configuration in [jhauris/apache2-reverse-proxy](https://github.com/jhauris/linkding/tree/apache2-reverse-proxy)
-
-If you still run into CSRF issues, please check out the [`LD_CSRF_TRUSTED_ORIGINS` option](docs/Options.md#LD_CSRF_TRUSTED_ORIGINS).
-
-</details>
-
-<details>
-<summary>Caddy 2</summary>
-
-Caddy does not change the headers by default, and should not need any further configuration.
-
-If you still run into CSRF issues, please check out the [`LD_CSRF_TRUSTED_ORIGINS` option](docs/Options.md#LD_CSRF_TRUSTED_ORIGINS).
-
-</details>
-
-<details>
-<summary>Nginx</summary>
-
-Nginx by default rewrites the `Host` header to whatever URL is used in the `proxy_pass` directive.
-To forward the correct headers to linkding, add the following directives to the location block of your Nginx config:
-```
-location /linkding {
-    ...
-    proxy_set_header Host $host;
-    proxy_set_header X-Forwarded-Proto $scheme;
-}
-```
-
-</details>
-
-Instead of configuring header forwarding in your proxy, you can also configure the URL from which you want to access your linkding instance with the  [`LD_CSRF_TRUSTED_ORIGINS` option](docs/Options.md#LD_CSRF_TRUSTED_ORIGINS).
-
-### Managed Hosting Options
-
-Self-hosting web applications still requires a lot of technical know-how and commitment to maintenance, in order to keep everything up-to-date and secure. This section is intended to provide simple alternatives in form of managed hosting solutions.
-
- [linkding on fly.io](https://github.com/fspoettel/linkding-on-fly) - Guide for hosting a linkding installation on [fly.io](https://fly.io). By [fspoettel](https://github.com/fspoettel)
- [PikaPods.com](https://www.pikapods.com/) - Managed hosting for linkding, EU and US regions available. [1-click setup link](https://www.pikapods.com/pods?run=linkding) ([Disclosure](#pikapods))
- [CapRover](https://caprover.com/) - Linkding is included as a default one-click app
- [linkding on railway.app](https://github.com/tianheg/linkding-on-railway) - Guide for hosting a linkding installation on [railway.app](https://railway.app/). By [tianheg](https://github.com/tianheg)
+The following links help you to get started with linkding:
+- [Install linkding on your own server](https://linkding.link/installation) or [check managed hosting options](https://linkding.link/managed-hosting)
+- [Install the browser extension](https://linkding.link/browser-extension)
+- [Check out community projects](https://linkding.link/community), which include mobile apps, browser extensions, libraries and more

 ## Documentation

-| Document                                                                                        | Description                                              |
-|-------------------------------------------------------------------------------------------------|----------------------------------------------------------|
-| [Options](https://github.com/sissbruecker/linkding/blob/master/docs/Options.md)                 | Lists available options, and describes how to apply them |
-| [Backups](https://github.com/sissbruecker/linkding/blob/master/docs/backup.md)                  | How to backup the linkding database                      |
-| [Troubleshooting](https://github.com/sissbruecker/linkding/blob/master/docs/troubleshooting.md) | Advice for troubleshooting common problems               |
-| [How To](https://github.com/sissbruecker/linkding/blob/master/docs/how-to.md)                   | Tips and tricks around using linking                     |
-| [Keyboard shortcuts](https://github.com/sissbruecker/linkding/blob/master/docs/shortcuts.md)    | List of available keyboard shortcuts                     |
-| [Admin documentation](https://github.com/sissbruecker/linkding/blob/master/docs/Admin.md)       | User documentation for the Admin UI                      |
-| [API documentation](https://github.com/sissbruecker/linkding/blob/master/docs/API.md)           | Documentation for the REST API                           |
+The full documentation is now available at [linkding.link](https://linkding.link/).

-## Browser Extension
+If you want to contribute to the documentation, you can find the source files in the `docs` folder.

-linkding comes with an official browser extension that allows to quickly add bookmarks, and search bookmarks through the browser's address bar. You can get the extension here:
- [Mozilla Addon Store](https://addons.mozilla.org/firefox/addon/linkding-extension/)
- [Chrome Web Store](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe)
+If you want to contribute a community project, feel free to [submit a PR](https://github.com/sissbruecker/linkding/edit/master/docs/src/content/docs/community.md).

-The extension is open-source as well, and can be found [here](https://github.com/sissbruecker/linkding-extension).
+## Contributing

-## Community
-
-This section lists community projects around using linkding, in alphabetical order. If you have a project that you want to share with the linkding community, feel free to submit a PR to add your project to this section.
-
- [aiolinkding](https://github.com/bachya/aiolinkding) A Python3, async library to interact with the linkding REST API. By [bachya](https://github.com/bachya)
- [feed2linkding](https://codeberg.org/strubbl/feed2linkding) A commandline utility to add all web feed item links to linkding via API call. By [Strubbl](https://github.com/Strubbl)
- [Helm Chart](https://charts.pascaliske.dev/charts/linkding/) Helm Chart for deploying linkding inside a Kubernetes cluster. By [pascaliske](https://github.com/pascaliske)
- [iOS Shortcut using API and Tagging](https://gist.github.com/andrewdolphin/a7dff49505e588d940bec55132fab8ad) An iOS shortcut using the Linkding API (no extra logins required) that pulls previously used tags and allows tagging at the time of link creation.
- [k8s + s3](https://github.com/jzck/linkding-k8s-s3) - Setup for hosting stateless linkding on k8s with sqlite replicated to s3. By [jzck](https://github.com/jzck)
- [Linka!](https://github.com/cmsax/linka) Web app (also a PWA) for quickly searching & opening bookmarks in linkding, support multi keywords, exclude mode and other advance options. By [cmsax](https://github.com/cmsax)
- [linkding-cli](https://github.com/bachya/linkding-cli) A command-line interface (CLI) to interact with the linkding REST API. Powered by [aiolinkding](https://github.com/bachya/aiolinkding). By [bachya](https://github.com/bachya)
- [linkding-extension](https://github.com/jeroenpardon/linkding-extension) Chromium compatible extension that wraps the linkding bookmarklet. Tested with Chrome, Edge, Brave. By [jeroenpardon](https://github.com/jeroenpardon)
- [linkding-injector](https://github.com/Fivefold/linkding-injector) Injects search results from linkding into the sidebar of search pages like google and duckduckgo. Tested with Firefox and Chrome. By [Fivefold](https://github.com/Fivefold)
- [Linkdy](https://github.com/JGeek00/linkdy): An open source mobile and desktop (not yet) client created with Flutter. Available at the [Google Play Store](https://play.google.com/store/apps/details?id=com.jgeek00.linkdy). By [JGeek00](https://github.com/JGeek00).
- [LinkThing](https://apps.apple.com/us/app/linkthing/id1666031776) An iOS client for linkding. By [amoscardino](https://github.com/amoscardino)
- [Open all links bookmarklet](https://gist.github.com/ukcuddlyguy/336dd7339e6d35fc64a75ccfc9323c66) A browser bookmarklet to open all links on the current Linkding page in new tabs. By [ukcuddlyguy](https://github.com/ukcuddlyguy)
- [Pinkt](https://github.com/fibelatti/pinboard-kotlin) An Android client for linkding. By [fibelatti](https://github.com/fibelatti)
- [Postman collection](https://gist.github.com/gingerbeardman/f0b42502f3bc9344e92ce63afd4360d3) a group of saved request templates for API testing. By [gingerbeardman](https://github.com/gingerbeardman)
-
-## Acknowledgements + Donations
-
-### PikaPods
-
-[PikaPods](https://www.pikapods.com/) has a revenue sharing agreement with this project, sharing some of their revenue from hosting linkding instances. I do not intend to profit from this project financially, so I am in turn donating that revenue. Big thanks to PikaPods for making this possible.
-
-See the table below for a list of donations.
-
-| Source                                | Description                                 | Amount  | Donated to                                                          |
-|---------------------------------------|---------------------------------------------|---------|---------------------------------------------------------------------|
-| [PikaPods](https://www.pikapods.com/) | Linkding hosting June 2022 - September 2023 | $163.50 | [Internet Archive](/docs/donations/2023-10-11-internet-archive.png) |
-
-### JetBrains
-
-JetBrains has previously provided an open-source license of [IntelliJ IDEA](https://www.jetbrains.com/idea/) for the development of linkding.
+Small improvements, bugfixes and documentation improvements are always welcome. If you want to contribute a larger feature, consider opening an issue first to discuss it. I may choose to ignore PRs for features that don't align with the project's goals or that I don't want to maintain.

 ## Development

-The application is open source, so you are free to modify or contribute. The application is built using the Django web framework. You can get started by checking out the excellent [Django docs](https://docs.djangoproject.com/en/4.1/). The `bookmarks` folder contains the actual bookmark application, `siteroot` is the Django root application. Other than that the code should be self-explanatory / standard Django stuff 🙂.
+The application is built using the Django web framework. You can get started by checking out the excellent [Django docs](https://docs.djangoproject.com/en/4.1/). The `bookmarks` folder contains the actual bookmark application, `siteroot` is the Django root application. Other than that the code should be self-explanatory / standard Django stuff 🙂.

 ### Prerequisites
- Python 3.10
+- Python 3.12
 - Node.js

 ### Setup
@@ -305,7 +105,7 @@ The frontend is now available under http://localhost:8000

 Run all tests with pytest:
 ```
-pytest
+make test
 ```

 ### Formatting
@@ -317,7 +117,7 @@ make format

 ### DevContainers

-This repository also supports DevContainers: [![Open in Remote - Containers](https://img.shields.io/static/v1?label=Remote%20-%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=git@github.com:sissbruecker/linkding.git)
+This repository also supports DevContainers: [![Open in Remote - Containers](https://img.shields.io/static/v1?label=Remote%20-%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/sissbruecker/linkding.git)

 Once checked out, only the following commands are required to get started:

--- a/assets/header.afdesign
+++ b/assets/header.afdesign
--- a/assets/header.png
+++ b/assets/header.png
--- a/assets/header.svg
+++ b/assets/header.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2126 591" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1.18075,0,0,1.18075,-1265.31,-1395.82)">
+        <circle cx="1314.98" cy="1424.52" r="190.496" style="fill:rgb(88,86,224);"/>
+    </g>
+    <g transform="matrix(0.823127,0,0,0.823127,-786.171,-888.198)">
+        <g transform="matrix(0.707351,0.706862,-0.706862,0.707351,1331.93,-512.804)">
+            <path d="M1244.39,1293.95L1244.39,1493.59C1244.39,1493.59 1243.58,1561.48 1319.29,1562.47C1395.27,1563.46 1394.17,1493.59 1394.17,1493.59L1394.17,1293.95" style="fill:none;stroke:white;stroke-width:35.43px;"/>
+        </g>
+        <g transform="matrix(-0.710067,-0.704134,0.704134,-0.710067,1284.12,3366.41)">
+            <path d="M1244.39,1293.95L1244.39,1493.59C1244.39,1493.59 1243.58,1561.48 1319.29,1562.47C1395.27,1563.46 1394.17,1493.59 1394.17,1493.59L1394.17,1293.95" style="fill:none;stroke:white;stroke-width:35.43px;"/>
+        </g>
+    </g>
+    <g transform="matrix(8.26174,0,0,8.26174,-5762.21,-2037.46)">
+        <g transform="matrix(50,0,0,50,770.835,299.13)">
+            <rect x="0.064" y="-0.716" width="0.088" height="0.716" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,782.693,299.13)">
+            <path d="M0.066,-0.615L0.066,-0.716L0.154,-0.716L0.154,-0.615L0.066,-0.615ZM0.066,-0L0.066,-0.519L0.154,-0.519L0.154,-0L0.066,-0Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,794.552,299.13)">
+            <path d="M0.066,-0L0.066,-0.519L0.145,-0.519L0.145,-0.445C0.183,-0.502 0.238,-0.53 0.31,-0.53C0.341,-0.53 0.37,-0.525 0.396,-0.513C0.422,-0.502 0.442,-0.487 0.455,-0.469C0.468,-0.451 0.477,-0.429 0.482,-0.404C0.486,-0.388 0.487,-0.36 0.487,-0.319L0.487,-0L0.399,-0L0.399,-0.315C0.399,-0.351 0.396,-0.378 0.389,-0.396C0.382,-0.413 0.37,-0.428 0.353,-0.438C0.335,-0.449 0.315,-0.454 0.292,-0.454C0.254,-0.454 0.222,-0.442 0.194,-0.418C0.167,-0.395 0.154,-0.35 0.154,-0.283L0.154,-0L0.066,-0Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,823.109,299.13)">
+            <path d="M0.066,-0L0.066,-0.716L0.154,-0.716L0.154,-0.308L0.362,-0.519L0.476,-0.519L0.278,-0.326L0.496,-0L0.388,-0L0.216,-0.265L0.154,-0.206L0.154,-0L0.066,-0Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,848.859,299.13)">
+            <path d="M0.402,-0L0.402,-0.065C0.369,-0.014 0.321,0.012 0.257,0.012C0.216,0.012 0.178,0 0.143,-0.022C0.109,-0.045 0.082,-0.077 0.063,-0.118C0.044,-0.159 0.034,-0.206 0.034,-0.259C0.034,-0.311 0.043,-0.357 0.06,-0.399C0.077,-0.442 0.103,-0.474 0.138,-0.497C0.172,-0.519 0.211,-0.53 0.253,-0.53C0.285,-0.53 0.313,-0.524 0.337,-0.51C0.361,-0.497 0.381,-0.48 0.396,-0.459L0.396,-0.716L0.484,-0.716L0.484,-0L0.402,-0ZM0.125,-0.259C0.125,-0.192 0.139,-0.143 0.167,-0.11C0.194,-0.077 0.228,-0.061 0.266,-0.061C0.304,-0.061 0.337,-0.076 0.363,-0.107C0.39,-0.139 0.404,-0.187 0.404,-0.251C0.404,-0.322 0.39,-0.375 0.363,-0.408C0.335,-0.441 0.302,-0.458 0.262,-0.458C0.223,-0.458 0.19,-0.442 0.164,-0.41C0.138,-0.378 0.125,-0.327 0.125,-0.259Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,877.417,299.13)">
+            <path d="M0.066,-0.615L0.066,-0.716L0.154,-0.716L0.154,-0.615L0.066,-0.615ZM0.066,-0L0.066,-0.519L0.154,-0.519L0.154,-0L0.066,-0Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,889.275,299.13)">
+            <path d="M0.066,-0L0.066,-0.519L0.145,-0.519L0.145,-0.445C0.183,-0.502 0.238,-0.53 0.31,-0.53C0.341,-0.53 0.37,-0.525 0.396,-0.513C0.422,-0.502 0.442,-0.487 0.455,-0.469C0.468,-0.451 0.477,-0.429 0.482,-0.404C0.486,-0.388 0.487,-0.36 0.487,-0.319L0.487,-0L0.399,-0L0.399,-0.315C0.399,-0.351 0.396,-0.378 0.389,-0.396C0.382,-0.413 0.37,-0.428 0.353,-0.438C0.335,-0.449 0.315,-0.454 0.292,-0.454C0.254,-0.454 0.222,-0.442 0.194,-0.418C0.167,-0.395 0.154,-0.35 0.154,-0.283L0.154,-0L0.066,-0Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+        <g transform="matrix(50,0,0,50,917.833,299.13)">
+            <path d="M0.05,0.043L0.135,0.056C0.139,0.082 0.149,0.101 0.165,0.113C0.187,0.13 0.217,0.138 0.254,0.138C0.295,0.138 0.326,0.13 0.349,0.113C0.371,0.097 0.386,0.074 0.394,0.045C0.398,0.027 0.4,-0.011 0.4,-0.068C0.361,-0.023 0.314,-0 0.256,-0C0.185,-0 0.13,-0.026 0.091,-0.077C0.052,-0.129 0.032,-0.19 0.032,-0.262C0.032,-0.312 0.041,-0.357 0.059,-0.399C0.077,-0.441 0.103,-0.473 0.137,-0.496C0.171,-0.519 0.211,-0.53 0.257,-0.53C0.318,-0.53 0.368,-0.506 0.408,-0.456L0.408,-0.519L0.489,-0.519L0.489,-0.07C0.489,0.01 0.481,0.068 0.464,0.101C0.448,0.135 0.422,0.162 0.386,0.181C0.351,0.201 0.307,0.21 0.255,0.21C0.193,0.21 0.143,0.196 0.105,0.168C0.067,0.141 0.049,0.099 0.05,0.043ZM0.123,-0.269C0.123,-0.201 0.136,-0.151 0.163,-0.12C0.19,-0.088 0.224,-0.073 0.265,-0.073C0.305,-0.073 0.339,-0.088 0.366,-0.119C0.394,-0.15 0.407,-0.199 0.407,-0.266C0.407,-0.329 0.393,-0.377 0.365,-0.409C0.337,-0.441 0.303,-0.458 0.263,-0.458C0.224,-0.458 0.191,-0.442 0.164,-0.41C0.136,-0.378 0.123,-0.331 0.123,-0.269Z" style="fill:rgb(94,94,219);fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
--- a/assets/logo.png
+++ b/assets/logo.png
--- a/assets/logo.svg
+++ b/assets/logo.svg
@@ -1 +1,17 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" height="512" stroke-linejoin="round" stroke-miterlimit="1.5" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><circle cx="255.0164" cy="254.9236" fill="#5856e0" r="224.78528" stroke-width="1.18"/><g fill="none" stroke="#fff" stroke-width="31.25"><path d="m1244.39 1293.95v199.64s-.81 67.89 74.9 68.88c75.98.99 74.88-68.88 74.88-68.88v-199.64" transform="matrix(.70710678 .70710678 -.70710678 .70710678 284.139117 -1684.198509)"/><path d="m1244.39 1293.95v199.64s-.81 67.89 74.9 68.88c75.98.99 74.88-68.88 74.88-68.88v-199.64" transform="matrix(-.70957074 -.70463421 .70463421 -.70957074 235.113139 2195.434643)"/></g></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 450 450" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(1,0,0,1,-70.3466,-70.3466)">
+        <g transform="matrix(1.18075,0,0,1.18075,-1257.39,-1386.74)">
+            <circle cx="1314.98" cy="1424.52" r="190.496" style="fill:rgb(88,86,224);"/>
+        </g>
+        <g transform="matrix(0.793058,0,0,0.793058,-739.034,-836.215)">
+            <g transform="matrix(0.707351,0.706862,-0.706862,0.707351,1331.93,-512.804)">
+                <path d="M1244.39,1293.95L1244.39,1493.59C1244.39,1493.59 1243.58,1561.48 1319.29,1562.47C1395.27,1563.46 1394.17,1493.59 1394.17,1493.59L1394.17,1293.95" style="fill:none;stroke:white;stroke-width:34.15px;"/>
+            </g>
+            <g transform="matrix(-0.710067,-0.704134,0.704134,-0.710067,1284.12,3366.41)">
+                <path d="M1244.39,1293.95L1244.39,1493.59C1244.39,1493.59 1243.58,1561.48 1319.29,1562.47C1395.27,1563.46 1394.17,1493.59 1394.17,1493.59L1394.17,1293.95" style="fill:none;stroke:white;stroke-width:34.15px;"/>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/assets/social-preview.afdesign
+++ b/assets/social-preview.afdesign
--- a/assets/social-preview.png
+++ b/assets/social-preview.png
--- a/bookmarks/api/routes.py
+++ b/bookmarks/api/routes.py
@@ -56,7 +56,12 @@ class BookmarkViewSet(
        return Bookmark.objects.all().filter(owner=user)

    def get_serializer_context(self):
-        return {"request": self.request, "user": self.request.user}
+        disable_scraping = "disable_scraping" in self.request.GET
+        return {
+            "request": self.request,
+            "user": self.request.user,
+            "disable_scraping": disable_scraping,
+        }

    @action(methods=["get"], detail=False)
    def archived(self, request):
@@ -101,16 +106,7 @@ class BookmarkViewSet(
            self.get_serializer(bookmark).data if bookmark else None
        )

-        # Either return metadata from existing bookmark, or scrape from URL
-        if bookmark:
-            metadata = WebsiteMetadata(
-                url,
-                bookmark.website_title,
-                bookmark.website_description,
-                None,
-            )
-        else:
-            metadata = website_loader.load_website_metadata(url)
+        metadata = website_loader.load_website_metadata(url)

        # Return tags that would be automatically applied to the bookmark
        profile = request.user.profile
@@ -120,7 +116,7 @@ class BookmarkViewSet(
                auto_tags = auto_tagging.get_tags(profile.auto_tagging_rules, url)
            except Exception as e:
                logger.error(
-                    f"Failed to auto-tag bookmark. url={bookmark.url}",
+                    f"Failed to auto-tag bookmark. url={url}",
                    exc_info=e,
                )

--- a/bookmarks/api/serializers.py
+++ b/bookmarks/api/serializers.py
@@ -4,8 +4,13 @@ from rest_framework import serializers
 from rest_framework.serializers import ListSerializer

 from bookmarks.models import Bookmark, Tag, build_tag_string, UserProfile
-from bookmarks.services.bookmarks import create_bookmark, update_bookmark
+from bookmarks.services.bookmarks import (
+    create_bookmark,
+    update_bookmark,
+    enhance_with_website_metadata,
+)
 from bookmarks.services.tags import get_or_create_tag
+from bookmarks.services.wayback import generate_fallback_webarchive_url


 class TagListField(serializers.ListField):
@@ -29,8 +34,6 @@ class BookmarkSerializer(serializers.ModelSerializer):
            "title",
            "description",
            "notes",
-            "website_title",
-            "website_description",
            "web_archive_snapshot_url",
            "favicon_url",
            "preview_image_url",
@@ -40,29 +43,30 @@ class BookmarkSerializer(serializers.ModelSerializer):
            "tag_names",
            "date_added",
            "date_modified",
-        ]
-        read_only_fields = [
            "website_title",
            "website_description",
+        ]
+        read_only_fields = [
            "web_archive_snapshot_url",
            "favicon_url",
            "preview_image_url",
+            "tag_names",
            "date_added",
            "date_modified",
+            "website_title",
+            "website_description",
        ]
        list_serializer_class = BookmarkListSerializer

-    # Override optional char fields to provide default value
-    title = serializers.CharField(required=False, allow_blank=True, default="")
-    description = serializers.CharField(required=False, allow_blank=True, default="")
-    notes = serializers.CharField(required=False, allow_blank=True, default="")
-    is_archived = serializers.BooleanField(required=False, default=False)
-    unread = serializers.BooleanField(required=False, default=False)
-    shared = serializers.BooleanField(required=False, default=False)
-    # Override readonly tag_names property to allow passing a list of tag names to create/update
-    tag_names = TagListField(required=False, default=[])
+    # Custom tag_names field to allow passing a list of tag names to create/update
+    tag_names = TagListField(required=False)
+    # Custom fields to generate URLs for favicon, preview image, and web archive snapshot
    favicon_url = serializers.SerializerMethodField()
    preview_image_url = serializers.SerializerMethodField()
+    web_archive_snapshot_url = serializers.SerializerMethodField()
+    # Add dummy website title and description fields for backwards compatibility but keep them empty
+    website_title = serializers.SerializerMethodField()
+    website_description = serializers.SerializerMethodField()

    def get_favicon_url(self, obj: Bookmark):
        if not obj.favicon_file:
@@ -80,31 +84,59 @@ class BookmarkSerializer(serializers.ModelSerializer):
        preview_image_url = request.build_absolute_uri(preview_image_file_path)
        return preview_image_url

+    def get_web_archive_snapshot_url(self, obj: Bookmark):
+        if obj.web_archive_snapshot_url:
+            return obj.web_archive_snapshot_url
+
+        return generate_fallback_webarchive_url(obj.url, obj.date_added)
+
+    def get_website_title(self, obj: Bookmark):
+        return None
+
+    def get_website_description(self, obj: Bookmark):
+        return None
+
    def create(self, validated_data):
-        bookmark = Bookmark()
-        bookmark.url = validated_data["url"]
-        bookmark.title = validated_data["title"]
-        bookmark.description = validated_data["description"]
-        bookmark.notes = validated_data["notes"]
-        bookmark.is_archived = validated_data["is_archived"]
-        bookmark.unread = validated_data["unread"]
-        bookmark.shared = validated_data["shared"]
-        tag_string = build_tag_string(validated_data["tag_names"])
-        return create_bookmark(bookmark, tag_string, self.context["user"])
+        tag_names = validated_data.pop("tag_names", [])
+        tag_string = build_tag_string(tag_names)
+        bookmark = Bookmark(**validated_data)
+
+        saved_bookmark = create_bookmark(bookmark, tag_string, self.context["user"])
+        # Unless scraping is explicitly disabled, enhance bookmark with website
+        # metadata to preserve backwards compatibility with clients that expect
+        # title and description to be populated automatically when left empty
+        if not self.context.get("disable_scraping", False):
+            enhance_with_website_metadata(saved_bookmark)
+        return saved_bookmark

    def update(self, instance: Bookmark, validated_data):
-        # Update fields if they were provided in the payload
-        for key in ["url", "title", "description", "notes", "unread", "shared"]:
-            if key in validated_data:
-                setattr(instance, key, validated_data[key])
+        tag_names = validated_data.pop("tag_names", instance.tag_names)
+        tag_string = build_tag_string(tag_names)

-        # Use tag string from payload, or use bookmark's current tags as fallback
-        tag_string = build_tag_string(instance.tag_names)
-        if "tag_names" in validated_data:
-            tag_string = build_tag_string(validated_data["tag_names"])
+        for field_name, field in self.fields.items():
+            if not field.read_only and field_name in validated_data:
+                setattr(instance, field_name, validated_data[field_name])

        return update_bookmark(instance, tag_string, self.context["user"])

+    def validate(self, attrs):
+        # When creating a bookmark, the service logic prevents duplicate URLs by
+        # updating the existing bookmark instead. When editing a bookmark,
+        # there is no assumption that it would update a different bookmark if
+        # the URL is a duplicate, so raise a validation error in that case.
+        if self.instance and "url" in attrs:
+            is_duplicate = (
+                Bookmark.objects.filter(owner=self.instance.owner, url=attrs["url"])
+                .exclude(pk=self.instance.pk)
+                .exists()
+            )
+            if is_duplicate:
+                raise serializers.ValidationError(
+                    {"url": "A bookmark with this URL already exists."}
+                )
+
+        return attrs
+

 class TagSerializer(serializers.ModelSerializer):
    class Meta:
--- a/bookmarks/e2e/e2e_test_bookmark_details_modal.py
+++ b/bookmarks/e2e/e2e_test_bookmark_details_modal.py
@@ -121,8 +121,9 @@ class BookmarkDetailsModalE2ETestCase(LinkdingE2ETestCase):
            with self.page.expect_navigation():
                details_modal.get_by_text("Edit").click()

-            # Cancel edit, verify return url
-            with self.page.expect_navigation(url=self.live_server_url + url):
+            # Cancel edit, verify return to details url
+            details_url = url + f"&details={bookmark.id}"
+            with self.page.expect_navigation(url=self.live_server_url + details_url):
                self.page.get_by_text("Nevermind").click()

    def test_delete(self):
@@ -134,6 +135,9 @@ class BookmarkDetailsModalE2ETestCase(LinkdingE2ETestCase):

            details_modal = self.open_details_modal(bookmark)

+            # Wait for confirm button to be initialized
+            self.page.wait_for_timeout(1000)
+
            # Delete bookmark, verify return url
            with self.page.expect_navigation(url=self.live_server_url + url):
                details_modal.get_by_text("Delete...").click()
@@ -167,7 +171,7 @@ class BookmarkDetailsModalE2ETestCase(LinkdingE2ETestCase):
            # Has new snapshots
            expect(snapshot).to_be_visible()

-            # Create snapshot
+            # Remove snapshot
            asset_list.get_by_text("Remove", exact=False).click()
            asset_list.get_by_text("Confirm", exact=False).click()

--- a/bookmarks/e2e/e2e_test_bookmark_details_view.py
+++ b/bookmarks/e2e/e2e_test_bookmark_details_view.py
@@ -1,37 +0,0 @@
-from django.urls import reverse
-from playwright.sync_api import sync_playwright
-
-from bookmarks.e2e.helpers import LinkdingE2ETestCase
-
-
-class BookmarkDetailsViewE2ETestCase(LinkdingE2ETestCase):
-    def test_edit_return_url(self):
-        bookmark = self.setup_bookmark()
-
-        with sync_playwright() as p:
-            self.open(reverse("bookmarks:details", args=[bookmark.id]), p)
-
-            # Navigate to edit page
-            with self.page.expect_navigation():
-                self.page.get_by_text("Edit").click()
-
-            # Cancel edit, verify return url
-            with self.page.expect_navigation(
-                url=self.live_server_url
-                + reverse("bookmarks:details", args=[bookmark.id])
-            ):
-                self.page.get_by_text("Nevermind").click()
-
-    def test_delete_return_url(self):
-        bookmark = self.setup_bookmark()
-
-        with sync_playwright() as p:
-            self.open(reverse("bookmarks:details", args=[bookmark.id]), p)
-
-            # Trigger delete, verify return url
-            # Should probably return to last bookmark list page, but for now just returns to index
-            with self.page.expect_navigation(
-                url=self.live_server_url + reverse("bookmarks:index")
-            ):
-                self.page.get_by_text("Delete...").click()
-                self.page.get_by_text("Confirm").click()
--- a/bookmarks/e2e/e2e_test_bookmark_form.py
+++ b/bookmarks/e2e/e2e_test_bookmark_form.py
@@ -1,109 +0,0 @@
-from django.urls import reverse
-from playwright.sync_api import sync_playwright, expect
-
-from bookmarks.e2e.helpers import LinkdingE2ETestCase
-
-
-class BookmarkFormE2ETestCase(LinkdingE2ETestCase):
-    def test_create_should_check_for_existing_bookmark(self):
-        existing_bookmark = self.setup_bookmark(
-            title="Existing title",
-            description="Existing description",
-            notes="Existing notes",
-            tags=[self.setup_tag(name="tag1"), self.setup_tag(name="tag2")],
-            website_title="Existing website title",
-            website_description="Existing website description",
-            unread=True,
-        )
-        tag_names = " ".join(existing_bookmark.tag_names)
-
-        with sync_playwright() as p:
-            browser = self.setup_browser(p)
-            page = browser.new_page()
-            page.goto(self.live_server_url + reverse("bookmarks:new"))
-
-            # Enter bookmarked URL
-            page.get_by_label("URL").fill(existing_bookmark.url)
-            # Already bookmarked hint should be visible
-            page.get_by_text("This URL is already bookmarked.").wait_for(timeout=2000)
-            # Form should be pre-filled with data from existing bookmark
-            self.assertEqual(
-                existing_bookmark.title, page.get_by_label("Title").input_value()
-            )
-            self.assertEqual(
-                existing_bookmark.description,
-                page.get_by_label("Description").input_value(),
-            )
-            self.assertEqual(
-                existing_bookmark.notes, page.get_by_label("Notes").input_value()
-            )
-            self.assertEqual(
-                existing_bookmark.website_title,
-                page.get_by_label("Title").get_attribute("placeholder"),
-            )
-            self.assertEqual(
-                existing_bookmark.website_description,
-                page.get_by_label("Description").get_attribute("placeholder"),
-            )
-            self.assertEqual(tag_names, page.get_by_label("Tags").input_value())
-            self.assertTrue(tag_names, page.get_by_label("Mark as unread").is_checked())
-
-            # Enter non-bookmarked URL
-            page.get_by_label("URL").fill("https://example.com/unknown")
-            # Already bookmarked hint should be hidden
-            page.get_by_text("This URL is already bookmarked.").wait_for(
-                state="hidden", timeout=2000
-            )
-
-            browser.close()
-
-    def test_edit_should_not_check_for_existing_bookmark(self):
-        bookmark = self.setup_bookmark()
-
-        with sync_playwright() as p:
-            browser = self.setup_browser(p)
-            page = browser.new_page()
-            page.goto(
-                self.live_server_url + reverse("bookmarks:edit", args=[bookmark.id])
-            )
-
-            page.wait_for_timeout(timeout=1000)
-            page.get_by_text("This URL is already bookmarked.").wait_for(state="hidden")
-
-    def test_enter_url_of_existing_bookmark_should_show_notes(self):
-        bookmark = self.setup_bookmark(
-            notes="Existing notes", description="Existing description"
-        )
-
-        with sync_playwright() as p:
-            browser = self.setup_browser(p)
-            page = browser.new_page()
-            page.goto(self.live_server_url + reverse("bookmarks:new"))
-
-            details = page.locator("details.notes")
-            expect(details).not_to_have_attribute("open", value="")
-
-            page.get_by_label("URL").fill(bookmark.url)
-            expect(details).to_have_attribute("open", value="")
-
-    def test_create_should_preview_auto_tags(self):
-        profile = self.get_or_create_test_user().profile
-        profile.auto_tagging_rules = "github.com dev github"
-        profile.save()
-
-        with sync_playwright() as p:
-            # Open page with URL that should have auto tags
-            browser = self.setup_browser(p)
-            page = browser.new_page()
-            url = self.live_server_url + reverse("bookmarks:new")
-            url += f"?url=https%3A%2F%2Fgithub.com%2Fsissbruecker%2Flinkding"
-            page.goto(url)
-
-            auto_tags_hint = page.locator(".form-input-hint.auto-tags")
-            expect(auto_tags_hint).to_be_visible()
-            expect(auto_tags_hint).to_have_text("Auto tags: dev github")
-
-            # Change to URL without auto tags
-            page.get_by_label("URL").fill("https://example.com")
-
-            expect(auto_tags_hint).to_be_hidden()
--- a/bookmarks/e2e/e2e_test_collapse_side_panel.py
+++ b/bookmarks/e2e/e2e_test_collapse_side_panel.py
@@ -0,0 +1,48 @@
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+
+
+class CollapseSidePanelE2ETestCase(LinkdingE2ETestCase):
+
+    def setUp(self) -> None:
+        super().setUp()
+
+    def assertSidePanelIsVisible(self):
+        expect(self.page.locator(".bookmarks-page .side-panel")).to_be_visible()
+        expect(
+            self.page.locator(".bookmarks-page [ld-filter-drawer-trigger]")
+        ).not_to_be_visible()
+
+    def assertSidePanelIsHidden(self):
+        expect(self.page.locator(".bookmarks-page .side-panel")).not_to_be_visible()
+        expect(
+            self.page.locator(".bookmarks-page [ld-filter-drawer-trigger]")
+        ).to_be_visible()
+
+    def test_side_panel_should_be_visible_by_default(self):
+        with sync_playwright() as p:
+            self.open(reverse("bookmarks:index"), p)
+            self.assertSidePanelIsVisible()
+
+            self.page.goto(self.live_server_url + reverse("bookmarks:archived"))
+            self.assertSidePanelIsVisible()
+
+            self.page.goto(self.live_server_url + reverse("bookmarks:shared"))
+            self.assertSidePanelIsVisible()
+
+    def test_side_panel_should_be_hidden_when_collapsed(self):
+        user = self.get_or_create_test_user()
+        user.profile.collapse_side_panel = True
+        user.profile.save()
+
+        with sync_playwright() as p:
+            self.open(reverse("bookmarks:index"), p)
+            self.assertSidePanelIsHidden()
+
+            self.page.goto(self.live_server_url + reverse("bookmarks:archived"))
+            self.assertSidePanelIsHidden()
+
+            self.page.goto(self.live_server_url + reverse("bookmarks:shared"))
+            self.assertSidePanelIsHidden()
--- a/bookmarks/e2e/e2e_test_edit_bookmark_form.py
+++ b/bookmarks/e2e/e2e_test_edit_bookmark_form.py
@@ -0,0 +1,65 @@
+from unittest.mock import patch
+
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+from bookmarks.services import website_loader
+
+mock_website_metadata = website_loader.WebsiteMetadata(
+    url="https://example.com",
+    title="Example Domain",
+    description="This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.",
+    preview_image=None,
+)
+
+
+class BookmarkFormE2ETestCase(LinkdingE2ETestCase):
+
+    def setUp(self) -> None:
+        super().setUp()
+        self.website_loader_patch = patch.object(
+            website_loader, "load_website_metadata", return_value=mock_website_metadata
+        )
+        self.website_loader_patch.start()
+
+    def tearDown(self) -> None:
+        super().tearDown()
+        self.website_loader_patch.stop()
+
+    def test_should_not_check_for_existing_bookmark(self):
+        bookmark = self.setup_bookmark()
+
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:edit", args=[bookmark.id]), p)
+
+            page.wait_for_timeout(timeout=1000)
+            page.get_by_text("This URL is already bookmarked.").wait_for(state="hidden")
+
+    def test_should_not_prefill_title_and_description(self):
+        bookmark = self.setup_bookmark(
+            title="Initial title", description="Initial description"
+        )
+
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:edit", args=[bookmark.id]), p)
+            page.wait_for_timeout(timeout=1000)
+
+            title = page.get_by_label("Title")
+            description = page.get_by_label("Description")
+            expect(title).to_have_value(bookmark.title)
+            expect(description).to_have_value(bookmark.description)
+
+    def test_enter_url_should_not_prefill_title_and_description(self):
+        bookmark = self.setup_bookmark()
+
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:edit", args=[bookmark.id]), p)
+
+            page.get_by_label("URL").fill("https://example.com")
+            page.wait_for_timeout(timeout=1000)
+
+            title = page.get_by_label("Title")
+            description = page.get_by_label("Description")
+            expect(title).to_have_value(bookmark.title)
+            expect(description).to_have_value(bookmark.description)
--- a/bookmarks/e2e/e2e_test_tag_cloud_modal.py
+++ b/bookmarks/e2e/e2e_test_tag_cloud_modal.py
@@ -1,12 +1,10 @@
-from django.test import override_settings
 from django.urls import reverse
-from playwright.sync_api import sync_playwright, expect, Locator
+from playwright.sync_api import sync_playwright, expect

 from bookmarks.e2e.helpers import LinkdingE2ETestCase
-from bookmarks.models import Bookmark


-class TagCloudModalE2ETestCase(LinkdingE2ETestCase):
+class FilterDrawerE2ETestCase(LinkdingE2ETestCase):
    def test_show_modal_close_modal(self):
        self.setup_bookmark(tags=[self.setup_tag(name="cooking")])
        self.setup_bookmark(tags=[self.setup_tag(name="hiking")])
@@ -14,31 +12,31 @@ class TagCloudModalE2ETestCase(LinkdingE2ETestCase):
        with sync_playwright() as p:
            page = self.open(reverse("bookmarks:index"), p)

-            # use smaller viewport to make tags button visible
+            # use smaller viewport to make filter button visible
            page.set_viewport_size({"width": 375, "height": 812})

-            # open tag cloud modal
-            modal_trigger = page.locator(".content-area-header").get_by_role(
-                "button", name="Tags"
+            # open drawer
+            drawer_trigger = page.locator(".content-area-header").get_by_role(
+                "button", name="Filters"
            )
-            modal_trigger.click()
+            drawer_trigger.click()

-            # verify modal is visible
-            modal = page.locator(".modal")
-            expect(modal).to_be_visible()
-            expect(modal.locator(".modal-title")).to_have_text("Tags")
+            # verify drawer is visible
+            drawer = page.locator(".modal.drawer.filter-drawer")
+            expect(drawer).to_be_visible()
+            expect(drawer.locator("h2")).to_have_text("Filters")

            # close with close button
-            modal.locator("button.close").click()
-            expect(modal).to_be_hidden()
+            drawer.locator("button.close").click()
+            expect(drawer).to_be_hidden()

-            # open modal again
-            modal_trigger.click()
+            # open drawer again
+            drawer_trigger.click()

            # close with backdrop
-            backdrop = modal.locator(".modal-overlay")
+            backdrop = drawer.locator(".modal-overlay")
            backdrop.click(position={"x": 0, "y": 0})
-            expect(modal).to_be_hidden()
+            expect(drawer).to_be_hidden()

    def test_select_tag(self):
        self.setup_bookmark(tags=[self.setup_tag(name="cooking")])
@@ -47,29 +45,29 @@ class TagCloudModalE2ETestCase(LinkdingE2ETestCase):
        with sync_playwright() as p:
            page = self.open(reverse("bookmarks:index"), p)

-            # use smaller viewport to make tags button visible
+            # use smaller viewport to make filter button visible
            page.set_viewport_size({"width": 375, "height": 812})

            # open tag cloud modal
-            modal_trigger = page.locator(".content-area-header").get_by_role(
-                "button", name="Tags"
+            drawer_trigger = page.locator(".content-area-header").get_by_role(
+                "button", name="Filters"
            )
-            modal_trigger.click()
+            drawer_trigger.click()

            # verify tags are displayed
-            modal = page.locator(".modal")
-            unselected_tags = modal.locator(".unselected-tags")
+            drawer = page.locator(".modal.drawer.filter-drawer")
+            unselected_tags = drawer.locator(".unselected-tags")
            expect(unselected_tags.get_by_text("cooking")).to_be_visible()
            expect(unselected_tags.get_by_text("hiking")).to_be_visible()

            # select tag
            unselected_tags.get_by_text("cooking").click()

-            # open modal again
-            modal_trigger.click()
+            # open drawer again
+            drawer_trigger.click()

            # verify tag is selected, other tag is not visible anymore
-            selected_tags = modal.locator(".selected-tags")
+            selected_tags = drawer.locator(".selected-tags")
            expect(selected_tags.get_by_text("cooking")).to_be_visible()

            expect(unselected_tags.get_by_text("cooking")).not_to_be_visible()
--- a/bookmarks/e2e/e2e_test_new_bookmark_form.py
+++ b/bookmarks/e2e/e2e_test_new_bookmark_form.py
@@ -0,0 +1,166 @@
+from unittest.mock import patch
+from urllib.parse import quote
+
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+from bookmarks.services import website_loader
+
+mock_website_metadata = website_loader.WebsiteMetadata(
+    url="https://example.com",
+    title="Example Domain",
+    description="This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.",
+    preview_image=None,
+)
+
+
+class BookmarkFormE2ETestCase(LinkdingE2ETestCase):
+
+    def setUp(self) -> None:
+        super().setUp()
+        self.website_loader_patch = patch.object(
+            website_loader, "load_website_metadata", return_value=mock_website_metadata
+        )
+        self.website_loader_patch.start()
+
+    def tearDown(self) -> None:
+        super().tearDown()
+        self.website_loader_patch.stop()
+
+    def test_enter_url_prefills_title_and_description(self):
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:new"), p)
+            url = page.get_by_label("URL")
+            title = page.get_by_label("Title")
+            description = page.get_by_label("Description")
+
+            url.fill("https://example.com")
+            expect(title).to_have_value("Example Domain")
+            expect(description).to_have_value(
+                "This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission."
+            )
+
+    def test_enter_url_does_not_overwrite_modified_title_and_description(self):
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:new"), p)
+            url = page.get_by_label("URL")
+            title = page.get_by_label("Title")
+            description = page.get_by_label("Description")
+
+            title.fill("Modified title")
+            description.fill("Modified description")
+            url.fill("https://example.com")
+            page.wait_for_timeout(timeout=1000)
+
+            expect(title).to_have_value("Modified title")
+            expect(description).to_have_value("Modified description")
+
+    def test_with_initial_url_prefills_title_and_description(self):
+        with sync_playwright() as p:
+            page_url = reverse("bookmarks:new") + f"?url={quote('https://example.com')}"
+            page = self.open(page_url, p)
+            url = page.get_by_label("URL")
+            title = page.get_by_label("Title")
+            description = page.get_by_label("Description")
+
+            page.wait_for_timeout(timeout=1000)
+
+            expect(url).to_have_value("https://example.com")
+            expect(title).to_have_value("Example Domain")
+            expect(description).to_have_value(
+                "This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission."
+            )
+
+    def test_with_initial_url_title_description_does_not_overwrite_title_and_description(
+        self,
+    ):
+        with sync_playwright() as p:
+            page_url = (
+                reverse("bookmarks:new")
+                + f"?url={quote('https://example.com')}&title=Initial+title&description=Initial+description"
+            )
+            page = self.open(page_url, p)
+            url = page.get_by_label("URL")
+            title = page.get_by_label("Title")
+            description = page.get_by_label("Description")
+
+            page.wait_for_timeout(timeout=1000)
+
+            expect(url).to_have_value("https://example.com")
+            expect(title).to_have_value("Initial title")
+            expect(description).to_have_value("Initial description")
+
+    def test_create_should_check_for_existing_bookmark(self):
+        existing_bookmark = self.setup_bookmark(
+            title="Existing title",
+            description="Existing description",
+            notes="Existing notes",
+            tags=[self.setup_tag(name="tag1"), self.setup_tag(name="tag2")],
+            unread=True,
+        )
+        tag_names = " ".join(existing_bookmark.tag_names)
+
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:new"), p)
+
+            # Enter bookmarked URL
+            page.get_by_label("URL").fill(existing_bookmark.url)
+            # Already bookmarked hint should be visible
+            page.get_by_text("This URL is already bookmarked.").wait_for(timeout=2000)
+            # Form should be pre-filled with data from existing bookmark
+            self.assertEqual(
+                existing_bookmark.title, page.get_by_label("Title").input_value()
+            )
+            self.assertEqual(
+                existing_bookmark.description,
+                page.get_by_label("Description").input_value(),
+            )
+            self.assertEqual(
+                existing_bookmark.notes, page.get_by_label("Notes").input_value()
+            )
+            self.assertEqual(tag_names, page.get_by_label("Tags").input_value())
+            self.assertTrue(tag_names, page.get_by_label("Mark as unread").is_checked())
+
+            # Enter non-bookmarked URL
+            page.get_by_label("URL").fill("https://example.com/unknown")
+            # Already bookmarked hint should be hidden
+            page.get_by_text("This URL is already bookmarked.").wait_for(
+                state="hidden", timeout=2000
+            )
+
+    def test_enter_url_of_existing_bookmark_should_show_notes(self):
+        bookmark = self.setup_bookmark(
+            notes="Existing notes", description="Existing description"
+        )
+
+        with sync_playwright() as p:
+            page = self.open(reverse("bookmarks:new"), p)
+
+            details = page.locator("details.notes")
+            expect(details).not_to_have_attribute("open", value="")
+
+            page.get_by_label("URL").fill(bookmark.url)
+            expect(details).to_have_attribute("open", value="")
+
+    def test_create_should_preview_auto_tags(self):
+        profile = self.get_or_create_test_user().profile
+        profile.auto_tagging_rules = "github.com dev github"
+        profile.save()
+
+        with sync_playwright() as p:
+            # Open page with URL that should have auto tags
+            url = (
+                reverse("bookmarks:new")
+                + "?url=https%3A%2F%2Fgithub.com%2Fsissbruecker%2Flinkding"
+            )
+            page = self.open(url, p)
+
+            auto_tags_hint = page.locator(".form-input-hint.auto-tags")
+            expect(auto_tags_hint).to_be_visible()
+            expect(auto_tags_hint).to_have_text("Auto tags: dev github")
+
+            # Change to URL without auto tags
+            page.get_by_label("URL").fill("https://example.com")
+
+            expect(auto_tags_hint).to_be_hidden()
--- a/bookmarks/frontend/api.js
+++ b/bookmarks/frontend/api.js
@@ -1,4 +1,4 @@
-export class ApiClient {
+export class Api {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }
@@ -27,3 +27,6 @@ export class ApiClient {
      .then((data) => data.results);
  }
 }
+
+const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
+export const api = new Api(apiBaseUrl);
--- a/bookmarks/frontend/behaviors/bookmark-page.js
+++ b/bookmarks/frontend/behaviors/bookmark-page.js
@@ -5,9 +5,10 @@ class BookmarkItem extends Behavior {
    super(element);

    // Toggle notes
-    const notesToggle = element.querySelector(".toggle-notes");
-    if (notesToggle) {
-      notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
+    this.onToggleNotes = this.onToggleNotes.bind(this);
+    this.notesToggle = element.querySelector(".toggle-notes");
+    if (this.notesToggle) {
+      this.notesToggle.addEventListener("click", this.onToggleNotes);
    }

    // Add tooltip to title if it is truncated
@@ -20,6 +21,12 @@ class BookmarkItem extends Behavior {
    });
  }

+  destroy() {
+    if (this.notesToggle) {
+      this.notesToggle.removeEventListener("click", this.onToggleNotes);
+    }
+  }
+
  onToggleNotes(event) {
    event.preventDefault();
    event.stopPropagation();
--- a/bookmarks/frontend/behaviors/bulk-edit.js
+++ b/bookmarks/frontend/behaviors/bulk-edit.js
@@ -4,16 +4,22 @@ class BulkEdit extends Behavior {
  constructor(element) {
    super(element);

-    this.active = false;
+    this.active = element.classList.contains("active");

+    this.init = this.init.bind(this);
    this.onToggleActive = this.onToggleActive.bind(this);
    this.onToggleAll = this.onToggleAll.bind(this);
    this.onToggleBookmark = this.onToggleBookmark.bind(this);
    this.onActionSelected = this.onActionSelected.bind(this);

    this.init();
-    // Reset when bookmarks are refreshed
-    document.addEventListener("refresh-bookmark-list-done", () => this.init());
+    // Reset when bookmarks are updated
+    document.addEventListener("bookmark-list-updated", this.init);
+  }
+
+  destroy() {
+    this.removeListeners();
+    document.removeEventListener("bookmark-list-updated", this.init);
  }

  init() {
@@ -31,13 +37,9 @@ class BulkEdit extends Behavior {
      this.element.querySelectorAll(".bulk-edit-checkbox:not(.all) input"),
    );

-    // Remove previous listeners if elements are the same
-    this.activeToggle.removeEventListener("click", this.onToggleActive);
-    this.actionSelect.removeEventListener("change", this.onActionSelected);
-    this.allCheckbox.removeEventListener("change", this.onToggleAll);
-    this.bookmarkCheckboxes.forEach((checkbox) => {
-      checkbox.removeEventListener("change", this.onToggleBookmark);
-    });
+    // Add listeners, ensure there are no dupes by possibly removing existing listeners
+    this.removeListeners();
+    this.addListeners();

    // Reset checkbox states
    this.reset();
@@ -47,8 +49,9 @@ class BulkEdit extends Behavior {
    const total = totalHolder?.dataset.bookmarksTotal || 0;
    const totalSpan = this.selectAcross.querySelector("span.total");
    totalSpan.textContent = total;
+  }

-    // Add new listeners
+  addListeners() {
    this.activeToggle.addEventListener("click", this.onToggleActive);
    this.actionSelect.addEventListener("change", this.onActionSelected);
    this.allCheckbox.addEventListener("change", this.onToggleAll);
@@ -57,6 +60,15 @@ class BulkEdit extends Behavior {
    });
  }

+  removeListeners() {
+    this.activeToggle.removeEventListener("click", this.onToggleActive);
+    this.actionSelect.removeEventListener("change", this.onActionSelected);
+    this.allCheckbox.removeEventListener("change", this.onToggleAll);
+    this.bookmarkCheckboxes.forEach((checkbox) => {
+      checkbox.removeEventListener("change", this.onToggleBookmark);
+    });
+  }
+
  onToggleActive() {
    this.active = !this.active;
    if (this.active) {
--- a/bookmarks/frontend/behaviors/clear-button.js
+++ b/bookmarks/frontend/behaviors/clear-button.js
@@ -0,0 +1,42 @@
+import { Behavior, registerBehavior } from "./index";
+
+class ClearButtonBehavior extends Behavior {
+  constructor(element) {
+    super(element);
+
+    this.field = document.getElementById(element.dataset.for);
+    if (!this.field) {
+      console.error(`Field with ID ${element.dataset.for} not found`);
+      return;
+    }
+
+    this.update = this.update.bind(this);
+    this.clear = this.clear.bind(this);
+
+    this.element.addEventListener("click", this.clear);
+    this.field.addEventListener("input", this.update);
+    this.field.addEventListener("value-changed", this.update);
+    this.update();
+  }
+
+  destroy() {
+    if (!this.field) {
+      return;
+    }
+    this.element.removeEventListener("click", this.clear);
+    this.field.removeEventListener("input", this.update);
+    this.field.removeEventListener("value-changed", this.update);
+  }
+
+  update() {
+    this.element.style.display = this.field.value ? "inline-flex" : "none";
+  }
+
+  clear() {
+    this.field.value = "";
+    this.field.focus();
+    this.update();
+  }
+}
+
+registerBehavior("ld-clear-button", ClearButtonBehavior);
--- a/bookmarks/frontend/behaviors/confirm-button.js
+++ b/bookmarks/frontend/behaviors/confirm-button.js
@@ -3,17 +3,14 @@ import { Behavior, registerBehavior } from "./index";
 class ConfirmButtonBehavior extends Behavior {
  constructor(element) {
    super(element);
-    element.dataset.type = element.type;
-    element.dataset.name = element.name;
-    element.dataset.value = element.value;
-    element.removeAttribute("type");
-    element.removeAttribute("name");
-    element.removeAttribute("value");
-    element.addEventListener("click", this.onClick.bind(this));
+
+    this.onClick = this.onClick.bind(this);
+    element.addEventListener("click", this.onClick);
  }

  destroy() {
-    Behavior.interacting = false;
+    this.reset();
+    this.element.removeEventListener("click", this.onClick);
  }

  onClick(event) {
@@ -53,9 +50,9 @@ class ConfirmButtonBehavior extends Behavior {
    cancelButton.addEventListener("click", this.reset.bind(this));

    const confirmButton = document.createElement(this.element.nodeName);
-    confirmButton.type = this.element.dataset.type;
-    confirmButton.name = this.element.dataset.name;
-    confirmButton.value = this.element.dataset.value;
+    confirmButton.type = this.element.type;
+    confirmButton.name = this.element.name;
+    confirmButton.value = this.element.value;
    confirmButton.innerText = question ? "Yes" : "Confirm";
    confirmButton.className = buttonClasses;
    confirmButton.addEventListener("click", this.reset.bind(this));
@@ -70,7 +67,10 @@ class ConfirmButtonBehavior extends Behavior {
  reset() {
    setTimeout(() => {
      Behavior.interacting = false;
-      this.container.remove();
+      if (this.container) {
+        this.container.remove();
+        this.container = null;
+      }
      this.element.classList.remove("d-none");
    });
  }
--- a/bookmarks/frontend/behaviors/details-modal.js
+++ b/bookmarks/frontend/behaviors/details-modal.js
@@ -0,0 +1,29 @@
+import { registerBehavior } from "./index";
+import { isKeyboardActive } from "./focus-utils";
+import { ModalBehavior } from "./modal";
+
+class DetailsModalBehavior extends ModalBehavior {
+  doClose() {
+    super.doClose();
+
+    // Navigate to close URL
+    const closeUrl = this.element.dataset.closeUrl;
+    Turbo.visit(closeUrl, {
+      action: "replace",
+      frame: "details-modal",
+    });
+
+    // Try restore focus to view details to view details link of respective bookmark
+    const bookmarkId = this.element.dataset.bookmarkId;
+    const restoreFocusElement =
+      document.querySelector(
+        `ul.bookmark-list li[data-bookmark-id='${bookmarkId}'] a.view-action`,
+      ) ||
+      document.querySelector("ul.bookmark-list") ||
+      document.body;
+
+    restoreFocusElement.focus({ focusVisible: isKeyboardActive() });
+  }
+}
+
+registerBehavior("ld-details-modal", DetailsModalBehavior);
--- a/bookmarks/frontend/behaviors/dropdown.js
+++ b/bookmarks/frontend/behaviors/dropdown.js
@@ -4,33 +4,70 @@ class DropdownBehavior extends Behavior {
  constructor(element) {
    super(element);
    this.opened = false;
+    this.onClick = this.onClick.bind(this);
    this.onOutsideClick = this.onOutsideClick.bind(this);
+    this.onEscape = this.onEscape.bind(this);
+    this.onFocusOut = this.onFocusOut.bind(this);

-    const toggle = element.querySelector(".dropdown-toggle");
-    toggle.addEventListener("click", () => {
-      if (this.opened) {
-        this.close();
-      } else {
-        this.open();
-      }
-    });
+    // Prevent opening the dropdown automatically on focus, so that it only
+    // opens on click then JS is enabled
+    this.element.style.setProperty("--dropdown-focus-display", "none");
+    this.element.addEventListener("keydown", this.onEscape);
+    this.element.addEventListener("focusout", this.onFocusOut);
+
+    this.toggle = element.querySelector(".dropdown-toggle");
+    this.toggle.setAttribute("aria-expanded", "false");
+    this.toggle.addEventListener("click", this.onClick);
+  }
+
+  destroy() {
+    this.close();
+    this.toggle.removeEventListener("click", this.onClick);
+    this.element.removeEventListener("keydown", this.onEscape);
+    this.element.removeEventListener("focusout", this.onFocusOut);
  }

  open() {
+    this.opened = true;
    this.element.classList.add("active");
+    this.toggle.setAttribute("aria-expanded", "true");
    document.addEventListener("click", this.onOutsideClick);
  }

  close() {
+    this.opened = false;
    this.element.classList.remove("active");
+    this.toggle.setAttribute("aria-expanded", "false");
    document.removeEventListener("click", this.onOutsideClick);
  }

+  onClick() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
  onOutsideClick(event) {
    if (!this.element.contains(event.target)) {
      this.close();
    }
  }
+
+  onEscape(event) {
+    if (event.key === "Escape" && this.opened) {
+      event.preventDefault();
+      this.close();
+      this.toggle.focus();
+    }
+  }
+
+  onFocusOut(event) {
+    if (!this.element.contains(event.relatedTarget)) {
+      this.close();
+    }
+  }
 }

 registerBehavior("ld-dropdown", DropdownBehavior);
--- a/bookmarks/frontend/behaviors/fetch.js
+++ b/bookmarks/frontend/behaviors/fetch.js
@@ -1,48 +0,0 @@
-import { Behavior, fireEvents, registerBehavior, swap } from "./index";
-
-class FetchBehavior extends Behavior {
-  constructor(element) {
-    super(element);
-
-    const eventName = element.getAttribute("ld-on");
-    const interval = parseInt(element.getAttribute("ld-interval")) * 1000;
-
-    this.onFetch = this.onFetch.bind(this);
-    this.onInterval = this.onInterval.bind(this);
-
-    element.addEventListener(eventName, this.onFetch);
-    if (interval) {
-      this.intervalId = setInterval(this.onInterval, interval);
-    }
-  }
-
-  destroy() {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
-  }
-
-  async onFetch(maybeEvent) {
-    if (maybeEvent) {
-      maybeEvent.preventDefault();
-    }
-    const url = this.element.getAttribute("ld-fetch");
-    const html = await fetch(url).then((response) => response.text());
-
-    const target = this.element.getAttribute("ld-target");
-    const select = this.element.getAttribute("ld-select");
-    swap(this.element, html, { target, select });
-
-    const events = this.element.getAttribute("ld-fire");
-    fireEvents(events);
-  }
-
-  onInterval() {
-    if (Behavior.interacting) {
-      return;
-    }
-    this.onFetch();
-  }
-}
-
-registerBehavior("ld-fetch", FetchBehavior);
--- a/bookmarks/frontend/behaviors/filter-drawer.js
+++ b/bookmarks/frontend/behaviors/filter-drawer.js
@@ -0,0 +1,97 @@
+import { Behavior, registerBehavior } from "./index";
+import { ModalBehavior } from "./modal";
+import { isKeyboardActive } from "./focus-utils";
+
+class FilterDrawerTriggerBehavior extends Behavior {
+  constructor(element) {
+    super(element);
+
+    this.onClick = this.onClick.bind(this);
+
+    element.addEventListener("click", this.onClick);
+  }
+
+  destroy() {
+    this.element.removeEventListener("click", this.onClick);
+  }
+
+  onClick() {
+    const modal = document.createElement("div");
+    modal.classList.add("modal", "drawer", "filter-drawer");
+    modal.setAttribute("ld-filter-drawer", "");
+    modal.innerHTML = `
+      <div class="modal-overlay"></div>
+      <div class="modal-container" role="dialog" aria-modal="true">
+        <div class="modal-header">
+          <h2>Filters</h2>
+          <button class="close" aria-label="Close dialog">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                 stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M18 6l-12 12"></path>
+              <path d="M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <section class="content content-area"></div>
+        </div>
+      </div>    
+    `;
+    document.body.querySelector(".modals").appendChild(modal);
+  }
+}
+
+class FilterDrawerBehavior extends ModalBehavior {
+  init() {
+    // Teleport content before creating focus trap, otherwise it will not detect
+    // focusable content elements
+    this.teleport();
+    super.init();
+    // Add active class to start slide-in animation
+    this.element.classList.add("active");
+  }
+
+  destroy() {
+    super.destroy();
+    // Always close on destroy to restore drawer content to original location
+    // before turbo caches DOM
+    this.doClose();
+  }
+
+  mapHeading(container, from, to) {
+    const headings = container.querySelectorAll(from);
+    headings.forEach((heading) => {
+      const newHeading = document.createElement(to);
+      newHeading.textContent = heading.textContent;
+      heading.replaceWith(newHeading);
+    });
+  }
+
+  teleport() {
+    const content = this.element.querySelector(".content");
+    const sidePanel = document.querySelector("section.side-panel");
+    content.append(...sidePanel.children);
+    this.mapHeading(content, "h2", "h3");
+  }
+
+  teleportBack() {
+    const sidePanel = document.querySelector("section.side-panel");
+    const content = this.element.querySelector(".content");
+    sidePanel.append(...content.children);
+    this.mapHeading(sidePanel, "h3", "h2");
+  }
+
+  doClose() {
+    super.doClose();
+    this.teleportBack();
+
+    // Try restore focus to drawer trigger
+    const restoreFocusElement =
+      document.querySelector("[ld-filter-drawer-trigger]") || document.body;
+    restoreFocusElement.focus({ focusVisible: isKeyboardActive() });
+  }
+}
+
+registerBehavior("ld-filter-drawer-trigger", FilterDrawerTriggerBehavior);
+registerBehavior("ld-filter-drawer", FilterDrawerBehavior);
--- a/bookmarks/frontend/behaviors/focus-utils.js
+++ b/bookmarks/frontend/behaviors/focus-utils.js
@@ -0,0 +1,59 @@
+let keyboardActive = false;
+
+window.addEventListener(
+  "keydown",
+  () => {
+    keyboardActive = true;
+  },
+  { capture: true },
+);
+
+window.addEventListener(
+  "mousedown",
+  () => {
+    keyboardActive = false;
+  },
+  { capture: true },
+);
+
+export function isKeyboardActive() {
+  return keyboardActive;
+}
+
+export class FocusTrapController {
+  constructor(element) {
+    this.element = element;
+    this.focusableElements = this.element.querySelectorAll(
+      'a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])',
+    );
+    this.firstFocusableElement = this.focusableElements[0];
+    this.lastFocusableElement =
+      this.focusableElements[this.focusableElements.length - 1];
+
+    this.onKeyDown = this.onKeyDown.bind(this);
+
+    this.firstFocusableElement.focus({ focusVisible: keyboardActive });
+    this.element.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    this.element.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  onKeyDown(event) {
+    if (event.key !== "Tab") {
+      return;
+    }
+    if (event.shiftKey) {
+      if (document.activeElement === this.firstFocusableElement) {
+        event.preventDefault();
+        this.lastFocusableElement.focus();
+      }
+    } else {
+      if (document.activeElement === this.lastFocusableElement) {
+        event.preventDefault();
+        this.firstFocusableElement.focus();
+      }
+    }
+  }
+}
--- a/bookmarks/frontend/behaviors/form.js
+++ b/bookmarks/frontend/behaviors/form.js
@@ -1,64 +1,55 @@
-import { Behavior, fireEvents, registerBehavior } from "./index";
-
-class FormBehavior extends Behavior {
-  constructor(element) {
-    super(element);
-
-    element.addEventListener("submit", this.onSubmit.bind(this));
-  }
-
-  async onSubmit(event) {
-    event.preventDefault();
-
-    const url = this.element.action;
-    const formData = new FormData(this.element);
-    if (event.submitter) {
-      formData.append(event.submitter.name, event.submitter.value);
-    }
-
-    await fetch(url, {
-      method: "POST",
-      body: formData,
-      redirect: "manual", // ignore redirect
-    });
-
-    const events = this.element.getAttribute("ld-fire");
-    if (fireEvents) {
-      fireEvents(events);
-    }
-  }
-}
+import { Behavior, registerBehavior } from "./index";

 class AutoSubmitBehavior extends Behavior {
  constructor(element) {
    super(element);

-    element.addEventListener("change", () => {
-      const form = element.closest("form");
-      form.dispatchEvent(new Event("submit", { cancelable: true }));
-    });
+    this.submit = this.submit.bind(this);
+    element.addEventListener("change", this.submit);
+  }
+
+  destroy() {
+    this.element.removeEventListener("change", this.submit);
+  }
+
+  submit() {
+    this.element.closest("form").requestSubmit();
  }
 }

 class UploadButton extends Behavior {
  constructor(element) {
    super(element);
+    this.fileInput = element.nextElementSibling;

-    const fileInput = element.nextElementSibling;
+    this.onClick = this.onClick.bind(this);
+    this.onChange = this.onChange.bind(this);

-    element.addEventListener("click", () => {
-      fileInput.click();
-    });
+    element.addEventListener("click", this.onClick);
+    this.fileInput.addEventListener("change", this.onChange);
+  }

-    fileInput.addEventListener("change", () => {
-      const form = fileInput.closest("form");
-      const event = new Event("submit", { cancelable: true });
-      event.submitter = element;
-      form.dispatchEvent(event);
-    });
+  destroy() {
+    this.element.removeEventListener("click", this.onClick);
+    this.fileInput.removeEventListener("change", this.onChange);
+  }
+
+  onClick(event) {
+    event.preventDefault();
+    this.fileInput.click();
+  }
+
+  onChange() {
+    // Check if the file input has a file selected
+    if (!this.fileInput.files.length) {
+      return;
+    }
+    const form = this.fileInput.closest("form");
+    form.requestSubmit(this.element);
+    // remove selected file so it doesn't get submitted again
+    this.fileInput.value = "";
  }
 }

-registerBehavior("ld-form", FormBehavior);
 registerBehavior("ld-auto-submit", AutoSubmitBehavior);
 registerBehavior("ld-upload-button", UploadButton);
--- a/bookmarks/frontend/behaviors/global-shortcuts.js
+++ b/bookmarks/frontend/behaviors/global-shortcuts.js
@@ -4,7 +4,12 @@ class GlobalShortcuts extends Behavior {
  constructor(element) {
    super(element);

-    document.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.onKeyDown = this.onKeyDown.bind(this);
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
  }

  onKeyDown(event) {
--- a/bookmarks/frontend/behaviors/index.js
+++ b/bookmarks/frontend/behaviors/index.js
@@ -16,7 +16,24 @@ const mutationObserver = new MutationObserver((mutations) => {
  });
 });

-window.addEventListener("turbo:load", () => {
+// Update behaviors on Turbo events
+// - turbo:load: initial page load, only listen once, afterward can rely on turbo:render
+// - turbo:render: after page navigation, including back/forward, and failed form submissions
+// - turbo:before-cache: before page navigation, reset DOM before caching
+document.addEventListener(
+  "turbo:load",
+  () => {
+    mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+
+    applyBehaviors(document.body);
+  },
+  { once: true },
+);
+
+document.addEventListener("turbo:render", () => {
  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true,
@@ -25,6 +42,10 @@ window.addEventListener("turbo:load", () => {
  applyBehaviors(document.body);
 });

+document.addEventListener("turbo:before-cache", () => {
+  destroyBehaviors(document.body);
+});
+
 export class Behavior {
  constructor(element) {
    this.element = element;
@@ -37,7 +58,6 @@ Behavior.interacting = false;

 export function registerBehavior(name, behavior) {
  behaviorRegistry[name] = behavior;
-  applyBehaviors(document, [name]);
 }

 export function applyBehaviors(container, behaviorNames = null) {
@@ -99,51 +119,3 @@ export function destroyBehaviors(element) {
    });
  });
 }
-
-export function swap(element, html, options) {
-  const dom = new DOMParser().parseFromString(html, "text/html");
-
-  let targetElement = element;
-  let strategy = "innerHTML";
-  if (options.target) {
-    const parts = options.target.split("|");
-    targetElement =
-      parts[0] === "self" ? element : document.querySelector(parts[0]);
-    strategy = parts[1] || "innerHTML";
-  }
-
-  let contents = Array.from(dom.body.children);
-  if (options.select) {
-    contents = Array.from(dom.querySelectorAll(options.select));
-  }
-
-  switch (strategy) {
-    case "append":
-      targetElement.append(...contents);
-      break;
-    case "outerHTML":
-      targetElement.parentElement.replaceChild(contents[0], targetElement);
-      break;
-    case "innerHTML":
-    default:
-      Array.from(targetElement.children).forEach((child) => {
-        child.remove();
-      });
-      targetElement.append(...contents);
-  }
-}
-
-export function fireEvents(events) {
-  if (!events) {
-    return;
-  }
-  events.split(",").forEach((eventName) => {
-    const targets = Array.from(
-      document.querySelectorAll(`[ld-on='${eventName}']`),
-    );
-    targets.push(document);
-    targets.forEach((target) => {
-      target.dispatchEvent(new CustomEvent(eventName));
-    });
-  });
-}
--- a/bookmarks/frontend/behaviors/modal.js
+++ b/bookmarks/frontend/behaviors/modal.js
@@ -1,22 +1,55 @@
-import { Behavior, registerBehavior } from "./index";
+import { Behavior } from "./index";
+import { FocusTrapController } from "./focus-utils";

-class ModalBehavior extends Behavior {
+export class ModalBehavior extends Behavior {
  constructor(element) {
    super(element);

    this.onClose = this.onClose.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);

-    const modalOverlay = element.querySelector(".modal-overlay");
-    const closeButton = element.querySelector("button.close");
-    modalOverlay.addEventListener("click", this.onClose);
-    closeButton.addEventListener("click", this.onClose);
+    this.overlay = element.querySelector(".modal-overlay");
+    this.closeButton = element.querySelector(".modal-header .close");

+    this.overlay.addEventListener("click", this.onClose);
+    this.closeButton.addEventListener("click", this.onClose);
    document.addEventListener("keydown", this.onKeyDown);
+
+    this.init();
  }

  destroy() {
+    this.overlay.removeEventListener("click", this.onClose);
+    this.closeButton.removeEventListener("click", this.onClose);
    document.removeEventListener("keydown", this.onKeyDown);
+
+    this.clearInert();
+    this.focusTrap.destroy();
+  }
+
+  init() {
+    this.setupInert();
+    this.focusTrap = new FocusTrapController(
+      this.element.querySelector(".modal-container"),
+    );
+  }
+
+  setupInert() {
+    // Inert all other elements on the page
+    document
+      .querySelectorAll("body > *:not(.modals)")
+      .forEach((el) => el.setAttribute("inert", ""));
+    // Lock scroll on the body
+    document.body.classList.add("scroll-lock");
+  }
+
+  clearInert() {
+    // Clear inert attribute from all elements to allow focus outside the modal again
+    document
+      .querySelectorAll("body > *")
+      .forEach((el) => el.removeAttribute("inert"));
+    // Remove scroll lock from the body
+    document.body.classList.remove("scroll-lock");
  }

  onKeyDown(event) {
@@ -32,20 +65,27 @@ class ModalBehavior extends Behavior {
    }

    if (event.key === "Escape") {
-      event.preventDefault();
-      this.onClose();
+      this.onClose(event);
    }
  }

-  onClose() {
-    document.removeEventListener("keydown", this.onKeyDown);
+  onClose(event) {
+    event.preventDefault();
    this.element.classList.add("closing");
-    this.element.addEventListener("animationend", (event) => {
-      if (event.animationName === "fade-out") {
-        this.element.remove();
-      }
-    });
+    this.element.addEventListener(
+      "animationend",
+      (event) => {
+        if (event.animationName === "fade-out") {
+          this.doClose();
+        }
+      },
+      { once: true },
+    );
+  }
+
+  doClose() {
+    this.element.remove();
+    this.clearInert();
+    this.element.dispatchEvent(new CustomEvent("modal:close"));
  }
 }
-
-registerBehavior("ld-modal", ModalBehavior);
--- a/bookmarks/frontend/behaviors/search-autocomplete.js
+++ b/bookmarks/frontend/behaviors/search-autocomplete.js
@@ -0,0 +1,41 @@
+import { Behavior, registerBehavior } from "./index";
+import SearchAutoCompleteComponent from "../components/SearchAutoComplete.svelte";
+
+class SearchAutocomplete extends Behavior {
+  constructor(element) {
+    super(element);
+    const input = element.querySelector("input");
+    if (!input) {
+      console.warn("SearchAutocomplete: input element not found");
+      return;
+    }
+
+    const container = document.createElement("div");
+
+    new SearchAutoCompleteComponent({
+      target: container,
+      props: {
+        name: "q",
+        placeholder: input.getAttribute("placeholder") || "",
+        value: input.value,
+        linkTarget: input.dataset.linkTarget,
+        mode: input.dataset.mode,
+        search: {
+          user: input.dataset.user,
+          shared: input.dataset.shared,
+          unread: input.dataset.unread,
+        },
+      },
+    });
+
+    this.input = input;
+    this.autocomplete = container.firstElementChild;
+    input.replaceWith(this.autocomplete);
+  }
+
+  destroy() {
+    this.autocomplete.replaceWith(this.input);
+  }
+}
+
+registerBehavior("ld-search-autocomplete", SearchAutocomplete);
--- a/bookmarks/frontend/behaviors/tag-autocomplete.js
+++ b/bookmarks/frontend/behaviors/tag-autocomplete.js
@@ -1,27 +1,35 @@
 import { Behavior, registerBehavior } from "./index";
 import TagAutoCompleteComponent from "../components/TagAutocomplete.svelte";
-import { ApiClient } from "../api";

 class TagAutocomplete extends Behavior {
  constructor(element) {
    super(element);
-    const wrapper = document.createElement("div");
-    const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
-    const apiClient = new ApiClient(apiBaseUrl);
+    const input = element.querySelector("input");
+    if (!input) {
+      console.warn("TagAutocomplete: input element not found");
+      return;
+    }
+
+    const container = document.createElement("div");

    new TagAutoCompleteComponent({
-      target: wrapper,
+      target: container,
      props: {
-        id: element.id,
-        name: element.name,
-        value: element.value,
-        placeholder: element.getAttribute("placeholder") || "",
-        apiClient: apiClient,
-        variant: element.getAttribute("variant"),
+        id: input.id,
+        name: input.name,
+        value: input.value,
+        placeholder: input.getAttribute("placeholder") || "",
+        variant: input.getAttribute("variant"),
      },
    });

-    element.replaceWith(wrapper.firstElementChild);
+    this.input = input;
+    this.autocomplete = container.firstElementChild;
+    input.replaceWith(this.autocomplete);
+  }
+
+  destroy() {
+    this.autocomplete.replaceWith(this.input);
  }
 }

--- a/bookmarks/frontend/cache.js
+++ b/bookmarks/frontend/cache.js
@@ -0,0 +1,35 @@
+import { api } from "./api.js";
+
+class Cache {
+  constructor(api) {
+    this.api = api;
+
+    // Reset cached tags after a form submission
+    document.addEventListener("turbo:submit-end", () => {
+      this.tagsPromise = null;
+    });
+  }
+
+  getTags() {
+    if (!this.tagsPromise) {
+      this.tagsPromise = this.api
+        .getTags({
+          limit: 5000,
+          offset: 0,
+        })
+        .then((tags) =>
+          tags.sort((left, right) =>
+            left.name.toLowerCase().localeCompare(right.name.toLowerCase()),
+          ),
+        )
+        .catch((e) => {
+          console.warn("Cache: Error loading tags", e);
+          return [];
+        });
+    }
+
+    return this.tagsPromise;
+  }
+}
+
+export const cache = new Cache(api);
--- a/bookmarks/frontend/components/SearchAutoComplete.svelte
+++ b/bookmarks/frontend/components/SearchAutoComplete.svelte
@@ -1,5 +1,7 @@
 <script>
  import {SearchHistory} from "./SearchHistory";
+  import {api} from "../api";
+  import {cache} from "../cache";
  import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "../util";

  const searchHistory = new SearchHistory()
@@ -7,9 +9,7 @@
  export let name;
  export let placeholder;
  export let value;
-  export let tags;
  export let mode = '';
-  export let apiClient;
  export let search;
  export let linkTarget = '_blank';

@@ -88,17 +88,18 @@
    }

    // Tag suggestions
+    const tags = await cache.getTags();
    let tagSuggestions = []
    const currentWord = getCurrentWord(input)
    if (currentWord && currentWord.length > 1 && currentWord[0] === '#') {
      const searchTag = currentWord.substring(1, currentWord.length)
-      tagSuggestions = (tags || []).filter(tagName => tagName.toLowerCase().indexOf(searchTag.toLowerCase()) === 0)
+      tagSuggestions = (tags || []).filter(tag => tag.name.toLowerCase().indexOf(searchTag.toLowerCase()) === 0)
        .slice(0, 5)
-        .map(tagName => ({
+        .map(tag => ({
          type: 'tag',
          index: nextIndex(),
-          label: `#${tagName}`,
-          tagName: tagName
+          label: `#${tag.name}`,
+          tagName: tag.name
        }))
    }

@@ -119,9 +120,9 @@
        ...search,
        q: value
      }
-      const fetchedBookmarks = await apiClient.listBookmarks(suggestionSearch, {limit: 5, offset: 0, path})
+      const fetchedBookmarks = await api.listBookmarks(suggestionSearch, {limit: 5, offset: 0, path})
      bookmarks = fetchedBookmarks.map(bookmark => {
-        const fullLabel = bookmark.title || bookmark.website_title || bookmark.url
+        const fullLabel = bookmark.title || bookmark.url
        const label = clampText(fullLabel, 60)
        return {
          type: 'bookmark',
--- a/bookmarks/frontend/components/TagAutocomplete.svelte
+++ b/bookmarks/frontend/components/TagAutocomplete.svelte
@@ -1,14 +1,13 @@
 <script>
+  import {cache} from "../cache";
  import {getCurrentWord, getCurrentWordBounds} from "../util";

  export let id;
  export let name;
  export let value;
  export let placeholder;
-  export let apiClient;
  export let variant = 'default';

-  let tags = [];
  let isFocus = false;
  let isOpen = false;
  let input = null;
@@ -17,18 +16,6 @@
  let suggestions = [];
  let selectedIndex = 0;

-  init();
-
-  async function init() {
-    // For now we cache all tags on load as the template did before
-    try {
-      tags = await apiClient.getTags({limit: 5000, offset: 0});
-      tags.sort((left, right) => left.name.toLowerCase().localeCompare(right.name.toLowerCase()))
-    } catch (e) {
-      console.warn('TagAutocomplete: Error loading tag list');
-    }
-  }
-
  function handleFocus() {
    isFocus = true;
  }
@@ -38,9 +25,10 @@
    close();
  }

-  function handleInput(e) {
+  async function handleInput(e) {
    input = e.target;

+    const tags = await cache.getTags();
    const word = getCurrentWord(input);

    suggestions = word
--- a/bookmarks/frontend/index.js
+++ b/bookmarks/frontend/index.js
@@ -1,13 +1,17 @@
 import "@hotwired/turbo";
 import "./behaviors/bookmark-page";
 import "./behaviors/bulk-edit";
+import "./behaviors/clear-button";
 import "./behaviors/confirm-button";
+import "./behaviors/details-modal";
 import "./behaviors/dropdown";
-import "./behaviors/fetch";
+import "./behaviors/filter-drawer";
 import "./behaviors/form";
-import "./behaviors/modal";
 import "./behaviors/global-shortcuts";
+import "./behaviors/search-autocomplete";
 import "./behaviors/tag-autocomplete";
+
 export { default as TagAutoComplete } from "./components/TagAutocomplete.svelte";
 export { default as SearchAutoComplete } from "./components/SearchAutoComplete.svelte";
-export { ApiClient } from "./api";
+export { api } from "./api";
+export { cache } from "./cache";
--- a/bookmarks/migrations/0040_userprofile_items_per_page_and_more.py
+++ b/bookmarks/migrations/0040_userprofile_items_per_page_and_more.py
@@ -0,0 +1,26 @@
+# Generated by Django 5.0.8 on 2024-09-18 20:11
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("bookmarks", "0039_globalsettings_enable_link_prefetch"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="items_per_page",
+            field=models.IntegerField(
+                default=30, validators=[django.core.validators.MinValueValidator(10)]
+            ),
+        ),
+        migrations.AddField(
+            model_name="userprofile",
+            name="sticky_pagination",
+            field=models.BooleanField(default=False),
+        ),
+    ]
--- a/bookmarks/migrations/0041_merge_metadata.py
+++ b/bookmarks/migrations/0041_merge_metadata.py
@@ -0,0 +1,36 @@
+# Generated by Django 5.1.1 on 2024-09-21 08:13
+
+from django.db import migrations
+from django.db.models import Q
+from django.db.models.expressions import RawSQL
+
+from bookmarks.models import Bookmark
+
+
+def forwards(apps, schema_editor):
+    Bookmark.objects.filter(
+        Q(title__isnull=True) | Q(title__exact=""),
+    ).extra(
+        where=["website_title IS NOT NULL"]
+    ).update(title=RawSQL("website_title", ()))
+
+    Bookmark.objects.filter(
+        Q(description__isnull=True) | Q(description__exact=""),
+    ).extra(where=["website_description IS NOT NULL"]).update(
+        description=RawSQL("website_description", ())
+    )
+
+
+def reverse(apps, schema_editor):
+    pass
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("bookmarks", "0040_userprofile_items_per_page_and_more"),
+    ]
+
+    operations = [
+        migrations.RunPython(forwards, reverse),
+    ]
--- a/bookmarks/migrations/0042_userprofile_custom_css_hash.py
+++ b/bookmarks/migrations/0042_userprofile_custom_css_hash.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.1 on 2024-09-28 08:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("bookmarks", "0041_merge_metadata"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="custom_css_hash",
+            field=models.CharField(blank=True, max_length=32),
+        ),
+    ]
--- a/bookmarks/migrations/0043_userprofile_collapse_side_panel.py
+++ b/bookmarks/migrations/0043_userprofile_collapse_side_panel.py
@@ -0,0 +1,18 @@
+# Generated by Django 5.1.5 on 2025-02-02 09:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("bookmarks", "0042_userprofile_custom_css_hash"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="userprofile",
+            name="collapse_side_panel",
+            field=models.BooleanField(default=False),
+        ),
+    ]
--- a/bookmarks/models.py
+++ b/bookmarks/models.py
@@ -1,12 +1,14 @@
+import binascii
+import hashlib
 import logging
 import os
 from typing import List

-import binascii
 from django import forms
 from django.conf import settings
 from django.contrib.auth import get_user_model
 from django.contrib.auth.models import User
+from django.core.validators import MinValueValidator
 from django.db import models
 from django.db.models.signals import post_save, post_delete
 from django.dispatch import receiver
@@ -55,7 +57,9 @@ class Bookmark(models.Model):
    title = models.CharField(max_length=512, blank=True)
    description = models.TextField(blank=True)
    notes = models.TextField(blank=True)
+    # Obsolete field, kept to not remove column when generating migrations
    website_title = models.CharField(max_length=512, blank=True, null=True)
+    # Obsolete field, kept to not remove column when generating migrations
    website_description = models.TextField(blank=True, null=True)
    web_archive_snapshot_url = models.CharField(max_length=2048, blank=True)
    favicon_file = models.CharField(max_length=512, blank=True)
@@ -73,14 +77,12 @@ class Bookmark(models.Model):
    def resolved_title(self):
        if self.title:
            return self.title
-        elif self.website_title:
-            return self.website_title
        else:
            return self.url

    @property
    def resolved_description(self):
-        return self.website_description if not self.description else self.description
+        return self.description

    @property
    def tag_names(self):
@@ -91,6 +93,19 @@ class Bookmark(models.Model):
        return self.resolved_title + " (" + self.url[:30] + "...)"


+@receiver(post_delete, sender=Bookmark)
+def bookmark_deleted(sender, instance, **kwargs):
+    if instance.preview_image_file:
+        filepath = os.path.join(settings.LD_PREVIEW_FOLDER, instance.preview_image_file)
+        if os.path.isfile(filepath):
+            try:
+                os.remove(filepath)
+            except Exception as error:
+                logger.error(
+                    f"Failed to delete preview image: {filepath}", exc_info=error
+                )
+
+
 class BookmarkAsset(models.Model):
    TYPE_SNAPSHOT = "snapshot"
    TYPE_UPLOAD = "upload"
@@ -140,14 +155,9 @@ class BookmarkForm(forms.ModelForm):
    # Use URLField for URL
    url = forms.CharField(validators=[BookmarkURLValidator()])
    tag_string = forms.CharField(required=False)
-    # Do not require title and description in form as we fill these automatically if they are empty
+    # Do not require title and description as they may be empty
    title = forms.CharField(max_length=512, required=False)
    description = forms.CharField(required=False, widget=forms.Textarea())
-    # Include website title and description as hidden field as they only provide info when editing bookmarks
-    website_title = forms.CharField(
-        max_length=512, required=False, widget=forms.HiddenInput()
-    )
-    website_description = forms.CharField(required=False, widget=forms.HiddenInput())
    unread = forms.BooleanField(required=False)
    shared = forms.BooleanField(required=False)
    # Hidden field that determines whether to close window/tab after saving the bookmark
@@ -161,8 +171,6 @@ class BookmarkForm(forms.ModelForm):
            "title",
            "description",
            "notes",
-            "website_title",
-            "website_description",
            "unread",
            "shared",
            "auto_close",
@@ -174,6 +182,24 @@ class BookmarkForm(forms.ModelForm):
            self.instance and self.instance.notes
        )

+    def clean_url(self):
+        # When creating a bookmark, the service logic prevents duplicate URLs by
+        # updating the existing bookmark instead, which is also communicated in
+        # the form's UI. When editing a bookmark, there is no assumption that
+        # it would update a different bookmark if the URL is a duplicate, so
+        # raise a validation error in that case.
+        url = self.cleaned_data["url"]
+        if self.instance.pk:
+            is_duplicate = (
+                Bookmark.objects.filter(owner=self.instance.owner, url=url)
+                .exclude(pk=self.instance.pk)
+                .exists()
+            )
+            if is_duplicate:
+                raise forms.ValidationError("A bookmark with this URL already exists.")
+
+        return url
+

 class BookmarkSearch:
    SORT_ADDED_ASC = "added_asc"
@@ -282,7 +308,7 @@ class BookmarkSearchForm(forms.Form):
    ]

    q = forms.CharField()
-    user = forms.ChoiceField()
+    user = forms.ChoiceField(required=False)
    sort = forms.ChoiceField(choices=SORT_CHOICES)
    shared = forms.ChoiceField(choices=FILTER_SHARED_CHOICES, widget=forms.RadioSelect)
    unread = forms.ChoiceField(choices=FILTER_UNREAD_CHOICES, widget=forms.RadioSelect)
@@ -418,10 +444,25 @@ class UserProfile(models.Model):
    display_remove_bookmark_action = models.BooleanField(default=True, null=False)
    permanent_notes = models.BooleanField(default=False, null=False)
    custom_css = models.TextField(blank=True, null=False)
+    custom_css_hash = models.CharField(blank=True, null=False, max_length=32)
    auto_tagging_rules = models.TextField(blank=True, null=False)
    search_preferences = models.JSONField(default=dict, null=False)
    enable_automatic_html_snapshots = models.BooleanField(default=True, null=False)
    default_mark_unread = models.BooleanField(default=False, null=False)
+    items_per_page = models.IntegerField(
+        null=False, default=30, validators=[MinValueValidator(10)]
+    )
+    sticky_pagination = models.BooleanField(default=False, null=False)
+    collapse_side_panel = models.BooleanField(default=False, null=False)
+
+    def save(self, *args, **kwargs):
+        if self.custom_css:
+            self.custom_css_hash = hashlib.md5(
+                self.custom_css.encode("utf-8")
+            ).hexdigest()
+        else:
+            self.custom_css_hash = ""
+        super().save(*args, **kwargs)


 class UserProfileForm(forms.ModelForm):
@@ -450,6 +491,9 @@ class UserProfileForm(forms.ModelForm):
            "default_mark_unread",
            "custom_css",
            "auto_tagging_rules",
+            "items_per_page",
+            "sticky_pagination",
+            "collapse_side_panel",
        ]


--- a/bookmarks/queries.py
+++ b/bookmarks/queries.py
@@ -53,8 +53,6 @@ def _base_bookmarks_query(
            Q(title__icontains=term)
            | Q(description__icontains=term)
            | Q(notes__icontains=term)
-            | Q(website_title__icontains=term)
-            | Q(website_description__icontains=term)
            | Q(url__icontains=term)
        )

@@ -87,13 +85,7 @@ def _base_bookmarks_query(
    elif search.shared == BookmarkSearch.FILTER_SHARED_UNSHARED:
        query_set = query_set.filter(shared=False)

-    # Sort by date added
-    if search.sort == BookmarkSearch.SORT_ADDED_ASC:
-        query_set = query_set.order_by("date_added")
-    elif search.sort == BookmarkSearch.SORT_ADDED_DESC:
-        query_set = query_set.order_by("-date_added")
-
-    # Sort by title
+    # Sort
    if (
        search.sort == BookmarkSearch.SORT_TITLE_ASC
        or search.sort == BookmarkSearch.SORT_TITLE_DESC
@@ -103,10 +95,6 @@ def _base_bookmarks_query(
        query_set = query_set.annotate(
            effective_title=Case(
                When(Q(title__isnull=False) & ~Q(title__exact=""), then=Lower("title")),
-                When(
-                    Q(website_title__isnull=False) & ~Q(website_title__exact=""),
-                    then=Lower("website_title"),
-                ),
                default=Lower("url"),
                output_field=CharField(),
            )
@@ -124,6 +112,11 @@ def _base_bookmarks_query(
            query_set = query_set.order_by(order_field)
        elif search.sort == BookmarkSearch.SORT_TITLE_DESC:
            query_set = query_set.order_by(order_field).reverse()
+    elif search.sort == BookmarkSearch.SORT_ADDED_ASC:
+        query_set = query_set.order_by("date_added")
+    else:
+        # Sort by date added, descending by default
+        query_set = query_set.order_by("-date_added")

    return query_set

--- a/bookmarks/services/auto_tagging.py
+++ b/bookmarks/services/auto_tagging.py
@@ -7,6 +7,9 @@ def get_tags(script: str, url: str):
    parsed_url = urlparse(url.lower())
    result = set()

+    if not parsed_url.hostname:
+        return result
+
    for line in script.lower().split("\n"):
        if "#" in line:
            i = line.index("#")
--- a/bookmarks/services/bookmarks.py
+++ b/bookmarks/services/bookmarks.py
@@ -26,8 +26,6 @@ def create_bookmark(bookmark: Bookmark, tag_string: str, current_user: User):
        _merge_bookmark_data(bookmark, existing_bookmark)
        return update_bookmark(existing_bookmark, tag_string, current_user)

-    # Update website info
-    _update_website_metadata(bookmark)
    # Set currently logged in user as owner
    bookmark.owner = current_user
    # Set dates
@@ -67,13 +65,21 @@ def update_bookmark(bookmark: Bookmark, tag_string, current_user: User):
    if has_url_changed:
        # Update web archive snapshot, if URL changed
        tasks.create_web_archive_snapshot(current_user, bookmark, True)
-        # Only update website metadata if URL changed
-        _update_website_metadata(bookmark)
-        bookmark.save()

    return bookmark


+def enhance_with_website_metadata(bookmark: Bookmark):
+    metadata = website_loader.load_website_metadata(bookmark.url)
+    if not bookmark.title:
+        bookmark.title = metadata.title or ""
+
+    if not bookmark.description:
+        bookmark.description = metadata.description or ""
+
+    bookmark.save()
+
+
 def archive_bookmark(bookmark: Bookmark):
    bookmark.is_archived = True
    bookmark.date_modified = timezone.now()
@@ -235,12 +241,6 @@ def _merge_bookmark_data(from_bookmark: Bookmark, to_bookmark: Bookmark):
    to_bookmark.shared = from_bookmark.shared


-def _update_website_metadata(bookmark: Bookmark):
-    metadata = website_loader.load_website_metadata(bookmark.url)
-    bookmark.website_title = metadata.title
-    bookmark.website_description = metadata.description
-
-
 def _update_bookmark_tags(bookmark: Bookmark, tag_string: str, user: User):
    tag_names = parse_tag_string(tag_string)

--- a/bookmarks/services/exporter.py
+++ b/bookmarks/services/exporter.py
@@ -40,9 +40,10 @@ def append_bookmark(doc: BookmarkDocument, bookmark: Bookmark):
    toread = "1" if bookmark.unread else "0"
    private = "0" if bookmark.shared else "1"
    added = int(bookmark.date_added.timestamp())
+    modified = int(bookmark.date_modified.timestamp())

    doc.append(
-        f'<DT><A HREF="{url}" ADD_DATE="{added}" PRIVATE="{private}" TOREAD="{toread}" TAGS="{tags}">{title}</A>'
+        f'<DT><A HREF="{url}" ADD_DATE="{added}" LAST_MODIFIED="{modified}" PRIVATE="{private}" TOREAD="{toread}" TAGS="{tags}">{title}</A>'
    )

    if desc:
--- a/bookmarks/services/importer.py
+++ b/bookmarks/services/importer.py
@@ -231,7 +231,10 @@ def _copy_bookmark_data(
        bookmark.date_added = parse_timestamp(netscape_bookmark.date_added)
    else:
        bookmark.date_added = timezone.now()
-    bookmark.date_modified = bookmark.date_added
+    if netscape_bookmark.date_modified:
+        bookmark.date_modified = parse_timestamp(netscape_bookmark.date_modified)
+    else:
+        bookmark.date_modified = bookmark.date_added
    bookmark.unread = netscape_bookmark.to_read
    if netscape_bookmark.title:
        bookmark.title = netscape_bookmark.title
--- a/bookmarks/services/parser.py
+++ b/bookmarks/services/parser.py
@@ -12,6 +12,7 @@ class NetscapeBookmark:
    description: str
    notes: str
    date_added: str
+    date_modified: str
    tag_names: List[str]
    to_read: bool
    private: bool
@@ -27,6 +28,7 @@ class BookmarkParser(HTMLParser):
        self.bookmark = None
        self.href = ""
        self.add_date = ""
+        self.last_modified = ""
        self.tags = ""
        self.title = ""
        self.description = ""
@@ -72,6 +74,7 @@ class BookmarkParser(HTMLParser):
            description="",
            notes="",
            date_added=self.add_date,
+            date_modified=self.last_modified,
            tag_names=tag_names,
            to_read=self.toread == "1",
            # Mark as private by default, also when attribute is not specified
@@ -97,6 +100,7 @@ class BookmarkParser(HTMLParser):
        self.bookmark = None
        self.href = ""
        self.add_date = ""
+        self.last_modified = ""
        self.tags = ""
        self.title = ""
        self.description = ""
--- a/bookmarks/services/website_loader.py
+++ b/bookmarks/services/website_loader.py
@@ -14,8 +14,8 @@ logger = logging.getLogger(__name__)
@dataclass
 class WebsiteMetadata:
    url: str
-    title: str
-    description: str
+    title: str | None
+    description: str | None
    preview_image: str | None

    def to_dict(self):
@@ -43,7 +43,8 @@ def load_website_metadata(url: str):
        start = timezone.now()
        soup = BeautifulSoup(page_text, "html.parser")

-        title = soup.title.string.strip() if soup.title is not None else None
+        if soup.title and soup.title.string:
+            title = soup.title.string.strip()
        description_tag = soup.find("meta", attrs={"name": "description"})
        description = (
            description_tag["content"].strip()
--- a/bookmarks/static/preview-placeholder.svg
+++ b/bookmarks/static/preview-placeholder.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>
--- a/bookmarks/static/robots.txt
+++ b/bookmarks/static/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/bookmarks/styles/bookmark-details.css
+++ b/bookmarks/styles/bookmark-details.css
@@ -1,12 +1,5 @@
 /* Common styles */
 .bookmark-details {
-  & h2 {
-    flex: 1 1 0;
-    align-items: flex-start;
-    font-size: 1rem;
-    margin: 0;
-  }
-
  & .weblinks {
    display: flex;
    flex-direction: column;
@@ -19,7 +12,8 @@
    gap: var(--unit-2);
  }

-  & a.weblink img, & a.weblink svg {
+  & a.weblink img,
+  & a.weblink svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
@@ -34,7 +28,7 @@
  }

  & .preview-image {
-    margin: var(--unit-4 0);
+    margin: var(--unit-4) 0;

    img {
      max-width: 100%;
@@ -42,8 +36,14 @@
    }
  }

-  & dl {
-    margin-bottom: 0;
+  & .sections section {
+    margin-top: var(--unit-4);
+  }
+
+  & .sections h3 {
+    margin-bottom: var(--unit-2);
+    font-size: var(--font-size);
+    font-weight: bold;
  }

  & .assets {
@@ -117,7 +117,8 @@
    gap: var(--unit-2);
  }

-  & .status .form-group, .status .form-switch {
+  & .status .form-group,
+  .status .form-switch {
    margin: 0;
  }

@@ -134,17 +135,3 @@
  flex-direction: column;
  gap: var(--unit-6);
 }
-
-/* Bookmark details modal specific */
-.bookmark-details.modal {
-  & .modal-header {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--unit-2);
-  }
-
-  & .modal-body {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
--- a/bookmarks/styles/bookmark-form.css
+++ b/bookmarks/styles/bookmark-form.css
@@ -6,32 +6,23 @@
 }

 .bookmarks-form {
-  & .btn.btn-link.form-icon {
-    padding: 0;
-    width: 20px;
-    height: 20px;
-    visibility: hidden;
-    --btn-icon-color: var(--tertiary-text-color);
-
-    & > svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  & .has-icon-right > input, & .has-icon-right > textarea {
+  & .has-icon-right > input,
+  & .has-icon-right > textarea {
    padding-right: 30px;
  }

-  & .has-icon-right > input:placeholder-shown ~ .btn.form-icon,
-  & .has-icon-right > textarea:placeholder-shown ~ .btn.form-icon {
-    visibility: visible;
-  }
-
  & .form-icon.loading {
    visibility: hidden;
  }

+  & .form-group .clear-button {
+    display: none;
+    padding: 0;
+    border: none;
+    height: auto;
+    font-size: var(--font-size-sm);
+  }
+
  & .form-input-hint.bookmark-exists {
    display: none;
    color: var(--warning-color);
@@ -45,4 +36,4 @@
  & details.notes textarea {
    box-sizing: border-box;
  }
-}
+}
--- a/bookmarks/styles/bookmark-page.css
+++ b/bookmarks/styles/bookmark-page.css
@@ -1,457 +1,554 @@
 :root {
-    --bookmark-title-color: var(--primary-text-color);
-    --bookmark-title-weight: 500;
-    --bookmark-description-color: var(--text-color);
-    --bookmark-description-weight: 400;
-    --bookmark-actions-color: var(--secondary-text-color);
-    --bookmark-actions-hover-color: var(--text-color);
-    --bookmark-actions-weight: 400;
-    --bulk-actions-bg-color: var(--gray-50);
+  --bookmark-title-color: var(--primary-text-color);
+  --bookmark-title-weight: 500;
+  --bookmark-description-color: var(--text-color);
+  --bookmark-description-weight: 400;
+  --bookmark-actions-color: var(--secondary-text-color);
+  --bookmark-actions-hover-color: var(--text-color);
+  --bookmark-actions-weight: 400;
+  --bulk-actions-bg-color: var(--gray-50);
 }

 /* Bookmark page grid */
-.bookmarks-page.grid {
+.bookmarks-page {
+  &.grid {
    grid-gap: var(--unit-9);
+  }
+
+  [ld-filter-drawer-trigger] {
+    display: none;
+  }
+
+  @media (max-width: 840px) {
+    section.side-panel {
+      display: none;
+    }
+
+    [ld-filter-drawer-trigger] {
+      display: inline-block;
+    }
+  }
+
+  &.collapse-side-panel {
+    section.main {
+      grid-column: span var(--grid-columns);
+    }
+
+    section.side-panel {
+      display: none;
+    }
+
+    [ld-filter-drawer-trigger] {
+      display: inline-block;
+    }
+  }
 }

 /* Bookmark area header controls */
 .bookmarks-page .search-container {
-    flex: 1 1 0;
-    display: flex;
-    max-width: 300px;
-    margin-left: auto;
+  flex: 1 1 0;
+  display: flex;
+  max-width: 300px;
+  margin-left: auto;

-    & form {
-        width: 100%;
-    }
+  & form {
+    width: 100%;
+  }

-    @media (max-width: 600px) {
-        max-width: initial;
-        margin-left: 0;
-    }
+  @media (max-width: 600px) {
+    max-width: initial;
+    margin-left: 0;
+  }

-    /* Regular input */
+  /* Regular input */

-    & input[type='search'] {
-        height: var(--control-size);
-        -webkit-appearance: none;
-    }
-
-    /* Enhanced auto-complete input */
-    /* This needs a bit more wrangling to make the CSS component align with the attached button */
-
-    & .form-autocomplete {
-        height: var(--control-size);
-
-        & .form-autocomplete-input {
-            width: 100%;
-            height: var(--control-size);
-
-            & input[type='search'] {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                border: none;
-            }
-        }
-    }
-
-    /* Group search options button with search button */
+  & input[type="search"] {
    height: var(--control-size);
-    border-radius: var(--border-radius);
-    box-shadow: var(--box-shadow-xs);
+    -webkit-appearance: none;
+  }

-    & input, & .form-autocomplete-input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        box-shadow: none;
+  /* Enhanced auto-complete input */
+  /* This needs a bit more wrangling to make the CSS component align with the attached button */
+
+  & .form-autocomplete {
+    height: var(--control-size);
+
+    & .form-autocomplete-input {
+      width: 100%;
+      height: var(--control-size);
+
+      & input[type="search"] {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        border: none;
+      }
+    }
+  }
+
+  /* Group search options button with search button */
+  height: var(--control-size);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-xs);
+
+  & input,
+  & .form-autocomplete-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    box-shadow: none;
+  }
+
+  & .dropdown-toggle {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    box-shadow: none;
+    outline-offset: calc(var(--focus-outline-offset) * -1);
+  }
+
+  /* Search option menu styles */
+
+  & .dropdown {
+    & .menu {
+      padding: var(--unit-4);
+      min-width: 250px;
+      font-size: var(--font-size-sm);
    }

-    & .dropdown-toggle {
-        border-left: none;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        box-shadow: none;
-        outline-offset: calc(var(--focus-outline-offset) * -1);
+    & .menu .actions {
+      margin-top: var(--unit-4);
+      display: flex;
+      justify-content: space-between;
    }

-    /* Search option menu styles */
-
-    & .dropdown {
-        & .menu {
-            padding: var(--unit-4);
-            min-width: 250px;
-            font-size: var(--font-size-sm);
-        }
-
-        & .menu .actions {
-            margin-top: var(--unit-4);
-            display: flex;
-            justify-content: space-between;
-        }
-
-        & .form-group:first-of-type {
-            margin-top: 0;
-        }
-
-        & .form-group {
-            margin-bottom: var(--unit-3);
-        }
-
-        & .radio-group {
-            & .form-label {
-                margin-bottom: var(--unit-1);
-            }
-
-            & .form-radio.form-inline {
-                margin: 0 var(--unit-2) 0 0;
-                padding: 0;
-                display: inline-flex;
-                align-items: center;
-                column-gap: var(--unit-1);
-            }
-
-            & .form-icon {
-                top: 0;
-                position: relative;
-            }
-        }
+    & .form-group:first-of-type {
+      margin-top: 0;
    }
+
+    & .form-group {
+      margin-bottom: var(--unit-3);
+    }
+
+    & .radio-group {
+      & .form-label {
+        margin-bottom: var(--unit-1);
+      }
+
+      & .form-radio.form-inline {
+        margin: 0 var(--unit-2) 0 0;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        column-gap: var(--unit-1);
+      }
+
+      & .form-icon {
+        top: 0;
+        position: relative;
+      }
+    }
+  }
 }

 /* Bookmark list */
 ul.bookmark-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;

-    /* Increase line-height for better separation within / between items */
-    line-height: 1.1rem;
+  /* Increase line-height for better separation within / between items */
+  line-height: 1.1rem;
 }

@keyframes appear {
-    0% {
-        opacity: 0;
-    }
-    90% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  90% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }

 /* Bookmarks */
 li[ld-bookmark-item] {
+  position: relative;
+  display: flex;
+  gap: var(--unit-2);
+  margin-top: 0;
+  margin-bottom: var(--unit-3);
+
+  & .content {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  & .preview-image {
+    flex: 0 0 auto;
+    width: 100px;
+    height: 60px;
+    margin-top: var(--unit-h);
+    border-radius: var(--border-radius);
+    border: solid 1px var(--border-color);
+    object-fit: cover;
+
+    &.placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--body-color-contrast);
+
+      & .img {
+        width: var(--unit-12);
+        height: var(--unit-12);
+        background-color: var(--tertiary-text-color);
+        -webkit-mask: url(preview-placeholder.svg) no-repeat center;
+        mask: url(preview-placeholder.svg) no-repeat center;
+      }
+    }
+  }
+
+  & .form-checkbox.bulk-edit-checkbox {
+    display: none;
+  }
+
+  & .title {
    position: relative;
+  }
+
+  & .title img {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  & .title img + a {
+    padding-left: 22px;
+  }
+
+  & .title a {
+    color: var(--bookmark-title-color);
+    font-weight: var(--bookmark-title-weight);
+    display: block;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & .title a[data-tooltip]:hover::after,
+  & .title a[data-tooltip]:focus::after {
+    content: attr(data-tooltip);
+    position: absolute;
+    z-index: 10;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: max-content;
+    max-width: 90%;
+    height: fit-content;
+    background-color: #292f62;
+    color: #fff;
+    padding: var(--unit-1);
+    border-radius: var(--border-radius);
+    border: 1px solid #424a8c;
+    font-size: var(--font-size-sm);
+    font-style: normal;
+    white-space: normal;
+    pointer-events: none;
+    animation: 0.3s ease 0s appear;
+  }
+
+  @media (pointer: coarse) {
+    & .title a[data-tooltip]::after {
+      display: none;
+    }
+  }
+
+  &.unread .title a {
+    font-style: italic;
+  }
+
+  & .url-path,
+  & .url-display {
+    font-size: var(--font-size-sm);
+    color: var(--secondary-link-color);
+  }
+
+  & .description {
+    color: var(--bookmark-description-color);
+    font-weight: var(--bookmark-description-weight);
+  }
+
+  & .description.separate {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--ld-bookmark-description-max-lines, 1);
+    overflow: hidden;
+  }
+
+  & .tags {
+    & a,
+    & a:visited:hover {
+      color: var(--alternative-color);
+    }
+  }
+
+  & .actions,
+  & .extra-actions {
    display: flex;
-    gap: var(--unit-2);
-    margin-top: 0;
-    margin-bottom: var(--unit-3);
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: var(--unit-2);
+  }

-    & .content {
-        flex: 1 1 0;
-        min-width: 0;
+  @media (max-width: 600px) {
+    & .extra-actions {
+      width: 100%;
+      margin-top: var(--unit-1);
    }
+  }

-    & img.preview-image {
-        flex: 0 0 auto;
-        width: 100px;
-        height: 60px;
-        margin-top: var(--unit-h);
-        object-fit: cover;
-        border-radius: var(--border-radius);
-        border: solid 1px var(--border-color);
-    }
-
-    & .form-checkbox.bulk-edit-checkbox {
-        display: none;
-    }
-
-    & .title {
-        position: relative;
-    }
-
-    & .title img {
-        position: absolute;
-        width: 16px;
-        height: 16px;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        pointer-events: none;
-    }
-
-    & .title img + a {
-        padding-left: 22px;
-    }
-
-    & .title a {
-        color: var(--bookmark-title-color);
-        font-weight: var(--bookmark-title-weight);
-        display: block;
-        width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    & .title a[data-tooltip]:hover::after, & .title a[data-tooltip]:focus::after {
-        content: attr(data-tooltip);
-        position: absolute;
-        z-index: 10;
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        width: max-content;
-        max-width: 90%;
-        height: fit-content;
-        background-color: #292f62;
-        color: #fff;
-        padding: var(--unit-1);
-        border-radius: var(--border-radius);
-        border: 1px solid #424a8c;
-        font-size: var(--font-size-sm);
-        font-style: normal;
-        white-space: normal;
-        pointer-events: none;
-        animation: 0.3s ease 0s appear;
-    }
-
-    @media (pointer: coarse) {
-        & .title a[data-tooltip]::after {
-            display: none;
-        }
-    }
-
-    &.unread .title a {
-        font-style: italic;
-    }
-
-    & .url-path, & .url-display {
-        font-size: var(--font-size-sm);
-        color: var(--secondary-link-color);
-    }
-
-    & .description {
-        color: var(--bookmark-description-color);
-        font-weight: var(--bookmark-description-weight);
-    }
-
-    & .description.separate {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: var(--ld-bookmark-description-max-lines, 1);
-        overflow: hidden;
-    }
-
-    & .tags {
-        & a, & a:visited:hover {
-            color: var(--alternative-color);
-        }
-    }
-
-    & .actions, & .extra-actions {
-        display: flex;
-        align-items: baseline;
-        flex-wrap: wrap;
-        column-gap: var(--unit-2);
-    }
-
-    @media (max-width: 600px) {
-        & .extra-actions {
-            width: 100%;
-            margin-top: var(--unit-1);
-        }
-    }
-
-    & .actions {
-        color: var(--bookmark-actions-color);
-        font-size: var(--font-size-sm);
-
-        & a, & button.btn-link {
-            color: var(--bookmark-actions-color);
-            --btn-icon-color: var(--bookmark-actions-color);
-            font-weight: var(--bookmark-actions-weight);
-            padding: 0;
-            height: auto;
-            vertical-align: unset;
-            border: none;
-            box-sizing: border-box;
-            transition: none;
-            text-decoration: none;
-
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-                color: var(--bookmark-actions-hover-color);
-                --btn-icon-color: var(--bookmark-actions-hover-color);
-            }
-        }
+  & .actions {
+    color: var(--bookmark-actions-color);
+    font-size: var(--font-size-sm);
+
+    & a,
+    & button.btn-link {
+      color: var(--bookmark-actions-color);
+      --btn-icon-color: var(--bookmark-actions-color);
+      font-weight: var(--bookmark-actions-weight);
+      padding: 0;
+      height: auto;
+      vertical-align: unset;
+      border: none;
+      box-sizing: border-box;
+      transition: none;
+      text-decoration: none;
+
+      &:focus,
+      &:hover,
+      &:active,
+      &.active {
+        color: var(--bookmark-actions-hover-color);
+        --btn-icon-color: var(--bookmark-actions-hover-color);
+      }
    }
+  }
 }

 .bookmark-pagination {
-    margin-top: var(--unit-4);
+  margin-top: var(--unit-4);

-    /* Remove left padding from first pagination link */
+  /* Remove left padding from first pagination link */

-    & .page-item:first-child a {
-        padding-left: 0;
+  & .page-item:first-child a {
+    padding-left: 0;
+  }
+
+  &.sticky {
+    position: sticky;
+    bottom: 0;
+    border-top: solid 1px var(--secondary-border-color);
+    background: var(--body-color);
+    padding-bottom: var(--unit-h);
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: calc(
+        -1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset))
+      );
+      width: calc(
+        var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset)
+      );
+      background: var(--body-color);
    }
+  }
+
+  & .pagination {
+    overflow: hidden;
+  }
 }

 .tag-cloud {
-    /* Increase line-height for better separation within / between items */
-    line-height: 1.1rem;
+  /* Increase line-height for better separation within / between items */
+  line-height: 1.1rem;

-    & .selected-tags {
-        margin-bottom: var(--unit-4);
+  & .selected-tags {
+    margin-bottom: var(--unit-4);

-        & a,
-        & a:visited:hover {
-            color: var(--error-color);
-        }
+    & a,
+    & a:visited:hover {
+      color: var(--error-color);
    }
+  }

-    & .unselected-tags {
-        & a,
-        & a:visited:hover {
-            color: var(--alternative-color);
-        }
+  & .unselected-tags {
+    & a,
+    & a:visited:hover {
+      color: var(--alternative-color);
    }
+  }

-    & .group {
-        margin-bottom: var(--unit-3);
-    }
+  & .group {
+    margin-bottom: var(--unit-3);
+  }

-    & .highlight-char {
-        font-weight: bold;
-        text-transform: uppercase;
-        color: var(--alternative-color-dark);
-    }
+  & .highlight-char {
+    font-weight: bold;
+    text-transform: uppercase;
+    color: var(--alternative-color-dark);
+  }
 }

 /* Bookmark notes */
 ul.bookmark-list {
-    & .notes {
-        display: none;
-        max-height: 300px;
-        margin: var(--unit-1) 0;
-        overflow-y: auto;
-        background: var(--body-color-contrast);
-        border-radius: var(--border-radius);
-    }
+  & .notes {
+    display: none;
+    max-height: 300px;
+    margin: var(--unit-1) 0;
+    overflow-y: auto;
+    background: var(--body-color-contrast);
+    border-radius: var(--border-radius);
+  }

-    & .notes .markdown {
-        padding: var(--unit-2) var(--unit-3);
-    }
+  & .notes .markdown {
+    padding: var(--unit-2) var(--unit-3);
+  }

-    &.show-notes .notes,
-    & li.show-notes .notes {
-        display: block;
-    }
+  &.show-notes .notes,
+  & li.show-notes .notes {
+    display: block;
+  }
 }

 /* Bookmark bulk edit */
 :root {
-    --bulk-edit-toggle-width: 16px;
-    --bulk-edit-toggle-offset: 8px;
-    --bulk-edit-bar-offset: calc(var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset)));
-    --bulk-edit-transition-duration: 400ms;
+  --bulk-edit-toggle-width: 16px;
+  --bulk-edit-toggle-offset: 8px;
+  --bulk-edit-bar-offset: calc(
+    var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset))
+  );
+  --bulk-edit-transition-duration: 400ms;
 }

 [ld-bulk-edit] {
-    & .bulk-edit-bar {
-        margin-top: -1px;
-        margin-left: calc(-1 * var(--bulk-edit-bar-offset));
-        margin-bottom: var(--unit-4);
-        max-height: 0;
-        overflow: hidden;
-        transition: max-height var(--bulk-edit-transition-duration);
-        background: var(--bulk-actions-bg-color);
+  & .bulk-edit-bar {
+    margin-top: -1px;
+    margin-left: calc(-1 * var(--bulk-edit-bar-offset));
+    margin-bottom: var(--unit-4);
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height var(--bulk-edit-transition-duration);
+    background: var(--bulk-actions-bg-color);
+  }
+
+  &.active .bulk-edit-bar {
+    max-height: 37px;
+    border-bottom: solid 1px var(--secondary-border-color);
+  }
+
+  /* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */
+
+  &.active section:first-of-type .content-area-header {
+    border-bottom-color: transparent;
+  }
+
+  /* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
+
+  &.active:not(.activating) .bulk-edit-bar {
+    overflow: visible;
+  }
+
+  /* make sticky pagination expand to cover checkboxes to the left */
+
+  &.active .bookmark-pagination.sticky:before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    bottom: 0;
+    left: calc(
+      -1 * calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset))
+    );
+    width: calc(var(--bulk-edit-toggle-width) + var(--bulk-edit-toggle-offset));
+    background: var(--body-color);
+    border-top: solid 1px var(--secondary-border-color);
+  }
+
+  /* All checkbox */
+
+  & .form-checkbox.bulk-edit-checkbox.all {
+    display: block;
+    width: var(--bulk-edit-toggle-width);
+    margin: 0 0 0 var(--bulk-edit-toggle-offset);
+    padding: 0;
+  }
+
+  /* Bookmark checkboxes */
+
+  & li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
+    display: block;
+    position: absolute;
+    width: var(--bulk-edit-toggle-width);
+    min-height: var(--bulk-edit-toggle-width);
+    left: calc(
+      -1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset)
+    );
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0;
+    margin: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: all var(--bulk-edit-transition-duration);
+
+    .form-icon {
+      top: 0;
+    }
+  }
+
+  &.active li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  /* Actions */
+
+  & .bulk-edit-actions {
+    display: flex;
+    align-items: center;
+    padding: var(--unit-1) 0;
+    border-top: solid 1px var(--secondary-border-color);
+    gap: var(--unit-2);
+
+    & button {
+      --control-padding-x-sm: 0;
    }

-    &.active .bulk-edit-bar {
-        max-height: 37px;
-        border-bottom: solid 1px var(--secondary-border-color);
+    & button:hover {
+      text-decoration: underline;
    }

-    /* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */
-    &.active section:first-of-type .content-area-header {
-        border-bottom-color: transparent;
+    & > input,
+    & .form-autocomplete,
+    & select {
+      width: auto;
+      max-width: 140px;
+      -webkit-appearance: none;
    }

-    /* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
-
-    &.active:not(.activating) .bulk-edit-bar {
-        overflow: visible;
-    }
-
-    /* All checkbox */
-
-    & .form-checkbox.bulk-edit-checkbox.all {
-        display: block;
-        width: var(--bulk-edit-toggle-width);
-        margin: 0 0 0 var(--bulk-edit-toggle-offset);
-        padding: 0;
-    }
-
-    /* Bookmark checkboxes */
-
-    & li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
-        display: block;
-        position: absolute;
-        width: var(--bulk-edit-toggle-width);
-        min-height: var(--bulk-edit-toggle-width);
-        left: calc(-1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset));
-        top: 50%;
-        transform: translateY(-50%);
-        padding: 0;
-        margin: 0;
-        visibility: hidden;
-        opacity: 0;
-        transition: all var(--bulk-edit-transition-duration);
-
-        .form-icon {
-            top: 0;
-        }
-    }
-
-    &.active li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
-        visibility: visible;
-        opacity: 1;
-    }
-
-    /* Actions */
-
-    & .bulk-edit-actions {
-        display: flex;
-        align-items: center;
-        padding: var(--unit-1) 0;
-        border-top: solid 1px var(--secondary-border-color);
-        gap: var(--unit-2);
-
-        & button {
-            --control-padding-x-sm: 0;
-        }
-
-        & button:hover {
-            text-decoration: underline;
-        }
-
-        & > input,
-        & .form-autocomplete,
-        & select {
-            width: auto;
-            max-width: 140px;
-            -webkit-appearance: none;
-        }
-
-        & .select-across {
-            margin: 0 0 0 auto;
-            font-size: var(--font-size-sm);
-        }
+    & .select-across {
+      margin: 0 0 0 auto;
+      font-size: var(--font-size-sm);
    }
+  }
 }
--- a/bookmarks/styles/components.css
+++ b/bookmarks/styles/components.css
@@ -2,64 +2,66 @@

 /* Content area component */
 section.content-area {
-    h2 {
-        font-size: var(--font-size-lg);
+  h2,
+  h3 {
+    font-size: var(--font-size-lg);
+  }
+
+  .content-area-header {
+    border-bottom: solid 1px var(--secondary-border-color);
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: var(--unit-5);
+    padding-bottom: var(--unit-2);
+    margin-bottom: var(--unit-4);
+
+    h2,
+    h3 {
+      flex: 0 0 auto;
+      line-height: var(--unit-9);
+      margin: 0;
    }

-    .content-area-header {
-        border-bottom: solid 1px var(--secondary-border-color);
-        display: flex;
-        flex-wrap: wrap;
-        column-gap: var(--unit-5);
-        padding-bottom: var(--unit-2);
-        margin-bottom: var(--unit-4);
-
-        h2 {
-            flex: 0 0 auto;
-            line-height: var(--unit-9);
-            margin: 0;
-        }
-
-        .header-controls {
-            flex: 1 1 0;
-            display: flex;
-        }
+    .header-controls {
+      flex: 1 1 0;
+      display: flex;
    }
+  }
 }

@media (max-width: 600px) {
-    section.content-area .content-area-header {
-        flex-direction: column;
-    }
+  section.content-area .content-area-header {
+    flex-direction: column;
+  }
 }

 /* Confirm button component */
 span.confirmation {
-    display: flex;
-    align-items: baseline;
-    gap: var(--unit-1);
+  display: flex;
+  align-items: baseline;
+  gap: var(--unit-1);
+  color: var(--error-color) !important;
+
+  svg {
+    align-self: center;
+  }
+
+  .btn.btn-link {
    color: var(--error-color) !important;

-    svg {
-        align-self: center;
-    }
-
-    .btn.btn-link {
-        color: var(--error-color) !important;
-
-        &:hover {
-            text-decoration: underline;
-        }
+    &:hover {
+      text-decoration: underline;
    }
+  }
 }

 /* Divider */
 .divider {
-    border-bottom: solid 1px var(--secondary-border-color);
-    margin: var(--unit-5) 0;
+  border-bottom: solid 1px var(--secondary-border-color);
+  margin: var(--unit-5) 0;
 }

 /* Turbo progress bar */
 .turbo-progress-bar {
-    background-color: var(--primary-color);
+  background-color: var(--primary-color);
 }
--- a/bookmarks/styles/layout.css
+++ b/bookmarks/styles/layout.css
@@ -1,39 +1,39 @@
 /* Main layout */
 body {
-    margin: 20px 10px;
+  margin: 20px 10px;

-    @media (min-width: 600px) {
-        /* Horizontal offset accounts for checkboxes that show up in bulk edit mode */
-        margin: 20px 32px;
-    }
+  @media (min-width: 600px) {
+    /* Horizontal offset accounts for checkboxes that show up in bulk edit mode */
+    margin: 20px 32px;
+  }
 }

 header {
-    margin-bottom: var(--unit-9);
+  margin-bottom: var(--unit-9);

-    .logo {
-        width: 28px;
-        height: 28px;
-    }
+  .logo {
+    width: 28px;
+    height: 28px;
+  }

-    a:hover {
-        text-decoration: none;
-    }
+  a:hover {
+    text-decoration: none;
+  }

-    h1 {
-        margin: 0 0 0 var(--unit-3);
-        font-size: var(--font-size-lg);
-    }
+  h1 {
+    margin: 0 0 0 var(--unit-3);
+    font-size: var(--font-size-lg);
+  }
 }

 header .toasts {
-    margin-bottom: 20px;
+  margin-bottom: 20px;

-    .toast {
-        margin-bottom: 0.4rem;
-    }
+  .toast {
+    margin-bottom: 0.4rem;
+  }

-    .toast a.btn-clear:visited {
-        color: currentColor;
-    }
+  .toast a.btn-clear:visited {
+    color: currentColor;
+  }
 }
--- a/bookmarks/styles/markdown.css
+++ b/bookmarks/styles/markdown.css
@@ -1,40 +1,46 @@
 .markdown {
-    & p, & ul, & ol, & pre, & blockquote {
-        margin: 0 0 var(--unit-2) 0;
-    }
+  & p,
+  & ul,
+  & ol,
+  & pre,
+  & blockquote {
+    margin: 0 0 var(--unit-2) 0;
+  }

-    & > *:first-child {
-        margin-top: 0;
-    }
+  & > *:first-child {
+    margin-top: 0;
+  }

-    & > *:last-child {
-        margin-bottom: 0;
-    }
+  & > *:last-child {
+    margin-bottom: 0;
+  }

-    & ul, & ol {
-        margin-left: var(--unit-4);
-    }
+  & ul,
+  & ol {
+    margin-left: var(--unit-4);
+  }

-    & ul li, & ol li {
-        margin-top: var(--unit-1);
-    }
+  & ul li,
+  & ol li {
+    margin-top: var(--unit-1);
+  }

-    & pre {
-        padding: var(--unit-1) var(--unit-2);
-        background-color: var(--code-bg-color);
-        border-radius: var(--unit-1);
-        overflow-x: auto;
-    }
+  & pre {
+    padding: var(--unit-1) var(--unit-2);
+    background-color: var(--code-bg-color);
+    border-radius: var(--unit-1);
+    overflow-x: auto;
+  }

-    & pre code {
-        background: none;
-        box-shadow: none;
-        padding: 0;
-    }
+  & pre code {
+    background: none;
+    box-shadow: none;
+    padding: 0;
+  }

-    & > pre:first-child:last-child {
-        padding: 0;
-        background: none;
-        border-radius: 0;
-    }
+  & > pre:first-child:last-child {
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
 }
--- a/bookmarks/styles/reader-mode.css
+++ b/bookmarks/styles/reader-mode.css
@@ -24,4 +24,3 @@ html.reader-mode {
    height: auto;
  }
 }
-
--- a/bookmarks/styles/settings.css
+++ b/bookmarks/styles/settings.css
@@ -12,7 +12,7 @@
    box-sizing: border-box;
  }

-  .input-group > input[type=submit] {
+  .input-group > input[type="submit"] {
    height: auto;
  }

--- a/bookmarks/styles/theme-dark.css
+++ b/bookmarks/styles/theme-dark.css
@@ -1,143 +1,150 @@
@import "theme-light.css";

 :root {
-    /* Color palette */
-    --contrast-5: hsla(241, 65%, 85%, 0.06);
-    --contrast-10: hsla(241, 60%, 80%, 0.14);
-    --contrast-20: hsla(241, 64%, 82%, 0.23);
-    --contrast-30: hsla(241, 69%, 84%, 0.32);
-    --contrast-40: hsla(241, 73%, 86%, 0.41);
-    --contrast-50: hsla(241, 78%, 88%, 0.5);
-    --contrast-60: hsla(241, 82%, 90%, 0.58);
-    --contrast-70: hsla(241, 87%, 92%, 0.69);
-    --contrast-80: hsla(241, 91%, 94%, 0.8);
-    --contrast-90: hsla(241, 96%, 96%, 0.9);
+  /* Color palette */
+  --contrast-5: hsla(241, 65%, 85%, 0.06);
+  --contrast-10: hsla(241, 60%, 80%, 0.14);
+  --contrast-20: hsla(241, 64%, 82%, 0.23);
+  --contrast-30: hsla(241, 69%, 84%, 0.32);
+  --contrast-40: hsla(241, 73%, 86%, 0.41);
+  --contrast-50: hsla(241, 78%, 88%, 0.5);
+  --contrast-60: hsla(241, 82%, 90%, 0.58);
+  --contrast-70: hsla(241, 87%, 92%, 0.69);
+  --contrast-80: hsla(241, 91%, 94%, 0.8);
+  --contrast-90: hsla(241, 96%, 96%, 0.9);

-    --primary-color: hsl(241, 75%, 64%);
-    --primary-color-highlight: hsl(241, 75%, 68%);
-    --primary-color-shade: hsl(241, 75%, 64%, 0.42);
+  --primary-color: hsl(241, 75%, 64%);
+  --primary-color-highlight: hsl(241, 75%, 68%);
+  --primary-color-shade: hsl(241, 75%, 64%, 0.42);

-    --alternative-color: hsl(179, 50%, 58%);
-    --alternative-color-dark: hsl(179, 80%, 75%);
+  --alternative-color: hsl(179, 50%, 58%);
+  --alternative-color-dark: hsl(179, 80%, 75%);

-    --success-color: hsl(142, 76%, 36%);
-    --success-color-highlight: hsl(142, 76%, 40%);
-    --success-color-shade: hsla(142, 76%, 36%, 0.1);
+  --success-color: hsl(142, 76%, 36%);
+  --success-color-highlight: hsl(142, 76%, 40%);
+  --success-color-shade: hsla(142, 76%, 36%, 0.1);

-    --warning-color: hsl(38, 92%, 50%);
-    --warning-color-highlight: hsl(38, 92%, 55%);
-    --warning-color-shade: hsla(38, 92%, 50%, 0.1);
+  --warning-color: hsl(38, 92%, 50%);
+  --warning-color-highlight: hsl(38, 92%, 55%);
+  --warning-color-shade: hsla(38, 92%, 50%, 0.1);

-    --error-color: hsl(0, 80%, 60%);
-    --error-color-highlight: hsl(0, 72%, 60%);
-    --error-color-shade: hsla(0, 72%, 51%, 0.1);
+  --error-color: hsl(0, 80%, 60%);
+  --error-color-highlight: hsl(0, 72%, 60%);
+  --error-color-shade: hsla(0, 72%, 51%, 0.1);

-    /* Core colors */
-    --text-color: var(--gray-300);
-    --secondary-text-color: var(--gray-400);
-    --tertiary-text-color: var(--gray-500);
-    --contrast-text-color: #fff;
-    --primary-text-color: hsl(241, 82%, 82%);
+  /* Core colors */
+  --text-color: var(--gray-300);
+  --secondary-text-color: var(--gray-400);
+  --tertiary-text-color: var(--gray-500);
+  --contrast-text-color: #fff;
+  --primary-text-color: hsl(241, 82%, 82%);

-    --link-color: var(--primary-text-color);
-    --secondary-link-color: hsla(241, 82%, 82%, 0.8);
+  --link-color: var(--primary-text-color);
+  --secondary-link-color: hsla(241, 82%, 82%, 0.8);

-    --icon-color: var(--text-color);
+  --icon-color: var(--text-color);

-    --border-color: var(--contrast-30);
-    --secondary-border-color: var(--contrast-20);
+  --border-color: var(--contrast-30);
+  --secondary-border-color: var(--contrast-20);

-    --body-color: hsl(241, 15%, 14%);
-    --body-color-contrast: var(--contrast-10);
+  --body-color: hsl(241, 15%, 14%);
+  --body-color-contrast: var(--contrast-10);

-    /* Focus */
-    --focus-outline: 2px solid hsl(241, 100%, 78%);
-    --focus-outline-offset: 2px;
+  /* Focus */
+  --focus-outline: 2px solid hsl(241, 100%, 78%);
+  --focus-outline-offset: 2px;

-    /* Shadows */
-    --box-shadow-xs: none;
-    --box-shadow: none;
-    --box-shadow-lg: none;
+  /* Shadows */
+  --box-shadow-xs: none;
+  --box-shadow: none;
+  --box-shadow-lg: none;
 }

 :root {
-    --input-bg-color: var(--contrast-5);
-    --input-disabled-bg-color: var(--contrast-30);
-    --input-text-color: var(--text-color);
-    --input-hint-color: var(--secondary-text-color);
-    --input-border-color: var(--border-color);
-    --input-placeholder-color: var(--tertiary-text-color);
-    --input-box-shadow: var(--box-shadow-xs);
+  --input-bg-color: var(--contrast-5);
+  --input-disabled-bg-color: var(--contrast-30);
+  --input-text-color: var(--text-color);
+  --input-hint-color: var(--secondary-text-color);
+  --input-border-color: var(--border-color);
+  --input-placeholder-color: var(--tertiary-text-color);
+  --input-box-shadow: var(--box-shadow-xs);

-    --checkbox-bg-color: var(--contrast-10);
-    --checkbox-checked-bg-color: var(--primary-color);
-    --checkbox-disabled-bg-color: var(--contrast-30);
-    --checkbox-border-color: var(--border-color);
-    --checkbox-icon-color: #fff;
+  --checkbox-bg-color: var(--contrast-10);
+  --checkbox-checked-bg-color: var(--primary-color);
+  --checkbox-disabled-bg-color: var(--contrast-30);
+  --checkbox-border-color: var(--border-color);
+  --checkbox-icon-color: #fff;

-    --switch-bg-color: var(--contrast-10);
-    --switch-border-color: var(--border-color);
-    --switch-toggle-color: var(--text-color);
+  --switch-bg-color: var(--contrast-10);
+  --switch-border-color: var(--border-color);
+  --switch-toggle-color: var(--text-color);
 }

 :root {
-    --btn-bg-color: var(--contrast-5);
-    --btn-hover-bg-color: var(--contrast-20);
-    --btn-border-color: var(--border-color);
-    --btn-text-color: var(--text-color);
-    --btn-icon-color: var(--icon-color);
-    --btn-font-weight: 400;
-    --btn-box-shadow: var(--box-shadow-xs);
+  --btn-bg-color: var(--contrast-5);
+  --btn-hover-bg-color: var(--contrast-20);
+  --btn-border-color: var(--border-color);
+  --btn-text-color: var(--text-color);
+  --btn-icon-color: var(--icon-color);
+  --btn-font-weight: 400;
+  --btn-box-shadow: var(--box-shadow-xs);

-    --btn-primary-bg-color: var(--primary-color);
-    --btn-primary-hover-bg-color: var(--primary-color-highlight);
-    --btn-primary-text-color: var(--contrast-text-color);
+  --btn-primary-bg-color: var(--primary-color);
+  --btn-primary-hover-bg-color: var(--primary-color-highlight);
+  --btn-primary-text-color: var(--contrast-text-color);

-    --btn-success-bg-color: var(--success-color);
-    --btn-success-hover-bg-color: var(--success-color-highlight);
-    --btn-success-text-color: var(--contrast-text-color);
+  --btn-success-bg-color: var(--success-color);
+  --btn-success-hover-bg-color: var(--success-color-highlight);
+  --btn-success-text-color: var(--contrast-text-color);

-    --btn-error-bg-color: var(--error-color);
-    --btn-error-hover-bg-color: var(--error-color-highlight);
-    --btn-error-text-color: var(--contrast-text-color);
+  --btn-error-bg-color: var(--error-color);
+  --btn-error-hover-bg-color: var(--error-color-highlight);
+  --btn-error-text-color: var(--contrast-text-color);

-    --btn-link-text-color: var(--link-color);
-    --btn-link-hover-text-color: var(--link-color);
+  --btn-link-text-color: var(--link-color);
+  --btn-link-hover-text-color: var(--link-color);
 }

 :root {
-    --modal-overlay-bg-color: hsla(229, 21%, 16%, 0.55);
-    --modal-container-bg-color: hsl(241, 20%, 20%);
-    --modal-container-border-color: var(--contrast-30);
-    --modal-border-radius: var(--border-radius-lg);
-    --modal-box-shadow: none;
+  --modal-overlay-bg-color: hsla(229, 21%, 16%, 0.55);
+  --modal-container-bg-color: hsl(241, 20%, 20%);
+  --modal-container-border-color: var(--contrast-30);
+  --modal-border-radius: var(--border-radius-lg);
+  --modal-box-shadow: none;
 }

 :root {
-    --menu-bg-color: hsl(241, 20%, 20%);
-    --menu-border-color: var(--contrast-30);
-    --menu-border-radius: var(--border-radius);
-    --menu-box-shadow: none;
-    --menu-item-color: var(--text-color);
-    --menu-item-hover-color: var(--text-color);
-    --menu-item-bg-color: transparent;
-    --menu-item-hover-bg-color: var(--contrast-20);
+  --menu-bg-color: hsl(241, 20%, 20%);
+  --menu-border-color: var(--contrast-30);
+  --menu-border-radius: var(--border-radius);
+  --menu-box-shadow: none;
+  --menu-item-color: var(--text-color);
+  --menu-item-hover-color: var(--text-color);
+  --menu-item-bg-color: transparent;
+  --menu-item-hover-bg-color: var(--contrast-20);
 }

 :root {
-    --tab-color: var(--text-color);
-    --tab-hover-color: var(--primary-text-color);
-    --tab-active-color: var(--primary-text-color);
-    --tab-highlight-color: var(--primary-text-color);
+  --tab-color: var(--text-color);
+  --tab-hover-color: var(--primary-text-color);
+  --tab-active-color: var(--primary-text-color);
+  --tab-highlight-color: var(--primary-text-color);
 }

 :root {
-    --bookmark-title-color: var(--primary-text-color);
-    --bookmark-title-weight: 500;
-    --bookmark-description-color: var(--text-color);
-    --bookmark-description-weight: 400;
-    --bookmark-actions-color: var(--secondary-text-color);
-    --bookmark-actions-hover-color: var(--text-color);
-    --bookmark-actions-weight: 400;
-    --bulk-actions-bg-color: var(--contrast-5);
-}
+  --bookmark-title-color: var(--primary-text-color);
+  --bookmark-title-weight: 500;
+  --bookmark-description-color: var(--text-color);
+  --bookmark-description-weight: 400;
+  --bookmark-actions-color: var(--secondary-text-color);
+  --bookmark-actions-hover-color: var(--text-color);
+  --bookmark-actions-weight: 400;
+  --bulk-actions-bg-color: var(--contrast-5);
+}
+
+/* Try to force dark color scheme for all native elements (e.g. upload button
+in file inputs, native select dropdown). For the select dropdown some browsers
+ignore this and use whatever users have configured in their system settings. */
+:root {
+  color-scheme: dark;
+}
--- a/bookmarks/styles/theme/_normalize.css
+++ b/bookmarks/styles/theme/_normalize.css
@@ -61,7 +61,8 @@ h1 {

 figcaption,
 figure,
-main { /* 1 */
+main {
+  /* 1 */
  display: block;
 }

@@ -256,7 +257,8 @@ textarea {
 */

 button,
-input { /* 1 */
+input {
+  /* 1 */
  overflow: visible;
 }

@@ -266,7 +268,8 @@ input { /* 1 */
 */

 button,
-select { /* 1 */
+select {
+  /* 1 */
  text-transform: none;
 }

@@ -299,7 +302,6 @@ button::-moz-focus-inner,
 * Restore the focus styles unset by the previous rule (removed).
 */

-
 /**
 * Change the border, margin, and padding in all browsers (opinionated) (changed).
 */
--- a/bookmarks/styles/theme/animations.css
+++ b/bookmarks/styles/theme/animations.css
@@ -1,38 +1,38 @@
 /* Animations */
@keyframes loading {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

@keyframes slide-down {
-    0% {
-        opacity: 0;
-        transform: translateY(calc(-1 * var(--unit-8)));
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+  0% {
+    opacity: 0;
+    transform: translateY(calc(-1 * var(--unit-8)));
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

@keyframes fade-in {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }

@keyframes fade-out {
-    0% {
-        opacity: 1;
-    }
-    100% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
--- a/bookmarks/styles/theme/asian.css
+++ b/bookmarks/styles/theme/asian.css
@@ -3,41 +3,41 @@ html:lang(zh),
 html:lang(zh-Hans),
 .lang-zh,
 .lang-zh-hans {
-    font-family: var(--cjk-zh-hans-font-family);
+  font-family: var(--cjk-zh-hans-font-family);
 }

 html:lang(zh-Hant),
 .lang-zh-hant {
-    font-family: var(--cjk-zh-hant-font-family);
+  font-family: var(--cjk-zh-hant-font-family);
 }

 html:lang(ja),
 .lang-ja {
-    font-family: var(--cjk-jp-font-family);
+  font-family: var(--cjk-jp-font-family);
 }

 html:lang(ko),
 .lang-ko {
-    font-family: var(--cjk-ko-font-family);
+  font-family: var(--cjk-ko-font-family);
 }

 :lang(zh),
 :lang(ja),
 .lang-cjk {
-    & ins,
-    & u {
-        border-bottom: var(--border-width) solid;
-        text-decoration: none;
-    }
+  & ins,
+  & u {
+    border-bottom: var(--border-width) solid;
+    text-decoration: none;
+  }

-    & del + del,
-    & del + s,
-    & ins + ins,
-    & ins + u,
-    & s + del,
-    & s + s,
-    & u + ins,
-    & u + u {
-        margin-left: .125em;
-    }
+  & del + del,
+  & del + s,
+  & ins + ins,
+  & ins + u,
+  & s + del,
+  & s + s,
+  & u + ins,
+  & u + u {
+    margin-left: 0.125em;
+  }
 }
--- a/bookmarks/styles/theme/autocomplete.css
+++ b/bookmarks/styles/theme/autocomplete.css
@@ -1,55 +1,57 @@
 /* Autocomplete */
 .form-autocomplete {
-    position: relative;
+  position: relative;

-    & .form-autocomplete-input {
-        align-content: flex-start;
-        display: flex;
-        flex-wrap: wrap;
-        height: auto;
-        min-height: var(--unit-8);
-        padding: var(--unit-h);
-        background: var(--input-bg-color);
+  & .form-autocomplete-input {
+    align-content: flex-start;
+    display: flex;
+    flex-wrap: wrap;
+    height: auto;
+    min-height: var(--unit-8);
+    padding: var(--unit-h);
+    background: var(--input-bg-color);

-        &.is-focused {
-            outline: var(--focus-outline);
-            outline-offset: calc(var(--focus-outline-offset) * -1);
-        }
-
-        & .form-input {
-            background: transparent;
-            border-color: transparent;
-            box-shadow: none;
-            display: inline-block;
-            flex: 1 0 auto;
-            height: var(--unit-6);
-            line-height: var(--unit-4);
-            margin: var(--unit-h);
-            width: auto;
-
-            &:focus {
-                outline: none;
-            }
-        }
+    &.is-focused {
+      outline: var(--focus-outline);
+      outline-offset: calc(var(--focus-outline-offset) * -1);
    }

-    & .menu {
-        left: 0;
-        position: absolute;
-        top: 100%;
-        width: 100%;
+    & .form-input {
+      background: transparent;
+      border-color: transparent;
+      box-shadow: none;
+      display: inline-block;
+      flex: 1 0 auto;
+      height: var(--unit-6);
+      line-height: var(--unit-4);
+      margin: var(--unit-h);
+      width: auto;

-        & .menu-item.selected > a, & .menu-item > a:hover {
-            background: var(--menu-item-hover-bg-color);
-            color: var(--menu-item-hover-color);
-        }
-
-        & .group-item, & .group-item:hover {
-            color: var(--tertiary-text-color);
-            text-transform: uppercase;
-            background: none;
-            font-size: 0.6rem;
-            font-weight: bold;
-        }
+      &:focus {
+        outline: none;
+      }
    }
-}
+  }
+
+  & .menu {
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+
+    & .menu-item.selected > a,
+    & .menu-item > a:hover {
+      background: var(--menu-item-hover-bg-color);
+      color: var(--menu-item-hover-color);
+    }
+
+    & .group-item,
+    & .group-item:hover {
+      color: var(--tertiary-text-color);
+      text-transform: uppercase;
+      background: none;
+      font-size: 0.6rem;
+      font-weight: bold;
+    }
+  }
+}
--- a/bookmarks/styles/theme/badges.css
+++ b/bookmarks/styles/theme/badges.css
@@ -1,64 +1,64 @@
 /* Badges */
 .badge {
-    position: relative;
-    white-space: nowrap;
+  position: relative;
+  white-space: nowrap;

-    &[data-badge],
-    &:not([data-badge]) {
-        &::after {
-            background: var(--primary-color);
-            background-clip: padding-box;
-            border-radius: .5rem;
-            box-shadow: 0 0 0 1px var(--body-color);
-            color: var(--contrast-text-color);
-            content: attr(data-badge);
-            display: inline-block;
-            transform: translate(-.05rem, -.5rem);
-        }
+  &[data-badge],
+  &:not([data-badge]) {
+    &::after {
+      background: var(--primary-color);
+      background-clip: padding-box;
+      border-radius: 0.5rem;
+      box-shadow: 0 0 0 1px var(--body-color);
+      color: var(--contrast-text-color);
+      content: attr(data-badge);
+      display: inline-block;
+      transform: translate(-0.05rem, -0.5rem);
    }
+  }

-    &[data-badge] {
-        &::after {
-            font-size: var(--font-size-sm);
-            height: .9rem;
-            line-height: 1;
-            min-width: .9rem;
-            padding: .1rem .2rem;
-            text-align: center;
-            white-space: nowrap;
-        }
+  &[data-badge] {
+    &::after {
+      font-size: var(--font-size-sm);
+      height: 0.9rem;
+      line-height: 1;
+      min-width: 0.9rem;
+      padding: 0.1rem 0.2rem;
+      text-align: center;
+      white-space: nowrap;
    }
+  }

-    &:not([data-badge]),
-    &[data-badge=""] {
-        &::after {
-            height: 6px;
-            min-width: 6px;
-            padding: 0;
-            width: 6px;
-        }
+  &:not([data-badge]),
+  &[data-badge=""] {
+    &::after {
+      height: 6px;
+      min-width: 6px;
+      padding: 0;
+      width: 6px;
    }
+  }

-    /* Badges for Buttons */
+  /* Badges for Buttons */

-    &.btn {
-        &::after {
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(50%, -50%);
-        }
+  &.btn {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
    }
+  }

-    /* Badges for Avatars */
+  /* Badges for Avatars */

-    &.avatar {
-        &::after {
-            position: absolute;
-            top: 14.64%;
-            right: 14.64%;
-            transform: translate(50%, -50%);
-            z-index: var(--zindex-1);
-        }
+  &.avatar {
+    &::after {
+      position: absolute;
+      top: 14.64%;
+      right: 14.64%;
+      transform: translate(50%, -50%);
+      z-index: var(--zindex-1);
    }
+  }
 }
--- a/bookmarks/styles/theme/base.css
+++ b/bookmarks/styles/theme/base.css
@@ -2,60 +2,59 @@
 *,
 *::before,
 *::after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }

 html {
-    box-sizing: border-box;
-    font-size: var(--html-font-size);
-    line-height: var(--html-line-height);
-    -webkit-tap-highlight-color: transparent;
-    scrollbar-gutter: stable;
+  box-sizing: border-box;
+  font-size: var(--html-font-size);
+  line-height: var(--html-line-height);
+  -webkit-tap-highlight-color: transparent;
 }

 /* Reserve space for vert. scrollbar to avoid layout shifting when scrollbars are added */
 html {
-    scrollbar-gutter: stable;
+  scrollbar-gutter: stable;
 }

@media (pointer: coarse) {
-    html {
-        scrollbar-gutter: initial;
-    }
+  html {
+    scrollbar-gutter: initial;
+  }
 }

 body {
-    background: var(--body-color);
-    color: var(--text-color);
-    font-family: var(--body-font-family);
-    font-size: var(--font-size);
-    overflow-x: hidden;
-    text-rendering: optimizeLegibility;
+  background: var(--body-color);
+  color: var(--text-color);
+  font-family: var(--body-font-family);
+  font-size: var(--font-size);
+  overflow-x: hidden;
+  text-rendering: optimizeLegibility;
 }

 a {
-    color: var(--link-color);
-    outline: none;
-    text-decoration: none;
+  color: var(--link-color);
+  outline: none;
+  text-decoration: none;
 }

 a:focus-visible {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-offset);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }

 a:focus,
 a:hover,
 a:active,
 a.active {
-    text-decoration: underline;
+  text-decoration: underline;
 }

 summary {
-    cursor: pointer;
+  cursor: pointer;
 }

 summary:focus-visible {
-    outline: var(--focus-outline);
-    outline-offset: var(--focus-outline-offset);
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-outline-offset);
 }
--- a/bookmarks/styles/theme/buttons.css
+++ b/bookmarks/styles/theme/buttons.css
@@ -1,257 +1,268 @@
 /* Buttons */
 :root {
-    --btn-bg-color: var(--body-color);
-    --btn-hover-bg-color: var(--gray-50);
-    --btn-border-color: var(--border-color);
-    --btn-text-color: var(--text-color);
-    --btn-icon-color: var(--icon-color);
-    --btn-font-weight: 400;
-    --btn-box-shadow: var(--box-shadow-xs);
+  --btn-bg-color: var(--body-color);
+  --btn-hover-bg-color: var(--gray-50);
+  --btn-border-color: var(--border-color);
+  --btn-text-color: var(--text-color);
+  --btn-icon-color: var(--icon-color);
+  --btn-font-weight: 400;
+  --btn-box-shadow: var(--box-shadow-xs);

-    --btn-primary-bg-color: var(--primary-color);
-    --btn-primary-hover-bg-color: var(--primary-color-highlight);
-    --btn-primary-text-color: var(--contrast-text-color);
+  --btn-primary-bg-color: var(--primary-color);
+  --btn-primary-hover-bg-color: var(--primary-color-highlight);
+  --btn-primary-text-color: var(--contrast-text-color);

-    --btn-success-bg-color: var(--success-color);
-    --btn-success-hover-bg-color: var(--success-color-highlight);
-    --btn-success-text-color: var(--contrast-text-color);
+  --btn-success-bg-color: var(--success-color);
+  --btn-success-hover-bg-color: var(--success-color-highlight);
+  --btn-success-text-color: var(--contrast-text-color);

-    --btn-error-bg-color: var(--error-color);
-    --btn-error-hover-bg-color: var(--error-color-highlight);
-    --btn-error-text-color: var(--contrast-text-color);
+  --btn-error-bg-color: var(--error-color);
+  --btn-error-hover-bg-color: var(--error-color-highlight);
+  --btn-error-text-color: var(--contrast-text-color);

-    --btn-link-text-color: var(--link-color);
-    --btn-link-hover-text-color: var(--link-color);
+  --btn-link-text-color: var(--link-color);
+  --btn-link-hover-text-color: var(--link-color);
 }

 .btn {
-    appearance: none;
-    background: var(--btn-bg-color);
-    border: var(--border-width) solid var(--btn-border-color);
-    border-radius: var(--border-radius);
-    color: var(--btn-text-color);
-    font-weight: var(--btn-font-weight);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: baseline;
-    justify-content: center;
-    font-size: var(--font-size);
-    height: var(--control-size);
-    line-height: var(--line-height);
-    outline: none;
-    padding: var(--control-padding-y) var(--control-padding-x);
-    box-shadow: var(--btn-box-shadow);
-    text-align: center;
-    text-decoration: none;
-    transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
+  appearance: none;
+  background: var(--btn-bg-color);
+  border: var(--border-width) solid var(--btn-border-color);
+  border-radius: var(--border-radius);
+  color: var(--btn-text-color);
+  font-weight: var(--btn-font-weight);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: baseline;
+  justify-content: center;
+  font-size: var(--font-size);
+  height: var(--control-size);
+  line-height: var(--line-height);
+  outline: none;
+  padding: var(--control-padding-y) var(--control-padding-x);
+  box-shadow: var(--btn-box-shadow);
+  text-align: center;
+  text-decoration: none;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    box-shadow 0.2s,
+    color 0.2s;
+  user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;

-    &:focus-visible {
-        outline: var(--focus-outline);
-        outline-offset: var(--focus-outline-offset);
-    }
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  &:hover {
+    background: var(--btn-hover-bg-color);
+    text-decoration: none;
+  }
+
+  &[disabled],
+  &:disabled,
+  &.disabled {
+    cursor: default;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  &:focus,
+  &:hover,
+  &:active,
+  &.active {
+    text-decoration: none;
+  }
+
+  /* Button Primary */
+
+  &.btn-primary {
+    background: var(--btn-primary-bg-color);
+    border-color: transparent;
+    color: var(--btn-primary-text-color);
+    --btn-icon-color: var(--btn-primary-text-color);

    &:hover {
-        background: var(--btn-hover-bg-color);
-        text-decoration: none;
+      background: var(--btn-primary-hover-bg-color);
    }

-    &[disabled],
-    &:disabled,
-    &.disabled {
-        cursor: default;
-        opacity: 0.5;
-        pointer-events: none;
+    &.loading {
+      &::after {
+        border-bottom-color: var(--btn-primary-text-color);
+        border-left-color: var(--btn-primary-text-color);
+      }
+    }
+  }
+
+  /* Button Colors */
+
+  &.btn-success {
+    background: var(--btn-success-bg-color);
+    border-color: transparent;
+    color: var(--btn-success-text-color);
+    --btn-icon-color: var(--btn-success-text-color);
+
+    &:hover {
+      background: var(--btn-success-hover-bg-color);
+    }
+  }
+
+  &.btn-error {
+    --btn-border-color: var(--error-color);
+    --btn-text-color: var(--error-color);
+
+    &:hover {
+      --btn-hover-bg-color: var(--error-color-shade);
+    }
+  }
+
+  /* Button Link */
+
+  &.btn-link {
+    background: transparent;
+    border-color: transparent;
+    box-shadow: none;
+    color: var(--btn-link-text-color);
+    --btn-icon-color: var(--btn-link-text-color);
+
+    &:hover {
+      color: var(--btn-link-hover-text-color);
+      --btn-icon-color: var(--btn-link-hover-text-color);
    }

    &:focus,
    &:hover,
    &:active,
    &.active {
-        text-decoration: none;
+      text-decoration: none;
    }
+  }

-    /* Button Primary */
+  /* Button Sizes */

-    &.btn-primary {
-        background: var(--btn-primary-bg-color);
-        border-color: transparent;
-        color: var(--btn-primary-text-color);
-        --btn-icon-color: var(--btn-primary-text-color);
+  &.btn-sm {
+    font-size: var(--font-size-sm);
+    height: var(--control-size-sm);
+    padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
+  }

-        &:hover {
-            background: var(--btn-primary-hover-bg-color);
-        }
-    }
+  &.btn-lg {
+    font-size: var(--font-size-lg);
+    height: var(--control-size-lg);
+    padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+  }

-    /* Button Colors */
+  /* Button Block */

-    &.btn-success {
-        background: var(--btn-success-bg-color);
-        border-color: transparent;
-        color: var(--btn-success-text-color);
-        --btn-icon-color: var(--btn-success-text-color);
+  &.btn-block {
+    display: block;
+    width: 100%;
+  }

-        &:hover {
-            background: var(--btn-success-hover-bg-color);
-        }
-    }
+  /* Button Action */

-    &.btn-error {
-        --btn-border-color: var(--error-color);
-        --btn-text-color: var(--error-color);
-
-        &:hover {
-            --btn-hover-bg-color: var(--error-color-shade);
-        }
-    }
-
-    /* Button Link */
-
-    &.btn-link {
-        background: transparent;
-        border-color: transparent;
-        box-shadow: none;
-        color: var(--btn-link-text-color);
-        --btn-icon-color: var(--btn-link-text-color);
-
-        &:hover {
-            color: var(--btn-link-hover-text-color);
-            --btn-icon-color: var(--btn-link-hover-text-color);
-        }
-
-        &:focus,
-        &:hover,
-        &:active,
-        &.active {
-            text-decoration: none;
-        }
-    }
-
-    /* Button Sizes */
+  &.btn-action {
+    width: var(--control-size);
+    padding-left: 0;
+    padding-right: 0;

    &.btn-sm {
-        font-size: var(--font-size-sm);
-        height: var(--control-size-sm);
-        padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
+      width: var(--control-size-sm);
    }

    &.btn-lg {
-        font-size: var(--font-size-lg);
-        height: var(--control-size-lg);
-        padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+      width: var(--control-size-lg);
    }
+  }

-    /* Button Block */
+  /* Button Clear */

-    &.btn-block {
-        display: block;
-        width: 100%;
+  &.btn-clear {
+    background: transparent;
+    border: 0;
+    color: currentColor;
+    box-shadow: none;
+    height: var(--unit-5);
+    line-height: var(--unit-4);
+    margin-left: var(--unit-1);
+    margin-right: -2px;
+    opacity: 1;
+    padding: var(--unit-h);
+    text-decoration: none;
+    width: var(--unit-5);
+
+    &::before {
+      content: "\2715";
    }
+  }

-    /* Button Action */
+  /* Wider button */

-    &.btn-action {
-        width: var(--control-size);
-        padding-left: 0;
-        padding-right: 0;
+  &.btn-wide {
+    padding-left: var(--unit-6);
+    padding-right: var(--unit-6);
+  }

-        &.btn-sm {
-            width: var(--control-size-sm);
-        }
+  /* Small icon button */

-        &.btn-lg {
-            width: var(--control-size-lg);
-        }
+  &.btn-sm.btn-icon {
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--unit-h);
+
+    svg {
+      align-self: center;
    }
+  }

-    /* Button Clear */
+  /* Button icons */

-    &.btn-clear {
-        background: transparent;
-        border: 0;
-        color: currentColor;
-        box-shadow: none;
-        height: var(--unit-5);
-        line-height: var(--unit-4);
-        margin-left: var(--unit-1);
-        margin-right: -2px;
-        opacity: 1;
-        padding: var(--unit-h);
-        text-decoration: none;
-        width: var(--unit-5);
-
-        &::before {
-            content: "\2715";
-        }
-    }
-
-    /* Wider button */
-
-    &.btn-wide {
-        padding-left: var(--unit-6);
-        padding-right: var(--unit-6);
-    }
-
-    /* Small icon button */
-
-    &.btn-sm.btn-icon {
-        display: inline-flex;
-        align-items: baseline;
-        gap: var(--unit-h);
-
-        svg {
-            align-self: center;
-        }
-    }
-
-    /* Button icons */
-
-    & svg {
-        color: var(--btn-icon-color);
-        align-self: center;
-    }
+  & svg {
+    color: var(--btn-icon-color);
+    align-self: center;
+  }
 }

 /* Button groups */
 .btn-group {
-    display: inline-flex;
-    flex-wrap: wrap;
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  .btn {
+    flex: 1 0 auto;
+
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: calc(-1 * var(--border-width));
+    }
+
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: calc(-1 * var(--border-width));
+    }
+
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      z-index: var(--zindex-0);
+    }
+  }
+
+  &.btn-group-block {
+    display: flex;

    .btn {
-        flex: 1 0 auto;
-
-        &:first-child:not(:last-child) {
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0;
-            margin-left: calc(-1 * var(--border-width));
-        }
-
-        &:last-child:not(:first-child) {
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            margin-left: calc(-1 * var(--border-width));
-        }
-
-        &:focus,
-        &:hover,
-        &:active,
-        &.active {
-            z-index: var(--zindex-0);
-        }
+      flex: 1 0 0;
    }
-
-    &.btn-group-block {
-        display: flex;
-
-        .btn {
-            flex: 1 0 0;
-        }
-    }
-}
+  }
+}
--- a/bookmarks/styles/theme/code.css
+++ b/bookmarks/styles/theme/code.css
@@ -1,30 +1,30 @@
 /* Code */
 :root {
-    --code-bg-color: var(--body-color-contrast);
-    --code-color: var(--text-color);
+  --code-bg-color: var(--body-color-contrast);
+  --code-color: var(--text-color);
 }

 code {
-    border-radius: var(--border-radius);
-    line-height: 1.25;
-    padding: .1rem .2rem;
-    background: var(--code-bg-color);
-    color: var(--code-color);
-    font-size: 85%;
+  border-radius: var(--border-radius);
+  line-height: 1.25;
+  padding: 0.1rem 0.2rem;
+  background: var(--code-bg-color);
+  color: var(--code-color);
+  font-size: 85%;
 }

 .code {
-    border-radius: var(--border-radius);
-    background: var(--code-bg-color);
-    color: var(--text-color);
-    position: relative;
+  border-radius: var(--border-radius);
+  background: var(--code-bg-color);
+  color: var(--text-color);
+  position: relative;

-    & code {
-        color: inherit;
-        display: block;
-        line-height: 1.5;
-        overflow-x: auto;
-        padding: var(--unit-2);
-        width: 100%;
-    }
+  & code {
+    color: inherit;
+    display: block;
+    line-height: 1.5;
+    overflow-x: auto;
+    padding: var(--unit-2);
+    width: 100%;
+  }
 }
--- a/bookmarks/styles/theme/dropdowns.css
+++ b/bookmarks/styles/theme/dropdowns.css
@@ -1,10 +1,12 @@
 /* Dropdown */
 .dropdown {
+  --dropdown-focus-display: block;
+
  display: inline-block;
  position: relative;

  .menu {
-    animation: fade-in .15s ease 1;
+    animation: fade-in 0.15s ease 1;
    display: none;
    left: 0;
    max-height: 50vh;
@@ -20,9 +22,13 @@
    }
  }

-  &.active .menu,
-  .dropdown-toggle:focus + .menu,
-  .menu:hover {
+  &:focus-within .menu {
+    /* Use custom CSS property to allow disabling opening on focus when using JS */
+    display: var(--dropdown-focus-display);
+  }
+
+  &.active .menu {
+    /* Always show menu when class is added through JS */
    display: block;
  }

--- a/bookmarks/styles/theme/empty.css
+++ b/bookmarks/styles/theme/empty.css
@@ -1,21 +1,21 @@
 /* Empty states (or Blank slates) */
 .empty {
-    background: var(--body-color-contrast);
-    border-radius: var(--border-radius);
-    color: var(--secondary-text-color);
-    text-align: center;
-    padding: var(--unit-16) var(--unit-8);
+  background: var(--body-color-contrast);
+  border-radius: var(--border-radius);
+  color: var(--secondary-text-color);
+  text-align: center;
+  padding: var(--unit-16) var(--unit-8);

-    .empty-icon {
-        margin-bottom: var(--layout-spacing-lg);
-    }
+  .empty-icon {
+    margin-bottom: var(--layout-spacing-lg);
+  }

-    .empty-title,
-    .empty-subtitle {
-        margin: var(--layout-spacing) auto;
-    }
+  .empty-title,
+  .empty-subtitle {
+    margin: var(--layout-spacing) auto;
+  }

-    .empty-action {
-        margin-top: var(--layout-spacing-lg);
-    }
+  .empty-action {
+    margin-top: var(--layout-spacing-lg);
+  }
 }
--- a/bookmarks/styles/theme/forms.css
+++ b/bookmarks/styles/theme/forms.css
@@ -1,515 +1,547 @@
 /* Forms */
 :root {
-    --input-bg-color: var(--body-color);
-    --input-disabled-bg-color: var(--gray-100);
-    --input-text-color: var(--text-color);
-    --input-hint-color: var(--secondary-text-color);
-    --input-border-color: var(--border-color);
-    --input-placeholder-color: var(--tertiary-text-color);
-    --input-box-shadow: var(--box-shadow-xs);
+  --input-bg-color: var(--body-color);
+  --input-disabled-bg-color: var(--gray-100);
+  --input-text-color: var(--text-color);
+  --input-hint-color: var(--secondary-text-color);
+  --input-border-color: var(--border-color);
+  --input-placeholder-color: var(--tertiary-text-color);
+  --input-box-shadow: var(--box-shadow-xs);

-    --checkbox-bg-color: var(--body-color);
-    --checkbox-checked-bg-color: var(--primary-color);
-    --checkbox-disabled-bg-color: var(--gray-100);
-    --checkbox-border-color: var(--border-color);
-    --checkbox-icon-color: #fff;
+  --checkbox-bg-color: var(--body-color);
+  --checkbox-checked-bg-color: var(--primary-color);
+  --checkbox-disabled-bg-color: var(--gray-100);
+  --checkbox-border-color: var(--border-color);
+  --checkbox-icon-color: #fff;

-    --switch-bg-color: var(--gray-300);
-    --switch-border-color: var(--gray-400);
-    --switch-toggle-color: #fff;
+  --switch-bg-color: var(--gray-300);
+  --switch-border-color: var(--gray-400);
+  --switch-toggle-color: #fff;
 }

 .form-group {
-    &:first-of-type {
-        margin-top: var(--unit-4);
-    }
-    &:not(:last-child) {
-        margin-bottom: var(--unit-4);
-    }
+  &:first-of-type {
+    margin-top: var(--unit-4);
+  }
+  &:not(:last-child) {
+    margin-bottom: var(--unit-4);
+  }
 }

 fieldset {
-    margin-bottom: var(--layout-spacing-lg);
+  margin-bottom: var(--layout-spacing-lg);
 }

 legend {
-    font-size: var(--font-size-lg);
-    font-weight: 500;
-    margin-bottom: var(--layout-spacing-lg);
+  font-size: var(--font-size-lg);
+  font-weight: 500;
+  margin-bottom: var(--layout-spacing-lg);
 }

 /* Form element: Label */
 .form-label {
-    display: block;
-    line-height: var(--line-height);
-    margin-bottom: var(--unit-2);
-    font-weight: 500;
+  display: block;
+  line-height: var(--line-height);
+  margin-bottom: var(--unit-2);
+  font-weight: 500;
 }

 details summary .form-label {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }

 details[open] summary .form-label {
-    margin-bottom: var(--unit-2);
+  margin-bottom: var(--unit-2);
 }

 /* Form element: Input */
 .form-input {
-    appearance: none;
-    background: var(--input-bg-color);
-    background-image: none;
-    border: var(--border-width) solid var(--input-border-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--input-box-shadow);
-    color: var(--input-text-color);
-    display: block;
-    font-size: var(--font-size);
-    height: var(--control-size);
-    line-height: var(--line-height);
-    max-width: 100%;
-    outline: none;
-    padding: var(--control-padding-y) var(--control-padding-x);
-    position: relative;
-    transition: background 0.2s, border 0.2s, color 0.2s;
-    width: 100%;
+  appearance: none;
+  background: var(--input-bg-color);
+  background-image: none;
+  border: var(--border-width) solid var(--input-border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--input-box-shadow);
+  color: var(--input-text-color);
+  display: block;
+  font-size: var(--font-size);
+  height: var(--control-size);
+  line-height: var(--line-height);
+  max-width: 100%;
+  outline: none;
+  padding: var(--control-padding-y) var(--control-padding-x);
+  position: relative;
+  transition:
+    background 0.2s,
+    border 0.2s,
+    color 0.2s;
+  width: 100%;

-    &:focus {
-        outline: var(--focus-outline);
-        outline-offset: calc(var(--focus-outline-offset) * -1);
-    }
+  &:focus {
+    outline: var(--focus-outline);
+    outline-offset: calc(var(--focus-outline-offset) * -1);
+  }

-    &::placeholder {
-        color: var(--input-placeholder-color);
-        opacity: 1;
-    }
+  &::placeholder {
+    color: var(--input-placeholder-color);
+    opacity: 1;
+  }

-    /* Input sizes */
+  /* Input sizes */

-    &.input-sm {
-        font-size: var(--font-size-sm);
-        height: var(--control-size-sm);
-        padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
-    }
+  &.input-sm {
+    font-size: var(--font-size-sm);
+    height: var(--control-size-sm);
+    padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
+  }

-    &.input-lg {
-        font-size: var(--font-size-lg);
-        height: var(--control-size-lg);
-        padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
-    }
+  &.input-lg {
+    font-size: var(--font-size-lg);
+    height: var(--control-size-lg);
+    padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+  }

-    &.input-inline {
-        display: inline-block;
-        vertical-align: middle;
-        width: auto;
-    }
+  &.input-inline {
+    display: inline-block;
+    vertical-align: middle;
+    width: auto;
+  }

-    /* Input types */
+  /* Input types */

-    &[type="file"] {
-        height: auto;
-    }
+  &[type="file"] {
+    height: auto;
+  }
 }

 /* Form element: Textarea */
 textarea.form-input {
-    &,
-    &.input-lg,
-    &.input-sm {
-        height: auto;
-    }
+  &,
+  &.input-lg,
+  &.input-sm {
+    height: auto;
+  }
 }

 /* Form element: Input hint */
 .form-input-hint {
-    color: var(--input-hint-color);
-    font-size: var(--font-size-sm);
-    margin-top: var(--unit-1);
+  color: var(--input-hint-color);
+  font-size: var(--font-size-sm);
+  margin-top: var(--unit-1);

-    .has-success &,
-    .is-success + & {
-        color: var(--success-color);
-    }
+  .has-success &,
+  .is-success + & {
+    color: var(--success-color);
+  }

-    .has-error &,
-    .is-error + & {
-        color: var(--error-color);
-    }
+  .has-error &,
+  .is-error + & {
+    color: var(--error-color);
+  }
 }

 /* Form element: Select */
 .form-select {
-    appearance: none;
-    background: var(--input-bg-color);
-    border: var(--border-width) solid var(--input-border-color);
-    border-radius: var(--border-radius);
-    box-shadow: var(--input-box-shadow);
-    color: var(--input-text-color);
-    font-size: var(--font-size);
-    height: var(--control-size);
-    line-height: var(--line-height);
-    outline: none;
+  appearance: none;
+  background: var(--input-bg-color);
+  border: var(--border-width) solid var(--input-border-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--input-box-shadow);
+  color: var(--input-text-color);
+  font-size: var(--font-size);
+  height: var(--control-size);
+  line-height: var(--line-height);
+  outline: none;
+  padding: var(--control-padding-y) var(--control-padding-x);
+  vertical-align: middle;
+  width: 100%;
+
+  &:focus {
+    outline: var(--focus-outline);
+    outline-offset: calc(var(--focus-outline-offset) * -1);
+  }
+
+  /* Select sizes */
+
+  &.select-sm {
+    font-size: var(--font-size-sm);
+    height: var(--control-size-sm);
+    padding: var(--control-padding-y-sm)
+      calc(var(--control-icon-size) + var(--control-padding-x-sm))
+      var(--control-padding-y-sm) var(--control-padding-x-sm);
+  }
+
+  &.select-lg {
+    font-size: var(--font-size-lg);
+    height: var(--control-size-lg);
+    padding: var(--control-padding-y-lg)
+      calc(var(--control-icon-size) + var(--control-padding-x-lg))
+      var(--control-padding-y-lg) var(--control-padding-x-lg);
+  }
+
+  /* Multiple select */
+
+  &[size],
+  &[multiple] {
+    height: auto;
    padding: var(--control-padding-y) var(--control-padding-x);
-    vertical-align: middle;
-    width: 100%;

-    &:focus {
-        outline: var(--focus-outline);
-        outline-offset: calc(var(--focus-outline-offset) * -1);
+    & option {
+      padding: var(--unit-h) var(--unit-1);
    }
+  }

-    /* Select sizes */
+  &:not([multiple]):not([size]) {
+    background: var(--input-bg-color)
+      url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E")
+      no-repeat right 0.35rem center / 0.4rem 0.5rem;
+    padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
+  }

-    &.select-sm {
-        font-size: var(--font-size-sm);
-        height: var(--control-size-sm);
-        padding: var(--control-padding-y-sm) calc(var(--control-icon-size) + var(--control-padding-x-sm)) var(--control-padding-y-sm) var(--control-padding-x-sm);
-    }
-
-    &.select-lg {
-        font-size: var(--font-size-lg);
-        height: var(--control-size-lg);
-        padding: var(--control-padding-y-lg) calc(var(--control-icon-size) + var(--control-padding-x-lg)) var(--control-padding-y-lg) var(--control-padding-x-lg);
-    }
-
-    /* Multiple select */
-
-    &[size],
-    &[multiple] {
-        height: auto;
-        padding: var(--control-padding-y) var(--control-padding-x);
-
-        & option {
-            padding: var(--unit-h) var(--unit-1);
-        }
-    }
-
-    &:not([multiple]):not([size]) {
-        background: var(--input-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
-        padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
-    }
+  /* Options */
+  & option {
+    /* On Windows with Chrome / Edge, options seems to use the same
+    background color as the select. However for the dark theme the
+    background is a semi-transparent white, resulting in an opaque white
+    background for the dropdown. Use the modal background color to force
+    a dark background instead. */
+    background: var(--modal-container-bg-color);
+  }
 }

 /* Form element: Checkbox and Radio */
 .form-checkbox,
 .form-radio,
 .form-switch {
-    display: block;
-    line-height: var(--line-height);
-    margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0;
-    min-height: var(--control-size-sm);
-    padding: calc((var(--control-size-sm) - var(--line-height)) / 2) var(--control-padding-x) calc((var(--control-size-sm) - var(--line-height)) / 2) calc(var(--control-icon-size) + var(--control-padding-x));
-    position: relative;
+  display: block;
+  line-height: var(--line-height);
+  margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0;
+  min-height: var(--control-size-sm);
+  padding: calc((var(--control-size-sm) - var(--line-height)) / 2)
+    var(--control-padding-x)
+    calc((var(--control-size-sm) - var(--line-height)) / 2)
+    calc(var(--control-icon-size) + var(--control-padding-x));
+  position: relative;

-    input {
-        clip: rect(0, 0, 0, 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        position: absolute;
-        width: 1px;
+  input {
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    position: absolute;
+    width: 1px;

-        &:focus-visible + .form-icon {
-            outline: var(--focus-outline);
-            outline-offset: var(--focus-outline-offset);
-        }
-
-        &:checked + .form-icon {
-            background: var(--checkbox-checked-bg-color);
-            border-color: var(--checkbox-checked-bg-color);
-        }
+    &:focus-visible + .form-icon {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
    }

-    .form-icon {
-        border: var(--border-width) solid var(--checkbox-border-color);
-        box-shadow: var(--input-box-shadow);
-        cursor: pointer;
-        display: inline-block;
-        position: absolute;
-        transition: background .2s, border .2s, color .2s;
+    &:checked + .form-icon {
+      background: var(--checkbox-checked-bg-color);
+      border-color: var(--checkbox-checked-bg-color);
    }
+  }

-    /* Input checkbox, radio, and switch sizes */
+  .form-icon {
+    border: var(--border-width) solid var(--checkbox-border-color);
+    box-shadow: var(--input-box-shadow);
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    transition:
+      background 0.2s,
+      border 0.2s,
+      color 0.2s;
+  }

-    &.input-sm {
-        font-size: var(--font-size-sm);
-        margin: 0;
-    }
+  /* Input checkbox, radio, and switch sizes */

-    &.input-lg {
-        font-size: var(--font-size-lg);
-        margin: calc((var(--control-size-lg) - var(--control-size-sm)) / 2) 0;
-    }
+  &.input-sm {
+    font-size: var(--font-size-sm);
+    margin: 0;
+  }
+
+  &.input-lg {
+    font-size: var(--font-size-lg);
+    margin: calc((var(--control-size-lg) - var(--control-size-sm)) / 2) 0;
+  }
 }

 .form-checkbox,
 .form-radio {
-    .form-icon {
-        background: var(--checkbox-bg-color);
-        height: var(--control-icon-size);
-        left: 0;
-        top: calc((var(--control-size-sm) - var(--control-icon-size)) / 2);
-        width: var(--control-icon-size);
-    }
+  .form-icon {
+    background: var(--checkbox-bg-color);
+    height: var(--control-icon-size);
+    left: 0;
+    top: calc((var(--control-size-sm) - var(--control-icon-size)) / 2);
+    width: var(--control-icon-size);
+  }
 }

 .form-checkbox {
-    font-weight: 500;
+  font-weight: 500;

-    .form-icon {
-        border-radius: var(--border-radius);
+  .form-icon {
+    border-radius: var(--border-radius);
+  }
+
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background-clip: padding-box;
+        border: var(--border-width-lg) solid var(--checkbox-icon-color);
+        border-left-width: 0;
+        border-top-width: 0;
+        content: "";
+        height: 9px;
+        left: 50%;
+        margin-left: -3px;
+        margin-top: -6px;
+        position: absolute;
+        top: 50%;
+        transform: rotate(45deg);
+        width: 6px;
+      }
    }

-    input {
-        &:checked + .form-icon {
-            &::before {
-                background-clip: padding-box;
-                border: var(--border-width-lg) solid var(--checkbox-icon-color);
-                border-left-width: 0;
-                border-top-width: 0;
-                content: "";
-                height: 9px;
-                left: 50%;
-                margin-left: -3px;
-                margin-top: -6px;
-                position: absolute;
-                top: 50%;
-                transform: rotate(45deg);
-                width: 6px;
-            }
-        }
+    &:indeterminate + .form-icon {
+      background: var(--checkbox-checked-bg-color);
+      border-color: var(--checkbox-checked-bg-color);

-        &:indeterminate + .form-icon {
-            background: var(--checkbox-checked-bg-color);
-            border-color: var(--checkbox-checked-bg-color);
-
-            &::before {
-                background: var(--checkbox-icon-color);
-                content: "";
-                height: 2px;
-                left: 50%;
-                margin-left: -5px;
-                margin-top: -1px;
-                position: absolute;
-                top: 50%;
-                width: 10px;
-            }
-        }
+      &::before {
+        background: var(--checkbox-icon-color);
+        content: "";
+        height: 2px;
+        left: 50%;
+        margin-left: -5px;
+        margin-top: -1px;
+        position: absolute;
+        top: 50%;
+        width: 10px;
+      }
    }
+  }
 }

 .form-radio {
-    .form-icon {
-        border-radius: 50%;
-    }
+  .form-icon {
+    border-radius: 50%;
+  }

-    input {
-        &:checked + .form-icon {
-            &::before {
-                background: var(--checkbox-icon-color);
-                border-radius: 50%;
-                content: "";
-                height: 6px;
-                left: 50%;
-                position: absolute;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                width: 6px;
-            }
-        }
+  input {
+    &:checked + .form-icon {
+      &::before {
+        background: var(--checkbox-icon-color);
+        border-radius: 50%;
+        content: "";
+        height: 6px;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 6px;
+      }
    }
+  }
 }

 /* Form element: Switch */
 .form-switch {
-    padding-left: calc(var(--unit-8) + var(--control-padding-x));
+  padding-left: calc(var(--unit-8) + var(--control-padding-x));

-    .form-icon {
-        background: var(--switch-bg-color);
-        background-clip: padding-box;
-        border-color: var(--switch-border-color);
-        border-radius: calc(var(--unit-2) + var(--border-width));
-        height: calc(var(--unit-4) + var(--border-width) * 2);
-        left: 0;
-        top: calc((var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width));
-        width: var(--unit-8);
+  .form-icon {
+    background: var(--switch-bg-color);
+    background-clip: padding-box;
+    border-color: var(--switch-border-color);
+    border-radius: calc(var(--unit-2) + var(--border-width));
+    height: calc(var(--unit-4) + var(--border-width) * 2);
+    left: 0;
+    top: calc(
+      (var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width)
+    );
+    width: var(--unit-8);

-        &::before {
-            background: var(--switch-toggle-color);
-            border-radius: 50%;
-            content: "";
-            display: block;
-            height: var(--unit-4);
-            left: 0;
-            position: absolute;
-            top: 0;
-            transition: background .2s, border .2s, color .2s, left .2s;
-            width: var(--unit-4);
-        }
+    &::before {
+      background: var(--switch-toggle-color);
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: var(--unit-4);
+      left: 0;
+      position: absolute;
+      top: 0;
+      transition:
+        background 0.2s,
+        border 0.2s,
+        color 0.2s,
+        left 0.2s;
+      width: var(--unit-4);
    }
+  }

-    input {
-        &:checked + .form-icon {
-            &::before {
-                left: 14px;
-            }
-        }
+  input {
+    &:checked + .form-icon {
+      &::before {
+        left: 14px;
+      }
    }
+  }
 }

 /* Form Icons */
 .has-icon-left,
 .has-icon-right {
-    position: relative;
+  position: relative;

-    .form-icon {
-        height: var(--control-icon-size);
-        margin: 0 var(--control-padding-y);
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        width: var(--control-icon-size);
-        z-index: calc(var(--zindex-0) + 1);
-    }
+  .form-icon {
+    height: var(--control-icon-size);
+    margin: 0 var(--control-padding-y);
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: var(--control-icon-size);
+    z-index: calc(var(--zindex-0) + 1);
+  }
 }

 .has-icon-left {
-    & .form-icon {
-        left: var(--border-width);
-    }
+  & .form-icon {
+    left: var(--border-width);
+  }

-    & .form-input {
-        padding-left: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
-    }
+  & .form-input {
+    padding-left: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
+  }
 }

 .has-icon-right {
-    & .form-icon {
-        right: var(--border-width);
-    }
+  & .form-icon {
+    right: var(--border-width);
+  }

-    & .form-input {
-        padding-right: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
-    }
+  & .form-input {
+    padding-right: calc(
+      var(--control-icon-size) + var(--control-padding-y) * 2
+    );
+  }
 }

-
 /* Form element: Input groups */
 .input-group {
-    display: flex;
+  display: flex;

-    .input-group-addon {
-        background: var(--body-color);
-        border: var(--border-width) solid var(--input-border-color);
-        border-radius: var(--border-radius);
-        line-height: var(--line-height);
-        padding: var(--control-padding-y) var(--control-padding-x);
-        white-space: nowrap;
+  .input-group-addon {
+    background: var(--body-color);
+    border: var(--border-width) solid var(--input-border-color);
+    border-radius: var(--border-radius);
+    line-height: var(--line-height);
+    padding: var(--control-padding-y) var(--control-padding-x);
+    white-space: nowrap;

-        &.addon-sm {
-            font-size: var(--font-size-sm);
-            padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
-        }
-
-        &.addon-lg {
-            font-size: var(--font-size-lg);
-            padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
-        }
+    &.addon-sm {
+      font-size: var(--font-size-sm);
+      padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
    }

-    .form-input,
-    .form-select {
-        flex: 1 1 auto;
-        width: 1%;
+    &.addon-lg {
+      font-size: var(--font-size-lg);
+      padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+    }
+  }
+
+  .form-input,
+  .form-select {
+    flex: 1 1 auto;
+    width: 1%;
+  }
+
+  .input-group-btn {
+    z-index: var(--zindex-0);
+  }
+
+  .form-input,
+  .form-select,
+  .input-group-addon,
+  .input-group-btn {
+    &:first-child:not(:last-child) {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
    }

-    .input-group-btn {
-        z-index: var(--zindex-0);
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      margin-left: calc(-1 * var(--border-width));
    }

-    .form-input,
-    .form-select,
-    .input-group-addon,
-    .input-group-btn {
-        &:first-child:not(:last-child) {
-            border-bottom-right-radius: 0;
-            border-top-right-radius: 0;
-        }
-
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0;
-            margin-left: calc(-1 * var(--border-width));
-        }
-
-        &:last-child:not(:first-child) {
-            border-bottom-left-radius: 0;
-            border-top-left-radius: 0;
-            margin-left: calc(-1 * var(--border-width));
-        }
-
-        &:focus {
-            z-index: calc(var(--zindex-0) + 1);
-        }
+    &:last-child:not(:first-child) {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      margin-left: calc(-1 * var(--border-width));
    }

-    .form-select {
-        width: auto;
+    &:focus {
+      z-index: calc(var(--zindex-0) + 1);
    }
+  }

-    &.input-inline {
-        display: inline-flex;
-    }
+  .form-select {
+    width: auto;
+  }
+
+  &.input-inline {
+    display: inline-flex;
+  }
 }

 /* Form validation states */
 .form-input,
 .form-select {
-    .has-success &,
-    &.is-success {
-        background: var(--success-color-shade);
-        border-color: var(--success-color);
+  .has-success &,
+  &.is-success {
+    background: var(--success-color-shade);
+    border-color: var(--success-color);

-        &:focus {
-            outline-color: var(--success-color);
-        }
+    &:focus {
+      outline-color: var(--success-color);
    }
+  }

-    .has-error &,
-    &.is-error {
-        background: var(--error-color-shade);
-        border-color: var(--error-color);
+  .has-error &,
+  &.is-error {
+    background: var(--error-color-shade);
+    border-color: var(--error-color);

-        &:focus {
-            outline-color: var(--error-color);
-        }
+    &:focus {
+      outline-color: var(--error-color);
    }
+  }
 }

 /* Form disabled and readonly */
 .form-input,
 .form-select {
-    &:disabled,
-    &.disabled {
-        background-color: var(--input-disabled-bg-color);
-        cursor: not-allowed;
-    }
+  &:disabled,
+  &.disabled {
+    background-color: var(--input-disabled-bg-color);
+    cursor: not-allowed;
+  }
 }

 input {
-    &:disabled,
-    &.disabled {
-        & + .form-icon {
-            background: var(--checkbox-disabled-bg-color);
-            cursor: not-allowed;
-        }
+  &:disabled,
+  &.disabled {
+    & + .form-icon {
+      background: var(--checkbox-disabled-bg-color);
+      cursor: not-allowed;
    }
+  }
 }

 /* Increase input font size on small viewports to prevent zooming on focus the input */
 /* on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max */
 /* viewport size */
@media screen and (max-width: 430px) {
-    .form-input {
-        font-size: 16px;
-    }
+  .form-input {
+    font-size: 16px;
+  }
 }
--- a/bookmarks/styles/theme/menus.css
+++ b/bookmarks/styles/theme/menus.css
@@ -1,89 +1,90 @@
 :root {
-    --menu-bg-color: var(--body-color);
-    --menu-border-color: var(--gray-200);
-    --menu-border-radius: var(--border-radius);
-    --menu-box-shadow: var(--box-shadow);
-    --menu-item-color: var(--text-color);
-    --menu-item-hover-color: var(--primary-text-color);
-    --menu-item-bg-color: transparent;
-    --menu-item-hover-bg-color: var(--primary-color-shade);
+  --menu-bg-color: var(--body-color);
+  --menu-border-color: var(--gray-200);
+  --menu-border-radius: var(--border-radius);
+  --menu-box-shadow: var(--box-shadow);
+  --menu-item-color: var(--text-color);
+  --menu-item-hover-color: var(--primary-text-color);
+  --menu-item-bg-color: transparent;
+  --menu-item-hover-bg-color: var(--primary-color-shade);
 }

 /* Menus */
 .menu {
-    background: var(--menu-bg-color);
-    border: solid 1px var(--menu-border-color);
-    border-radius: var(--menu-border-radius);
-    box-shadow: var(--menu-box-shadow);
-    list-style: none;
-    margin: 0;
-    min-width: var(--control-width-xs);
-    transform: translateY(var(--layout-spacing-sm));
-    z-index: var(--zindex-3);
+  background: var(--menu-bg-color);
+  border: solid 1px var(--menu-border-color);
+  border-radius: var(--menu-border-radius);
+  box-shadow: var(--menu-box-shadow);
+  list-style: none;
+  margin: 0;
+  min-width: var(--control-width-xs);
+  transform: translateY(var(--layout-spacing-sm));
+  z-index: var(--zindex-3);

-    &.menu-nav {
-        background: transparent;
-        box-shadow: none;
+  &.menu-nav {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .menu-item {
+    margin-top: 0;
+    padding: 0 var(--unit-4);
+    position: relative;
+    text-decoration: none;
+
+    &:first-of-type {
+      padding-top: var(--unit-2);
    }

-    .menu-item {
-        margin-top: 0;
-        padding: 0 var(--unit-4);
-        position: relative;
-        text-decoration: none;
-
-        &:first-of-type {
-            padding-top: var(--unit-2);
-        }
-
-        &:last-of-type {
-            padding-bottom: var(--unit-2);
-        }
-
-        & > a, .btn.btn-link {
-            border-radius: var(--menu-border-radius);
-            color: var(--menu-item-color);
-            background: var(--menu-item-bg-color);
-            display: block;
-            margin: 0 calc(-1 * var(--unit-2));
-            padding: var(--unit-1) var(--unit-2);
-            text-decoration: none;
-
-            &:focus,
-            &:hover,
-            &:active,
-            &.active {
-                background: var(--menu-item-hover-bg-color);
-                color: var(--menu-item-hover-color);
-            }
-        }
-
-        .form-checkbox,
-        .form-radio,
-        .form-switch {
-            margin: var(--unit-h) 0;
-        }
-
-        & + .menu-item {
-            margin-top: var(--unit-1);
-        }
+    &:last-of-type {
+      padding-bottom: var(--unit-2);
    }

-    & .menu-badge {
-        align-items: center;
-        display: flex;
-        height: 100%;
-        position: absolute;
-        right: 0;
-        top: 0;
+    & > a,
+    .btn.btn-link {
+      border-radius: var(--menu-border-radius);
+      color: var(--menu-item-color);
+      background: var(--menu-item-bg-color);
+      display: block;
+      margin: 0 calc(-1 * var(--unit-2));
+      padding: var(--unit-1) var(--unit-2);
+      text-decoration: none;

-        .label {
-            margin-right: var(--unit-2);
-        }
+      &:focus,
+      &:hover,
+      &:active,
+      &.active {
+        background: var(--menu-item-hover-bg-color);
+        color: var(--menu-item-hover-color);
+      }
    }

-    & .divider {
-        border-bottom: solid 1px var(--secondary-border-color);
-        margin: var(--unit-2) 0;
+    .form-checkbox,
+    .form-radio,
+    .form-switch {
+      margin: var(--unit-h) 0;
    }
-}
+
+    & + .menu-item {
+      margin-top: var(--unit-1);
+    }
+  }
+
+  & .menu-badge {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    .label {
+      margin-right: var(--unit-2);
+    }
+  }
+
+  & .divider {
+    border-bottom: solid 1px var(--secondary-border-color);
+    margin: var(--unit-2) 0;
+  }
+}
--- a/bookmarks/styles/theme/modals.css
+++ b/bookmarks/styles/theme/modals.css
@@ -1,93 +1,148 @@
 /* Modals */
 :root {
-    --modal-overlay-bg-color: rgba(243, 244, 246, 0.6);
-    --modal-container-bg-color: var(--body-color);
-    --modal-container-border-color: var(--gray-200);
-    --modal-border-radius: var(--border-radius-lg);
-    --modal-box-shadow: var(--box-shadow-lg);
+  --modal-overlay-bg-color: rgba(243, 244, 246, 0.6);
+  --modal-container-bg-color: var(--body-color);
+  --modal-container-border-color: var(--gray-200);
+  --modal-border-radius: var(--border-radius-lg);
+  --modal-box-shadow: var(--box-shadow-lg);
 }

 .modal {
-    align-items: center;
-    bottom: 0;
-    display: none;
-    justify-content: center;
-    left: 0;
-    opacity: 0;
-    overflow: hidden;
-    padding: var(--layout-spacing);
-    position: fixed;
-    right: 0;
-    top: 0;
+  align-items: center;
+  bottom: 0;
+  display: none;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: var(--layout-spacing);
+  position: fixed;
+  right: 0;
+  top: 0;

-    &:target,
-    &.active {
-        display: flex;
-        opacity: 1;
-        z-index: var(--zindex-4);
+  &:target,
+  &.active {
+    display: flex;
+    opacity: 1;
+    z-index: var(--zindex-4);

-        & .modal-overlay {
-            animation: fade-in .15s ease 1;
-            background: var(--modal-overlay-bg-color);
-            bottom: 0;
-            cursor: default;
-            display: block;
-            left: 0;
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-
-        & .modal-container {
-            animation: fade-in .15s ease 1;
-            z-index: var(--zindex-0);
-        }
+    & .modal-overlay {
+      animation: fade-in 0.15s ease 1;
+      background: var(--modal-overlay-bg-color);
+      bottom: 0;
+      cursor: default;
+      display: block;
+      left: 0;
+      position: fixed;
+      right: 0;
+      top: 0;
    }

-    &.active.closing {
-        & .modal-overlay, & .modal-container {
-            animation: fade-out .15s ease 1;
-        }
+    & .modal-container {
+      animation: fade-in 0.15s ease 1;
+      z-index: var(--zindex-0);
    }
+  }
+
+  &.active.closing {
+    & .modal-overlay,
+    & .modal-container {
+      animation: fade-out 0.15s ease 1;
+    }
+  }
 }

 .modal-container {
-    background: var(--modal-container-bg-color);
-    border: solid 1px var(--modal-container-border-color);
-    border-radius: var(--modal-border-radius);
-    box-shadow: var(--modal-box-shadow);
+  background: var(--modal-container-bg-color);
+  border: solid 1px var(--modal-container-border-color);
+  border-radius: var(--modal-border-radius);
+  box-shadow: var(--modal-box-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit-4);
+  max-height: 75vh;
+  max-width: var(--control-width-md);
+  width: 100%;
+
+  & .modal-header {
    display: flex;
-    flex-direction: column;
-    gap: var(--unit-4);
-    max-height: 75vh;
-    max-width: var(--control-width-md);
+    align-items: flex-start;
+    gap: var(--unit-2);
    padding: var(--unit-6);
-    width: 100%;
+    padding-bottom: 0;
+    color: var(--text-color);

-    & .modal-header {
-        color: var(--text-color);
-
-        & button.close {
-            background: none;
-            border: none;
-            padding: 0;
-            line-height: 0;
-            cursor: pointer;
-            opacity: .85;
-            color: var(--secondary-text-color);
-
-            &:hover {
-                opacity: 1;
-            }
-        }
+    & h2 {
+      flex: 1 1 0;
+      align-items: flex-start;
+      font-size: 1rem;
+      margin: 0;
    }

-    & .modal-body {
-        overflow-y: auto;
-        position: relative;
-    }
+    & .close {
+      background: none;
+      border: none;
+      padding: 0;
+      line-height: 0;
+      cursor: pointer;
+      opacity: 0.85;
+      color: var(--secondary-text-color);

-    & .modal-footer {
-        text-align: right;
+      &:hover {
+        opacity: 1;
+      }
    }
+  }
+
+  & .modal-body {
+    overflow-y: auto;
+    padding: 0 var(--unit-6);
+  }
+
+  & .modal-body:not(:has(+ .modal-footer)) {
+    margin-bottom: var(--unit-6);
+  }
+
+  & .modal-footer {
+    padding: var(--unit-6);
+    padding-top: 0;
+    text-align: right;
+  }
+}
+
+.modal.drawer {
+  display: block;
+
+  & .modal-container {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 400px;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+    border: none;
+    border-left: solid 1px var(--modal-container-border-color);
+    border-radius: 0;
+    transform: translateX(100%);
+    animation: fade-in 0.25s ease 1;
+    transition: transform 0.25s ease;
+  }
+
+  &.active {
+    & .modal-container {
+      transform: translateX(0);
+    }
+  }
+
+  &.active.closing {
+    & .modal-container {
+      animation: fade-out 0.25s ease 1;
+      transform: translateX(100%);
+    }
+  }
+}
+
+.scroll-lock {
+  overflow: hidden !important;
 }
--- a/bookmarks/styles/theme/pagination.css
+++ b/bookmarks/styles/theme/pagination.css
@@ -1,61 +1,61 @@
 /* Pagination */
 .pagination {
-    display: flex;
-    list-style: none;
-    margin: var(--unit-1) 0;
-    padding: var(--unit-1) 0;
+  display: flex;
+  list-style: none;
+  margin: var(--unit-1) 0;
+  padding: var(--unit-1) 0;

-    & .page-item {
-        margin: var(--unit-1) var(--unit-o);
+  & .page-item {
+    margin: var(--unit-1) var(--unit-o);

-        & span {
-            display: inline-block;
-            padding: var(--unit-1) var(--unit-1);
-        }
-
-        & a {
-            border-radius: var(--border-radius);
-            display: inline-block;
-            padding: var(--unit-1) var(--unit-2);
-            text-decoration: none;
-
-            &:focus,
-            &:hover {
-                color: var(--primary-text-color);
-            }
-        }
-
-        &.disabled {
-            & a {
-                cursor: default;
-                opacity: .5;
-                pointer-events: none;
-            }
-        }
-
-        &.active {
-            & a {
-                background: var(--primary-color);
-                color: var(--contrast-text-color);
-            }
-        }
-
-        &.page-prev,
-        &.page-next {
-            flex: 1 0 50%;
-        }
-
-        &.page-next {
-            text-align: right;
-        }
-
-        & .page-item-title {
-            margin: 0;
-        }
-
-        & .page-item-subtitle {
-            margin: 0;
-            opacity: .5;
-        }
+    & span {
+      display: inline-block;
+      padding: var(--unit-1) var(--unit-1);
    }
+
+    & a {
+      border-radius: var(--border-radius);
+      display: inline-block;
+      padding: var(--unit-1) var(--unit-2);
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        color: var(--primary-text-color);
+      }
+    }
+
+    &.disabled {
+      & a {
+        cursor: default;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+    }
+
+    &.active {
+      & a {
+        background: var(--primary-color);
+        color: var(--contrast-text-color);
+      }
+    }
+
+    &.page-prev,
+    &.page-next {
+      flex: 1 0 50%;
+    }
+
+    &.page-next {
+      text-align: right;
+    }
+
+    & .page-item-title {
+      margin: 0;
+    }
+
+    & .page-item-subtitle {
+      margin: 0;
+      opacity: 0.5;
+    }
+  }
 }
--- a/bookmarks/styles/theme/tables.css
+++ b/bookmarks/styles/theme/tables.css
@@ -1,26 +1,26 @@
 /* Tables */
 .table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    text-align: left;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+  text-align: left;

-    /* Scrollable tables */
+  /* Scrollable tables */

-    &.table-scroll {
-        display: block;
-        overflow-x: auto;
-        padding-bottom: 0.75rem;
-        white-space: nowrap;
-    }
+  &.table-scroll {
+    display: block;
+    overflow-x: auto;
+    padding-bottom: 0.75rem;
+    white-space: nowrap;
+  }

-    & td,
-    & th {
-        border-bottom: var(--border-width) solid var(--border-color);
-        padding: var(--unit-3) var(--unit-2);
-    }
+  & td,
+  & th {
+    border-bottom: var(--border-width) solid var(--border-color);
+    padding: var(--unit-3) var(--unit-2);
+  }

-    & th {
-        border-bottom-width: var(--border-width-lg);
-    }
-}
+  & th {
+    border-bottom-width: var(--border-width-lg);
+  }
+}
--- a/bookmarks/styles/theme/tabs.css
+++ b/bookmarks/styles/theme/tabs.css
@@ -1,75 +1,76 @@
 /* Tabs */
 :root {
-    --tab-color: var(--text-color);
-    --tab-hover-color: var(--primary-text-color);
-    --tab-active-color: var(--primary-text-color);
-    --tab-highlight-color: var(--primary-color);
+  --tab-color: var(--text-color);
+  --tab-hover-color: var(--primary-text-color);
+  --tab-active-color: var(--primary-text-color);
+  --tab-highlight-color: var(--primary-color);
 }

 .tab {
-    align-items: center;
-    border-bottom: var(--border-width) solid var(--border-color);
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    margin: var(--unit-1) 0 calc(var(--unit-1) - var(--border-width)) 0;
+  align-items: center;
+  border-bottom: var(--border-width) solid var(--border-color);
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: var(--unit-1) 0 calc(var(--unit-1) - var(--border-width)) 0;

+  & .tab-item {
+    margin-top: 0;
+
+    & a {
+      border-bottom: var(--border-width-lg) solid transparent;
+      color: var(--tab-color);
+      display: block;
+      margin: 0 var(--unit-2) 0 0;
+      padding: var(--unit-2) var(--unit-1)
+        calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        color: var(--tab-hover-color);
+      }
+    }
+
+    &.active a,
+    & a.active {
+      border-bottom-color: var(--tab-highlight-color);
+      color: var(--tab-active-color);
+    }
+
+    &.tab-action {
+      flex: 1 0 auto;
+      text-align: right;
+    }
+
+    & .btn-clear {
+      margin-top: calc(-1 * var(--unit-1));
+    }
+  }
+
+  &.tab-block {
    & .tab-item {
-        margin-top: 0;
+      flex: 1 0 0;
+      text-align: center;

-        & a {
-            border-bottom: var(--border-width-lg) solid transparent;
-            color: var(--tab-color);
-            display: block;
-            margin: 0 var(--unit-2) 0 0;
-            padding: var(--unit-2) var(--unit-1) calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
-            text-decoration: none;
+      & a {
+        margin: 0;
+      }

-            &:focus,
-            &:hover {
-                color: var(--tab-hover-color);
-            }
-        }
-
-        &.active a,
-        & a.active {
-            border-bottom-color: var(--tab-highlight-color);
-            color: var(--tab-active-color);
-        }
-
-        &.tab-action {
-            flex: 1 0 auto;
-            text-align: right;
-        }
-
-        & .btn-clear {
-            margin-top: calc(-1 * var(--unit-1));
+      & .badge {
+        &[data-badge]::after {
+          position: absolute;
+          right: var(--unit-h);
+          top: var(--unit-h);
+          transform: translate(0, 0);
        }
+      }
    }
+  }

-    &.tab-block {
-        & .tab-item {
-            flex: 1 0 0;
-            text-align: center;
-
-            & a {
-                margin: 0;
-            }
-
-            & .badge {
-                &[data-badge]::after {
-                    position: absolute;
-                    right: var(--unit-h);
-                    top: var(--unit-h);
-                    transform: translate(0, 0);
-                }
-            }
-        }
+  &:not(.tab-block) {
+    & .badge {
+      padding-right: 0;
    }
-
-    &:not(.tab-block) {
-        & .badge {
-            padding-right: 0;
-        }
-    }
-}
+  }
+}
--- a/bookmarks/styles/theme/toasts.css
+++ b/bookmarks/styles/theme/toasts.css
@@ -1,35 +1,35 @@
 /* Toasts */
 .toast {
-    background: var(--gray-600);
-    border-radius: var(--border-radius);
-    color: var(--contrast-text-color);
-    display: block;
-    padding: var(--layout-spacing);
-    width: 100%;
+  background: var(--gray-600);
+  border-radius: var(--border-radius);
+  color: var(--contrast-text-color);
+  display: block;
+  padding: var(--layout-spacing);
+  width: 100%;

-    &.toast-primary {
-        background: var(--primary-color);
-    }
+  &.toast-primary {
+    background: var(--primary-color);
+  }

-    &.toast-success {
-        background: var(--success-color);
-    }
+  &.toast-success {
+    background: var(--success-color);
+  }

-    &.toast-warning {
-        background: var(--warning-color);
-    }
+  &.toast-warning {
+    background: var(--warning-color);
+  }

-    &.toast-error {
-        background: var(--error-color);
-    }
+  &.toast-error {
+    background: var(--error-color);
+  }

-    .btn-clear {
-        margin: var(--unit-h);
-    }
+  .btn-clear {
+    margin: var(--unit-h);
+  }

-    p {
-        &:last-child {
-            margin-bottom: 0;
-        }
+  p {
+    &:last-child {
+      margin-bottom: 0;
    }
+  }
 }
--- a/bookmarks/styles/theme/typography.css
+++ b/bookmarks/styles/theme/typography.css
@@ -6,11 +6,11 @@ h3,
 h4,
 h5,
 h6 {
-    color: inherit;
-    font-weight: 500;
-    line-height: 1.2;
-    margin-bottom: 0.5em;
-    margin-top: 0;
+  color: inherit;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 0.5em;
+  margin-top: 0;
 }
 .h1,
 .h2,
@@ -18,100 +18,100 @@ h6 {
 .h4,
 .h5,
 .h6 {
-    font-weight: 500;
+  font-weight: 500;
 }
 h1,
 .h1 {
-    font-size: 2rem;
+  font-size: 2rem;
 }
 h2,
 .h2 {
-    font-size: 1.6rem;
+  font-size: 1.6rem;
 }
 h3,
 .h3 {
-    font-size: 1.4rem;
+  font-size: 1.4rem;
 }
 h4,
 .h4 {
-    font-size: 1.2rem;
+  font-size: 1.2rem;
 }
 h5,
 .h5 {
-    font-size: 1rem;
+  font-size: 1rem;
 }
 h6,
 .h6 {
-    font-size: 0.8rem;
+  font-size: 0.8rem;
 }

 /* Paragraphs */
 p {
-    margin: 0 0 var(--line-height);
+  margin: 0 0 var(--line-height);
 }

 /* Semantic text elements */
 a,
 ins,
 u {
-    text-decoration-skip-ink: auto;
+  text-decoration-skip-ink: auto;
 }

 abbr[title] {
-    border-bottom: var(--border-width) dotted;
-    cursor: help;
-    text-decoration: none;
+  border-bottom: var(--border-width) dotted;
+  cursor: help;
+  text-decoration: none;
 }

 /* Blockquote */
 blockquote {
-    border-left: var(--border-width-lg) solid var(--border-color);
-    margin-left: 0;
-    padding: var(--unit-2) var(--unit-4);
+  border-left: var(--border-width-lg) solid var(--border-color);
+  margin-left: 0;
+  padding: var(--unit-2) var(--unit-4);

-    & p:last-child {
-        margin-bottom: 0;
-    }
+  & p:last-child {
+    margin-bottom: 0;
+  }
 }

 /* Lists */
 ul,
 ol {
+  margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
+  padding: 0;
+
+  & ul,
+  & ol {
    margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
-    padding: 0;
+  }

-    & ul,
-    & ol {
-        margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
-    }
-
-    & li {
-        margin-top: var(--unit-2);
-    }
+  & li {
+    margin-top: var(--unit-2);
+  }
 }

 ul {
-    list-style: disc inside;
+  list-style: disc inside;

-    & ul {
-        list-style-type: circle;
-    }
+  & ul {
+    list-style-type: circle;
+  }
 }

 ol {
-    list-style: decimal inside;
+  list-style: decimal inside;

-    & ol {
-        list-style-type: lower-alpha;
-    }
+  & ol {
+    list-style-type: lower-alpha;
+  }
 }

 dl {
-    & dt {
-        font-weight: bold;
-    }
+  & dt {
+    font-weight: bold;
+  }

-    & dd {
-        margin: var(--unit-1) 0 var(--unit-4) 0;
-    }
+  & dd {
+    margin: var(--unit-1) 0 var(--unit-4) 0;
+  }
 }
--- a/bookmarks/styles/theme/utilities.css
+++ b/bookmarks/styles/theme/utilities.css
@@ -1,296 +1,296 @@
 /* Colors */
 .text-primary {
-    color: var(--primary-text-color);
+  color: var(--primary-text-color);
 }

 .text-secondary {
-    color: var(--secondary-text-color);
+  color: var(--secondary-text-color);
 }

 .text-tertiary {
-    color: var(--tertiary-text-color);
+  color: var(--tertiary-text-color);
 }

 .text-success {
-    color: var(--success-color);
+  color: var(--success-color);
 }

 .text-warning {
-    color: var(--warning-color);
+  color: var(--warning-color);
 }

 .text-error {
-    color: var(--error-color);
+  color: var(--error-color);
 }

 .icon-color {
-    color: var(--icon-color);
+  color: var(--icon-color);
 }

 /* Display */
 .d-block {
-    display: block;
+  display: block;
 }

 .d-inline {
-    display: inline;
+  display: inline;
 }

 .d-inline-block {
-    display: inline-block;
+  display: inline-block;
 }

 .d-flex {
-    display: flex;
+  display: flex;
 }

 .d-inline-flex {
-    display: inline-flex;
+  display: inline-flex;
 }

 .d-none,
 .d-hide {
-    display: none !important;
+  display: none !important;
 }

 .d-visible {
-    visibility: visible;
+  visibility: visible;
 }

 .d-invisible {
-    visibility: hidden;
+  visibility: hidden;
 }

 .text-hide {
-    background: transparent;
-    border: 0;
-    color: transparent;
-    font-size: 0;
-    line-height: 0;
-    text-shadow: none;
+  background: transparent;
+  border: 0;
+  color: transparent;
+  font-size: 0;
+  line-height: 0;
+  text-shadow: none;
 }

 .text-assistive {
-    border: 0;
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }

 /* Loading */
 .loading {
-    color: transparent !important;
-    min-height: var(--unit-4);
-    pointer-events: none;
-    position: relative;
+  color: transparent !important;
+  min-height: var(--unit-4);
+  pointer-events: none;
+  position: relative;
+
+  &::after {
+    animation: loading 500ms infinite linear;
+    background: transparent;
+    border: var(--border-width-lg) solid var(--primary-color);
+    border-radius: 50%;
+    border-right-color: transparent;
+    border-top-color: transparent;
+    content: "";
+    display: block;
+    height: var(--unit-4);
+    left: 50%;
+    margin-left: calc(-1 * var(--unit-2));
+    margin-top: calc(-1 * var(--unit-2));
+    opacity: 1;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    width: var(--unit-4);
+    z-index: var(--zindex-0);
+  }
+
+  &.loading-lg {
+    min-height: var(--unit-10);

    &::after {
-        animation: loading 500ms infinite linear;
-        background: transparent;
-        border: var(--border-width-lg) solid var(--primary-color);
-        border-radius: 50%;
-        border-right-color: transparent;
-        border-top-color: transparent;
-        content: "";
-        display: block;
-        height: var(--unit-4);
-        left: 50%;
-        margin-left: calc(-1 * var(--unit-2));
-        margin-top: calc(-1 * var(--unit-2));
-        opacity: 1;
-        padding: 0;
-        position: absolute;
-        top: 50%;
-        width: var(--unit-4);
-        z-index: var(--zindex-0);
-    }
-
-    &.loading-lg {
-        min-height: var(--unit-10);
-
-        &::after {
-            height: var(--unit-8);
-            margin-left: calc(-1 * var(--unit-4));
-            margin-top: calc(-1 * var(--unit-4));
-            width: var(--unit-8);
-        }
+      height: var(--unit-8);
+      margin-left: calc(-1 * var(--unit-4));
+      margin-top: calc(-1 * var(--unit-4));
+      width: var(--unit-8);
    }
+  }
 }

 /* Position */
 .m-0 {
-    margin: 0 !important;
+  margin: 0 !important;
 }

 .mb-0 {
-    margin-bottom: 0 !important;
+  margin-bottom: 0 !important;
 }

 .ml-0 {
-    margin-left: 0 !important;
+  margin-left: 0 !important;
 }

 .mr-0 {
-    margin-right: 0 !important;
+  margin-right: 0 !important;
 }

 .mt-0 {
-    margin-top: 0 !important;
+  margin-top: 0 !important;
 }

 .mx-0 {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
 }

 .my-0 {
-    margin-bottom: 0 !important;
-    margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  margin-top: 0 !important;
 }

 .m-1 {
-    margin: var(--unit-1) !important;
+  margin: var(--unit-1) !important;
 }

 .mb-1 {
-    margin-bottom: var(--unit-1) !important;
+  margin-bottom: var(--unit-1) !important;
 }

 .ml-1 {
-    margin-left: var(--unit-1) !important;
+  margin-left: var(--unit-1) !important;
 }

 .mr-1 {
-    margin-right: var(--unit-1) !important;
+  margin-right: var(--unit-1) !important;
 }

 .mt-1 {
-    margin-top: var(--unit-1) !important;
+  margin-top: var(--unit-1) !important;
 }

 .mx-1 {
-    margin-left: var(--unit-1) !important;
-    margin-right: var(--unit-1) !important;
+  margin-left: var(--unit-1) !important;
+  margin-right: var(--unit-1) !important;
 }

 .my-1 {
-    margin-bottom: var(--unit-1) !important;
-    margin-top: var(--unit-1) !important;
+  margin-bottom: var(--unit-1) !important;
+  margin-top: var(--unit-1) !important;
 }

 .m-2 {
-    margin: var(--unit-2) !important;
+  margin: var(--unit-2) !important;
 }

 .mb-2 {
-    margin-bottom: var(--unit-2) !important;
+  margin-bottom: var(--unit-2) !important;
 }

 .ml-2 {
-    margin-left: var(--unit-2) !important;
+  margin-left: var(--unit-2) !important;
 }

 .mr-2 {
-    margin-right: var(--unit-2) !important;
+  margin-right: var(--unit-2) !important;
 }

 .mt-2 {
-    margin-top: var(--unit-2) !important;
+  margin-top: var(--unit-2) !important;
 }

 .mx-2 {
-    margin-left: var(--unit-2) !important;
-    margin-right: var(--unit-2) !important;
+  margin-left: var(--unit-2) !important;
+  margin-right: var(--unit-2) !important;
 }

 .my-2 {
-    margin-bottom: var(--unit-2) !important;
-    margin-top: var(--unit-2) !important;
+  margin-bottom: var(--unit-2) !important;
+  margin-top: var(--unit-2) !important;
 }

 .m-4 {
-    margin: var(--unit-4) !important;
+  margin: var(--unit-4) !important;
 }

 .mb-4 {
-    margin-bottom: var(--unit-4) !important;
+  margin-bottom: var(--unit-4) !important;
 }

 .ml-4 {
-    margin-left: var(--unit-4) !important;
+  margin-left: var(--unit-4) !important;
 }

 .mr-4 {
-    margin-right: var(--unit-4) !important;
+  margin-right: var(--unit-4) !important;
 }

 .mt-4 {
-    margin-top: var(--unit-4) !important;
+  margin-top: var(--unit-4) !important;
 }

 .mx-4 {
-    margin-left: var(--unit-4) !important;
-    margin-right: var(--unit-4) !important;
+  margin-left: var(--unit-4) !important;
+  margin-right: var(--unit-4) !important;
 }

 .my-4 {
-    margin-bottom: var(--unit-4) !important;
-    margin-top: var(--unit-4) !important;
+  margin-bottom: var(--unit-4) !important;
+  margin-top: var(--unit-4) !important;
 }

 .mx-auto {
-    margin-left: auto;
-    margin-right: auto;
+  margin-left: auto;
+  margin-right: auto;
 }

 /* Text */
 .text-normal {
-    font-weight: normal;
+  font-weight: normal;
 }

 .text-bold {
-    font-weight: bold;
+  font-weight: bold;
 }

 .text-italic {
-    font-style: italic;
+  font-style: italic;
 }

 .text-large {
-    font-size: 1.2em;
+  font-size: 1.2em;
 }

 .text-small {
-    font-size: .9em;
+  font-size: 0.9em;
 }

 .text-tiny {
-    font-size: .8em;
+  font-size: 0.8em;
 }

 .text-muted {
-    opacity: .8;
+  opacity: 0.8;
 }

 .truncate {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

 /* Flex */
 .align-baseline {
-    align-items: baseline;
+  align-items: baseline;
 }

 .align-center {
-    align-items: center;
+  align-items: center;
 }

 .justify-between {
-    justify-content: space-between;
+  justify-content: space-between;
 }
--- a/bookmarks/styles/theme/variables.css
+++ b/bookmarks/styles/theme/variables.css
@@ -1,135 +1,149 @@
 :root {
-    /* Color palette */
-    --gray-50: rgb(249, 250, 251);
-    --gray-100: rgb(243, 244, 246);
-    --gray-200: rgb(229, 231, 235);
-    --gray-300: rgb(209, 213, 219);
-    --gray-400: rgb(156, 163, 175);
-    --gray-500: rgb(107, 114, 128);
-    --gray-600: rgb(75, 85, 99);
-    --gray-700: rgb(55, 65, 81);
-    --gray-800: rgb(31, 41, 55);
-    --gray-900: rgb(17, 24, 39);
+  /* Color palette */
+  --gray-50: rgb(249, 250, 251);
+  --gray-100: rgb(243, 244, 246);
+  --gray-200: rgb(229, 231, 235);
+  --gray-300: rgb(209, 213, 219);
+  --gray-400: rgb(156, 163, 175);
+  --gray-500: rgb(107, 114, 128);
+  --gray-600: rgb(75, 85, 99);
+  --gray-700: rgb(55, 65, 81);
+  --gray-800: rgb(31, 41, 55);
+  --gray-900: rgb(17, 24, 39);

-    --primary-color: hsl(241, 63%, 59%);
-    --primary-color-highlight: hsl(241, 63%, 64%);
-    --primary-color-shade: hsl(241, 63%, 59%, 0.075);
+  --primary-color: hsl(241, 63%, 59%);
+  --primary-color-highlight: hsl(241, 63%, 64%);
+  --primary-color-shade: hsl(241, 63%, 59%, 0.075);

-    --alternative-color: hsl(179, 94%, 29%);
-    --alternative-color-dark: hsl(179, 94%, 22%);
+  --alternative-color: hsl(179, 94%, 29%);
+  --alternative-color-dark: hsl(179, 94%, 22%);

-    --success-color: hsl(142, 76%, 36%);
-    --success-color-highlight: hsl(142, 76%, 40%);
-    --success-color-shade: hsla(142, 76%, 36%, 0.1);
+  --success-color: hsl(142, 76%, 36%);
+  --success-color-highlight: hsl(142, 76%, 40%);
+  --success-color-shade: hsla(142, 76%, 36%, 0.1);

-    --warning-color: hsl(38, 92%, 50%);
-    --warning-color-highlight: hsl(38, 92%, 55%);
-    --warning-color-shade: hsla(38, 92%, 50%, 0.1);
+  --warning-color: hsl(38, 92%, 50%);
+  --warning-color-highlight: hsl(38, 92%, 55%);
+  --warning-color-shade: hsla(38, 92%, 50%, 0.1);

-    --error-color: hsl(0, 72%, 51%);
-    --error-color-highlight: hsl(0, 72%, 60%);
-    --error-color-shade: hsla(0, 72%, 51%, 0.1);
+  --error-color: hsl(0, 72%, 51%);
+  --error-color-highlight: hsl(0, 72%, 60%);
+  --error-color-shade: hsla(0, 72%, 51%, 0.1);

-    /* Core colors */
-    --text-color: var(--gray-700);
-    --secondary-text-color: var(--gray-500);
-    --tertiary-text-color: var(--gray-500);
-    --contrast-text-color: #fff;
-    --primary-text-color: hsl(241, 63%, 55%);
+  /* Core colors */
+  --text-color: var(--gray-700);
+  --secondary-text-color: var(--gray-500);
+  --tertiary-text-color: var(--gray-500);
+  --contrast-text-color: #fff;
+  --primary-text-color: hsl(241, 63%, 55%);

-    --link-color: var(--primary-text-color);
-    --secondary-link-color: hsla(241, 63%, 54%, 0.8);
+  --link-color: var(--primary-text-color);
+  --secondary-link-color: hsla(241, 63%, 54%, 0.8);

-    --icon-color: var(--gray-500);
+  --icon-color: var(--gray-500);

-    --border-color: var(--gray-300);
-    --secondary-border-color: var(--gray-200);
+  --border-color: var(--gray-300);
+  --secondary-border-color: var(--gray-200);

-    --body-color: #fff;
-    --body-color-contrast: var(--gray-100);
+  --body-color: #fff;
+  --body-color-contrast: var(--gray-100);

-    /* Fonts */
-    --base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
-    --mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
-    --fallback-font-family: "Helvetica Neue", sans-serif;
-    --cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", var(--fallback-font-family);
-    --cjk-zh-hant-font-family: var(--base-font-family), "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", var(--fallback-font-family);
-    --cjk-jp-font-family: var(--base-font-family), "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, var(--fallback-font-family);
-    --cjk-ko-font-family: var(--base-font-family), "Malgun Gothic", var(--fallback-font-family);
-    --body-font-family: var(--base-font-family), var(--fallback-font-family);
+  /* Fonts */
+  --base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+    Roboto;
+  --mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier,
+    monospace;
+  --fallback-font-family: "Helvetica Neue", sans-serif;
+  --cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", var(--fallback-font-family);
+  --cjk-zh-hant-font-family: var(--base-font-family), "PingFang TC",
+    "Hiragino Sans CNS", "Microsoft JhengHei", var(--fallback-font-family);
+  --cjk-jp-font-family: var(--base-font-family), "Hiragino Sans",
+    "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo,
+    var(--fallback-font-family);
+  --cjk-ko-font-family: var(--base-font-family), "Malgun Gothic",
+    var(--fallback-font-family);
+  --body-font-family: var(--base-font-family), var(--fallback-font-family);

-    /* Unit sizes */
-    --unit-o: 0.05rem;
-    --unit-h: 0.1rem;
-    --unit-1: 0.2rem;
-    --unit-2: 0.4rem;
-    --unit-3: 0.6rem;
-    --unit-4: 0.8rem;
-    --unit-5: 1rem;
-    --unit-6: 1.2rem;
-    --unit-7: 1.4rem;
-    --unit-8: 1.6rem;
-    --unit-9: 1.8rem;
-    --unit-10: 2rem;
-    --unit-12: 2.4rem;
-    --unit-16: 3.2rem;
+  /* Unit sizes */
+  --unit-o: 0.05rem;
+  --unit-h: 0.1rem;
+  --unit-1: 0.2rem;
+  --unit-2: 0.4rem;
+  --unit-3: 0.6rem;
+  --unit-4: 0.8rem;
+  --unit-5: 1rem;
+  --unit-6: 1.2rem;
+  --unit-7: 1.4rem;
+  --unit-8: 1.6rem;
+  --unit-9: 1.8rem;
+  --unit-10: 2rem;
+  --unit-12: 2.4rem;
+  --unit-16: 3.2rem;

-    /* Font sizes */
-    --html-font-size: 20px;
-    --html-line-height: 1.5;
-    --font-size: 0.7rem;
-    --font-size-sm: 0.65rem;
-    --font-size-lg: 0.8rem;
-    --line-height: 1rem;
+  /* Font sizes */
+  --html-font-size: 20px;
+  --html-line-height: 1.5;
+  --font-size: 0.7rem;
+  --font-size-sm: 0.65rem;
+  --font-size-lg: 0.8rem;
+  --line-height: 1rem;

-    /* Sizes */
-    --layout-spacing: var(--unit-2);
-    --layout-spacing-sm: var(--unit-1);
-    --layout-spacing-lg: var(--unit-4);
-    --border-radius: var(--unit-1);
-    --border-radius-lg: var(--unit-2);
-    --border-width: var(--unit-o);
-    --border-width-lg: var(--unit-h);
-    --control-size: var(--unit-8);
-    --control-size-sm: var(--unit-6);
-    --control-size-lg: var(--unit-9);
-    --control-padding-x: var(--unit-2);
-    --control-padding-x-sm: calc(var(--unit-2) * 0.75);
-    --control-padding-x-lg: calc(var(--unit-2) * 1.5);
-    --control-padding-y: calc((var(--control-size) - var(--line-height)) / 2 - var(--border-width));
-    --control-padding-y-sm: calc((var(--control-size-sm) - var(--line-height)) / 2 - var(--border-width));
-    --control-padding-y-lg: calc((var(--control-size-lg) - var(--line-height)) / 2 - var(--border-width));
-    --control-icon-size: 0.8rem;
+  /* Sizes */
+  --layout-spacing: var(--unit-2);
+  --layout-spacing-sm: var(--unit-1);
+  --layout-spacing-lg: var(--unit-4);
+  --border-radius: var(--unit-1);
+  --border-radius-lg: var(--unit-2);
+  --border-width: var(--unit-o);
+  --border-width-lg: var(--unit-h);
+  --control-size: var(--unit-8);
+  --control-size-sm: var(--unit-6);
+  --control-size-lg: var(--unit-9);
+  --control-padding-x: var(--unit-2);
+  --control-padding-x-sm: calc(var(--unit-2) * 0.75);
+  --control-padding-x-lg: calc(var(--unit-2) * 1.5);
+  --control-padding-y: calc(
+    (var(--control-size) - var(--line-height)) / 2 - var(--border-width)
+  );
+  --control-padding-y-sm: calc(
+    (var(--control-size-sm) - var(--line-height)) / 2 - var(--border-width)
+  );
+  --control-padding-y-lg: calc(
+    (var(--control-size-lg) - var(--line-height)) / 2 - var(--border-width)
+  );
+  --control-icon-size: 0.8rem;

-    --control-width-xs: 180px;
-    --control-width-sm: 320px;
-    --control-width-md: 640px;
-    --control-width-lg: 960px;
-    --control-width-xl: 1280px;
+  --control-width-xs: 180px;
+  --control-width-sm: 320px;
+  --control-width-md: 640px;
+  --control-width-lg: 960px;
+  --control-width-xl: 1280px;

-    /* Responsive breakpoints */
-    --size-xs: 480px;
-    --size-sm: 600px;
-    --size-md: 840px;
-    --size-lg: 960px;
-    --size-xl: 1280px;
-    --size-2x: 1440px;
+  /* Responsive breakpoints */
+  --size-xs: 480px;
+  --size-sm: 600px;
+  --size-md: 840px;
+  --size-lg: 960px;
+  --size-xl: 1280px;
+  --size-2x: 1440px;

-    --responsive-breakpoint: var(--size-xs);
+  --responsive-breakpoint: var(--size-xs);

-    /* Z-index */
-    --zindex-0: 1;
-    --zindex-1: 100;
-    --zindex-2: 200;
-    --zindex-3: 300;
-    --zindex-4: 400;
+  /* Z-index */
+  --zindex-0: 1;
+  --zindex-1: 100;
+  --zindex-2: 200;
+  --zindex-3: 300;
+  --zindex-4: 400;

-    /* Focus */
-    --focus-outline: 2px solid var(--primary-color);
-    --focus-outline-offset: 2px;
+  /* Focus */
+  --focus-outline: 2px solid var(--primary-color);
+  --focus-outline-offset: 2px;

-    /* Shadows */
-    --box-shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-    --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  /* Shadows */
+  --box-shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
--- a/bookmarks/templates/bookmarks/archive.html
+++ b/bookmarks/templates/bookmarks/archive.html
@@ -4,45 +4,49 @@
 {% load bookmarks %}

 {% block content %}
-  <div ld-bulk-edit class="bookmarks-page grid columns-md-1">
+  <div ld-bulk-edit
+       class="bookmarks-page grid columns-md-1 {% if bookmark_list.collapse_side_panel %}collapse-side-panel{% endif %}">

    {# Bookmark list #}
-    <section class="content-area col-2">
+    <section class="main content-area col-2">
      <div class="content-area-header mb-0">
        <h2>Archived bookmarks</h2>
        <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags mode='archived' %}
+          {% bookmark_search bookmark_list.search mode='archived' %}
          {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
-          </button>
+          <button ld-filter-drawer-trigger class="btn ml-2">Filters</button>
        </div>
      </div>

-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
            action="{{ bookmark_list.action_url|safe }}"
            method="post" autocomplete="off">
        {% csrf_token %}
        {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_archive' %}

-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
          {% include 'bookmarks/bookmark_list.html' %}
        </div>
      </form>
    </section>

    {# Tag cloud #}
-    <section class="content-area col-1 hide-md">
+    <section class="side-panel content-area col-1">
      <div class="content-area-header">
        <h2>Tags</h2>
      </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
        {% include 'bookmarks/tag_cloud.html' %}
      </div>
    </section>
  </div>
 {% endblock %}
+
+{% block overlays %}
+  {# Bookmark details #}
+  <turbo-frame id="details-modal" target="_top">
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </turbo-frame>
+{% endblock %}
--- a/bookmarks/templates/bookmarks/bookmark_list.html
+++ b/bookmarks/templates/bookmarks/bookmark_list.html
@@ -6,10 +6,12 @@
  {% include 'bookmarks/empty_bookmarks.html' %}
 {% else %}
  <ul class="bookmark-list{% if bookmark_list.show_notes %} show-notes{% endif %}"
+      role="list" tabindex="-1"
      style="--ld-bookmark-description-max-lines:{{ bookmark_list.description_max_lines }};"
      data-bookmarks-total="{{ bookmark_list.bookmarks_total }}">
    {% for bookmark_item in bookmark_list.items %}
-      <li ld-bookmark-item{% if bookmark_item.css_classes %} class="{{ bookmark_item.css_classes }}"{% endif %}>
+      <li ld-bookmark-item data-bookmark-id="{{ bookmark_item.id }}" role="listitem"
+          {% if bookmark_item.css_classes %}class="{{ bookmark_item.css_classes }}"{% endif %}>
        <div class="content">
          <div class="title">
            <label class="form-checkbox bulk-edit-checkbox">
@@ -78,10 +80,8 @@
            {% endif %}
            {# View link is visible for both owned and shared bookmarks #}
            {% if bookmark_list.show_view_action %}
-              <a ld-fetch="{% url 'bookmarks:details_modal' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}"
-                 ld-on="click" ld-target="body|append"
-                 data-turbo-prefetch="false"
-                 href="{% url 'bookmarks:details' bookmark_item.id %}">View</a>
+              <a href="{{ bookmark_item.details_url }}" class="view-action"
+                 data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
            {% endif %}
            {% if bookmark_item.is_editable %}
              {# Bookmark owner actions #}
@@ -145,14 +145,20 @@
            {% endif %}
          </div>
        </div>
-        {% if bookmark_list.show_preview_images and bookmark_item.preview_image_file %}
-          <img class="preview-image" src="{% static bookmark_item.preview_image_file %}" loading="lazy"/>
+        {% if bookmark_list.show_preview_images %}
+          {% if bookmark_item.preview_image_file %}
+            <img class="preview-image" src="{% static bookmark_item.preview_image_file %}" loading="lazy"/>
+          {% else %}
+            <div class="preview-image placeholder">
+              <div class="img"/>
+            </div>
+          {% endif %}
        {% endif %}
      </li>
    {% endfor %}
  </ul>

-  <div class="bookmark-pagination">
+  <div class="bookmark-pagination{% if request.user_profile.sticky_pagination %} sticky{% endif %}">
    {% pagination bookmark_list.bookmarks_page %}
  </div>
 {% endif %}
--- a/bookmarks/templates/bookmarks/bulk_edit/bar.html
+++ b/bookmarks/templates/bookmarks/bulk_edit/bar.html
@@ -23,9 +23,8 @@
          <option value="bulk_unshare">Unshare</option>
        {% endif %}
      </select>
-      <div class="tag-autocomplete d-none">
-        <input ld-tag-autocomplete variant="small"
-               name="bulk_tag_string" class="form-input input-sm" placeholder="Tag names...">
+      <div class="tag-autocomplete d-none" ld-tag-autocomplete>
+        <input name="bulk_tag_string" class="form-input input-sm" placeholder="Tag names..." variant="small">
      </div>
      <button ld-confirm-button type="submit" name="bulk_execute" class="btn btn-link btn-sm">
        <span>Execute</span>
--- a/bookmarks/templates/bookmarks/details.html
+++ b/bookmarks/templates/bookmarks/details.html
@@ -1,13 +0,0 @@
-{% extends 'bookmarks/layout.html' %}
-
-{% block content %}
-  <div class="bookmark-details page">
-    {% if details.is_editable %}
-      {% include 'bookmarks/details/actions.html' %}
-    {% endif %}
-    {% include 'bookmarks/details/title.html' %}
-    <div>
-      {% include 'bookmarks/details/form.html' %}
-    </div>
-  </div>
-{% endblock %}
--- a/bookmarks/templates/bookmarks/details/actions.html
+++ b/bookmarks/templates/bookmarks/details/actions.html
@@ -1,16 +0,0 @@
-<div class="actions">
-  <div class="left-actions">
-    <a class="btn btn-wide"
-       href="{% url 'bookmarks:edit' details.bookmark.id %}?return_url={{ details.edit_return_url|urlencode }}">Edit</a>
-  </div>
-  <div class="right-actions">
-    <form action="{% url 'bookmarks:index.action' %}?return_url={{ details.delete_return_url|urlencode }}"
-          method="post">
-      {% csrf_token %}
-      <button ld-confirm-button type="submit" name="remove" value="{{ details.bookmark.id }}"
-              class="btn btn-error btn-wide">
-        Delete...
-      </button>
-    </form>
-  </div>
-</div>
--- a/bookmarks/templates/bookmarks/details/assets.html
+++ b/bookmarks/templates/bookmarks/details/assets.html
@@ -1,7 +1,4 @@
-<div {% if details.has_pending_assets %}
-  ld-fetch="{% url 'bookmarks:details_assets' details.bookmark.id %}"
-  ld-interval="5" ld-target="self|outerHTML"
-{% endif %}>
+<div>
  {% if details.assets %}
    <div class="assets">
      {% for asset in details.assets %}
@@ -36,10 +33,10 @@

  {% if details.is_editable %}
    <div class="assets-actions">
-      <button type="submit" name="create_snapshot" class="btn btn-sm"
+      <button type="submit" name="create_html_snapshot" value="{{ details.bookmark.id }}" class="btn btn-sm"
              {% if details.has_pending_assets %}disabled{% endif %}>Create HTML snapshot
      </button>
-      <button ld-upload-button id="upload-asset" name="upload_asset" value="{{ details.bookmark.id }}" type="button"
+      <button ld-upload-button id="upload-asset" name="upload_asset" value="{{ details.bookmark.id }}" type="submit"
              class="btn btn-sm">Upload file
      </button>
      <input id="upload-asset-file" name="upload_asset_file" type="file" class="d-hide">
--- a/bookmarks/templates/bookmarks/details/form.html
+++ b/bookmarks/templates/bookmarks/details/form.html
@@ -1,9 +1,10 @@
 {% load static %}
 {% load shared %}

-<form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud,refresh-details"
-      action="{% url 'bookmarks:details' details.bookmark.id %}"
-      method="post">
+<form action="{{ details.action_url }}" method="post" enctype="multipart/form-data">
+  {% csrf_token %}
+  <input type="hidden" name="update_state" value="{{ details.bookmark.id }}">
+
  <div class="weblinks">
    <a class="weblink" href="{{ details.bookmark.url }}" rel="noopener"
       target="{{ details.profile.bookmark_link_target }}">
@@ -39,15 +40,14 @@
  </div>
  {% if details.preview_image_enabled and details.bookmark.preview_image_file %}
    <div class="preview-image">
-      <img src="{% static details.bookmark.preview_image_file %}"/>
+      <img src="{% static details.bookmark.preview_image_file %}" alt=""/>
    </div>
  {% endif %}
-  <dl class="grid columns-2 columns-sm-1 gap-0">
+  <div class="sections grid columns-2 columns-sm-1 gap-0">
    {% if details.is_editable %}
-      <div class="status col-2">
-        <dt>Status</dt>
-        <dd class="d-flex" style="gap: .8rem">
-          {% csrf_token %}
+      <section class="status col-2">
+        <h3>Status</h3>
+        <div class="d-flex" style="gap: .8rem">
          <div class="form-group">
            <label class="form-switch">
              <input ld-auto-submit type="checkbox" name="is_archived"
@@ -71,44 +71,44 @@
              </label>
            </div>
          {% endif %}
-        </dd>
-      </div>
+        </div>
+      </section>
    {% endif %}
    {% if details.show_files %}
-      <div class="files col-2">
-        <dt>Files</dt>
-        <dd>
+      <section class="files col-2">
+        <h3>Files</h3>
+        <div>
          {% include 'bookmarks/details/assets.html' %}
-        </dd>
-      </div>
+        </div>
+      </section>
    {% endif %}
    {% if details.bookmark.tag_names %}
-      <div class="tags col-1">
-        <dt>Tags</dt>
-        <dd>
+      <section class="tags col-1">
+        <h3 id="details-modal-tags-title">Tags</h3>
+        <div>
          {% for tag_name in details.bookmark.tag_names %}
            <a href="{% url 'bookmarks:index' %}?{% add_tag_to_query tag_name %}">{{ tag_name|hash_tag }}</a>
          {% endfor %}
-        </dd>
-      </div>
+        </div>
+      </section>
    {% endif %}
-    <div class="date-added col-1">
-      <dt>Date added</dt>
-      <dd>
+    <section class="date-added col-1">
+      <h3>Date added</h3>
+      <div>
        <span>{{ details.bookmark.date_added }}</span>
-      </dd>
-    </div>
-    {% if details.bookmark.resolved_description %}
-      <div class="description col-2">
-        <dt>Description</dt>
-        <dd>{{ details.bookmark.resolved_description }}</dd>
      </div>
+    </section>
+    {% if details.bookmark.resolved_description %}
+      <section class="description col-2">
+        <h3>Description</h3>
+        <div>{{ details.bookmark.resolved_description }}</div>
+      </section>
    {% endif %}
    {% if details.bookmark.notes %}
-      <div class="notes col-2">
-        <dt>Notes</dt>
-        <dd class="markdown">{% markdown details.bookmark.notes %}</dd>
-      </div>
+      <section class="notes col-2">
+        <h3>Notes</h3>
+        <div class="markdown">{% markdown details.bookmark.notes %}</div>
+      </section>
    {% endif %}
-  </dl>
+  </div>
 </form>
--- a/bookmarks/templates/bookmarks/details/modal.html
+++ b/bookmarks/templates/bookmarks/details/modal.html
@@ -0,0 +1,43 @@
+<div class="modal active bookmark-details" ld-details-modal
+     data-bookmark-id="{{ details.bookmark.id }}" data-close-url="{{ details.close_url }}">
+  <div class="modal-overlay"></div>
+  <div class="modal-container" role="dialog" aria-modal="true">
+    <div class="modal-header">
+      <h2>{{ details.bookmark.resolved_title }}</h2>
+      <button class="close" aria-label="Close dialog">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <path d="M18 6l-12 12"></path>
+          <path d="M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        {% include 'bookmarks/details/form.html' %}
+      </div>
+    </div>
+
+    {% if details.is_editable %}
+      <div class="modal-footer">
+        <div class="actions">
+          <div class="left-actions">
+            <a class="btn btn-wide"
+               href="{% url 'bookmarks:edit' details.bookmark.id %}?return_url={{ details.edit_return_url|urlencode }}">Edit</a>
+          </div>
+          <div class="right-actions">
+            <form action="{{ details.delete_url }}" method="post" data-turbo-action="replace">
+              {% csrf_token %}
+              <input type="hidden" name="disable_turbo" value="true">
+              <button ld-confirm-button class="btn btn-error btn-wide"
+                      type="submit" name="remove" value="{{ details.bookmark.id }}">
+                Delete...
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</div>
--- a/bookmarks/templates/bookmarks/details/title.html
+++ b/bookmarks/templates/bookmarks/details/title.html
@@ -1,3 +0,0 @@
-<h2>
-  {{ details.bookmark.resolved_title }}
-</h2>
--- a/bookmarks/templates/bookmarks/details_modal.html
+++ b/bookmarks/templates/bookmarks/details_modal.html
@@ -1,30 +0,0 @@
-<div ld-modal
-     ld-fetch="{% url 'bookmarks:details_modal' details.bookmark.id %}" ld-on="refresh-details"
-     ld-select=".content" ld-target=".modal.bookmark-details .content|outerHTML"
-     class="modal active bookmark-details">
-  <div class="modal-overlay" aria-label="Close"></div>
-  <div class="modal-container">
-    <div class="modal-header">
-      {% include 'bookmarks/details/title.html' %}
-      <button class="close">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M18 6l-12 12"></path>
-          <path d="M6 6l12 12"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        {% include 'bookmarks/details/form.html' %}
-      </div>
-    </div>
-
-    {% if details.is_editable %}
-      <div class="modal-footer">
-        {% include 'bookmarks/details/actions.html' %}
-      </div>
-    {% endif %}
-  </div>
-</div>
--- a/bookmarks/templates/bookmarks/form.html
+++ b/bookmarks/templates/bookmarks/form.html
@@ -3,12 +3,13 @@

 <div class="bookmarks-form">
  {% csrf_token %}
-  {{ form.website_title }}
-  {{ form.website_description }}
  {{ form.auto_close|attr:"type:hidden" }}
  <div class="form-group {% if form.url.errors %}has-error{% endif %}">
    <label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
-    {{ form.url|add_class:"form-input"|attr:"autofocus"|attr:"placeholder: " }}
+    <div class="has-icon-right">
+      {{ form.url|add_class:"form-input"|attr:"autofocus"|attr:"placeholder: " }}
+      <i class="form-icon loading"></i>
+    </div>
    {% if form.url.errors %}
      <div class="form-input-hint">
        {{ form.url.errors }}
@@ -19,9 +20,9 @@
      The form has been pre-filled with the existing bookmark, and saving the form will update the existing bookmark.
    </div>
  </div>
-  <div class="form-group">
+  <div class="form-group" ld-tag-autocomplete>
    <label for="{{ form.tag_string.id_for_label }}" class="form-label">Tags</label>
-    {{ form.tag_string|add_class:"form-input"|attr:"ld-tag-autocomplete"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
+    {{ form.tag_string|add_class:"form-input"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
    <div class="form-input-hint">
      Enter any number of tags separated by space and <strong>without</strong> the hash (#).
      If a tag does not exist it will be automatically created.
@@ -29,44 +30,24 @@
    <div class="form-input-hint auto-tags"></div>
    {{ form.tag_string.errors }}
  </div>
-  <div class="form-group has-icon-right">
-    <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
-    <div class="has-icon-right">
-      {{ form.title|add_class:"form-input"|attr:"autocomplete:off" }}
-      <i class="form-icon loading"></i>
-      <button type="button" class="btn btn-link form-icon" title="Edit title from website">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
-             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-          <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
-          <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
-          <path d="M16 5l3 3"/>
-        </svg>
+  <div class="form-group">
+    <div class="d-flex justify-between align-baseline">
+      <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
+      <button ld-clear-button data-for="{{ form.title.id_for_label }}" class="btn btn-link clear-button"
+              type="button">Clear
      </button>
    </div>
-    <div class="form-input-hint">
-      Optional, leave empty to use title from website.
-    </div>
+    {{ form.title|add_class:"form-input"|attr:"autocomplete:off" }}
    {{ form.title.errors }}
  </div>
  <div class="form-group">
-    <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
-    <div class="has-icon-right">
-      {{ form.description|add_class:"form-input"|attr:"rows:2" }}
-      <i class="form-icon loading"></i>
-      <button type="button" class="btn btn-link form-icon" title="Edit description from website">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
-             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-          <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
-          <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
-          <path d="M16 5l3 3"/>
-        </svg>
+    <div class="d-flex justify-between align-baseline">
+      <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
+      <button ld-clear-button data-for="{{ form.description.id_for_label }}" class="btn btn-link clear-button"
+              type="button">Clear
      </button>
    </div>
-    <div class="form-input-hint">
-      Optional, leave empty to use description from website.
-    </div>
+    {{ form.description|add_class:"form-input"|attr:"rows:3" }}
    {{ form.description.errors }}
  </div>
  <div class="form-group">
@@ -76,10 +57,10 @@
      </summary>
      <label for="{{ form.notes.id_for_label }}" class="text-assistive">Notes</label>
      {{ form.notes|add_class:"form-input"|attr:"rows:8" }}
+      <div class="form-input-hint">
+        Additional notes, supports Markdown.
+      </div>
    </details>
-    <div class="form-input-hint">
-      Additional notes, supports Markdown.
-    </div>
    {{ form.notes.errors }}
  </div>
  <div class="form-group">
@@ -119,9 +100,8 @@
  </div>
  <script type="application/javascript">
    /**
-     * - Pre-fill title and description placeholders with metadata from website as soon as URL changes
+     * - Pre-fill title and description with metadata from website as soon as URL changes
     * - Show hint if URL is already bookmarked
-     * - Setup buttons that allow editing of scraped website values
     */
    (function init() {
      const urlInput = document.getElementById('{{ form.url.id_for_label }}');
@@ -131,28 +111,22 @@
      const notesInput = document.getElementById('{{ form.notes.id_for_label }}');
      const unreadCheckbox = document.getElementById('{{ form.unread.id_for_label }}');
      const sharedCheckbox = document.getElementById('{{ form.shared.id_for_label }}');
-      const websiteTitleInput = document.getElementById('{{ form.website_title.id_for_label }}');
-      const websiteDescriptionInput = document.getElementById('{{ form.website_description.id_for_label }}');
+      const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists');
      const editedBookmarkId = {{ bookmark_id }};
+      let isTitleModified = !!titleInput.value;
+      let isDescriptionModified = !!descriptionInput.value;

      function toggleLoadingIcon(input, show) {
        const icon = input.parentNode.querySelector('i.form-icon');
        icon.style['visibility'] = show ? 'visible' : 'hidden';
      }

-      function updatePlaceholder(input, value) {
-        if (value) {
-          input.setAttribute('placeholder', value);
-        } else {
-          input.removeAttribute('placeholder');
-        }
-      }
-
      function updateInput(input, value) {
        if (!input) {
          return;
        }
        input.value = value;
+        input.dispatchEvent(new Event('value-changed'));
      }

      function updateCheckbox(input, value) {
@@ -163,10 +137,11 @@
      }

      function checkUrl() {
-        toggleLoadingIcon(titleInput, true);
-        toggleLoadingIcon(descriptionInput, true);
-        updatePlaceholder(titleInput, null);
-        updatePlaceholder(descriptionInput, null);
+        if (!urlInput.value) {
+          return;
+        }
+
+        toggleLoadingIcon(urlInput, true);

        const websiteUrl = encodeURIComponent(urlInput.value);
        const requestUrl = `{% url 'bookmarks:api-root' %}bookmarks/check?url=${websiteUrl}`;
@@ -174,16 +149,14 @@
          .then(response => response.json())
          .then(data => {
            const metadata = data.metadata;
-            updatePlaceholder(titleInput, metadata.title);
-            updatePlaceholder(descriptionInput, metadata.description);
-            toggleLoadingIcon(titleInput, false);
-            toggleLoadingIcon(descriptionInput, false);
+            toggleLoadingIcon(urlInput, false);

-            // Prefill form and display hint if URL is already bookmarked
+            // Display hint if URL is already bookmarked
            const existingBookmark = data.bookmark;
-            const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists');
+            bookmarkExistsHint.style['display'] = existingBookmark ? 'block' : 'none';

-            if (existingBookmark && !editedBookmarkId) {
+            // Prefill form with existing bookmark data
+            if (existingBookmark) {
              // Workaround: tag input will be replaced by tag autocomplete, so
              // defer getting the input until we need it
              const tagsInput = document.getElementById('{{ form.tag_string.id_for_label }}');
@@ -197,7 +170,13 @@
              updateCheckbox(unreadCheckbox, existingBookmark.unread);
              updateCheckbox(sharedCheckbox, existingBookmark.shared);
            } else {
-              bookmarkExistsHint.style['display'] = 'none';
+              // Update title and description with website metadata, unless they have been modified
+              if (!isTitleModified) {
+                updateInput(titleInput, metadata.title);
+              }
+              if (!isDescriptionModified) {
+                updateInput(descriptionInput, metadata.description);
+              }
            }

            // Preview auto tags
@@ -214,31 +193,16 @@
          });
      }

-      function setupEditAutoValueButton(input) {
-        const editAutoValueButton = input.parentNode.querySelector('.btn.form-icon');
-        if (!editAutoValueButton) return;
-        editAutoValueButton.addEventListener('click', function (event) {
-          event.preventDefault();
-          input.value = input.getAttribute('placeholder');
-          input.focus();
-          input.select();
-        });
-      }
-
-      setupEditAutoValueButton(titleInput);
-      setupEditAutoValueButton(descriptionInput);
-
-      // Fetch initial website data if we have a URL, and we are not editing an existing bookmark
-      // For existing bookmarks we get the website metadata through hidden inputs
-      if (urlInput.value && !editedBookmarkId) {
+      // Fetch website metadata when page loads and when URL changes, unless we are editing an existing bookmark
+      if (!editedBookmarkId) {
        checkUrl();
-      }
-      urlInput.addEventListener('input', checkUrl);
-
-      // Set initial website title and description for edited bookmarks
-      if (editedBookmarkId) {
-        updatePlaceholder(titleInput, websiteTitleInput.value);
-        updatePlaceholder(descriptionInput, websiteDescriptionInput.value);
+        urlInput.addEventListener('input', checkUrl);
+        titleInput.addEventListener('input', () => {
+          isTitleModified = true;
+        });
+        descriptionInput.addEventListener('input', () => {
+          isDescriptionModified = true;
+        });
      }
    })();
  </script>
--- a/bookmarks/templates/bookmarks/head.html
+++ b/bookmarks/templates/bookmarks/head.html
@@ -0,0 +1,43 @@
+{% load static %}
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
+  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
+  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
+  <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
+  <meta name="description" content="Self-hosted bookmark service">
+  <meta name="robots" content="index,follow">
+  <meta name="author" content="Sascha Ißbrücker">
+  <title>linkding</title>
+  {# Include specific theme variant based on user profile setting #}
+  {% if request.user_profile.theme == 'light' %}
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#5856e0">
+  {% elif request.user_profile.theme == 'dark' %}
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#161822">
+  {% else %}
+    {# Use auto theme as fallback #}
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+          media="(prefers-color-scheme: dark)"/>
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+          media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
+  {% endif %}
+  {% if request.user_profile.custom_css %}
+    <link href="{% url 'bookmarks:custom_css' %}?hash={{ request.user_profile.custom_css_hash }}" rel="stylesheet" type="text/css"/>
+  {% endif %}
+  <meta name="turbo-cache-control" content="no-preview">
+  {% if not request.global_settings.enable_link_prefetch %}
+    <meta name="turbo-prefetch" content="false">
+  {% endif %}
+  {% if rss_feed_url %}
+    <link rel="alternate" type="application/rss+xml" href="{{ rss_feed_url }}" />
+  {% endif %}
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
+</head>
--- a/bookmarks/templates/bookmarks/index.html
+++ b/bookmarks/templates/bookmarks/index.html
@@ -4,45 +4,49 @@
 {% load bookmarks %}

 {% block content %}
-  <div ld-bulk-edit class="bookmarks-page grid columns-md-1">
+  <div ld-bulk-edit
+       class="bookmarks-page grid columns-md-1 {% if bookmark_list.collapse_side_panel %}collapse-side-panel{% endif %}">

    {# Bookmark list #}
-    <section class="content-area col-2">
+    <section class="main content-area col-2">
      <div class="content-area-header mb-0">
        <h2>Bookmarks</h2>
        <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags %}
+          {% bookmark_search bookmark_list.search %}
          {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
-          </button>
+          <button ld-filter-drawer-trigger class="btn ml-2">Filters</button>
        </div>
      </div>

-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
            action="{{ bookmark_list.action_url|safe }}"
            method="post" autocomplete="off">
        {% csrf_token %}
        {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_unarchive' %}

-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
          {% include 'bookmarks/bookmark_list.html' %}
        </div>
      </form>
    </section>

    {# Tag cloud #}
-    <section class="content-area col-1 hide-md">
+    <section class="side-panel content-area col-1">
      <div class="content-area-header">
        <h2>Tags</h2>
      </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
        {% include 'bookmarks/tag_cloud.html' %}
      </div>
    </section>
  </div>
 {% endblock %}
+
+{% block overlays %}
+  {# Bookmark details #}
+  <turbo-frame id="details-modal" target="_top">
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </turbo-frame>
+{% endblock %}
--- a/bookmarks/templates/bookmarks/layout.html
+++ b/bookmarks/templates/bookmarks/layout.html
@@ -3,44 +3,7 @@
 <!DOCTYPE html>
 {# Use data attributes as storage for access in static scripts #}
 <html lang="en" data-api-base-url="{% url 'bookmarks:api-root' %}">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
-  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
-  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
-  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
-  <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
-  <meta name="description" content="Self-hosted bookmark service">
-  <meta name="robots" content="index,follow">
-  <meta name="author" content="Sascha Ißbrücker">
-  <title>linkding</title>
-  {# Include specific theme variant based on user profile setting #}
-  {% if request.user_profile.theme == 'light' %}
-    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
-    <meta name="theme-color" content="#5856e0">
-  {% elif request.user_profile.theme == 'dark' %}
-    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
-    <meta name="theme-color" content="#161822">
-  {% else %}
-    {# Use auto theme as fallback #}
-    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
-          media="(prefers-color-scheme: dark)"/>
-    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
-          media="(prefers-color-scheme: light)"/>
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
-  {% endif %}
-  {% if request.user_profile.custom_css %}
-    <style>{{ request.user_profile.custom_css }}</style>
-  {% endif %}
-  <meta name="turbo-cache-control" content="no-preview">
-  {% if not request.global_settings.enable_link_prefetch %}
-    <meta name="turbo-prefetch" content="false">
-  {% endif %}
-  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
-</head>
+{% include 'bookmarks/head.html' %}
 <body ld-global-shortcuts>

 <div class="d-none">
@@ -134,5 +97,9 @@
  {% block content %}
  {% endblock %}
 </div>
+<div class="modals">
+  {% block overlays %}
+  {% endblock %}
+</div>
 </body>
 </html>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sascha Ißbrücker	cfe4ff113d	Bump version	2025-02-22 19:28:47 +01:00
Sascha Ißbrücker	757dc56277	Bump base images	2025-02-19 16:14:34 +01:00
Sascha Ißbrücker	dfbb367857	Fix auth proxy logout (#994 )	2025-02-19 07:27:04 +01:00
Sascha Ißbrücker	2276832465	Return web archive fallback URL from REST API (#993 )	2025-02-19 06:44:21 +01:00
Chris M	9d61bdce52	Add note about OIDC and LD_SUPERUSER_NAME combination (#992 ) * docs: add note about OIDC and LD_SUPERUSER_NAME combination Resolves #988 * tweak text --------- Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@gmail.com>	2025-02-18 22:45:26 +01:00
Sascha Ißbrücker	1274a9ae0a	Try limit uwsgi memory usage by configuring file descriptor limit (#990 )	2025-02-15 08:49:58 +01:00
Sascha Ißbrücker	5e7172d17e	Remove preview image when bookmark is deleted (#989 )	2025-02-15 08:26:58 +01:00
Sascha Ißbrücker	78608135d9	Update CHANGELOG.md	2025-02-09 10:47:02 +01:00
Sascha Ißbrücker	51acd1da3f	add build script	2025-02-08 18:20:15 +01:00
Sascha Ißbrücker	016ff2da66	Bump version	2025-02-08 10:54:46 +01:00
Sascha Ißbrücker	77d7e6e66a	Add RSS link to shared bookmarks page (#984 )	2025-02-08 10:51:17 +01:00
Sascha Ißbrücker	c5a300a435	Convert tag modal into drawer (#977 ) * change tag modal into drawer * improve scroll handling * teleport all side bar content * improve naming * fix focus trap in filter drawer	2025-02-02 20:42:28 +01:00
Sascha Ißbrücker	0d4c47eb81	Add option to collapse side panel (#975 )	2025-02-02 11:28:35 +01:00
Sascha Ißbrücker	17442eeb9a	Improve accessibility of modal dialogs (#974 ) * improve details modal accessibility * improve tag modal accessibility * fix overlays in archive and shared pages * update tests * use buttons for closing dialogs * replace description list * hide preview image from screen readers * update tests	2025-02-02 00:28:17 +01:00
Kyuuk	2973812626	Allow customizing username when creating user through OIDC (#971 ) * add ability to cutomize claim user for username generation on oidc login * update documentation with new OIDC options * oidc: also normalize custom claim as username * improve tests * improve docs * some more cleanup --------- Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@gmail.com>	2025-01-30 03:40:52 +01:00
Josh Dick	fc48b266a8	Add Additional iOS Shortcut to community section (#968 )	2025-01-28 13:29:44 +01:00
Sascha Ißbrücker	7b42241026	Fix nav menu closing on mousedown in Safari (#965 )	2025-01-27 09:05:19 +01:00
Sascha Ißbrücker	9c648dc67f	Update CHANGELOG.md	2025-01-27 00:02:14 +01:00
Sascha Ißbrücker	1624128132	Bump versions to make Docker build	2025-01-26 23:52:36 +01:00
Sascha Ißbrücker	d1dd85538b	Bump version	2025-01-26 19:19:48 +01:00
dependabot[bot]	c5aab3886e	Bump nanoid from 3.3.7 to 3.3.8 in /docs (#962 ) Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.7 to 3.3.8. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/3.3.7...3.3.8) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-01-26 19:09:02 +01:00
dependabot[bot]	3f2739e5a6	Bump astro from 4.16.3 to 4.16.18 in /docs (#929 ) Bumps [astro](https://github.com/withastro/astro/tree/HEAD/packages/astro) from 4.16.3 to 4.16.18. - [Release notes](https://github.com/withastro/astro/releases) - [Changelog](https://github.com/withastro/astro/blob/astro@4.16.18/packages/astro/CHANGELOG.md) - [Commits](https://github.com/withastro/astro/commits/astro@4.16.18/packages/astro) --- updated-dependencies: - dependency-name: astro dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-01-26 19:08:50 +01:00
dependabot[bot]	f1ed89a0ba	Bump nanoid from 3.3.7 to 3.3.8 (#928 ) Bumps [nanoid](https://github.com/ai/nanoid) from 3.3.7 to 3.3.8. - [Release notes](https://github.com/ai/nanoid/releases) - [Changelog](https://github.com/ai/nanoid/blob/main/CHANGELOG.md) - [Commits](https://github.com/ai/nanoid/compare/3.3.7...3.3.8) --- updated-dependencies: - dependency-name: nanoid dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-01-26 18:51:40 +01:00
dependabot[bot]	a59a7a777c	Bump django from 5.1.1 to 5.1.5 (#947 ) Bumps [django](https://github.com/django/django) from 5.1.1 to 5.1.5. - [Commits](https://github.com/django/django/compare/5.1.1...5.1.5) --- updated-dependencies: - dependency-name: django dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-01-26 18:50:51 +01:00
dependabot[bot]	9a5c535872	Bump vite from 5.4.9 to 5.4.14 in /docs (#953 ) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 5.4.9 to 5.4.14. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v5.4.14/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v5.4.14/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2025-01-26 18:50:34 +01:00
Sascha Ißbrücker	e6ebca1436	Add default robots.txt to block crawlers (#959 )	2025-01-26 09:58:58 +01:00
Justus Grunow	085d67e9f4	Update community.md (#897 ) Added link to iOS App Store for Linkdy. Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>	2025-01-15 22:10:16 +01:00
Rostislav	68825444fb	Add a rust client library to community.md (#914 ) Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>	2025-01-15 22:04:28 +01:00
Sebastien Wains	b2ca16ec9c	Update community.md (#949 )	2025-01-15 22:02:23 +01:00
Sascha Ißbrücker	649f4154e5	Provide accessible name to radio groups (#945 )	2025-01-12 22:10:14 +01:00
Sascha Ißbrücker	d2e8a95e3c	Fix menu dropdown focus traps (#944 )	2025-01-11 12:44:20 +01:00
Sascha Ißbrücker	c3149409b0	Fix how to for changing font size	2024-10-24 22:24:58 +02:00
Vadim Khitrin	4626fa1c67	docs: Add cosmicding To Community Resources (#892 ) * docs: Add cosmicding To Community Resources * sort alphabetically --------- Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>	2024-10-24 22:16:22 +02:00
Dany Marcoux	6548e16baa	Add option to disable request logs (#887 ) Closes #785	2024-10-17 21:47:56 +02:00
dependabot[bot]	c177de164a	Bump astro from 4.15.8 to 4.16.3 in /docs (#884 ) Bumps [astro](https://github.com/withastro/astro/tree/HEAD/packages/astro) from 4.15.8 to 4.16.3. - [Release notes](https://github.com/withastro/astro/releases) - [Changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) - [Commits](https://github.com/withastro/astro/commits/astro@4.16.3/packages/astro) --- updated-dependencies: - dependency-name: astro dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-10-16 21:08:46 +02:00
Xuanli	e9ecad38ac	Add serchding to community projects (#880 )	2024-10-12 18:13:50 +02:00
Sascha Ißbrücker	621aedd8eb	Update donations	2024-10-04 18:43:02 +02:00
Sascha Ißbrücker	4187141ac8	Update CHANGELOG.md	2024-10-03 00:09:51 +02:00
Sascha Ißbrücker	cf0cc32090	Bump version	2024-10-02 22:39:57 +02:00
ixzhao	1f2cf21585	Add LAST_MODIFIED attribute when exporting (#860 ) * add LAST_MODIFIED attribute when exporting * complement test_exporter for LAST_MODIFIED attribute * parse LAST_MODIFIED attribute when importing * use bookmark date_added when no modified date is parsed, otherwise use parsed datetime. * complement test_parser and test_importer for LAST_MODIFIED attribute * cleanup tests a bit --------- Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@gmail.com>	2024-10-02 22:21:08 +02:00
Sascha Ißbrücker	0dd05b9269	Fix permission issue with ublock extension	2024-10-02 21:47:32 +02:00
Sascha Ißbrücker	5cd6d773db	Replace uBlock Origin with uBlock Origin Lite (#866 )	2024-09-29 14:42:50 +02:00
Sascha Ißbrücker	d4c348cc5a	Simplify Docker build (#865 )	2024-09-28 16:13:07 +02:00
Sascha Ißbrücker	791a5c73ca	Do not escape valid characters in custom CSS (#863 )	2024-09-28 11:17:48 +02:00
Sascha Ißbrücker	ebed0c050d	Add edit link to docs pages	2024-09-25 17:34:19 +02:00
Sascha Ißbrücker	f4dd2b53b5	Fix select dropdown menu background in dark theme (#858 )	2024-09-24 21:42:52 +02:00
dependabot[bot]	b53fe09c39	Bump rollup from 4.21.3 to 4.22.4 in /docs (#856 ) Bumps [rollup](https://github.com/rollup/rollup) from 4.21.3 to 4.22.4. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v4.21.3...v4.22.4) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-09-24 19:11:08 +02:00
dependabot[bot]	ff88e726cc	Bump rollup from 4.13.0 to 4.22.4 (#851 ) Bumps [rollup](https://github.com/rollup/rollup) from 4.13.0 to 4.22.4. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v4.13.0...v4.22.4) --- updated-dependencies: - dependency-name: rollup dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-09-24 17:28:21 +02:00
Sascha Ißbrücker	52400feacf	Improve error handling for auto tagging (#855 )	2024-09-24 17:26:01 +02:00
Sascha Ißbrücker	c93709b549	Fix jumping details modal on back navigation (#854 )	2024-09-24 17:09:17 +02:00
Sascha Ißbrücker	ba904ed191	Fix header backdrop on iOS	2024-09-24 16:29:05 +02:00
Sascha Ißbrücker	d1f81fee0e	Prevent duplicates when editing (#853 ) * prevent creating duplicate URLs on edit * Prevent duplicates when editing	2024-09-24 13:13:32 +02:00
Sascha Ißbrücker	7b405c054d	Do not clear fields in POST requests (API behavior change) (#852 )	2024-09-24 11:37:50 +02:00
Vlad-Stefan Harbuz	23ad52f75d	Fix header.svg text (#850 )	2024-09-23 23:28:37 +02:00
Sascha Ißbrücker	c3a2305a5f	Return client error status code for invalid form submissions (#849 ) * Returns client error status code for invalid form submissions * fix flaky test	2024-09-23 20:30:49 +02:00
Sascha Ißbrücker	d4006026db	Fix preview image spacing	2024-09-23 19:30:42 +02:00
Sascha Ißbrücker	70bdf88791	Update CHANGELOG.md	2024-09-23 17:44:06 +02:00
Sascha Ißbrücker	93e2832a89	Bump version	2024-09-23 16:28:17 +02:00
Sascha Ißbrücker	f5708594a7	Add basic fail2ban support (#847 )	2024-09-23 16:20:55 +02:00
Sascha Ißbrücker	67f237c1de	Update docs link	2024-09-23 15:58:21 +02:00
Sascha Ißbrücker	95f489ea48	Format CSS with prettier	2024-09-23 11:04:36 +02:00
Sascha Ißbrücker	ed57da3c99	Add clear buttons in bookmark form (#846 )	2024-09-23 11:02:30 +02:00
Sascha Ißbrücker	c5c5949d20	Do not overwrite provided title and description (#845 )	2024-09-22 21:43:03 +02:00
Rostislav	f4e66c1ff1	fix a broken link to options documentation (#844 )	2024-09-22 16:05:04 +02:00
Sascha Ißbrücker	fe7ddbe645	Allow bookmarks to have empty title and description (#843 ) * add migration for merging fields * remove usage of website title and description * keep empty website title and description in API for compatibility * restore scraping in API and add option for disabling it * document API scraping behavior * remove deprecated fields from API docs * improve form layout * cleanup migration * cleanup website loader * update tests	2024-09-22 07:52:00 +02:00
Sascha Ißbrücker	afa57aa10b	Show placeholder if there is no preview image (#842 ) * Show placeholder if there is no preview image * add test	2024-09-20 08:56:17 +02:00
Sascha Ißbrücker	b4108c9a56	bump python version in CI	2024-09-19 19:38:03 +02:00
Sascha Ißbrücker	6cf5fb396a	remove deprecated API usage	2024-09-19 19:29:19 +02:00
Sascha Ißbrücker	3d8866c7bc	Bump dependencies (#841 )	2024-09-19 19:15:51 +02:00
voltagex	8544137a31	Use HTTPS repository link for devcontainer (#837 ) * Use HTTPS repository link for devcontainer The SSH repository link means you need to be set up with a key, have already accepted the github.com host key. Cloning via HTTPS requires less steps. * Update devcontainer.json * Update requirements.txt	2024-09-19 15:46:52 +02:00
dependabot[bot]	baa3d5596d	Bump path-to-regexp and astro in /docs (#840 ) Removes [path-to-regexp](https://github.com/pillarjs/path-to-regexp). It's no longer used after updating ancestor dependency [astro](https://github.com/withastro/astro/tree/HEAD/packages/astro). These dependencies need to be updated together. Removes `path-to-regexp` Updates `astro` from 4.15.6 to 4.15.8 - [Release notes](https://github.com/withastro/astro/releases) - [Changelog](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md) - [Commits](https://github.com/withastro/astro/commits/astro@4.15.8/packages/astro) --- updated-dependencies: - dependency-name: path-to-regexp dependency-type: indirect - dependency-name: astro dependency-type: direct:production ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2024-09-19 15:42:12 +02:00
voltagex	f79c24453c	Bump requests version to 3.23.3 (#839 ) This avoids the yanked 3.23.0 version and allows pip-compile to work without --upgrade again.	2024-09-19 15:37:01 +02:00
Sascha Ißbrücker	f3c1101746	Improve docs	2024-09-19 10:28:19 +02:00
Piero Lescano	ceceb56164	Add go-linkding to community projects (#836 )	2024-09-19 06:12:19 +02:00
Sascha Ißbrücker	450980a8d4	Add configuration options for pagination (#835 )	2024-09-18 23:14:19 +02:00
Sascha Ißbrücker	2aab2813f4	fix community links	2024-09-17 15:42:18 +02:00
Sascha Ißbrücker	0e488b7ce3	Add documentation website (#833 ) * test frontmatter rendering * restructure files * add docs website * move postcss config * revert postcss config * update readme * update logo * fix internal links	2024-09-17 15:33:53 +02:00
Sascha Ißbrücker	53e4aeb1c1	Update CHANGELOG.md	2024-09-16 13:37:20 +02:00
Sascha Ißbrücker	2b3cd2dec1	Bump version	2024-09-16 13:21:39 +02:00
itz-Jana	c22e30cbda	Implement IPv6 capability (#826 ) * Implement IPv6 capability Enables uWSGI to listen for IPv6 requests also. This is done by defaulting to [::] as the listen address, which creates a dual stack socket, which can respond to IPv4 and IPv6 requests simultaneously. Furthermore a config option is adden to overwrite this default, if a user so desires. * Add LD_SERVER_HOST to .env.sample Additionally fix the default name of the LD_SERVER_PORT variable, which was falsely LD_HOST_PORT here. * revert .env.sample --------- Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>	2024-09-16 13:18:18 +02:00
Sascha Ißbrücker	ffaaf0521d	Speed up response times for certain actions (#829 ) * return updated HTML from bookmark actions * open details through URL * fix details update * improve modal behavior * use a frame * make behaviors properly destroy themselves * remove page and details params from tag urls * use separate behavior for details and tags * remove separate details view * make it work with other views * add asset actions * remove asset refresh for now * remove details partial * fix tests * remove old partials * update tests * cache and reuse tags * extract search autocomplete behavior * remove details param from pagination * fix tests * only return details modal when navigating in frame * fix link target * remove unused behaviors * use auto submit behavior for user select * fix import	2024-09-16 12:48:19 +02:00
Sascha Ißbrücker	db225d5267	Fix several issues around browser back navigation (#825 )	2024-09-15 08:28:49 +02:00
Sascha Ißbrücker	74e65bc366	Theme cleanup	2024-09-14 18:55:02 +02:00
Sascha Ißbrücker	edba98f1fe	Update CHANGELOG.md	2024-09-14 12:23:10 +02:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-photo"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" /></svg>