Bump version

Properly encode search query param (#587 )
Update CHANGELOG.md
2025-08-14 22:19:32 +02:00 · 2023-12-08 22:01:24 +01:00 · 2023-12-08 21:53:54 +01:00 · 2023-11-24 10:23:44 +01:00 · 2023-11-24 09:33:36 +01:00 · 2023-11-24 09:21:23 +01:00
182 changed files with 9791 additions and 3188 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,29 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/python
+{
+	"name": "Python 3",
+	"image": "mcr.microsoft.com/devcontainers/python:0-3.10",
+	"features": {
+		"ghcr.io/devcontainers/features/node:1": {}
+	},
+
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	"forwardPorts": [8000],
+
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "pip3 install --user -r requirements.txt && npm install && mkdir -p data && python3 manage.py migrate",
+
+	// Configure tool-specific properties.
+	"customizations": {
+		"vscode": {
+			"extensions": [
+				"ms-python.python"
+			]
+		}
+	},
+
+	"remoteUser": "vscode"
+}
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,31 +1,22 @@
-# Remove project files, data, tmp files, build files
-/.env
-/.idea
-/data
-/node_modules
-/tmp
-/docs
-/static
-/build
-/out
-/.git
+# Ignore everything
+*

-/.dockerignore
-/.gitignore
-/Dockerfile
-/docker-compose.yml
-/*.sh
-/*.iml
-/*.patch
-/*.md
-/*.js
-/*.log
-/*.pid
+# Include files required for build or at runtime
+!/bookmarks
+!/siteroot

-# Whitelist files needed in build or prod image
-!/rollup.config.js
-!/bootstrap.sh
 !/background-tasks-wrapper.sh
+!/bootstrap.sh
+!/LICENSE.txt
+!/manage.py
+!/package.json
+!/package-lock.json
+!/requirements.prod.txt
+!/requirements.txt
+!/rollup.config.js
+!/supervisord.conf
+!/uwsgi.ini
+!/version.txt

-# Remove development settings
+ # Remove dev settings
 /siteroot/settings/dev.py
--- a/.env.sample
+++ b/.env.sample
@@ -45,3 +45,5 @@ LD_DB_HOST=
 # Port use to connect to the database server
 # Should use the default port if not set
 LD_DB_PORT=
+# Any additional options to pass to the database (default: {})
+LD_DB_OPTIONS=
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+* text=auto
+*.sh text eol=lf
--- a/.github/workflows/main.yaml
+++ b/.github/workflows/main.yaml
@@ -3,22 +3,48 @@ name: linkding CI
 on: [push]

 jobs:
-  run_tests:
-    name: Run Django Tests
+  unit_tests:
+    name: Unit Tests
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v3
      - name: Set up Python
-        uses: actions/setup-python@v1
+        uses: actions/setup-python@v4
        with:
          python-version: "3.10"
      - name: Set up Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
        with:
-          node-version: 14
-      - name: Install Python dependencies
-        run: pip install -r requirements.txt
+          node-version: 18
      - name: Install Node dependencies
        run: npm install
+      - name: Setup Python environment
+        run: pip install -r requirements.txt
      - name: Run tests
-        run: python manage.py test
+        run: python manage.py test bookmarks.tests
+  e2e_tests:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.10"
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install Node dependencies
+        run: npm install
+      - name: Setup Python environment
+        run: |
+          pip install -r requirements.txt
+          playwright install chromium
+      - name: Run build
+        run: |
+          npm run build
+          python manage.py compilescss
+          python manage.py collectstatic --ignore=*.scss
+      - name: Run tests
+        run: python manage.py test bookmarks.e2e --pattern="e2e_test_*.py"
--- a/.grenrc.js
+++ b/.grenrc.js
@@ -1,6 +0,0 @@
-module.exports = {
-    ignoreIssuesWith: [
-        "wontfix",
-        "duplicate"
-    ]
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,221 @@
 # Changelog

+## v1.23.0 (24/11/2023)
+
+### What's Changed
+* Add Alpine based Docker image (experimental) by @sissbruecker in https://github.com/sissbruecker/linkding/pull/570
+* Add backup CLI command by @sissbruecker in https://github.com/sissbruecker/linkding/pull/571
+* Update browser extension links by @OPerepadia in https://github.com/sissbruecker/linkding/pull/574
+* Include archived bookmarks in export by @sissbruecker in https://github.com/sissbruecker/linkding/pull/579
+
+### New Contributors
+* @OPerepadia made their first contribution in https://github.com/sissbruecker/linkding/pull/574
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.22.3...v1.23.0
+
+---
+
+## v1.22.3 (04/11/2023)
+
+### What's Changed
+* Fix RSS feed not handling None values  by @vitormarcal in https://github.com/sissbruecker/linkding/pull/569
+* Bump django from 4.1.10 to 4.1.13 by @dependabot in https://github.com/sissbruecker/linkding/pull/567
+
+### New Contributors
+* @vitormarcal made their first contribution in https://github.com/sissbruecker/linkding/pull/569
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.22.2...v1.22.3
+
+---
+
+## v1.22.2 (27/10/2023)
+
+### What's Changed
+* Fix search options not opening on iOS by @sissbruecker in https://github.com/sissbruecker/linkding/pull/549
+* Bump urllib3 from 1.26.11 to 1.26.17 by @dependabot in https://github.com/sissbruecker/linkding/pull/542
+* Add iOS shortcut to community section by @andrewdolphin in https://github.com/sissbruecker/linkding/pull/550
+* Disable editing of search preferences in user admin by @sissbruecker in https://github.com/sissbruecker/linkding/pull/555
+* Add feed2linkding to community section by @Strubbl in https://github.com/sissbruecker/linkding/pull/544
+* Sanitize RSS feed to remove control characters by @sissbruecker in https://github.com/sissbruecker/linkding/pull/565
+* Bump urllib3 from 1.26.17 to 1.26.18 by @dependabot in https://github.com/sissbruecker/linkding/pull/560
+
+### New Contributors
+* @andrewdolphin made their first contribution in https://github.com/sissbruecker/linkding/pull/550
+* @Strubbl made their first contribution in https://github.com/sissbruecker/linkding/pull/544
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.22.1...v1.22.2
+
+---
+
+## v1.22.1 (06/10/2023)
+
+### What's Changed
+* Fix memory leak with SQLite by @sissbruecker in https://github.com/sissbruecker/linkding/pull/548
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.22.0...v1.22.1
+
+---
+
+## v1.22.0 (01/10/2023)
+
+### What's Changed
+* Fix case-insensitive search for unicode characters in SQLite by @sissbruecker in https://github.com/sissbruecker/linkding/pull/520
+* Add sort option to bookmark list by @sissbruecker in https://github.com/sissbruecker/linkding/pull/522
+* Add button to show tags on smaller screens by @sissbruecker in https://github.com/sissbruecker/linkding/pull/529
+* Make code blocks in notes scrollable by @sissbruecker in https://github.com/sissbruecker/linkding/pull/530
+* Add filter for shared state by @sissbruecker in https://github.com/sissbruecker/linkding/pull/531
+* Add support for exporting/importing bookmark notes by @sissbruecker in https://github.com/sissbruecker/linkding/pull/532
+* Add filter for unread state by @sissbruecker in https://github.com/sissbruecker/linkding/pull/535
+* Allow saving search preferences by @sissbruecker in https://github.com/sissbruecker/linkding/pull/540
+* Add user profile endpoint by @sissbruecker in https://github.com/sissbruecker/linkding/pull/541
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.21.0...v1.22.0
+
+---
+
+## v1.21.1 (26/09/2023)
+
+### What's Changed
+* Fix bulk edit to respect searched tags by @sissbruecker in https://github.com/sissbruecker/linkding/pull/537
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.21.0...v1.21.1
+
+---
+
+## v1.21.0 (25/08/2023)
+
+### What's Changed
+* Make search autocomplete respect link target setting by @sissbruecker in https://github.com/sissbruecker/linkding/pull/513
+* Various CSS improvements by @sissbruecker in https://github.com/sissbruecker/linkding/pull/514
+* Display shared state in bookmark list by @sissbruecker in https://github.com/sissbruecker/linkding/pull/515
+* Allow bulk editing unread and shared state of bookmarks by @sissbruecker in https://github.com/sissbruecker/linkding/pull/517
+* Bump uwsgi from 2.0.20 to 2.0.22 by @dependabot in https://github.com/sissbruecker/linkding/pull/516
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.20.1...v1.21.0
+
+---
+
+## v1.20.1 (23/08/2023)
+
+### What's Changed
+* Update cached styles and scripts after version change by @sissbruecker in https://github.com/sissbruecker/linkding/pull/510
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.20.0...v1.20.1
+
+---
+
+## v1.20.0 (22/08/2023)
+
+### What's Changed
+* Add option to share bookmarks publicly by @sissbruecker in https://github.com/sissbruecker/linkding/pull/503
+* Various improvements to favicons by @sissbruecker in https://github.com/sissbruecker/linkding/pull/504
+* Add support for PRIVATE flag in import and export by @sissbruecker in https://github.com/sissbruecker/linkding/pull/505
+* Avoid page reload when triggering actions in bookmark list by @sissbruecker in https://github.com/sissbruecker/linkding/pull/506
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.19.1...v1.20.0
+
+---
+
+## v1.19.1 (29/07/2023)
+
+### What's Changed
+* Add Postman Collection to Community section of README by @gingerbeardman in https://github.com/sissbruecker/linkding/pull/476
+* Added Dev Container support by @acbgbca in https://github.com/sissbruecker/linkding/pull/474
+* Added Apple web-app meta tag #358 by @acbgbca in https://github.com/sissbruecker/linkding/pull/359
+* Bump requests from 2.28.1 to 2.31.0 by @dependabot in https://github.com/sissbruecker/linkding/pull/478
+* Allow passing title and description to new bookmark form by @acbgbca in https://github.com/sissbruecker/linkding/pull/479
+* Enable WAL to avoid locked database lock errors by @sissbruecker in https://github.com/sissbruecker/linkding/pull/480
+* Fix website loader content encoding detection by @sissbruecker in https://github.com/sissbruecker/linkding/pull/482
+* Bump certifi from 2022.12.7 to 2023.7.22 by @dependabot in https://github.com/sissbruecker/linkding/pull/497
+* Bump django from 4.1.9 to 4.1.10 by @dependabot in https://github.com/sissbruecker/linkding/pull/494
+
+### New Contributors
+* @gingerbeardman made their first contribution in https://github.com/sissbruecker/linkding/pull/476
+* @acbgbca made their first contribution in https://github.com/sissbruecker/linkding/pull/474
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.19.0...v1.19.1
+
+---
+
+## v1.19.0 (20/05/2023)
+
+### What's Changed
+* Add notes to bookmarks by @sissbruecker in https://github.com/sissbruecker/linkding/pull/472
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.18.0...v1.19.0
+
+---
+
+## v1.18.0 (18/05/2023)
+
+### What's Changed
+* Make search case-insensitive on Postgres by @sissbruecker in https://github.com/sissbruecker/linkding/pull/432
+* Allow searching for tags without hash character by @sissbruecker in https://github.com/sissbruecker/linkding/pull/449
+* Prevent zoom-in after focusing an input on small viewports on iOS devices by @puresick in https://github.com/sissbruecker/linkding/pull/440
+* Add database options by @plockaby in https://github.com/sissbruecker/linkding/pull/406
+* Allow to log real client ip in logs when using a reverse proxy by @fmenabe in https://github.com/sissbruecker/linkding/pull/398
+* Add option to display URL below title by @bah0 in https://github.com/sissbruecker/linkding/pull/365
+* Add LinkThing iOS app to community section by @amoscardino in https://github.com/sissbruecker/linkding/pull/446
+* Bump django from 4.1.7 to 4.1.9 by @dependabot in https://github.com/sissbruecker/linkding/pull/466
+* Bump sqlparse from 0.4.2 to 0.4.4 by @dependabot in https://github.com/sissbruecker/linkding/pull/455
+
+### New Contributors
+* @amoscardino made their first contribution in https://github.com/sissbruecker/linkding/pull/446
+* @puresick made their first contribution in https://github.com/sissbruecker/linkding/pull/440
+* @plockaby made their first contribution in https://github.com/sissbruecker/linkding/pull/406
+* @fmenabe made their first contribution in https://github.com/sissbruecker/linkding/pull/398
+* @bah0 made their first contribution in https://github.com/sissbruecker/linkding/pull/365
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.17.2...v1.18.0
+
+---
+
+## v1.17.2 (18/02/2023)
+
+### What's Changed
+* Escape texts in exported HTML by @sissbruecker in https://github.com/sissbruecker/linkding/pull/429
+* Bump django from 4.1.2 to 4.1.7 by @dependabot in https://github.com/sissbruecker/linkding/pull/427
+* Make health check in Dockerfile honor context path setting by @mrex in https://github.com/sissbruecker/linkding/pull/407
+* Disable autocapitalization for tag input form by @joshdick in https://github.com/sissbruecker/linkding/pull/395
+
+### New Contributors
+* @mrex made their first contribution in https://github.com/sissbruecker/linkding/pull/407
+* @joshdick made their first contribution in https://github.com/sissbruecker/linkding/pull/395
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.17.1...v1.17.2
+
+---
+
+## v1.17.1 (22/01/2023)
+
+### What's Changed
+* Fix favicon being cleared by web archive snapshot task by @sissbruecker in https://github.com/sissbruecker/linkding/pull/405
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.17.0...v1.17.1
+
+---
+
+## v1.17.0 (21/01/2023)
+
+### What's Changed
+* Add Health Check endpoint  by @mckennajones in https://github.com/sissbruecker/linkding/pull/392
+* Cache website metadata to avoid duplicate scraping by @sissbruecker in https://github.com/sissbruecker/linkding/pull/401
+* Prefill form if URL is already bookmarked by @sissbruecker in https://github.com/sissbruecker/linkding/pull/402
+* Add option for showing bookmark favicons by @sissbruecker in https://github.com/sissbruecker/linkding/pull/390
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.16.1...v1.17.0
+
+---
+
 ## v1.16.1 (20/01/2023)

 ### What's Changed
--- a/58
+++ b/58
@@ -1,58 +0,0 @@
-FROM node:18.13.0-alpine AS node-build
-WORKDIR /etc/linkding
-# install build dependencies
-COPY package.json package-lock.json ./
-RUN npm install -g npm && \
-    npm install
-# compile JS components
-COPY . .
-RUN npm run build
-
-
-FROM python:3.10.6-slim-buster AS python-base
-RUN apt-get update && apt-get -y install build-essential libpq-dev
-WORKDIR /etc/linkding
-
-
-FROM python-base AS python-build
-# install build dependencies
-COPY requirements.txt requirements.txt
-RUN pip install -U pip && pip install -Ur requirements.txt
-# run Django part of the build
-COPY --from=node-build /etc/linkding .
-RUN python manage.py compilescss && \
-    python manage.py collectstatic --ignore=*.scss && \
-    python manage.py compilescss --delete-files
-
-
-FROM python-base AS prod-deps
-COPY requirements.prod.txt ./requirements.txt
-RUN mkdir /opt/venv && \
-    python -m venv --upgrade-deps --copies /opt/venv && \
-    /opt/venv/bin/pip install --upgrade pip wheel && \
-    /opt/venv/bin/pip install -Ur requirements.txt
-
-
-FROM python:3.10.6-slim-buster as final
-RUN apt-get update && apt-get -y install mime-support libpq-dev curl
-WORKDIR /etc/linkding
-# copy prod dependencies
-COPY --from=prod-deps /opt/venv /opt/venv
-# copy output from build stage
-COPY --from=python-build /etc/linkding/static static/
-# copy application code
-COPY . .
-# Expose uwsgi server at port 9090
-EXPOSE 9090
-# Activate virtual env
-ENV VIRTUAL_ENV /opt/venv
-ENV PATH /opt/venv/bin:$PATH
-# Allow running containers as an an arbitrary user in the root group, to support deployment scenarios like OpenShift, Podman
-RUN ["chmod", "g+w", "."]
-# Run bootstrap logic
-RUN ["chmod", "+x", "./bootstrap.sh"]
-
-HEALTHCHECK --interval=30s --retries=3 --timeout=1s \
-CMD curl -f http://localhost:${LD_SERVER_PORT:-9090}/health || exit 1
-
-CMD ["./bootstrap.sh"]
--- a/README.md
+++ b/README.md
@@ -17,11 +17,12 @@
 - [Documentation](#documentation)
 - [Browser Extension](#browser-extension)
 - [Community](#community)
+- [Acknowledgements + Donations](#acknowledgements--donations)
 - [Development](#development)

 ##  Introduction

-linkding is a simple bookmark service that you can host yourself.
+linkding is a bookmark manager that you can host yourself.
 It's designed be to be minimal, fast, and easy to set up using Docker.

 The name comes from:
@@ -30,22 +31,23 @@ The name comes from:
 - ...so basically something for managing your links

 **Feature Overview:**
+- Clean UI optimized for readability
 - Organize bookmarks with tags
+- Add notes using Markdown
 - Read it later functionality
 - Share bookmarks with other users
 - Bulk editing
- Bookmark archive
- Automatically provides titles and descriptions of bookmarked websites
+- Automatically provides titles, descriptions and icons of bookmarked websites
 - Automatically creates snapshots of bookmarked websites on [the Internet Archive Wayback Machine](https://archive.org/web/)
 - Import and export bookmarks in Netscape HTML format
- Extensions for [Firefox](https://addons.mozilla.org/de/firefox/addon/linkding-extension/) and [Chrome](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe), as well as a bookmarklet
+- Extensions for [Firefox](https://addons.mozilla.org/firefox/addon/linkding-extension/) and [Chrome](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe), as well as a bookmarklet
 - Light and dark themes
 - REST API for developing 3rd party apps
 - Admin panel for user self-service and raw data access
- Easy setup using Docker, uses SQLite as database
+- Easy setup using Docker and a SQLite database, with PostgreSQL as an option


-**Demo:** https://demo.linkding.link/ (configured with open registration)
+**Demo:** https://demo.linkding.link/ ([see here](https://github.com/sissbruecker/linkding/issues/408) if you have trouble accessing it)

 **Screenshot:**

@@ -56,22 +58,38 @@ The name comes from:
 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.

-By default, linkding uses SQLite as a database.
+linkding uses an SQLite database by default.
 Alternatively linkding supports PostgreSQL, see the [database options](docs/Options.md#LD_DB_ENGINE) for more information.

+<details>
+
+<summary>🧪 Alpine-based image</summary>
+
+The default Docker image (`latest` tag) is based on a slim variant of Debian Linux.
+Alternatively, there is an image based on Alpine Linux (`latest-alpine` tag) which has a smaller size, resulting in a smaller download and less disk space required.
+The Alpine image is currently about 45 MB in compressed size, compared to about 130 MB for the Debian image.
+
+To use it, replace the `latest` tag with `latest-alpine`, either in the CLI command below when using Docker, or in the `docker-compose.yml` file when using docker-compose.
+
+> [!WARNING]
+> The image is currently considered experimental in order to gather feedback and iron out any issues.
+> Only use it if you are comfortable running experimental software or want to help out with testing.
+> While there should be no issues with creating new installations, there might be issues when migrating existing installations.
+> If you plan to migrate your existing installation, make sure to create proper [backups](https://github.com/sissbruecker/linkding/blob/master/docs/backup.md) first.
+
+</details>
+
 ###  Using Docker

 To install linkding using Docker you can just run the [latest image](https://hub.docker.com/repository/docker/sissbruecker/linkding) from Docker Hub:
 ```shell
-docker run --name linkding -p 9090:9090 -d sissbruecker/linkding:latest
-```
-By default, the application runs on port `9090`, you can map it to a different host port by modifying the port mapping in the command above. If everything completed successfully, the application should now be running and can be accessed at http://localhost:9090, provided you did not change the port mapping.
-
-Note that the command above will store the linkding SQLite database in the container, which means that deleting the container, for example when upgrading the installation, will also remove the database. For hosting an actual installation you usually want to store the database on the host system, rather than in the container. To do so, run the following command, and 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:
-```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.
@@ -101,6 +119,8 @@ docker-compose exec linkding python manage.py createsuperuser --username=joe --e

 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.
@@ -158,10 +178,10 @@ Instead of configuring header forwarding in your proxy, you can also configure t

 ### Managed Hosting Options

-Self-hosting web applications on your own hardware (unfortunately) still requires a lot of technical know-how, and commitment to maintenance, with regard to keeping everything up-to-date and secure. This can be a huge entry barrier for people who are interested in self-hosting linkding, but lack the technical knowledge to do so. This section is intended to provide alternatives in form of managed hosting solutions. Note that these options are usually commercial offerings, that require paying a (usually monthly) fee for the convenience of being managed by another party. The technical knowledge required to make use of individual options is going to vary, and no guarantees can be made that every option is accessible for everyone. That being said, I hope this section helps in making the application accessible to a wider audience.
+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)
+- [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))

 ## Documentation

@@ -171,13 +191,14 @@ Self-hosting web applications on your own hardware (unfortunately) still require
 | [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                           |

 ## Browser Extension

 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/de/firefox/addon/linkding-extension/)
+- [Mozilla Addon Store](https://addons.mozilla.org/firefox/addon/linkding-extension/)
 - [Chrome Web Store](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe)

 The extension is open-source as well, and can be found [here](https://github.com/sissbruecker/linkding-extension).
@@ -186,17 +207,33 @@ The extension is open-source as well, and can be found [here](https://github.com

 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. 
 - [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)
- [aiolinkding](https://github.com/bachya/aiolinkding) A Python3, async library to interact with the linkding REST API. By [bachya](https://github.com/bachya)
- [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)
+- [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)
+- [Postman collection](https://gist.github.com/gingerbeardman/f0b42502f3bc9344e92ce63afd4360d3) a group of saved request templates for API testing. By [gingerbeardman](https://github.com/gingerbeardman)

-## Acknowledgements
+## Acknowledgements + Donations

-JetBrains provides an open-source license of [IntelliJ IDEA](https://www.jetbrains.com/idea/) for the development of linkding.
+### 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.

 ## Development

@@ -242,3 +279,23 @@ Start the Django development server with:
 python3 manage.py runserver
 ```
 The frontend is now available under http://localhost:8000
+
+### 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)
+
+Once checked out, only the following commands are required to get started:
+
+Create a user for the frontend:
+```
+python3 manage.py createsuperuser --username=joe --email=joe@example.com
+```
+Start the Node.js development server (used for compiling JavaScript components like tag auto-completion) with:
+```
+npm run dev
+```
+Start the Django development server with:
+```
+python3 manage.py runserver
+```
+The frontend is now available under http://localhost:8000
--- a/bookmarks/admin.py
+++ b/bookmarks/admin.py
@@ -122,7 +122,7 @@ class AdminUserProfileInline(admin.StackedInline):
    can_delete = False
    verbose_name_plural = 'Profile'
    fk_name = 'user'
-
+    readonly_fields = ('search_preferences', )

 class AdminCustomUser(UserAdmin):
    inlines = (AdminUserProfileInline,)
--- a/bookmarks/api/routes.py
+++ b/bookmarks/api/routes.py
@@ -1,11 +1,12 @@
 from rest_framework import viewsets, mixins, status
 from rest_framework.decorators import action
+from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
 from rest_framework.routers import DefaultRouter

 from bookmarks import queries
-from bookmarks.api.serializers import BookmarkSerializer, TagSerializer
-from bookmarks.models import Bookmark, BookmarkFilters, Tag, User
+from bookmarks.api.serializers import BookmarkSerializer, TagSerializer, UserProfileSerializer
+from bookmarks.models import Bookmark, BookmarkSearch, Tag, User
 from bookmarks.services.bookmarks import archive_bookmark, unarchive_bookmark, website_loader
 from bookmarks.services.website_loader import WebsiteMetadata

@@ -18,12 +19,23 @@ class BookmarkViewSet(viewsets.GenericViewSet,
                      mixins.DestroyModelMixin):
    serializer_class = BookmarkSerializer

+    def get_permissions(self):
+        # Allow unauthenticated access to shared bookmarks.
+        # The shared action should still filter bookmarks so that
+        # unauthenticated users only see bookmarks from users that have public
+        # sharing explicitly enabled
+        if self.action == 'shared':
+            return [AllowAny()]
+
+        # Otherwise use default permissions which should require authentication
+        return super().get_permissions()
+
    def get_queryset(self):
        user = self.request.user
        # For list action, use query set that applies search and tag projections
        if self.action == 'list':
-            query_string = self.request.GET.get('q')
-            return queries.query_bookmarks(user, query_string)
+            search = BookmarkSearch.from_request(self.request.GET)
+            return queries.query_bookmarks(user, user.profile, search)

        # For single entity actions use default query set without projections
        return Bookmark.objects.all().filter(owner=user)
@@ -34,8 +46,8 @@ class BookmarkViewSet(viewsets.GenericViewSet,
    @action(methods=['get'], detail=False)
    def archived(self, request):
        user = request.user
-        query_string = request.GET.get('q')
-        query_set = queries.query_archived_bookmarks(user, query_string)
+        search = BookmarkSearch.from_request(request.GET)
+        query_set = queries.query_archived_bookmarks(user, user.profile, search)
        page = self.paginate_queryset(query_set)
        serializer = self.get_serializer_class()
        data = serializer(page, many=True).data
@@ -43,9 +55,10 @@ class BookmarkViewSet(viewsets.GenericViewSet,

    @action(methods=['get'], detail=False)
    def shared(self, request):
-        filters = BookmarkFilters(request)
-        user = User.objects.filter(username=filters.user).first()
-        query_set = queries.query_shared_bookmarks(user, filters.query)
+        search = BookmarkSearch.from_request(request.GET)
+        user = User.objects.filter(username=search.user).first()
+        public_only = not request.user.is_authenticated
+        query_set = queries.query_shared_bookmarks(user, request.user_profile, search, public_only)
        page = self.paginate_queryset(query_set)
        serializer = self.get_serializer_class()
        data = serializer(page, many=True).data
@@ -95,6 +108,13 @@ class TagViewSet(viewsets.GenericViewSet,
        return {'user': self.request.user}


+class UserViewSet(viewsets.GenericViewSet):
+    @action(methods=['get'], detail=False)
+    def profile(self, request):
+        return Response(UserProfileSerializer(request.user.profile).data)
+
+
 router = DefaultRouter()
 router.register(r'bookmarks', BookmarkViewSet, basename='bookmark')
 router.register(r'tags', TagViewSet, basename='tag')
+router.register(r'user', UserViewSet, basename='user')
--- a/bookmarks/api/serializers.py
+++ b/bookmarks/api/serializers.py
@@ -2,7 +2,7 @@ from django.db.models import prefetch_related_objects
 from rest_framework import serializers
 from rest_framework.serializers import ListSerializer

-from bookmarks.models import Bookmark, Tag, build_tag_string
+from bookmarks.models import Bookmark, Tag, build_tag_string, UserProfile
 from bookmarks.services.bookmarks import create_bookmark, update_bookmark
 from bookmarks.services.tags import get_or_create_tag

@@ -27,6 +27,7 @@ class BookmarkSerializer(serializers.ModelSerializer):
            'url',
            'title',
            'description',
+            'notes',
            'website_title',
            'website_description',
            'is_archived',
@@ -47,6 +48,7 @@ class BookmarkSerializer(serializers.ModelSerializer):
    # 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)
@@ -58,6 +60,7 @@ class BookmarkSerializer(serializers.ModelSerializer):
        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']
@@ -66,7 +69,7 @@ class BookmarkSerializer(serializers.ModelSerializer):

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

@@ -86,3 +89,21 @@ class TagSerializer(serializers.ModelSerializer):

    def create(self, validated_data):
        return get_or_create_tag(validated_data['name'], self.context['user'])
+
+
+class UserProfileSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = UserProfile
+        fields = [
+            "theme",
+            "bookmark_date_display",
+            "bookmark_link_target",
+            "web_archive_integration",
+            "tag_search",
+            "enable_sharing",
+            "enable_public_sharing",
+            "enable_favicons",
+            "display_url",
+            "permanent_notes",
+            "search_preferences",
+        ]
--- a/bookmarks/components/SearchAutoComplete.svelte
+++ b/bookmarks/components/SearchAutoComplete.svelte
@@ -1,271 +0,0 @@
-<script>
-    import {SearchHistory} from "./SearchHistory";
-    import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "./util";
-
-    const searchHistory = new SearchHistory()
-
-    export let name;
-    export let placeholder;
-    export let value;
-    export let tags;
-    export let mode = '';
-    export let apiClient;
-    export let filters;
-
-    let isFocus = false;
-    let isOpen = false;
-    let suggestions = []
-    let selectedIndex = undefined;
-    let input = null;
-
-    // Track current search query after loading the page
-    searchHistory.pushCurrent()
-    updateSuggestions()
-
-    function handleFocus() {
-        isFocus = true;
-    }
-
-    function handleBlur() {
-        isFocus = false;
-        close();
-    }
-
-    function handleInput(e) {
-        value = e.target.value
-        debouncedLoadSuggestions()
-    }
-
-    function handleKeyDown(e) {
-        // Enter
-        if (isOpen && selectedIndex !== undefined && (e.keyCode === 13 || e.keyCode === 9)) {
-            const suggestion = suggestions.total[selectedIndex];
-            if (suggestion) completeSuggestion(suggestion);
-            e.preventDefault();
-        }
-        // Escape
-        if (e.keyCode === 27) {
-            close();
-            e.preventDefault();
-        }
-        // Up arrow
-        if (e.keyCode === 38) {
-            updateSelection(-1);
-            e.preventDefault();
-        }
-        // Down arrow
-        if (e.keyCode === 40) {
-            if (!isOpen) {
-                loadSuggestions()
-            } else {
-                updateSelection(1);
-            }
-            e.preventDefault();
-        }
-    }
-
-    function open() {
-        isOpen = true;
-    }
-
-    function close() {
-        isOpen = false;
-        updateSuggestions()
-        selectedIndex = undefined
-    }
-
-    function hasSuggestions() {
-        return suggestions.total.length > 0
-    }
-
-    async function loadSuggestions() {
-
-        let suggestionIndex = 0
-
-        function nextIndex() {
-            return suggestionIndex++
-        }
-
-        // Tag suggestions
-        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)
-                .slice(0, 5)
-                .map(tagName => ({
-                    type: 'tag',
-                    index: nextIndex(),
-                    label: `#${tagName}`,
-                    tagName: tagName
-                }))
-        }
-
-        // Recent search suggestions
-        const search = searchHistory.getRecentSearches(value, 5).map(value => ({
-            type: 'search',
-            index: nextIndex(),
-            label: value,
-            value
-        }))
-
-        // Bookmark suggestions
-        let bookmarks = []
-
-        if (value && value.length >= 3) {
-            const path = mode ? `/${mode}` : ''
-            const suggestionFilters = {
-                ...filters,
-                q: value
-            }
-            const fetchedBookmarks = await apiClient.listBookmarks(suggestionFilters, {limit: 5, offset: 0, path})
-            bookmarks = fetchedBookmarks.map(bookmark => {
-                const fullLabel = bookmark.title || bookmark.website_title || bookmark.url
-                const label = clampText(fullLabel, 60)
-                return {
-                    type: 'bookmark',
-                    index: nextIndex(),
-                    label,
-                    bookmark
-                }
-            })
-        }
-
-        updateSuggestions(search, bookmarks, tagSuggestions)
-
-        if (hasSuggestions()) {
-            open()
-        } else {
-            close()
-        }
-    }
-
-    const debouncedLoadSuggestions = debounce(loadSuggestions)
-
-    function updateSuggestions(search, bookmarks, tagSuggestions) {
-        search = search || []
-        bookmarks = bookmarks || []
-        tagSuggestions = tagSuggestions || []
-        suggestions = {
-            search,
-            bookmarks,
-            tags: tagSuggestions,
-            total: [
-                ...tagSuggestions,
-                ...search,
-                ...bookmarks,
-            ]
-        }
-    }
-
-    function completeSuggestion(suggestion) {
-        if (suggestion.type === 'search') {
-            value = suggestion.value
-            close()
-        }
-        if (suggestion.type === 'bookmark') {
-            window.open(suggestion.bookmark.url, '_blank')
-            close()
-        }
-        if (suggestion.type === 'tag') {
-            const bounds = getCurrentWordBounds(input);
-            const inputValue = input.value;
-            input.value = inputValue.substring(0, bounds.start) + `#${suggestion.tagName} ` + inputValue.substring(bounds.end);
-            close()
-        }
-    }
-
-    function updateSelection(dir) {
-
-        const length = suggestions.total.length;
-
-        if (length === 0) return
-
-        if (selectedIndex === undefined) {
-            selectedIndex = dir > 0 ? 0 : Math.max(length - 1, 0)
-            return
-        }
-
-        let newIndex = selectedIndex + dir;
-
-        if (newIndex < 0) newIndex = Math.max(length - 1, 0);
-        if (newIndex >= length) newIndex = 0;
-
-        selectedIndex = newIndex;
-    }
-</script>
-
-<div class="form-autocomplete">
-    <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
-        <input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
-               bind:this={input}
-               on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
-    </div>
-
-    <ul class="menu" class:open={isOpen}>
-        {#if suggestions.tags.length > 0}
-            <li class="menu-item group-item">Tags</li>
-        {/if}
-        {#each suggestions.tags as suggestion}
-            <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
-                <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
-                    <div class="tile tile-centered">
-                        <div class="tile-content">
-                            {suggestion.label}
-                        </div>
-                    </div>
-                </a>
-            </li>
-        {/each}
-
-        {#if suggestions.search.length > 0}
-            <li class="menu-item group-item">Recent Searches</li>
-        {/if}
-        {#each suggestions.search as suggestion}
-            <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
-                <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
-                    <div class="tile tile-centered">
-                        <div class="tile-content">
-                            {suggestion.label}
-                        </div>
-                    </div>
-                </a>
-            </li>
-        {/each}
-
-        {#if suggestions.bookmarks.length > 0}
-            <li class="menu-item group-item">Bookmarks</li>
-        {/if}
-        {#each suggestions.bookmarks as suggestion}
-            <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
-                <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
-                    <div class="tile tile-centered">
-                        <div class="tile-content">
-                            {suggestion.label}
-                        </div>
-                    </div>
-                </a>
-            </li>
-        {/each}
-    </ul>
-</div>
-
-<style>
-    .menu {
-        display: none;
-        max-height: 400px;
-        overflow: auto;
-    }
-
-    .menu.open {
-        display: block;
-    }
-
-    .form-autocomplete-input {
-        padding: 0;
-    }
-    .form-autocomplete-input.is-focused {
-        z-index: 2;
-    }
-
-</style>
--- a/bookmarks/components/SearchHistory.js
+++ b/bookmarks/components/SearchHistory.js
@@ -1,48 +0,0 @@
-const SEARCH_HISTORY_KEY = 'searchHistory'
-const MAX_ENTRIES = 30
-
-export class SearchHistory {
-
-    getHistory() {
-        const historyJson = localStorage.getItem(SEARCH_HISTORY_KEY)
-        return historyJson ? JSON.parse(historyJson) : {
-            recent: []
-        }
-    }
-
-    pushCurrent() {
-        // Skip if browser is not compatible
-        if (!window.URLSearchParams) return
-        const urlParams = new URLSearchParams(window.location.search);
-        const searchParam = urlParams.get('q');
-
-        if (!searchParam) return
-
-        this.push(searchParam)
-    }
-
-    push(search) {
-        const history = this.getHistory()
-
-        history.recent.unshift(search)
-
-        // Remove duplicates and clamp to max entries
-        history.recent = history.recent.reduce((acc, cur) => {
-            if (acc.length >= MAX_ENTRIES) return acc
-            if (acc.indexOf(cur) >= 0) return acc
-            acc.push(cur)
-            return acc
-        }, [])
-
-        const newHistoryJson = JSON.stringify(history)
-        localStorage.setItem(SEARCH_HISTORY_KEY, newHistoryJson)
-    }
-
-    getRecentSearches(query, max) {
-        const history = this.getHistory()
-
-        return history.recent
-            .filter(search => !query || search.toLowerCase().indexOf(query.toLowerCase()) >= 0)
-            .slice(0, max)
-    }
-}
--- a/bookmarks/components/TagAutocomplete.svelte
+++ b/bookmarks/components/TagAutocomplete.svelte
@@ -1,168 +0,0 @@
-<script>
-    import {getCurrentWord, getCurrentWordBounds} from "./util";
-
-    export let id;
-    export let name;
-    export let value;
-    export let apiClient;
-    export let variant = 'default';
-
-    let tags = [];
-    let isFocus = false;
-    let isOpen = false;
-    let input = null;
-    let suggestionList = null;
-
-    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: 1000, 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;
-    }
-
-    function handleBlur() {
-        isFocus = false;
-        close();
-    }
-
-    function handleInput(e) {
-        input = e.target;
-
-        const word = getCurrentWord(input);
-
-        suggestions = word
-            ? tags.filter(tag => tag.name.toLowerCase().indexOf(word.toLowerCase()) === 0)
-            : [];
-
-        if (word && suggestions.length > 0) {
-            open();
-        } else {
-            close();
-        }
-    }
-
-    function handleKeyDown(e) {
-        if (isOpen && (e.keyCode === 13 || e.keyCode === 9)) {
-            const suggestion = suggestions[selectedIndex];
-            complete(suggestion);
-            e.preventDefault();
-        }
-        if (e.keyCode === 27) {
-            close();
-            e.preventDefault();
-        }
-        if (e.keyCode === 38) {
-            updateSelection(-1);
-            e.preventDefault();
-        }
-        if (e.keyCode === 40) {
-            updateSelection(1);
-            e.preventDefault();
-        }
-    }
-
-    function open() {
-        isOpen = true;
-        selectedIndex = 0;
-    }
-
-    function close() {
-        isOpen = false;
-        suggestions = [];
-        selectedIndex = 0;
-    }
-
-    function complete(suggestion) {
-        const bounds = getCurrentWordBounds(input);
-        const value = input.value;
-        input.value = value.substring(0, bounds.start) + suggestion.name + ' ' + value.substring(bounds.end);
-
-        close();
-    }
-
-    function updateSelection(dir) {
-
-        const length = suggestions.length;
-        let newIndex = selectedIndex + dir;
-
-        if (newIndex < 0) newIndex = Math.max(length - 1, 0);
-        if (newIndex >= length) newIndex = 0;
-
-        selectedIndex = newIndex;
-
-        // Scroll to selected list item
-        setTimeout(() => {
-            if (suggestionList) {
-                const selectedListItem = suggestionList.querySelector('li.selected');
-                if (selectedListItem) {
-                    selectedListItem.scrollIntoView({block: 'center'});
-                }
-            }
-        }, 0);
-    }
-</script>
-
-<div class="form-autocomplete" class:small={variant === 'small'}>
-    <!-- autocomplete input container -->
-    <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
-        <!-- autocomplete real input box -->
-        <input id="{id}" name="{name}" value="{value ||''}" placeholder="&nbsp;"
-               class="form-input" type="text" autocomplete="off"
-               on:input={handleInput} on:keydown={handleKeyDown}
-               on:focus={handleFocus} on:blur={handleBlur}>
-    </div>
-
-    <!-- autocomplete suggestion list -->
-    <ul class="menu" class:open={isOpen && suggestions.length > 0}
-        bind:this={suggestionList}>
-        <!-- menu list items -->
-        {#each suggestions as tag,i}
-            <li class="menu-item" class:selected={selectedIndex === i}>
-                <a href="#" on:mousedown|preventDefault={() => complete(tag)}>
-                    <div class="tile tile-centered">
-                        <div class="tile-content">
-                            {tag.name}
-                        </div>
-                    </div>
-                </a>
-            </li>
-        {/each}
-    </ul>
-</div>
-
-<style>
-    .menu {
-        display: none;
-        max-height: 200px;
-        overflow: auto;
-    }
-
-    .menu.open {
-        display: block;
-    }
-
-    .form-autocomplete.small .form-autocomplete-input {
-        height: 1.4rem;
-        min-height: 1.4rem;
-    }
-    .form-autocomplete.small .form-autocomplete-input input {
-        margin: 0;
-        padding: 0;
-        font-size: 0.7rem;
-    }
-    .form-autocomplete.small .menu .menu-item {
-        font-size: 0.7rem;
-    }
-</style>
--- a/bookmarks/components/api.js
+++ b/bookmarks/components/api.js
@@ -1,32 +0,0 @@
-export class ApiClient {
-    constructor(baseUrl) {
-        this.baseUrl = baseUrl
-    }
-
-    listBookmarks(filters, options = {limit: 100, offset: 0, path: ''}) {
-        const query = [
-          `limit=${options.limit}`,
-          `offset=${options.offset}`,
-        ]
-        Object.keys(filters).forEach(key => {
-            const value = filters[key]
-            if (value) {
-                query.push(`${key}=${encodeURIComponent(value)}`)
-            }
-        })
-        const queryString = query.join('&')
-        const url = `${this.baseUrl}bookmarks${options.path}/?${queryString}`
-
-        return fetch(url)
-            .then(response => response.json())
-            .then(data => data.results)
-    }
-
-    getTags(options = {limit: 100, offset: 0}) {
-        const url = `${this.baseUrl}tags/?limit=${options.limit}&offset=${options.offset}`
-
-        return fetch(url)
-            .then(response => response.json())
-            .then(data => data.results)
-    }
-}
--- a/bookmarks/components/index.js
+++ b/bookmarks/components/index.js
@@ -1,10 +0,0 @@
-import TagAutoComplete from './TagAutocomplete.svelte'
-import SearchAutoComplete from './SearchAutoComplete.svelte'
-import {ApiClient} from './api'
-
-export default {
-    ApiClient,
-    TagAutoComplete,
-    SearchAutoComplete
-}
-
--- a/bookmarks/components/util.js
+++ b/bookmarks/components/util.js
@@ -1,37 +0,0 @@
-export function debounce(callback, delay = 250) {
-    let timeoutId
-    return (...args) => {
-        clearTimeout(timeoutId)
-        timeoutId = setTimeout(() => {
-            timeoutId = null
-            callback(...args)
-        }, delay)
-    }
-}
-
-export function clampText(text, maxChars = 30) {
-    if(!text || text.length <= 30) return text
-
-    return text.substr(0, maxChars) + '...'
-}
-
-export function getCurrentWordBounds(input) {
-    const text = input.value;
-    const end = input.selectionStart;
-    let start = end;
-
-    let currentChar = text.charAt(start - 1);
-
-    while (currentChar && currentChar !== ' ' && start > 0) {
-        start--;
-        currentChar = text.charAt(start - 1);
-    }
-
-    return {start, end};
-}
-
-export function getCurrentWord(input) {
-    const bounds = getCurrentWordBounds(input);
-
-    return input.value.substring(bounds.start, bounds.end);
-}
--- a/bookmarks/context_processors.py
+++ b/bookmarks/context_processors.py
@@ -1,12 +1,32 @@
-from bookmarks.models import Toast
+from bookmarks import queries
+from bookmarks.models import BookmarkSearch, Toast
+from bookmarks import utils


 def toasts(request):
-    user = request.user if hasattr(request, 'user') else None
-    toast_messages = Toast.objects.filter(owner=user, acknowledged=False) if user and user.is_authenticated else []
+    user = request.user
+    toast_messages = Toast.objects.filter(owner=user, acknowledged=False) if user.is_authenticated else []
    has_toasts = len(toast_messages) > 0

    return {
        'has_toasts': has_toasts,
        'toast_messages': toast_messages,
    }
+
+
+def public_shares(request):
+    # Only check for public shares for anonymous users
+    if not request.user.is_authenticated:
+        query_set = queries.query_shared_bookmarks(None, request.user_profile, BookmarkSearch(), True)
+        has_public_shares = query_set.count() > 0
+        return {
+            'has_public_shares': has_public_shares,
+        }
+
+    return {}
+
+
+def app_version(request):
+    return {
+        'app_version': utils.app_version
+    }
--- a/bookmarks/e2e/init.py
+++ b/bookmarks/e2e/init.py
--- a/bookmarks/e2e/e2e_test_bookmark_form.py
+++ b/bookmarks/e2e/e2e_test_bookmark_form.py
@@ -0,0 +1,67 @@
+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='')
--- a/bookmarks/e2e/e2e_test_bookmark_item.py
+++ b/bookmarks/e2e/e2e_test_bookmark_item.py
@@ -0,0 +1,25 @@
+from unittest import skip
+
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+
+
+class BookmarkItemE2ETestCase(LinkdingE2ETestCase):
+    @skip("Fails in CI, needs investigation")
+    def test_toggle_notes_should_show_hide_notes(self):
+        bookmark = self.setup_bookmark(notes='Test notes')
+
+        with sync_playwright() as p:
+            page = self.open(reverse('bookmarks:index'), p)
+
+            notes = self.locate_bookmark(bookmark.title).locator('.notes')
+            expect(notes).to_be_hidden()
+
+            toggle_notes = page.locator('li button.toggle-notes')
+            toggle_notes.click()
+            expect(notes).to_be_visible()
+
+            toggle_notes.click()
+            expect(notes).to_be_hidden()
--- a/bookmarks/e2e/e2e_test_bookmark_page_bulk_edit.py
+++ b/bookmarks/e2e/e2e_test_bookmark_page_bulk_edit.py
@@ -0,0 +1,232 @@
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+from bookmarks.models import Bookmark
+
+
+class BookmarkPagePartialUpdatesE2ETestCase(LinkdingE2ETestCase):
+    def setup_test_data(self):
+        self.setup_numbered_bookmarks(50)
+        self.setup_numbered_bookmarks(50, archived=True)
+        self.setup_numbered_bookmarks(50, prefix='foo')
+        self.setup_numbered_bookmarks(50, archived=True, prefix='foo')
+
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='Archived Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='foo').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='foo').count())
+
+    def test_active_bookmarks_bulk_select_across(self):
+        self.setup_test_data()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+        self.assertEqual(0, Bookmark.objects.filter(is_archived=False, title__startswith='Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='Archived Bookmark').count())
+        self.assertEqual(0, Bookmark.objects.filter(is_archived=False, title__startswith='foo').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='foo').count())
+
+    def test_archived_bookmarks_bulk_select_across(self):
+        self.setup_test_data()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:archived'), p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='Bookmark').count())
+        self.assertEqual(0, Bookmark.objects.filter(is_archived=True, title__startswith='Archived Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='foo').count())
+        self.assertEqual(0, Bookmark.objects.filter(is_archived=True, title__startswith='foo').count())
+
+    def test_active_bookmarks_bulk_select_across_respects_query(self):
+        self.setup_test_data()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index') + '?q=foo', p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='Archived Bookmark').count())
+        self.assertEqual(0, Bookmark.objects.filter(is_archived=False, title__startswith='foo').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='foo').count())
+
+    def test_archived_bookmarks_bulk_select_across_respects_query(self):
+        self.setup_test_data()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:archived') + '?q=foo', p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=True, title__startswith='Archived Bookmark').count())
+        self.assertEqual(50, Bookmark.objects.filter(is_archived=False, title__startswith='foo').count())
+        self.assertEqual(0, Bookmark.objects.filter(is_archived=True, title__startswith='foo').count())
+
+    def test_select_all_toggles_all_checkboxes(self):
+        self.setup_numbered_bookmarks(5)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            page = self.open(url, p)
+
+            self.locate_bulk_edit_toggle().click()
+
+            checkboxes = page.locator('label[ld-bulk-edit-checkbox] input')
+            self.assertEqual(6, checkboxes.count())
+            for i in range(checkboxes.count()):
+                expect(checkboxes.nth(i)).not_to_be_checked()
+
+            self.locate_bulk_edit_select_all().click()
+
+            for i in range(checkboxes.count()):
+                expect(checkboxes.nth(i)).to_be_checked()
+
+            self.locate_bulk_edit_select_all().click()
+
+            for i in range(checkboxes.count()):
+                expect(checkboxes.nth(i)).not_to_be_checked()
+
+    def test_select_all_shows_select_across(self):
+        self.setup_numbered_bookmarks(5)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            self.open(url, p)
+
+            self.locate_bulk_edit_toggle().click()
+
+            expect(self.locate_bulk_edit_select_across()).not_to_be_visible()
+
+            self.locate_bulk_edit_select_all().click()
+            expect(self.locate_bulk_edit_select_across()).to_be_visible()
+
+            self.locate_bulk_edit_select_all().click()
+            expect(self.locate_bulk_edit_select_across()).not_to_be_visible()
+
+    def test_select_across_is_unchecked_when_toggling_all(self):
+        self.setup_numbered_bookmarks(5)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            self.open(url, p)
+
+            self.locate_bulk_edit_toggle().click()
+
+            # Show select across, check it
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+            expect(self.locate_bulk_edit_select_across()).to_be_checked()
+
+            # Hide select across by toggling select all
+            self.locate_bulk_edit_select_all().click()
+            expect(self.locate_bulk_edit_select_across()).not_to_be_visible()
+
+            # Show select across again, verify it is unchecked
+            self.locate_bulk_edit_select_all().click()
+            expect(self.locate_bulk_edit_select_across()).not_to_be_checked()
+
+    def test_select_across_is_unchecked_when_toggling_bookmark(self):
+        self.setup_numbered_bookmarks(5)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            self.open(url, p)
+
+            self.locate_bulk_edit_toggle().click()
+
+            # Show select across, check it
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+            expect(self.locate_bulk_edit_select_across()).to_be_checked()
+
+            # Hide select across by toggling a single bookmark
+            self.locate_bookmark('Bookmark 1').locator('label[ld-bulk-edit-checkbox]').click()
+            expect(self.locate_bulk_edit_select_across()).not_to_be_visible()
+
+            # Show select across again, verify it is unchecked
+            self.locate_bookmark('Bookmark 1').locator('label[ld-bulk-edit-checkbox]').click()
+            expect(self.locate_bulk_edit_select_across()).not_to_be_checked()
+
+    def test_execute_resets_all_checkboxes(self):
+        self.setup_numbered_bookmarks(100)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            page = self.open(url, p)
+
+            # Select all bookmarks, enable select across
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bulk_edit_select_all().click()
+            self.locate_bulk_edit_select_across().click()
+
+            # Get reference for bookmark list
+            bookmark_list = page.locator('ul[ld-bookmark-list]')
+
+            # Execute bulk action
+            self.select_bulk_action('Mark as unread')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+            # Wait until bookmark list is updated (old reference becomes invisible)
+            expect(bookmark_list).not_to_be_visible()
+
+            # Verify bulk edit checkboxes are reset
+            checkboxes = page.locator('label[ld-bulk-edit-checkbox] input')
+            self.assertEqual(31, checkboxes.count())
+            for i in range(checkboxes.count()):
+                expect(checkboxes.nth(i)).not_to_be_checked()
+
+            # Toggle select all and verify select across is reset
+            self.locate_bulk_edit_select_all().click()
+            expect(self.locate_bulk_edit_select_across()).not_to_be_checked()
+
+    def test_update_select_across_bookmark_count(self):
+        self.setup_numbered_bookmarks(100)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            self.open(url, p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bulk_edit_select_all().click()
+
+            expect(self.locate_bulk_edit_bar().get_by_text('All pages (100 bookmarks)')).to_be_visible()
+
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+            self.locate_bulk_edit_select_all().click()
+
+            expect(self.locate_bulk_edit_bar().get_by_text('All pages (70 bookmarks)')).to_be_visible()
--- a/bookmarks/e2e/e2e_test_bookmark_page_partial_updates.py
+++ b/bookmarks/e2e/e2e_test_bookmark_page_partial_updates.py
@@ -0,0 +1,288 @@
+from typing import List
+
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+
+
+class BookmarkPagePartialUpdatesE2ETestCase(LinkdingE2ETestCase):
+    def setup_fixture(self):
+        profile = self.get_or_create_test_user().profile
+        profile.enable_sharing = True
+        profile.save()
+
+        # create a number of bookmarks with different states / visibility to
+        # verify correct data is loaded on update
+        self.setup_numbered_bookmarks(3, with_tags=True)
+        self.setup_numbered_bookmarks(3, with_tags=True, archived=True)
+        self.setup_numbered_bookmarks(3,
+                                      shared=True,
+                                      prefix="Joe's Bookmark",
+                                      user=self.setup_user(enable_sharing=True))
+
+    def assertVisibleBookmarks(self, titles: List[str]):
+        bookmark_tags = self.page.locator('li[ld-bookmark-item]')
+        expect(bookmark_tags).to_have_count(len(titles))
+
+        for title in titles:
+            matching_tag = bookmark_tags.filter(has_text=title)
+            expect(matching_tag).to_be_visible()
+
+    def assertVisibleTags(self, titles: List[str]):
+        tag_tags = self.page.locator('.tag-cloud .unselected-tags a')
+        expect(tag_tags).to_have_count(len(titles))
+
+        for title in titles:
+            matching_tag = tag_tags.filter(has_text=title)
+            expect(matching_tag).to_be_visible()
+
+    def test_partial_update_respects_query(self):
+        self.setup_numbered_bookmarks(5, prefix='foo')
+        self.setup_numbered_bookmarks(5, prefix='bar')
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index') + '?q=foo'
+            self.open(url, p)
+
+            self.assertVisibleBookmarks(['foo 1', 'foo 2', 'foo 3', 'foo 4', 'foo 5'])
+
+            self.locate_bookmark('foo 2').get_by_text('Archive').click()
+            self.assertVisibleBookmarks(['foo 1', 'foo 3', 'foo 4', 'foo 5'])
+
+    def test_partial_update_respects_sort(self):
+        self.setup_numbered_bookmarks(5, prefix='foo')
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index') + '?sort=title_asc'
+            page = self.open(url, p)
+
+            first_item = page.locator('li[ld-bookmark-item]').first
+            expect(first_item).to_contain_text('foo 1')
+
+            first_item.get_by_text('Archive').click()
+
+            first_item = page.locator('li[ld-bookmark-item]').first
+            expect(first_item).to_contain_text('foo 2')
+
+    def test_partial_update_respects_page(self):
+        # add a suffix, otherwise 'foo 1' also matches 'foo 10'
+        self.setup_numbered_bookmarks(50, prefix='foo', suffix='-')
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index') + '?q=foo&page=2'
+            self.open(url, p)
+
+            # with descending sort, page two has 'foo 1' to 'foo 20'
+            expected_titles = [f'foo {i}-' for i in range(1, 21)]
+            self.assertVisibleBookmarks(expected_titles)
+
+            self.locate_bookmark('foo 20-').get_by_text('Archive').click()
+
+            expected_titles = [f'foo {i}-' for i in range(1, 20)]
+            self.assertVisibleBookmarks(expected_titles)
+
+    def test_multiple_partial_updates(self):
+        self.setup_numbered_bookmarks(5)
+
+        with sync_playwright() as p:
+            url = reverse('bookmarks:index')
+            self.open(url, p)
+
+            self.locate_bookmark('Bookmark 1').get_by_text('Archive').click()
+            self.assertVisibleBookmarks(['Bookmark 2', 'Bookmark 3', 'Bookmark 4', 'Bookmark 5'])
+
+            self.locate_bookmark('Bookmark 2').get_by_text('Archive').click()
+            self.assertVisibleBookmarks(['Bookmark 3', 'Bookmark 4', 'Bookmark 5'])
+
+            self.locate_bookmark('Bookmark 3').get_by_text('Archive').click()
+            self.assertVisibleBookmarks(['Bookmark 4', 'Bookmark 5'])
+
+            self.assertReloads(0)
+
+    def test_active_bookmarks_partial_update_on_archive(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            self.locate_bookmark('Bookmark 2').get_by_text('Archive').click()
+
+            self.assertVisibleBookmarks(['Bookmark 1', 'Bookmark 3'])
+            self.assertVisibleTags(['Tag 1', 'Tag 3'])
+            self.assertReloads(0)
+
+    def test_active_bookmarks_partial_update_on_delete(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            self.locate_bookmark('Bookmark 2').get_by_text('Remove').click()
+            self.locate_bookmark('Bookmark 2').get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks(['Bookmark 1', 'Bookmark 3'])
+            self.assertVisibleTags(['Tag 1', 'Tag 3'])
+            self.assertReloads(0)
+
+    def test_active_bookmarks_partial_update_on_mark_as_read(self):
+        self.setup_fixture()
+        bookmark2 = self.get_numbered_bookmark('Bookmark 2')
+        bookmark2.unread = True
+        bookmark2.save()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            expect(self.locate_bookmark('Bookmark 2')).to_have_class('unread')
+            self.locate_bookmark('Bookmark 2').get_by_text('Unread').click()
+            self.locate_bookmark('Bookmark 2').get_by_text('Yes').click()
+
+            expect(self.locate_bookmark('Bookmark 2')).not_to_have_class('unread')
+            self.assertReloads(0)
+
+    def test_active_bookmarks_partial_update_on_unshare(self):
+        self.setup_fixture()
+        bookmark2 = self.get_numbered_bookmark('Bookmark 2')
+        bookmark2.shared = True
+        bookmark2.save()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            expect(self.locate_bookmark('Bookmark 2')).to_have_class('shared')
+            self.locate_bookmark('Bookmark 2').get_by_text('Shared').click()
+            self.locate_bookmark('Bookmark 2').get_by_text('Yes').click()
+
+            expect(self.locate_bookmark('Bookmark 2')).not_to_have_class('shared')
+            self.assertReloads(0)
+
+    def test_active_bookmarks_partial_update_on_bulk_archive(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bookmark('Bookmark 2').locator('label[ld-bulk-edit-checkbox]').click()
+            self.select_bulk_action('Archive')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks(['Bookmark 1', 'Bookmark 3'])
+            self.assertVisibleTags(['Tag 1', 'Tag 3'])
+            self.assertReloads(0)
+
+    def test_active_bookmarks_partial_update_on_bulk_delete(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:index'), p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bookmark('Bookmark 2').locator('label[ld-bulk-edit-checkbox]').click()
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks(['Bookmark 1', 'Bookmark 3'])
+            self.assertVisibleTags(['Tag 1', 'Tag 3'])
+            self.assertReloads(0)
+
+    def test_archived_bookmarks_partial_update_on_unarchive(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:archived'), p)
+
+            self.locate_bookmark('Archived Bookmark 2').get_by_text('Unarchive').click()
+
+            self.assertVisibleBookmarks(['Archived Bookmark 1', 'Archived Bookmark 3'])
+            self.assertVisibleTags(['Archived Tag 1', 'Archived Tag 3'])
+            self.assertReloads(0)
+
+    def test_archived_bookmarks_partial_update_on_delete(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:archived'), p)
+
+            self.locate_bookmark('Archived Bookmark 2').get_by_text('Remove').click()
+            self.locate_bookmark('Archived Bookmark 2').get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks(['Archived Bookmark 1', 'Archived Bookmark 3'])
+            self.assertVisibleTags(['Archived Tag 1', 'Archived Tag 3'])
+            self.assertReloads(0)
+
+    def test_archived_bookmarks_partial_update_on_bulk_unarchive(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:archived'), p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bookmark('Archived Bookmark 2').locator('label[ld-bulk-edit-checkbox]').click()
+            self.select_bulk_action('Unarchive')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks(['Archived Bookmark 1', 'Archived Bookmark 3'])
+            self.assertVisibleTags(['Archived Tag 1', 'Archived Tag 3'])
+            self.assertReloads(0)
+
+    def test_archived_bookmarks_partial_update_on_bulk_delete(self):
+        self.setup_fixture()
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:archived'), p)
+
+            self.locate_bulk_edit_toggle().click()
+            self.locate_bookmark('Archived Bookmark 2').locator('label[ld-bulk-edit-checkbox]').click()
+            self.select_bulk_action('Delete')
+            self.locate_bulk_edit_bar().get_by_text('Execute').click()
+            self.locate_bulk_edit_bar().get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks(['Archived Bookmark 1', 'Archived Bookmark 3'])
+            self.assertVisibleTags(['Archived Tag 1', 'Archived Tag 3'])
+            self.assertReloads(0)
+
+    def test_shared_bookmarks_partial_update_on_unarchive(self):
+        self.setup_fixture()
+        self.setup_numbered_bookmarks(3, shared=True, prefix="My Bookmark", with_tags=True)
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:shared'), p)
+
+            self.locate_bookmark('My Bookmark 2').get_by_text('Archive').click()
+
+            # Shared bookmarks page also shows archived bookmarks, though it probably shouldn't
+            self.assertVisibleBookmarks([
+                'My Bookmark 1',
+                'My Bookmark 2',
+                'My Bookmark 3',
+                "Joe's Bookmark 1",
+                "Joe's Bookmark 2",
+                "Joe's Bookmark 3",
+            ])
+            self.assertVisibleTags(['Shared Tag 1', 'Shared Tag 2', 'Shared Tag 3'])
+            self.assertReloads(0)
+
+    def test_shared_bookmarks_partial_update_on_delete(self):
+        self.setup_fixture()
+        self.setup_numbered_bookmarks(3, shared=True, prefix="My Bookmark", with_tags=True)
+
+        with sync_playwright() as p:
+            self.open(reverse('bookmarks:shared'), p)
+
+            self.locate_bookmark('My Bookmark 2').get_by_text('Remove').click()
+            self.locate_bookmark('My Bookmark 2').get_by_text('Confirm').click()
+
+            self.assertVisibleBookmarks([
+                'My Bookmark 1',
+                'My Bookmark 3',
+                "Joe's Bookmark 1",
+                "Joe's Bookmark 2",
+                "Joe's Bookmark 3",
+            ])
+            self.assertVisibleTags(['Shared Tag 1', 'Shared Tag 3'])
+            self.assertReloads(0)
--- a/bookmarks/e2e/e2e_test_global_shortcuts.py
+++ b/bookmarks/e2e/e2e_test_global_shortcuts.py
@@ -0,0 +1,30 @@
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+
+
+class GlobalShortcutsE2ETestCase(LinkdingE2ETestCase):
+    def test_focus_search(self):
+        with sync_playwright() as p:
+            browser = self.setup_browser(p)
+            page = browser.new_page()
+            page.goto(self.live_server_url + reverse('bookmarks:index'))
+
+            page.press('body', 's')
+
+            expect(page.get_by_placeholder('Search for words or #tags')).to_be_focused()
+
+            browser.close()
+
+    def test_add_bookmark(self):
+        with sync_playwright() as p:
+            browser = self.setup_browser(p)
+            page = browser.new_page()
+            page.goto(self.live_server_url + reverse('bookmarks:index'))
+
+            page.press('body', 'n')
+
+            expect(page).to_have_url(self.live_server_url + reverse('bookmarks:new'))
+
+            browser.close()
--- a/bookmarks/e2e/e2e_test_settings_general.py
+++ b/bookmarks/e2e/e2e_test_settings_general.py
@@ -0,0 +1,39 @@
+from django.urls import reverse
+from playwright.sync_api import sync_playwright, expect
+
+from bookmarks.e2e.helpers import LinkdingE2ETestCase
+
+
+class SettingsGeneralE2ETestCase(LinkdingE2ETestCase):
+    def test_should_only_enable_public_sharing_if_sharing_is_enabled(self):
+        with sync_playwright() as p:
+            browser = self.setup_browser(p)
+            page = browser.new_page()
+            page.goto(self.live_server_url + reverse('bookmarks:settings.general'))
+
+            enable_sharing = page.get_by_label('Enable bookmark sharing')
+            enable_sharing_label = page.get_by_text('Enable bookmark sharing')
+            enable_public_sharing = page.get_by_label('Enable public bookmark sharing')
+            enable_public_sharing_label = page.get_by_text('Enable public bookmark sharing')
+
+            # Public sharing is disabled by default
+            expect(enable_sharing).not_to_be_checked()
+            expect(enable_public_sharing).not_to_be_checked()
+            expect(enable_public_sharing).to_be_disabled()
+
+            # Enable sharing
+            enable_sharing_label.click()
+            expect(enable_sharing).to_be_checked()
+            expect(enable_public_sharing).not_to_be_checked()
+            expect(enable_public_sharing).to_be_enabled()
+
+            # Enable public sharing
+            enable_public_sharing_label.click()
+            expect(enable_public_sharing).to_be_checked()
+            expect(enable_public_sharing).to_be_enabled()
+
+            # Disable sharing
+            enable_sharing_label.click()
+            expect(enable_sharing).not_to_be_checked()
+            expect(enable_public_sharing).not_to_be_checked()
+            expect(enable_public_sharing).to_be_disabled()
--- a/bookmarks/e2e/helpers.py
+++ b/bookmarks/e2e/helpers.py
@@ -0,0 +1,54 @@
+from django.contrib.staticfiles.testing import LiveServerTestCase
+from playwright.sync_api import BrowserContext, Playwright, Page
+
+from bookmarks.tests.helpers import BookmarkFactoryMixin
+
+
+class LinkdingE2ETestCase(LiveServerTestCase, BookmarkFactoryMixin):
+    def setUp(self) -> None:
+        self.client.force_login(self.get_or_create_test_user())
+        self.cookie = self.client.cookies['sessionid']
+
+    def setup_browser(self, playwright) -> BrowserContext:
+        browser = playwright.chromium.launch(headless=True)
+        context = browser.new_context()
+        context.add_cookies([{
+            'name': 'sessionid',
+            'value': self.cookie.value,
+            'domain': self.live_server_url.replace('http:', ''),
+            'path': '/'
+        }])
+        return context
+
+    def open(self, url: str, playwright: Playwright) -> Page:
+        browser = self.setup_browser(playwright)
+        self.page = browser.new_page()
+        self.page.goto(self.live_server_url + url)
+        self.page.on('load', self.on_load)
+        self.num_loads = 0
+        return self.page
+
+    def on_load(self):
+        self.num_loads += 1
+
+    def assertReloads(self, count: int):
+        self.assertEqual(self.num_loads, count)
+
+    def locate_bookmark(self, title: str):
+        bookmark_tags = self.page.locator('li[ld-bookmark-item]')
+        return bookmark_tags.filter(has_text=title)
+
+    def locate_bulk_edit_bar(self):
+        return self.page.locator('.bulk-edit-bar')
+
+    def locate_bulk_edit_select_all(self):
+        return self.locate_bulk_edit_bar().locator('label[ld-bulk-edit-checkbox][all]')
+
+    def locate_bulk_edit_select_across(self):
+        return self.locate_bulk_edit_bar().locator('label.select-across')
+
+    def locate_bulk_edit_toggle(self):
+        return self.page.get_by_title('Bulk edit')
+
+    def select_bulk_action(self, value: str):
+        return self.locate_bulk_edit_bar().locator('select[name="bulk_action"]').select_option(value)
--- a/bookmarks/feeds.py
+++ b/bookmarks/feeds.py
@@ -1,11 +1,12 @@
+import unicodedata
 from dataclasses import dataclass

 from django.contrib.syndication.views import Feed
 from django.db.models import QuerySet
 from django.urls import reverse

-from bookmarks.models import Bookmark, FeedToken
 from bookmarks import queries
+from bookmarks.models import Bookmark, BookmarkSearch, FeedToken


@dataclass
@@ -14,18 +15,26 @@ class FeedContext:
    query_set: QuerySet[Bookmark]


+def sanitize(text: str):
+    if not text:
+        return ''
+    # remove control characters
+    valid_chars = ['\n', '\r', '\t']
+    return ''.join(ch for ch in text if ch in valid_chars or unicodedata.category(ch)[0] != 'C')
+
+
 class BaseBookmarksFeed(Feed):
    def get_object(self, request, feed_key: str):
        feed_token = FeedToken.objects.get(key__exact=feed_key)
-        query_string = request.GET.get('q')
-        query_set = queries.query_bookmarks(feed_token.user, query_string)
+        search = BookmarkSearch(q=request.GET.get('q', ''))
+        query_set = queries.query_bookmarks(feed_token.user, feed_token.user.profile, search)
        return FeedContext(feed_token, query_set)

    def item_title(self, item: Bookmark):
-        return item.resolved_title
+        return sanitize(item.resolved_title)

    def item_description(self, item: Bookmark):
-        return item.resolved_description
+        return sanitize(item.resolved_description)

    def item_link(self, item: Bookmark):
        return item.url
--- a/bookmarks/frontend/api.js
+++ b/bookmarks/frontend/api.js
@@ -0,0 +1,29 @@
+export class ApiClient {
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl;
+  }
+
+  listBookmarks(search, options = { limit: 100, offset: 0, path: "" }) {
+    const query = [`limit=${options.limit}`, `offset=${options.offset}`];
+    Object.keys(search).forEach((key) => {
+      const value = search[key];
+      if (value) {
+        query.push(`${key}=${encodeURIComponent(value)}`);
+      }
+    });
+    const queryString = query.join("&");
+    const url = `${this.baseUrl}bookmarks${options.path}/?${queryString}`;
+
+    return fetch(url)
+      .then((response) => response.json())
+      .then((data) => data.results);
+  }
+
+  getTags(options = { limit: 100, offset: 0 }) {
+    const url = `${this.baseUrl}tags/?limit=${options.limit}&offset=${options.offset}`;
+
+    return fetch(url)
+      .then((response) => response.json())
+      .then((data) => data.results);
+  }
+}
--- a/bookmarks/frontend/behaviors/bookmark-page.js
+++ b/bookmarks/frontend/behaviors/bookmark-page.js
@@ -0,0 +1,75 @@
+import { registerBehavior, swap } from "./index";
+
+class BookmarkPage {
+  constructor(element) {
+    this.element = element;
+    this.form = element.querySelector("form.bookmark-actions");
+    this.form.addEventListener("submit", this.onFormSubmit.bind(this));
+
+    this.bookmarkList = element.querySelector(".bookmark-list-container");
+    this.tagCloud = element.querySelector(".tag-cloud-container");
+  }
+
+  async onFormSubmit(event) {
+    event.preventDefault();
+
+    const url = this.form.action;
+    const formData = new FormData(this.form);
+    formData.append(event.submitter.name, event.submitter.value);
+
+    await fetch(url, {
+      method: "POST",
+      body: formData,
+      redirect: "manual", // ignore redirect
+    });
+    await this.refresh();
+  }
+
+  async refresh() {
+    const query = window.location.search;
+    const bookmarksUrl = this.element.getAttribute("bookmarks-url");
+    const tagsUrl = this.element.getAttribute("tags-url");
+    Promise.all([
+      fetch(`${bookmarksUrl}${query}`).then((response) => response.text()),
+      fetch(`${tagsUrl}${query}`).then((response) => response.text()),
+    ]).then(([bookmarkListHtml, tagCloudHtml]) => {
+      swap(this.bookmarkList, bookmarkListHtml);
+      swap(this.tagCloud, tagCloudHtml);
+
+      // Dispatch list updated event
+      const listElement = this.bookmarkList.querySelector(
+        "ul[data-bookmarks-total]",
+      );
+      const bookmarksTotal =
+        (listElement && listElement.dataset.bookmarksTotal) || 0;
+
+      this.bookmarkList.dispatchEvent(
+        new CustomEvent("bookmark-list-updated", {
+          bubbles: true,
+          detail: { bookmarksTotal },
+        }),
+      );
+    });
+  }
+}
+
+registerBehavior("ld-bookmark-page", BookmarkPage);
+
+class BookmarkItem {
+  constructor(element) {
+    this.element = element;
+
+    const notesToggle = element.querySelector(".toggle-notes");
+    if (notesToggle) {
+      notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
+    }
+  }
+
+  onToggleNotes(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.element.classList.toggle("show-notes");
+  }
+}
+
+registerBehavior("ld-bookmark-item", BookmarkItem);
--- a/bookmarks/frontend/behaviors/bulk-edit.js
+++ b/bookmarks/frontend/behaviors/bulk-edit.js
@@ -0,0 +1,141 @@
+import { registerBehavior } from "./index";
+
+class BulkEdit {
+  constructor(element) {
+    this.element = element;
+    this.active = false;
+    this.actionSelect = element.querySelector("select[name='bulk_action']");
+    this.tagAutoComplete = element.querySelector(".tag-autocomplete");
+    this.selectAcross = element.querySelector("label.select-across");
+
+    element.addEventListener(
+      "bulk-edit-toggle-active",
+      this.onToggleActive.bind(this),
+    );
+    element.addEventListener(
+      "bulk-edit-toggle-all",
+      this.onToggleAll.bind(this),
+    );
+    element.addEventListener(
+      "bulk-edit-toggle-bookmark",
+      this.onToggleBookmark.bind(this),
+    );
+    element.addEventListener(
+      "bookmark-list-updated",
+      this.onListUpdated.bind(this),
+    );
+
+    this.actionSelect.addEventListener(
+      "change",
+      this.onActionSelected.bind(this),
+    );
+  }
+
+  get allCheckbox() {
+    return this.element.querySelector("[ld-bulk-edit-checkbox][all] input");
+  }
+
+  get bookmarkCheckboxes() {
+    return [
+      ...this.element.querySelectorAll(
+        "[ld-bulk-edit-checkbox]:not([all]) input",
+      ),
+    ];
+  }
+
+  onToggleActive() {
+    this.active = !this.active;
+    if (this.active) {
+      this.element.classList.add("active", "activating");
+      setTimeout(() => {
+        this.element.classList.remove("activating");
+      }, 500);
+    } else {
+      this.element.classList.remove("active");
+    }
+  }
+
+  onToggleBookmark() {
+    const allChecked = this.bookmarkCheckboxes.every((checkbox) => {
+      return checkbox.checked;
+    });
+    this.allCheckbox.checked = allChecked;
+    this.updateSelectAcross(allChecked);
+  }
+
+  onToggleAll() {
+    const allChecked = this.allCheckbox.checked;
+    this.bookmarkCheckboxes.forEach((checkbox) => {
+      checkbox.checked = allChecked;
+    });
+    this.updateSelectAcross(allChecked);
+  }
+
+  onActionSelected() {
+    const action = this.actionSelect.value;
+
+    if (action === "bulk_tag" || action === "bulk_untag") {
+      this.tagAutoComplete.classList.remove("d-none");
+    } else {
+      this.tagAutoComplete.classList.add("d-none");
+    }
+  }
+
+  onListUpdated(event) {
+    // Reset checkbox states
+    this.reset();
+
+    // Update total number of bookmarks
+    const total = event.detail.bookmarksTotal;
+    const totalSpan = this.selectAcross.querySelector("span.total");
+    totalSpan.textContent = total;
+  }
+
+  updateSelectAcross(allChecked) {
+    if (allChecked) {
+      this.selectAcross.classList.remove("d-none");
+    } else {
+      this.selectAcross.classList.add("d-none");
+      this.selectAcross.querySelector("input").checked = false;
+    }
+  }
+
+  reset() {
+    this.allCheckbox.checked = false;
+    this.bookmarkCheckboxes.forEach((checkbox) => {
+      checkbox.checked = false;
+    });
+    this.updateSelectAcross(false);
+  }
+}
+
+class BulkEditActiveToggle {
+  constructor(element) {
+    this.element = element;
+    element.addEventListener("click", this.onClick.bind(this));
+  }
+
+  onClick() {
+    this.element.dispatchEvent(
+      new CustomEvent("bulk-edit-toggle-active", { bubbles: true }),
+    );
+  }
+}
+
+class BulkEditCheckbox {
+  constructor(element) {
+    this.element = element;
+    element.addEventListener("change", this.onChange.bind(this));
+  }
+
+  onChange() {
+    const type = this.element.hasAttribute("all") ? "all" : "bookmark";
+    this.element.dispatchEvent(
+      new CustomEvent(`bulk-edit-toggle-${type}`, { bubbles: true }),
+    );
+  }
+}
+
+registerBehavior("ld-bulk-edit", BulkEdit);
+registerBehavior("ld-bulk-edit-active-toggle", BulkEditActiveToggle);
+registerBehavior("ld-bulk-edit-checkbox", BulkEditCheckbox);
--- a/bookmarks/frontend/behaviors/confirm-button.js
+++ b/bookmarks/frontend/behaviors/confirm-button.js
@@ -0,0 +1,70 @@
+import { registerBehavior } from "./index";
+
+class ConfirmButtonBehavior {
+  constructor(element) {
+    const button = element;
+    button.dataset.type = button.type;
+    button.dataset.name = button.name;
+    button.dataset.value = button.value;
+    button.removeAttribute("type");
+    button.removeAttribute("name");
+    button.removeAttribute("value");
+    button.addEventListener("click", this.onClick.bind(this));
+    this.button = button;
+  }
+
+  onClick(event) {
+    event.preventDefault();
+
+    const container = document.createElement("span");
+    container.className = "confirmation";
+
+    const icon = this.button.getAttribute("confirm-icon");
+    if (icon) {
+      const iconElement = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+      );
+      iconElement.style.width = "16px";
+      iconElement.style.height = "16px";
+      iconElement.innerHTML = `<use xlink:href="#${icon}"></use>`;
+      container.append(iconElement);
+    }
+
+    const question = this.button.getAttribute("confirm-question");
+    if (question) {
+      const questionElement = document.createElement("span");
+      questionElement.innerText = question;
+      container.append(question);
+    }
+
+    const cancelButton = document.createElement(this.button.nodeName);
+    cancelButton.type = "button";
+    cancelButton.innerText = question ? "No" : "Cancel";
+    cancelButton.className = "btn btn-link btn-sm mr-1";
+    cancelButton.addEventListener("click", this.reset.bind(this));
+
+    const confirmButton = document.createElement(this.button.nodeName);
+    confirmButton.type = this.button.dataset.type;
+    confirmButton.name = this.button.dataset.name;
+    confirmButton.value = this.button.dataset.value;
+    confirmButton.innerText = question ? "Yes" : "Confirm";
+    confirmButton.className = "btn btn-link btn-sm";
+    confirmButton.addEventListener("click", this.reset.bind(this));
+
+    container.append(cancelButton, confirmButton);
+    this.container = container;
+
+    this.button.before(container);
+    this.button.classList.add("d-none");
+  }
+
+  reset() {
+    setTimeout(() => {
+      this.container.remove();
+      this.button.classList.remove("d-none");
+    });
+  }
+}
+
+registerBehavior("ld-confirm-button", ConfirmButtonBehavior);
--- a/bookmarks/frontend/behaviors/dropdown.js
+++ b/bookmarks/frontend/behaviors/dropdown.js
@@ -0,0 +1,36 @@
+import { registerBehavior } from "./index";
+
+class DropdownBehavior {
+  constructor(element) {
+    this.element = element;
+    this.opened = false;
+    this.onOutsideClick = this.onOutsideClick.bind(this);
+
+    const toggle = element.querySelector(".dropdown-toggle");
+    toggle.addEventListener("click", () => {
+      if (this.opened) {
+        this.close();
+      } else {
+        this.open();
+      }
+    });
+  }
+
+  open() {
+    this.element.classList.add("active");
+    document.addEventListener("click", this.onOutsideClick);
+  }
+
+  close() {
+    this.element.classList.remove("active");
+    document.removeEventListener("click", this.onOutsideClick);
+  }
+
+  onOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.close();
+    }
+  }
+}
+
+registerBehavior("ld-dropdown", DropdownBehavior);
--- a/bookmarks/frontend/behaviors/global-shortcuts.js
+++ b/bookmarks/frontend/behaviors/global-shortcuts.js
@@ -0,0 +1,73 @@
+import { registerBehavior } from "./index";
+
+class GlobalShortcuts {
+  constructor() {
+    document.addEventListener("keydown", this.onKeyDown.bind(this));
+  }
+
+  onKeyDown(event) {
+    // Skip if event occurred within an input element
+    const targetNodeName = event.target.nodeName;
+    const isInputTarget =
+      targetNodeName === "INPUT" ||
+      targetNodeName === "SELECT" ||
+      targetNodeName === "TEXTAREA";
+
+    if (isInputTarget) {
+      return;
+    }
+
+    // Handle shortcuts for navigating bookmarks with arrow keys
+    const isArrowUp = event.key === "ArrowUp";
+    const isArrowDown = event.key === "ArrowDown";
+    if (isArrowUp || isArrowDown) {
+      event.preventDefault();
+
+      // Detect current bookmark list item
+      const path = event.composedPath();
+      const currentItem = path.find(
+        (item) => item.hasAttribute && item.hasAttribute("ld-bookmark-item"),
+      );
+
+      // Find next item
+      let nextItem;
+      if (currentItem) {
+        nextItem = isArrowUp
+          ? currentItem.previousElementSibling
+          : currentItem.nextElementSibling;
+      } else {
+        // Select first item
+        nextItem = document.querySelector("[ld-bookmark-item]");
+      }
+      // Focus first link
+      if (nextItem) {
+        nextItem.querySelector("a").focus();
+      }
+    }
+
+    // Handle shortcut for toggling all notes
+    if (event.key === "e") {
+      const list = document.querySelector(".bookmark-list");
+      if (list) {
+        list.classList.toggle("show-notes");
+      }
+    }
+
+    // Handle shortcut for focusing search input
+    if (event.key === "s") {
+      const searchInput = document.querySelector('input[type="search"]');
+
+      if (searchInput) {
+        searchInput.focus();
+        event.preventDefault();
+      }
+    }
+
+    // Handle shortcut for adding new bookmark
+    if (event.key === "n") {
+      window.location.assign("/bookmarks/new");
+    }
+  }
+}
+
+registerBehavior("ld-global-shortcuts", GlobalShortcuts);
--- a/bookmarks/frontend/behaviors/index.js
+++ b/bookmarks/frontend/behaviors/index.js
@@ -0,0 +1,36 @@
+const behaviorRegistry = {};
+
+export function registerBehavior(name, behavior) {
+  behaviorRegistry[name] = behavior;
+  applyBehaviors(document, [name]);
+}
+
+export function applyBehaviors(container, behaviorNames = null) {
+  if (!behaviorNames) {
+    behaviorNames = Object.keys(behaviorRegistry);
+  }
+
+  behaviorNames.forEach((behaviorName) => {
+    const behavior = behaviorRegistry[behaviorName];
+    const elements = container.querySelectorAll(`[${behaviorName}]`);
+
+    elements.forEach((element) => {
+      element.__behaviors = element.__behaviors || [];
+      const hasBehavior = element.__behaviors.some(
+        (b) => b instanceof behavior,
+      );
+
+      if (hasBehavior) {
+        return;
+      }
+
+      const behaviorInstance = new behavior(element);
+      element.__behaviors.push(behaviorInstance);
+    });
+  });
+}
+
+export function swap(element, html) {
+  element.innerHTML = html;
+  applyBehaviors(element);
+}
--- a/bookmarks/frontend/behaviors/modal.js
+++ b/bookmarks/frontend/behaviors/modal.js
@@ -0,0 +1,65 @@
+import { registerBehavior } from "./index";
+
+class ModalBehavior {
+  constructor(element) {
+    const toggle = element;
+    toggle.addEventListener("click", this.onToggleClick.bind(this));
+    this.toggle = toggle;
+  }
+
+  onToggleClick() {
+    const contentSelector = this.toggle.getAttribute("modal-content");
+    const content = document.querySelector(contentSelector);
+    if (!content) {
+      return;
+    }
+
+    // Create modal
+    const modal = document.createElement("div");
+    modal.classList.add("modal", "active");
+    modal.innerHTML = `
+      <div class="modal-overlay" aria-label="Close"></div>
+      <div class="modal-container">
+        <div class="modal-header d-flex justify-between align-center">
+          <div class="modal-title h5">Tags</div>
+          <button class="btn btn-link 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"></div>
+        </div>
+      </div>
+    `;
+
+    // Teleport content element
+    const contentOwner = content.parentElement;
+    const contentContainer = modal.querySelector(".content");
+    contentContainer.append(content);
+    this.content = content;
+    this.contentOwner = contentOwner;
+
+    // Register close handlers
+    const modalOverlay = modal.querySelector(".modal-overlay");
+    const closeButton = modal.querySelector(".btn.close");
+    modalOverlay.addEventListener("click", this.onClose.bind(this));
+    closeButton.addEventListener("click", this.onClose.bind(this));
+
+    document.body.append(modal);
+    this.modal = modal;
+  }
+
+  onClose() {
+    // Teleport content back
+    this.contentOwner.append(this.content);
+
+    // Remove modal
+    this.modal.remove();
+  }
+}
+
+registerBehavior("ld-modal", ModalBehavior);
--- a/bookmarks/frontend/behaviors/tag-autocomplete.js
+++ b/bookmarks/frontend/behaviors/tag-autocomplete.js
@@ -0,0 +1,27 @@
+import { registerBehavior } from "./index";
+import TagAutoCompleteComponent from "../components/TagAutocomplete.svelte";
+import { ApiClient } from "../api";
+
+class TagAutocomplete {
+  constructor(element) {
+    const wrapper = document.createElement("div");
+    const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
+    const apiClient = new ApiClient(apiBaseUrl);
+
+    new TagAutoCompleteComponent({
+      target: wrapper,
+      props: {
+        id: element.id,
+        name: element.name,
+        value: element.value,
+        placeholder: element.getAttribute("placeholder") || "",
+        apiClient: apiClient,
+        variant: element.getAttribute("variant"),
+      },
+    });
+
+    element.replaceWith(wrapper.firstElementChild);
+  }
+}
+
+registerBehavior("ld-tag-autocomplete", TagAutocomplete);
--- a/bookmarks/frontend/components/SearchAutoComplete.svelte
+++ b/bookmarks/frontend/components/SearchAutoComplete.svelte
@@ -0,0 +1,261 @@
+<script>
+  import {SearchHistory} from "./SearchHistory";
+  import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "../util";
+
+  const searchHistory = new SearchHistory()
+
+  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';
+
+  let isFocus = false;
+  let isOpen = false;
+  let suggestions = []
+  let selectedIndex = undefined;
+  let input = null;
+
+  // Track current search query after loading the page
+  searchHistory.pushCurrent()
+  updateSuggestions()
+
+  function handleFocus() {
+    isFocus = true;
+  }
+
+  function handleBlur() {
+    isFocus = false;
+    close();
+  }
+
+  function handleInput(e) {
+    value = e.target.value
+    debouncedLoadSuggestions()
+  }
+
+  function handleKeyDown(e) {
+    // Enter
+    if (isOpen && selectedIndex !== undefined && (e.keyCode === 13 || e.keyCode === 9)) {
+      const suggestion = suggestions.total[selectedIndex];
+      if (suggestion) completeSuggestion(suggestion);
+      e.preventDefault();
+    }
+    // Escape
+    if (e.keyCode === 27) {
+      close();
+      e.preventDefault();
+    }
+    // Up arrow
+    if (e.keyCode === 38) {
+      updateSelection(-1);
+      e.preventDefault();
+    }
+    // Down arrow
+    if (e.keyCode === 40) {
+      if (!isOpen) {
+        loadSuggestions()
+      } else {
+        updateSelection(1);
+      }
+      e.preventDefault();
+    }
+  }
+
+  function open() {
+    isOpen = true;
+  }
+
+  function close() {
+    isOpen = false;
+    updateSuggestions()
+    selectedIndex = undefined
+  }
+
+  function hasSuggestions() {
+    return suggestions.total.length > 0
+  }
+
+  async function loadSuggestions() {
+
+    let suggestionIndex = 0
+
+    function nextIndex() {
+      return suggestionIndex++
+    }
+
+    // Tag suggestions
+    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)
+        .slice(0, 5)
+        .map(tagName => ({
+          type: 'tag',
+          index: nextIndex(),
+          label: `#${tagName}`,
+          tagName: tagName
+        }))
+    }
+
+    // Recent search suggestions
+    const recentSearches = searchHistory.getRecentSearches(value, 5).map(value => ({
+      type: 'search',
+      index: nextIndex(),
+      label: value,
+      value
+    }))
+
+    // Bookmark suggestions
+    let bookmarks = []
+
+    if (value && value.length >= 3) {
+      const path = mode ? `/${mode}` : ''
+      const suggestionSearch = {
+        ...search,
+        q: value
+      }
+      const fetchedBookmarks = await apiClient.listBookmarks(suggestionSearch, {limit: 5, offset: 0, path})
+      bookmarks = fetchedBookmarks.map(bookmark => {
+        const fullLabel = bookmark.title || bookmark.website_title || bookmark.url
+        const label = clampText(fullLabel, 60)
+        return {
+          type: 'bookmark',
+          index: nextIndex(),
+          label,
+          bookmark
+        }
+      })
+    }
+
+    updateSuggestions(recentSearches, bookmarks, tagSuggestions)
+
+    if (hasSuggestions()) {
+      open()
+    } else {
+      close()
+    }
+  }
+
+  const debouncedLoadSuggestions = debounce(loadSuggestions)
+
+  function updateSuggestions(recentSearches, bookmarks, tagSuggestions) {
+    recentSearches = recentSearches || []
+    bookmarks = bookmarks || []
+    tagSuggestions = tagSuggestions || []
+    suggestions = {
+      recentSearches,
+      bookmarks,
+      tags: tagSuggestions,
+      total: [
+        ...tagSuggestions,
+        ...recentSearches,
+        ...bookmarks,
+      ]
+    }
+  }
+
+  function completeSuggestion(suggestion) {
+    if (suggestion.type === 'search') {
+      value = suggestion.value
+      close()
+    }
+    if (suggestion.type === 'bookmark') {
+      window.open(suggestion.bookmark.url, linkTarget)
+      close()
+    }
+    if (suggestion.type === 'tag') {
+      const bounds = getCurrentWordBounds(input);
+      const inputValue = input.value;
+      input.value = inputValue.substring(0, bounds.start) + `#${suggestion.tagName} ` + inputValue.substring(bounds.end);
+      close()
+    }
+  }
+
+  function updateSelection(dir) {
+
+    const length = suggestions.total.length;
+
+    if (length === 0) return
+
+    if (selectedIndex === undefined) {
+      selectedIndex = dir > 0 ? 0 : Math.max(length - 1, 0)
+      return
+    }
+
+    let newIndex = selectedIndex + dir;
+
+    if (newIndex < 0) newIndex = Math.max(length - 1, 0);
+    if (newIndex >= length) newIndex = 0;
+
+    selectedIndex = newIndex;
+  }
+</script>
+
+<div class="form-autocomplete">
+  <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
+    <input type="search" class="form-input" name="{name}" placeholder="{placeholder}" autocomplete="off" value="{value}"
+           bind:this={input}
+           on:input={handleInput} on:keydown={handleKeyDown} on:focus={handleFocus} on:blur={handleBlur}>
+  </div>
+
+  <ul class="menu" class:open={isOpen}>
+    {#if suggestions.tags.length > 0}
+      <li class="menu-item group-item">Tags</li>
+    {/if}
+    {#each suggestions.tags as suggestion}
+      <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
+        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+          {suggestion.label}
+        </a>
+      </li>
+    {/each}
+
+    {#if suggestions.recentSearches.length > 0}
+      <li class="menu-item group-item">Recent Searches</li>
+    {/if}
+    {#each suggestions.recentSearches as suggestion}
+      <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
+        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+          {suggestion.label}
+        </a>
+      </li>
+    {/each}
+
+    {#if suggestions.bookmarks.length > 0}
+      <li class="menu-item group-item">Bookmarks</li>
+    {/if}
+    {#each suggestions.bookmarks as suggestion}
+      <li class="menu-item" class:selected={selectedIndex === suggestion.index}>
+        <a href="#" on:mousedown|preventDefault={() => completeSuggestion(suggestion)}>
+          {suggestion.label}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+    .menu {
+        display: none;
+        max-height: 400px;
+        overflow: auto;
+    }
+
+    .menu.open {
+        display: block;
+    }
+
+    .form-autocomplete-input {
+        padding: 0;
+    }
+
+    .form-autocomplete-input.is-focused {
+        z-index: 2;
+    }
+
+</style>
--- a/bookmarks/frontend/components/SearchHistory.js
+++ b/bookmarks/frontend/components/SearchHistory.js
@@ -0,0 +1,52 @@
+const SEARCH_HISTORY_KEY = "searchHistory";
+const MAX_ENTRIES = 30;
+
+export class SearchHistory {
+  getHistory() {
+    const historyJson = localStorage.getItem(SEARCH_HISTORY_KEY);
+    return historyJson
+      ? JSON.parse(historyJson)
+      : {
+          recent: [],
+        };
+  }
+
+  pushCurrent() {
+    // Skip if browser is not compatible
+    if (!window.URLSearchParams) return;
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchParam = urlParams.get("q");
+
+    if (!searchParam) return;
+
+    this.push(searchParam);
+  }
+
+  push(search) {
+    const history = this.getHistory();
+
+    history.recent.unshift(search);
+
+    // Remove duplicates and clamp to max entries
+    history.recent = history.recent.reduce((acc, cur) => {
+      if (acc.length >= MAX_ENTRIES) return acc;
+      if (acc.indexOf(cur) >= 0) return acc;
+      acc.push(cur);
+      return acc;
+    }, []);
+
+    const newHistoryJson = JSON.stringify(history);
+    localStorage.setItem(SEARCH_HISTORY_KEY, newHistoryJson);
+  }
+
+  getRecentSearches(query, max) {
+    const history = this.getHistory();
+
+    return history.recent
+      .filter(
+        (search) =>
+          !query || search.toLowerCase().indexOf(query.toLowerCase()) >= 0,
+      )
+      .slice(0, max);
+  }
+}
--- a/bookmarks/frontend/components/TagAutocomplete.svelte
+++ b/bookmarks/frontend/components/TagAutocomplete.svelte
@@ -0,0 +1,168 @@
+<script>
+  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;
+  let suggestionList = null;
+
+  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: 1000, 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;
+  }
+
+  function handleBlur() {
+    isFocus = false;
+    close();
+  }
+
+  function handleInput(e) {
+    input = e.target;
+
+    const word = getCurrentWord(input);
+
+    suggestions = word
+      ? tags.filter(tag => tag.name.toLowerCase().indexOf(word.toLowerCase()) === 0)
+      : [];
+
+    if (word && suggestions.length > 0) {
+      open();
+    } else {
+      close();
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (isOpen && (e.keyCode === 13 || e.keyCode === 9)) {
+      const suggestion = suggestions[selectedIndex];
+      complete(suggestion);
+      e.preventDefault();
+    }
+    if (e.keyCode === 27) {
+      close();
+      e.preventDefault();
+    }
+    if (e.keyCode === 38) {
+      updateSelection(-1);
+      e.preventDefault();
+    }
+    if (e.keyCode === 40) {
+      updateSelection(1);
+      e.preventDefault();
+    }
+  }
+
+  function open() {
+    isOpen = true;
+    selectedIndex = 0;
+  }
+
+  function close() {
+    isOpen = false;
+    suggestions = [];
+    selectedIndex = 0;
+  }
+
+  function complete(suggestion) {
+    const bounds = getCurrentWordBounds(input);
+    const value = input.value;
+    input.value = value.substring(0, bounds.start) + suggestion.name + ' ' + value.substring(bounds.end);
+
+    close();
+  }
+
+  function updateSelection(dir) {
+
+    const length = suggestions.length;
+    let newIndex = selectedIndex + dir;
+
+    if (newIndex < 0) newIndex = Math.max(length - 1, 0);
+    if (newIndex >= length) newIndex = 0;
+
+    selectedIndex = newIndex;
+
+    // Scroll to selected list item
+    setTimeout(() => {
+      if (suggestionList) {
+        const selectedListItem = suggestionList.querySelector('li.selected');
+        if (selectedListItem) {
+          selectedListItem.scrollIntoView({block: 'center'});
+        }
+      }
+    }, 0);
+  }
+</script>
+
+<div class="form-autocomplete" class:small={variant === 'small'}>
+  <!-- autocomplete input container -->
+  <div class="form-autocomplete-input form-input" class:is-focused={isFocus}>
+    <!-- autocomplete real input box -->
+    <input id="{id}" name="{name}" value="{value ||''}" placeholder="{placeholder || ' '}"
+           class="form-input" type="text" autocomplete="off" autocapitalize="off"
+           on:input={handleInput} on:keydown={handleKeyDown}
+           on:focus={handleFocus} on:blur={handleBlur}>
+  </div>
+
+  <!-- autocomplete suggestion list -->
+  <ul class="menu" class:open={isOpen && suggestions.length > 0}
+      bind:this={suggestionList}>
+    <!-- menu list items -->
+    {#each suggestions as tag,i}
+      <li class="menu-item" class:selected={selectedIndex === i}>
+        <a href="#" on:mousedown|preventDefault={() => complete(tag)}>
+          {tag.name}
+        </a>
+      </li>
+    {/each}
+  </ul>
+</div>
+
+<style>
+    .menu {
+        display: none;
+        max-height: 200px;
+        overflow: auto;
+    }
+
+    .menu.open {
+        display: block;
+    }
+
+    .form-autocomplete.small .form-autocomplete-input {
+        height: 1.4rem;
+        min-height: 1.4rem;
+        padding: 0.05rem 0.3rem;
+    }
+
+    .form-autocomplete.small .form-autocomplete-input input {
+        margin: 0;
+        padding: 0;
+        font-size: 0.7rem;
+    }
+
+    .form-autocomplete.small .menu .menu-item {
+        font-size: 0.7rem;
+    }
+</style>
--- a/bookmarks/frontend/index.js
+++ b/bookmarks/frontend/index.js
@@ -0,0 +1,16 @@
+import TagAutoComplete from "./components/TagAutocomplete.svelte";
+import SearchAutoComplete from "./components/SearchAutoComplete.svelte";
+import { ApiClient } from "./api";
+import "./behaviors/bookmark-page";
+import "./behaviors/bulk-edit";
+import "./behaviors/confirm-button";
+import "./behaviors/dropdown";
+import "./behaviors/modal";
+import "./behaviors/global-shortcuts";
+import "./behaviors/tag-autocomplete";
+
+export default {
+  ApiClient,
+  TagAutoComplete,
+  SearchAutoComplete,
+};
--- a/bookmarks/frontend/util.js
+++ b/bookmarks/frontend/util.js
@@ -0,0 +1,37 @@
+export function debounce(callback, delay = 250) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      callback(...args);
+    }, delay);
+  };
+}
+
+export function clampText(text, maxChars = 30) {
+  if (!text || text.length <= 30) return text;
+
+  return text.substr(0, maxChars) + "...";
+}
+
+export function getCurrentWordBounds(input) {
+  const text = input.value;
+  const end = input.selectionStart;
+  let start = end;
+
+  let currentChar = text.charAt(start - 1);
+
+  while (currentChar && currentChar !== " " && start > 0) {
+    start--;
+    currentChar = text.charAt(start - 1);
+  }
+
+  return { start, end };
+}
+
+export function getCurrentWord(input) {
+  const bounds = getCurrentWordBounds(input);
+
+  return input.value.substring(bounds.start, bounds.end);
+}
--- a/bookmarks/management/commands/backup.py
+++ b/bookmarks/management/commands/backup.py
@@ -0,0 +1,26 @@
+import sqlite3
+import os
+
+from django.core.management.base import BaseCommand
+
+
+class Command(BaseCommand):
+    help = "Creates a backup of the linkding database"
+
+    def add_arguments(self, parser):
+        parser.add_argument('destination', type=str, help='Backup file destination')
+
+    def handle(self, *args, **options):
+        destination = options['destination']
+
+        def progress(status, remaining, total):
+            self.stdout.write(f'Copied {total-remaining} of {total} pages...')
+
+        source_db = sqlite3.connect(os.path.join('data', 'db.sqlite3'))
+        backup_db = sqlite3.connect(destination)
+        with backup_db:
+            source_db.backup(backup_db, pages=50, progress=progress)
+        backup_db.close()
+        source_db.close()
+
+        self.stdout.write(self.style.SUCCESS(f'Backup created at {destination}'))
--- a/bookmarks/management/commands/enable_wal.py
+++ b/bookmarks/management/commands/enable_wal.py
@@ -0,0 +1,24 @@
+import logging
+
+from django.conf import settings
+from django.core.management.base import BaseCommand
+from django.db import connections
+
+logger = logging.getLogger(__name__)
+
+
+class Command(BaseCommand):
+    help = "Enable WAL journal mode when using an SQLite database"
+
+    def handle(self, *args, **options):
+        if not settings.USE_SQLITE:
+            return
+
+        connection = connections['default']
+        with connection.cursor() as cursor:
+            cursor.execute("PRAGMA journal_mode")
+            current_mode = cursor.fetchone()[0]
+            logger.info(f'Current journal mode: {current_mode}')
+            if current_mode != 'wal':
+                cursor.execute("PRAGMA journal_mode=wal;")
+                logger.info('Switched to WAL journal mode')
--- a/bookmarks/middlewares.py
+++ b/bookmarks/middlewares.py
@@ -1,6 +1,24 @@
 from django.conf import settings
 from django.contrib.auth.middleware import RemoteUserMiddleware

+from bookmarks.models import UserProfile
+

 class CustomRemoteUserMiddleware(RemoteUserMiddleware):
    header = settings.LD_AUTH_PROXY_USERNAME_HEADER
+
+
+class UserProfileMiddleware:
+    def __init__(self, get_response):
+        self.get_response = get_response
+
+    def __call__(self, request):
+        if request.user.is_authenticated:
+            request.user_profile = request.user.profile
+        else:
+            request.user_profile = UserProfile()
+            request.user_profile.enable_favicons = True
+
+        response = self.get_response(request)
+
+        return response
--- a/bookmarks/migrations/0020_userprofile_tag_search.py
+++ b/bookmarks/migrations/0020_userprofile_tag_search.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-04-10 01:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0019_userprofile_enable_favicons'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='tag_search',
+            field=models.CharField(choices=[('strict', 'Strict'), ('lax', 'Lax')], default='strict', max_length=10),
+        ),
+    ]
--- a/bookmarks/migrations/0021_userprofile_display_url.py
+++ b/bookmarks/migrations/0021_userprofile_display_url.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-05-18 07:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0020_userprofile_tag_search'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='display_url',
+            field=models.BooleanField(default=False),
+        ),
+    ]
--- a/bookmarks/migrations/0022_bookmark_notes.py
+++ b/bookmarks/migrations/0022_bookmark_notes.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.7 on 2023-05-19 10:52
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0021_userprofile_display_url'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bookmark',
+            name='notes',
+            field=models.TextField(blank=True),
+        ),
+    ]
--- a/bookmarks/migrations/0023_userprofile_permanent_notes.py
+++ b/bookmarks/migrations/0023_userprofile_permanent_notes.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.9 on 2023-05-20 08:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0022_bookmark_notes'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='permanent_notes',
+            field=models.BooleanField(default=False),
+        ),
+    ]
--- a/bookmarks/migrations/0024_userprofile_enable_public_sharing.py
+++ b/bookmarks/migrations/0024_userprofile_enable_public_sharing.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.9 on 2023-08-14 07:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0023_userprofile_permanent_notes'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='enable_public_sharing',
+            field=models.BooleanField(default=False),
+        ),
+    ]
--- a/bookmarks/migrations/0025_userprofile_search_preferences.py
+++ b/bookmarks/migrations/0025_userprofile_search_preferences.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.9 on 2023-09-30 10:44
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0024_userprofile_enable_public_sharing'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='search_preferences',
+            field=models.JSONField(default=dict),
+        ),
+    ]
--- a/bookmarks/models.py
+++ b/bookmarks/models.py
@@ -5,10 +5,10 @@ from typing import List
 from django import forms
 from django.contrib.auth import get_user_model
 from django.contrib.auth.models import User
-from django.core.handlers.wsgi import WSGIRequest
 from django.db import models
 from django.db.models.signals import post_save
 from django.dispatch import receiver
+from django.http import QueryDict

 from bookmarks.utils import unique
 from bookmarks.validators import BookmarkURLValidator
@@ -50,6 +50,7 @@ class Bookmark(models.Model):
    url = models.CharField(max_length=2048, validators=[BookmarkURLValidator()])
    title = models.CharField(max_length=512, blank=True)
    description = models.TextField(blank=True)
+    notes = models.TextField(blank=True)
    website_title = models.CharField(max_length=512, blank=True, null=True)
    website_description = models.TextField(blank=True, null=True)
    web_archive_snapshot_url = models.CharField(max_length=2048, blank=True)
@@ -110,6 +111,7 @@ class BookmarkForm(forms.ModelForm):
            'tag_string',
            'title',
            'description',
+            'notes',
            'website_title',
            'website_description',
            'unread',
@@ -117,11 +119,135 @@ class BookmarkForm(forms.ModelForm):
            'auto_close',
        ]

+    @property
+    def has_notes(self):
+        return self.instance and self.instance.notes

-class BookmarkFilters:
-    def __init__(self, request: WSGIRequest):
-        self.query = request.GET.get('q') or ''
-        self.user = request.GET.get('user') or ''
+
+class BookmarkSearch:
+    SORT_ADDED_ASC = 'added_asc'
+    SORT_ADDED_DESC = 'added_desc'
+    SORT_TITLE_ASC = 'title_asc'
+    SORT_TITLE_DESC = 'title_desc'
+
+    FILTER_SHARED_OFF = 'off'
+    FILTER_SHARED_SHARED = 'yes'
+    FILTER_SHARED_UNSHARED = 'no'
+
+    FILTER_UNREAD_OFF = 'off'
+    FILTER_UNREAD_YES = 'yes'
+    FILTER_UNREAD_NO = 'no'
+
+    params = ['q', 'user', 'sort', 'shared', 'unread']
+    preferences = ['sort', 'shared', 'unread']
+    defaults = {
+        'q': '',
+        'user': '',
+        'sort': SORT_ADDED_DESC,
+        'shared': FILTER_SHARED_OFF,
+        'unread': FILTER_UNREAD_OFF,
+    }
+
+    def __init__(self,
+                 q: str = None,
+                 user: str = None,
+                 sort: str = None,
+                 shared: str = None,
+                 unread: str = None,
+                 preferences: dict = None):
+        if not preferences:
+            preferences = {}
+        self.defaults = {**BookmarkSearch.defaults, **preferences}
+
+        self.q = q or self.defaults['q']
+        self.user = user or self.defaults['user']
+        self.sort = sort or self.defaults['sort']
+        self.shared = shared or self.defaults['shared']
+        self.unread = unread or self.defaults['unread']
+
+    def is_modified(self, param):
+        value = self.__dict__[param]
+        return value != self.defaults[param]
+
+    @property
+    def modified_params(self):
+        return [field for field in self.params if self.is_modified(field)]
+
+    @property
+    def modified_preferences(self):
+        return [preference for preference in self.preferences if self.is_modified(preference)]
+
+    @property
+    def has_modifications(self):
+        return len(self.modified_params) > 0
+
+    @property
+    def has_modified_preferences(self):
+        return len(self.modified_preferences) > 0
+
+    @property
+    def query_params(self):
+        return {param: self.__dict__[param] for param in self.modified_params}
+
+    @property
+    def preferences_dict(self):
+        return {preference: self.__dict__[preference] for preference in self.preferences}
+
+    @staticmethod
+    def from_request(query_dict: QueryDict, preferences: dict = None):
+        initial_values = {}
+        for param in BookmarkSearch.params:
+            value = query_dict.get(param)
+            if value:
+                initial_values[param] = value
+
+        return BookmarkSearch(**initial_values, preferences=preferences)
+
+
+class BookmarkSearchForm(forms.Form):
+    SORT_CHOICES = [
+        (BookmarkSearch.SORT_ADDED_ASC, 'Added ↑'),
+        (BookmarkSearch.SORT_ADDED_DESC, 'Added ↓'),
+        (BookmarkSearch.SORT_TITLE_ASC, 'Title ↑'),
+        (BookmarkSearch.SORT_TITLE_DESC, 'Title ↓'),
+    ]
+    FILTER_SHARED_CHOICES = [
+        (BookmarkSearch.FILTER_SHARED_OFF, 'Off'),
+        (BookmarkSearch.FILTER_SHARED_SHARED, 'Shared'),
+        (BookmarkSearch.FILTER_SHARED_UNSHARED, 'Unshared'),
+    ]
+    FILTER_UNREAD_CHOICES = [
+        (BookmarkSearch.FILTER_UNREAD_OFF, 'Off'),
+        (BookmarkSearch.FILTER_UNREAD_YES, 'Unread'),
+        (BookmarkSearch.FILTER_UNREAD_NO, 'Read'),
+    ]
+
+    q = forms.CharField()
+    user = forms.ChoiceField()
+    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)
+
+    def __init__(self, search: BookmarkSearch, editable_fields: List[str] = None, users: List[User] = None):
+        super().__init__()
+        editable_fields = editable_fields or []
+        self.editable_fields = editable_fields
+
+        # set choices for user field if users are provided
+        if users:
+            user_choices = [(user.username, user.username) for user in users]
+            user_choices.insert(0, ('', 'Everyone'))
+            self.fields['user'].choices = user_choices
+
+        for param in search.params:
+            # set initial values for modified params
+            self.fields[param].initial = search.__dict__[param]
+
+            # Mark non-editable modified fields as hidden. That way, templates
+            # rendering a form can just loop over hidden_fields to ensure that
+            # all necessary search options are kept when submitting the form.
+            if search.is_modified(param) and param not in editable_fields:
+                self.fields[param].widget = forms.HiddenInput()


 class UserProfile(models.Model):
@@ -153,6 +279,12 @@ class UserProfile(models.Model):
        (WEB_ARCHIVE_INTEGRATION_DISABLED, 'Disabled'),
        (WEB_ARCHIVE_INTEGRATION_ENABLED, 'Enabled'),
    ]
+    TAG_SEARCH_STRICT = 'strict'
+    TAG_SEARCH_LAX = 'lax'
+    TAG_SEARCH_CHOICES = [
+        (TAG_SEARCH_STRICT, 'Strict'),
+        (TAG_SEARCH_LAX, 'Lax'),
+    ]
    user = models.OneToOneField(get_user_model(), related_name='profile', on_delete=models.CASCADE)
    theme = models.CharField(max_length=10, choices=THEME_CHOICES, blank=False, default=THEME_AUTO)
    bookmark_date_display = models.CharField(max_length=10, choices=BOOKMARK_DATE_DISPLAY_CHOICES, blank=False,
@@ -161,14 +293,21 @@ class UserProfile(models.Model):
                                            default=BOOKMARK_LINK_TARGET_BLANK)
    web_archive_integration = models.CharField(max_length=10, choices=WEB_ARCHIVE_INTEGRATION_CHOICES, blank=False,
                                               default=WEB_ARCHIVE_INTEGRATION_DISABLED)
+    tag_search = models.CharField(max_length=10, choices=TAG_SEARCH_CHOICES, blank=False,
+                                  default=TAG_SEARCH_STRICT)
    enable_sharing = models.BooleanField(default=False, null=False)
+    enable_public_sharing = models.BooleanField(default=False, null=False)
    enable_favicons = models.BooleanField(default=False, null=False)
+    display_url = models.BooleanField(default=False, null=False)
+    permanent_notes = models.BooleanField(default=False, null=False)
+    search_preferences = models.JSONField(default=dict, null=False)


 class UserProfileForm(forms.ModelForm):
    class Meta:
        model = UserProfile
-        fields = ['theme', 'bookmark_date_display', 'bookmark_link_target', 'web_archive_integration', 'enable_sharing', 'enable_favicons']
+        fields = ['theme', 'bookmark_date_display', 'bookmark_link_target', 'web_archive_integration', 'tag_search',
+                  'enable_sharing', 'enable_public_sharing', 'enable_favicons', 'display_url', 'permanent_notes']


@receiver(post_save, sender=get_user_model())
--- a/bookmarks/queries.py
+++ b/bookmarks/queries.py
@@ -1,29 +1,35 @@
 from typing import Optional

+from django.conf import settings
 from django.contrib.auth.models import User
-from django.db.models import Q, QuerySet
+from django.db.models import Q, QuerySet, Exists, OuterRef, Case, When, CharField
+from django.db.models.expressions import RawSQL
+from django.db.models.functions import Lower

-from bookmarks.models import Bookmark, Tag
+from bookmarks.models import Bookmark, BookmarkSearch, Tag, UserProfile
 from bookmarks.utils import unique


-def query_bookmarks(user: User, query_string: str) -> QuerySet:
-    return _base_bookmarks_query(user, query_string) \
+def query_bookmarks(user: User, profile: UserProfile, search: BookmarkSearch) -> QuerySet:
+    return _base_bookmarks_query(user, profile, search) \
        .filter(is_archived=False)


-def query_archived_bookmarks(user: User, query_string: str) -> QuerySet:
-    return _base_bookmarks_query(user, query_string) \
+def query_archived_bookmarks(user: User, profile: UserProfile, search: BookmarkSearch) -> QuerySet:
+    return _base_bookmarks_query(user, profile, search) \
        .filter(is_archived=True)


-def query_shared_bookmarks(user: Optional[User], query_string: str) -> QuerySet:
-    return _base_bookmarks_query(user, query_string) \
-        .filter(shared=True) \
-        .filter(owner__profile__enable_sharing=True)
+def query_shared_bookmarks(user: Optional[User], profile: UserProfile, search: BookmarkSearch,
+                           public_only: bool) -> QuerySet:
+    conditions = Q(shared=True) & Q(owner__profile__enable_sharing=True)
+    if public_only:
+        conditions = conditions & Q(owner__profile__enable_public_sharing=True)
+
+    return _base_bookmarks_query(user, profile, search).filter(conditions)


-def _base_bookmarks_query(user: Optional[User], query_string: str) -> QuerySet:
+def _base_bookmarks_query(user: Optional[User], profile: UserProfile, search: BookmarkSearch) -> QuerySet:
    query_set = Bookmark.objects

    # Filter for user
@@ -31,17 +37,21 @@ def _base_bookmarks_query(user: Optional[User], query_string: str) -> QuerySet:
        query_set = query_set.filter(owner=user)

    # Split query into search terms and tags
-    query = parse_query_string(query_string)
+    query = parse_query_string(search.q)

    # Filter for search terms and tags
    for term in query['search_terms']:
-        query_set = query_set.filter(
-            Q(title__contains=term)
-            | Q(description__contains=term)
-            | Q(website_title__contains=term)
-            | Q(website_description__contains=term)
-            | Q(url__contains=term)
-        )
+        conditions = 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)
+
+        if profile.tag_search == UserProfile.TAG_SEARCH_LAX:
+            conditions = conditions | Exists(Bookmark.objects.filter(id=OuterRef('id'), tags__name__iexact=term))
+
+        query_set = query_set.filter(conditions)

    for tag_name in query['tag_names']:
        query_set = query_set.filter(
@@ -53,44 +63,85 @@ def _base_bookmarks_query(user: Optional[User], query_string: str) -> QuerySet:
        query_set = query_set.filter(
            tags=None
        )
-    # Unread bookmarks
+    # Legacy unread bookmarks filter from query
    if query['unread']:
        query_set = query_set.filter(
            unread=True
        )

+    # Unread filter from bookmark search
+    if search.unread == BookmarkSearch.FILTER_UNREAD_YES:
+        query_set = query_set.filter(unread=True)
+    elif search.unread == BookmarkSearch.FILTER_UNREAD_NO:
+        query_set = query_set.filter(unread=False)
+
+    # Shared filter
+    if search.shared == BookmarkSearch.FILTER_SHARED_SHARED:
+        query_set = query_set.filter(shared=True)
+    elif search.shared == BookmarkSearch.FILTER_SHARED_UNSHARED:
+        query_set = query_set.filter(shared=False)
+
    # Sort by date added
-    query_set = query_set.order_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
+    if search.sort == BookmarkSearch.SORT_TITLE_ASC or search.sort == BookmarkSearch.SORT_TITLE_DESC:
+        # For the title, the resolved_title logic from the Bookmark entity needs
+        # to be replicated as there is no corresponding database field
+        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()
+            ))
+
+        # For SQLite, if the ICU extension is loaded, use the custom collation
+        # loaded into the connection. This results in an improved sort order for
+        # unicode characters (umlauts, etc.)
+        if settings.USE_SQLITE and settings.USE_SQLITE_ICU_EXTENSION:
+            order_field = RawSQL('effective_title COLLATE ICU', ())
+        else:
+            order_field = 'effective_title'
+
+        if search.sort == BookmarkSearch.SORT_TITLE_ASC:
+            query_set = query_set.order_by(order_field)
+        elif search.sort == BookmarkSearch.SORT_TITLE_DESC:
+            query_set = query_set.order_by(order_field).reverse()

    return query_set


-def query_bookmark_tags(user: User, query_string: str) -> QuerySet:
-    bookmarks_query = query_bookmarks(user, query_string)
+def query_bookmark_tags(user: User, profile: UserProfile, search: BookmarkSearch) -> QuerySet:
+    bookmarks_query = query_bookmarks(user, profile, search)

    query_set = Tag.objects.filter(bookmark__in=bookmarks_query)

    return query_set.distinct()


-def query_archived_bookmark_tags(user: User, query_string: str) -> QuerySet:
-    bookmarks_query = query_archived_bookmarks(user, query_string)
+def query_archived_bookmark_tags(user: User, profile: UserProfile, search: BookmarkSearch) -> QuerySet:
+    bookmarks_query = query_archived_bookmarks(user, profile, search)

    query_set = Tag.objects.filter(bookmark__in=bookmarks_query)

    return query_set.distinct()


-def query_shared_bookmark_tags(user: Optional[User], query_string: str) -> QuerySet:
-    bookmarks_query = query_shared_bookmarks(user, query_string)
+def query_shared_bookmark_tags(user: Optional[User], profile: UserProfile, search: BookmarkSearch,
+                               public_only: bool) -> QuerySet:
+    bookmarks_query = query_shared_bookmarks(user, profile, search, public_only)

    query_set = Tag.objects.filter(bookmark__in=bookmarks_query)

    return query_set.distinct()


-def query_shared_bookmark_users(query_string: str) -> QuerySet:
-    bookmarks_query = query_shared_bookmarks(None, query_string)
+def query_shared_bookmark_users(profile: UserProfile, search: BookmarkSearch, public_only: bool) -> QuerySet:
+    bookmarks_query = query_shared_bookmarks(None, profile, search, public_only)

    query_set = User.objects.filter(bookmark__in=bookmarks_query)

--- a/bookmarks/services/bookmarks.py
+++ b/bookmarks/services/bookmarks.py
@@ -119,9 +119,38 @@ def untag_bookmarks(bookmark_ids: [Union[int, str]], tag_string: str, current_us
    Bookmark.objects.bulk_update(bookmarks, ['date_modified'])


+def mark_bookmarks_as_read(bookmark_ids: [Union[int, str]], current_user: User):
+    sanitized_bookmark_ids = _sanitize_id_list(bookmark_ids)
+    bookmarks = Bookmark.objects.filter(owner=current_user, id__in=sanitized_bookmark_ids)
+
+    bookmarks.update(unread=False, date_modified=timezone.now())
+
+
+def mark_bookmarks_as_unread(bookmark_ids: [Union[int, str]], current_user: User):
+    sanitized_bookmark_ids = _sanitize_id_list(bookmark_ids)
+    bookmarks = Bookmark.objects.filter(owner=current_user, id__in=sanitized_bookmark_ids)
+
+    bookmarks.update(unread=True, date_modified=timezone.now())
+
+
+def share_bookmarks(bookmark_ids: [Union[int, str]], current_user: User):
+    sanitized_bookmark_ids = _sanitize_id_list(bookmark_ids)
+    bookmarks = Bookmark.objects.filter(owner=current_user, id__in=sanitized_bookmark_ids)
+
+    bookmarks.update(shared=True, date_modified=timezone.now())
+
+
+def unshare_bookmarks(bookmark_ids: [Union[int, str]], current_user: User):
+    sanitized_bookmark_ids = _sanitize_id_list(bookmark_ids)
+    bookmarks = Bookmark.objects.filter(owner=current_user, id__in=sanitized_bookmark_ids)
+
+    bookmarks.update(shared=False, date_modified=timezone.now())
+
+
 def _merge_bookmark_data(from_bookmark: Bookmark, to_bookmark: Bookmark):
    to_bookmark.title = from_bookmark.title
    to_bookmark.description = from_bookmark.description
+    to_bookmark.notes = from_bookmark.notes
    to_bookmark.unread = from_bookmark.unread
    to_bookmark.shared = from_bookmark.shared

--- a/bookmarks/services/exporter.py
+++ b/bookmarks/services/exporter.py
@@ -1,3 +1,4 @@
+import html
 from typing import List

 from bookmarks.models import Bookmark
@@ -28,13 +29,20 @@ def append_list_start(doc: BookmarkDocument):

 def append_bookmark(doc: BookmarkDocument, bookmark: Bookmark):
    url = bookmark.url
-    title = bookmark.resolved_title
-    desc = bookmark.resolved_description
-    tags = ','.join(bookmark.tag_names)
+    title = html.escape(bookmark.resolved_title or '')
+    desc = html.escape(bookmark.resolved_description or '')
+    if bookmark.notes:
+        desc += f'[linkding-notes]{html.escape(bookmark.notes)}[/linkding-notes]'
+    tag_names = bookmark.tag_names
+    if bookmark.is_archived:
+        tag_names.append('linkding:archived')
+    tags = ','.join(tag_names)
    toread = '1' if bookmark.unread else '0'
+    private = '0' if bookmark.shared else '1'
    added = int(bookmark.date_added.timestamp())

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

    if desc:
        doc.append(f'<DD>{desc}')
--- a/bookmarks/services/favicon_loader.py
+++ b/bookmarks/services/favicon_loader.py
@@ -1,6 +1,7 @@
+import logging
+import mimetypes
 import os.path
 import re
-import shutil
 import time
 from pathlib import Path
 from urllib.parse import urlparse
@@ -10,25 +11,46 @@ from django.conf import settings

 max_file_age = 60 * 60 * 24  # 1 day

+logger = logging.getLogger(__name__)
+
+# register mime type for .ico files, which is not included in the default
+# mimetypes of the Docker image
+mimetypes.add_type('image/x-icon', '.ico')
+

 def _ensure_favicon_folder():
    Path(settings.LD_FAVICON_FOLDER).mkdir(parents=True, exist_ok=True)


 def _url_to_filename(url: str) -> str:
-    name = re.sub(r'\W+', '_', url)
-    return f'{name}.png'
+    return re.sub(r'\W+', '_', url)


-def _get_base_url(url: str) -> str:
+def _get_url_parameters(url: str) -> dict:
    parsed_uri = urlparse(url)
-    return f'{parsed_uri.scheme}://{parsed_uri.hostname}'
+    return {
+        # https://example.com/foo?bar -> https://example.com
+        'url': f'{parsed_uri.scheme}://{parsed_uri.hostname}',
+        # https://example.com/foo?bar -> example.com
+        'domain': parsed_uri.hostname,
+    }


 def _get_favicon_path(favicon_file: str) -> Path:
    return Path(os.path.join(settings.LD_FAVICON_FOLDER, favicon_file))


+def _check_existing_favicon(favicon_name: str):
+    # return existing file if a file with the same name, ignoring extension,
+    # exists and is not stale
+    for filename in os.listdir(settings.LD_FAVICON_FOLDER):
+        file_base_name, _ = os.path.splitext(filename)
+        if file_base_name == favicon_name:
+            favicon_path = _get_favicon_path(filename)
+            return filename if not _is_stale(favicon_path) else None
+    return None
+
+
 def _is_stale(path: Path) -> bool:
    stat = path.stat()
    file_age = time.time() - stat.st_mtime
@@ -36,22 +58,26 @@ def _is_stale(path: Path) -> bool:


 def load_favicon(url: str) -> str:
-    # Get base URL so that we can reuse favicons for multiple bookmarks with the same host
-    base_url = _get_base_url(url)
-    favicon_name = _url_to_filename(base_url)
-    favicon_path = _get_favicon_path(favicon_name)
+    url_parameters = _get_url_parameters(url)

-    # Load icon if it doesn't exist yet or has become stale
-    if not favicon_path.exists() or _is_stale(favicon_path):
-        # Create favicon folder if not exists
-        _ensure_favicon_folder()
+    # Create favicon folder if not exists
+    _ensure_favicon_folder()
+    # Use scheme+hostname as favicon filename to reuse icon for all pages on the same domain
+    favicon_name = _url_to_filename(url_parameters['url'])
+    favicon_file = _check_existing_favicon(favicon_name)
+
+    if not favicon_file:
        # Load favicon from provider, save to file
-        favicon_url = settings.LD_FAVICON_PROVIDER.format(url=base_url)
-        response = requests.get(favicon_url, stream=True)
+        favicon_url = settings.LD_FAVICON_PROVIDER.format(**url_parameters)
+        logger.debug(f'Loading favicon from: {favicon_url}')
+        with requests.get(favicon_url, stream=True) as response:
+            content_type = response.headers['Content-Type']
+            file_extension = mimetypes.guess_extension(content_type)
+            favicon_file = f'{favicon_name}{file_extension}'
+            favicon_path = _get_favicon_path(favicon_file)
+            with open(favicon_path, 'wb') as file:
+                for chunk in response.iter_content(chunk_size=8192):
+                    file.write(chunk)
+        logger.debug(f'Saved favicon as: {favicon_path}')

-        with open(favicon_path, 'wb') as file:
-            shutil.copyfileobj(response.raw, file)
-
-        del response
-
-    return favicon_name
+    return favicon_file
--- a/bookmarks/services/importer.py
+++ b/bookmarks/services/importer.py
@@ -5,7 +5,7 @@ from typing import List
 from django.contrib.auth.models import User
 from django.utils import timezone

-from bookmarks.models import Bookmark, Tag, parse_tag_string
+from bookmarks.models import Bookmark, Tag
 from bookmarks.services import tasks
 from bookmarks.services.parser import parse, NetscapeBookmark
 from bookmarks.utils import parse_timestamp
@@ -20,6 +20,11 @@ class ImportResult:
    failed: int = 0


+@dataclass
+class ImportOptions:
+    map_private_flag: bool = False
+
+
 class TagCache:
    def __init__(self, user: User):
        self.user = user
@@ -50,7 +55,7 @@ class TagCache:
        self.cache[tag.name.lower()] = tag


-def import_netscape_html(html: str, user: User):
+def import_netscape_html(html: str, user: User, options: ImportOptions = ImportOptions()) -> ImportResult:
    result = ImportResult()
    import_start = timezone.now()

@@ -70,7 +75,7 @@ def import_netscape_html(html: str, user: User):
    # Split bookmarks to import into batches, to keep memory usage for bulk operations manageable
    batches = _get_batches(netscape_bookmarks, 200)
    for batch in batches:
-        _import_batch(batch, user, tag_cache, result)
+        _import_batch(batch, user, options, tag_cache, result)

    # Create snapshots for newly imported bookmarks
    tasks.schedule_bookmarks_without_snapshots(user)
@@ -88,8 +93,7 @@ def _create_missing_tags(netscape_bookmarks: List[NetscapeBookmark], user: User)
    tags_to_create = []

    for netscape_bookmark in netscape_bookmarks:
-        tag_names = parse_tag_string(netscape_bookmark.tag_string)
-        for tag_name in tag_names:
+        for tag_name in netscape_bookmark.tag_names:
            tag = tag_cache.get(tag_name)
            if not tag:
                tag = Tag(name=tag_name, owner=user)
@@ -114,7 +118,11 @@ def _get_batches(items: List, batch_size: int):
    return batches


-def _import_batch(netscape_bookmarks: List[NetscapeBookmark], user: User, tag_cache: TagCache, result: ImportResult):
+def _import_batch(netscape_bookmarks: List[NetscapeBookmark],
+                  user: User,
+                  options: ImportOptions,
+                  tag_cache: TagCache,
+                  result: ImportResult):
    # Query existing bookmarks
    batch_urls = [bookmark.href for bookmark in netscape_bookmarks]
    existing_bookmarks = Bookmark.objects.filter(owner=user, url__in=batch_urls)
@@ -135,7 +143,7 @@ def _import_batch(netscape_bookmarks: List[NetscapeBookmark], user: User, tag_ca
            else:
                is_update = True
            # Copy data from parsed bookmark
-            _copy_bookmark_data(netscape_bookmark, bookmark)
+            _copy_bookmark_data(netscape_bookmark, bookmark, options)
            # Validate bookmark fields, exclude owner to prevent n+1 database query,
            # also there is no specific validation on owner
            bookmark.clean_fields(exclude=['owner'])
@@ -152,8 +160,15 @@ def _import_batch(netscape_bookmarks: List[NetscapeBookmark], user: User, tag_ca
            result.failed = result.failed + 1

    # Bulk update bookmarks in DB
-    Bookmark.objects.bulk_update(bookmarks_to_update,
-                                 ['url', 'date_added', 'date_modified', 'unread', 'title', 'description', 'owner'])
+    Bookmark.objects.bulk_update(bookmarks_to_update, ['url',
+                                                       'date_added',
+                                                       'date_modified',
+                                                       'unread',
+                                                       'shared',
+                                                       'title',
+                                                       'description',
+                                                       'notes',
+                                                       'owner'])
    # Bulk insert new bookmarks into DB
    Bookmark.objects.bulk_create(bookmarks_to_create)

@@ -178,8 +193,7 @@ def _import_batch(netscape_bookmarks: List[NetscapeBookmark], user: User, tag_ca
            continue

        # Get tag models by string, schedule inserts for bookmark -> tag associations
-        tag_names = parse_tag_string(netscape_bookmark.tag_string)
-        tags = tag_cache.get_all(tag_names)
+        tags = tag_cache.get_all(netscape_bookmark.tag_names)
        for tag in tags:
            relationships.append(BookmarkToTagRelationShip(bookmark=bookmark, tag=tag))

@@ -187,7 +201,7 @@ def _import_batch(netscape_bookmarks: List[NetscapeBookmark], user: User, tag_ca
    BookmarkToTagRelationShip.objects.bulk_create(relationships, ignore_conflicts=True)


-def _copy_bookmark_data(netscape_bookmark: NetscapeBookmark, bookmark: Bookmark):
+def _copy_bookmark_data(netscape_bookmark: NetscapeBookmark, bookmark: Bookmark, options: ImportOptions):
    bookmark.url = netscape_bookmark.href
    if netscape_bookmark.date_added:
        bookmark.date_added = parse_timestamp(netscape_bookmark.date_added)
@@ -199,3 +213,9 @@ def _copy_bookmark_data(netscape_bookmark: NetscapeBookmark, bookmark: Bookmark)
        bookmark.title = netscape_bookmark.title
    if netscape_bookmark.description:
        bookmark.description = netscape_bookmark.description
+    if netscape_bookmark.notes:
+        bookmark.notes = netscape_bookmark.notes
+    if options.map_private_flag and not netscape_bookmark.private:
+        bookmark.shared = True
+    if netscape_bookmark.archived:
+        bookmark.is_archived = True
--- a/bookmarks/services/parser.py
+++ b/bookmarks/services/parser.py
@@ -2,15 +2,20 @@ from dataclasses import dataclass
 from html.parser import HTMLParser
 from typing import Dict, List

+from bookmarks.models import parse_tag_string
+

@dataclass
 class NetscapeBookmark:
    href: str
    title: str
    description: str
+    notes: str
    date_added: str
-    tag_string: str
+    tag_names: List[str]
    to_read: bool
+    private: bool
+    archived: bool


 class BookmarkParser(HTMLParser):
@@ -25,7 +30,9 @@ class BookmarkParser(HTMLParser):
        self.tags = ''
        self.title = ''
        self.description = ''
+        self.notes = ''
        self.toread = ''
+        self.private = ''

    def handle_starttag(self, tag: str, attrs: list):
        name = 'handle_start_' + tag.lower()
@@ -52,25 +59,40 @@ class BookmarkParser(HTMLParser):

    def handle_start_a(self, attrs: Dict[str, str]):
        vars(self).update(attrs)
+        tag_names = parse_tag_string(self.tags)
+        archived = 'linkding:archived' in self.tags
+        try:
+            tag_names.remove('linkding:archived')
+        except ValueError:
+            pass
+
        self.bookmark = NetscapeBookmark(
            href=self.href,
            title='',
            description='',
+            notes='',
            date_added=self.add_date,
-            tag_string=self.tags,
-            to_read=self.toread == '1'
+            tag_names=tag_names,
+            to_read=self.toread == '1',
+            # Mark as private by default, also when attribute is not specified
+            private=self.private != '0',
+            archived=archived,
        )

    def handle_a_data(self, data):
        self.title = data.strip()

    def handle_dd_data(self, data):
-        self.description = data.strip()
+        desc = data.strip()
+        if '[linkding-notes]' in desc:
+            self.notes = desc.split('[linkding-notes]')[1].split('[/linkding-notes]')[0]
+        self.description = desc.split('[linkding-notes]')[0]

    def add_bookmark(self):
        if self.bookmark:
            self.bookmark.title = self.title
            self.bookmark.description = self.description
+            self.bookmark.notes = self.notes
            self.bookmarks.append(self.bookmark)
        self.bookmark = None
        self.href = ''
@@ -78,7 +100,9 @@ class BookmarkParser(HTMLParser):
        self.tags = ''
        self.title = ''
        self.description = ''
+        self.notes = ''
        self.toread = ''
+        self.private = ''


 def parse(html: str) -> List[NetscapeBookmark]:
--- a/bookmarks/services/tasks.py
+++ b/bookmarks/services/tasks.py
@@ -10,8 +10,8 @@ from waybackpy.exceptions import WaybackError, TooManyRequestsError, NoCDXRecord

 import bookmarks.services.wayback
 from bookmarks.models import Bookmark, UserProfile
-from bookmarks.services.website_loader import DEFAULT_USER_AGENT
 from bookmarks.services import favicon_loader
+from bookmarks.services.website_loader import DEFAULT_USER_AGENT

 logger = logging.getLogger(__name__)

@@ -37,7 +37,7 @@ def _load_newest_snapshot(bookmark: Bookmark):

        if existing_snapshot:
            bookmark.web_archive_snapshot_url = existing_snapshot.archive_url
-            bookmark.save()
+            bookmark.save(update_fields=['web_archive_snapshot_url'])
            logger.info(f'Using newest snapshot. url={bookmark.url} from={existing_snapshot.datetime_timestamp}')

    except NoCDXRecordFound:
@@ -51,7 +51,7 @@ def _create_snapshot(bookmark: Bookmark):
    archive = waybackpy.WaybackMachineSaveAPI(bookmark.url, DEFAULT_USER_AGENT, max_tries=1)
    archive.save()
    bookmark.web_archive_snapshot_url = archive.archive_url
-    bookmark.save()
+    bookmark.save(update_fields=['web_archive_snapshot_url'])
    logger.info(f'Successfully created new snapshot for bookmark:. url={bookmark.url}')


@@ -130,12 +130,12 @@ def _load_favicon_task(bookmark_id: int):

    logger.info(f'Load favicon for bookmark. url={bookmark.url}')

-    new_favicon = favicon_loader.load_favicon(bookmark.url)
+    new_favicon_file = favicon_loader.load_favicon(bookmark.url)

-    if new_favicon != bookmark.favicon_file:
-        bookmark.favicon_file = new_favicon
-        bookmark.save()
-        logger.info(f'Successfully updated favicon for bookmark. url={bookmark.url} icon={new_favicon}')
+    if new_favicon_file != bookmark.favicon_file:
+        bookmark.favicon_file = new_favicon_file
+        bookmark.save(update_fields=['favicon_file'])
+        logger.info(f'Successfully updated favicon for bookmark. url={bookmark.url} icon={new_favicon_file}')


 def schedule_bookmarks_without_favicons(user: User):
--- a/bookmarks/services/website_loader.py
+++ b/bookmarks/services/website_loader.py
@@ -71,8 +71,10 @@ def load_page(url: str):
            logger.debug(f'Loaded chunk (iteration={iteration}, total={size / 1024})')

            # Stop reading if we have parsed end of head tag
-            if '</head>'.encode('utf-8') in content:
+            end_of_head = '</head>'.encode('utf-8')
+            if end_of_head in content:
                logger.debug(f'Found closing head tag after {size} bytes')
+                content = content.split(end_of_head)[0] + end_of_head
                break
            # Stop reading if we exceed limit
            if size > MAX_CONTENT_LIMIT:
--- a/bookmarks/signals.py
+++ b/bookmarks/signals.py
@@ -1,8 +1,27 @@
+from django.conf import settings
 from django.contrib.auth import user_logged_in
+from django.db.backends.signals import connection_created
 from django.dispatch import receiver
+
 from bookmarks.services import tasks


@receiver(user_logged_in)
 def user_logged_in(sender, request, user, **kwargs):
    tasks.schedule_bookmarks_without_snapshots(user)
+
+
+@receiver(connection_created)
+def extend_sqlite(connection=None, **kwargs):
+    # Load ICU extension into Sqlite connection to support case-insensitive
+    # comparisons with unicode characters
+    if connection.vendor == 'sqlite' and settings.USE_SQLITE_ICU_EXTENSION:
+        connection.connection.enable_load_extension(True)
+        connection.connection.load_extension(settings.SQLITE_ICU_EXTENSION_PATH.rstrip('.so'))
+
+        with connection.cursor() as cursor:
+            # Load an ICU collation for case-insensitive ordering.
+            # The first param can be a specific locale, it seems that not
+            # providing one will use a default collation from the ICU project
+            # that works reasonably for multiple languages
+            cursor.execute("SELECT icu_load_collation('', 'ICU');")
--- a/bookmarks/static/bookmark_list.js
+++ b/bookmarks/static/bookmark_list.js
@@ -1,127 +0,0 @@
-(function () {
-  function setupBulkEdit() {
-    const bulkEditToggle = document.getElementById('bulk-edit-mode')
-    const bulkEditBar = document.querySelector('.bulk-edit-bar')
-    const singleToggles = document.querySelectorAll('.bulk-edit-toggle input')
-    const allToggle = document.querySelector('.bulk-edit-all-toggle input')
-
-    function isAllSelected() {
-      let result = true
-
-      singleToggles.forEach(function (toggle) {
-        result = result && toggle.checked
-      })
-
-      return result
-    }
-
-    function selectAll() {
-      singleToggles.forEach(function (toggle) {
-        toggle.checked = true
-      })
-    }
-
-    function deselectAll() {
-      singleToggles.forEach(function (toggle) {
-        toggle.checked = false
-      })
-    }
-
-    // Toggle all
-    allToggle.addEventListener('change', function (e) {
-      if (e.target.checked) {
-        selectAll()
-      } else {
-        deselectAll()
-      }
-    })
-
-    // Toggle single
-    singleToggles.forEach(function (toggle) {
-      toggle.addEventListener('change', function () {
-        allToggle.checked = isAllSelected()
-      })
-    })
-
-    // Allow overflow when bulk edit mode is active to be able to display tag auto complete menu
-    let bulkEditToggleTimeout
-    if (bulkEditToggle.checked) {
-      bulkEditBar.style.overflow = 'visible';
-    }
-    bulkEditToggle.addEventListener('change', function (e) {
-      if (bulkEditToggleTimeout) {
-        clearTimeout(bulkEditToggleTimeout);
-        bulkEditToggleTimeout = null;
-      }
-      if (e.target.checked) {
-        bulkEditToggleTimeout = setTimeout(function () {
-          bulkEditBar.style.overflow = 'visible';
-        }, 500);
-      } else {
-        bulkEditBar.style.overflow = 'hidden';
-      }
-    });
-  }
-
-  function setupBulkEditTagAutoComplete() {
-    const wrapper = document.createElement('div');
-    const tagInput = document.getElementById('bulk-edit-tags-input');
-    const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || '';
-    const apiClient = new linkding.ApiClient(apiBaseUrl)
-
-    new linkding.TagAutoComplete({
-      target: wrapper,
-      props: {
-        id: 'bulk-edit-tags-input',
-        name: tagInput.name,
-        value: tagInput.value,
-        apiClient: apiClient,
-        variant: 'small'
-      }
-    });
-
-    tagInput.parentElement.replaceChild(wrapper, tagInput);
-  }
-
-  function setupListNavigation() {
-    // Add logic for navigating bookmarks with arrow keys
-    document.addEventListener('keydown', event => {
-      // Skip if event occurred within an input element
-      // or does not use arrow keys
-      const targetNodeName = event.target.nodeName;
-      const isInputTarget = targetNodeName === 'INPUT'
-        || targetNodeName === 'SELECT'
-        || targetNodeName === 'TEXTAREA';
-      const isArrowUp = event.key === 'ArrowUp';
-      const isArrowDown = event.key === 'ArrowDown';
-
-      if (isInputTarget || !(isArrowUp || isArrowDown)) {
-        return;
-      }
-      event.preventDefault();
-
-      // Detect current bookmark list item
-      const path = event.composedPath();
-      const currentItem = path.find(item => item.hasAttribute && item.hasAttribute('data-is-bookmark-item'));
-
-      // Find next item
-      let nextItem;
-      if (currentItem) {
-        nextItem = isArrowUp
-          ? currentItem.previousElementSibling
-          : currentItem.nextElementSibling;
-      } else {
-        // Select first item
-        nextItem = document.querySelector('li[data-is-bookmark-item]');
-      }
-      // Focus first link
-      if (nextItem) {
-        nextItem.querySelector('a').focus();
-      }
-    });
-  }
-
-  setupBulkEdit();
-  setupBulkEditTagAutoComplete();
-  setupListNavigation();
-})()
--- a/bookmarks/static/shared.js
+++ b/bookmarks/static/shared.js
@@ -1,83 +0,0 @@
-(function () {
-
-    function initConfirmationButtons() {
-        const buttonEls = document.querySelectorAll('.btn-confirmation');
-
-        function showConfirmation(buttonEl) {
-            const cancelEl = document.createElement(buttonEl.nodeName);
-            cancelEl.innerText = 'Cancel';
-            cancelEl.className = 'btn btn-link btn-sm btn-confirmation-action mr-1';
-            cancelEl.addEventListener('click', function () {
-                container.remove();
-                buttonEl.style = '';
-            });
-
-            const confirmEl = document.createElement(buttonEl.nodeName);
-            confirmEl.innerText = 'Confirm';
-            confirmEl.className = 'btn btn-link btn-delete btn-sm btn-confirmation-action';
-
-            if (buttonEl.nodeName === 'BUTTON') {
-                confirmEl.type = buttonEl.type;
-                confirmEl.name = buttonEl.name;
-                confirmEl.value = buttonEl.value;
-            }
-            if (buttonEl.nodeName === 'A') {
-                confirmEl.href = buttonEl.href;
-            }
-
-            const container = document.createElement('span');
-            container.className = 'confirmation'
-            container.appendChild(cancelEl);
-            container.appendChild(confirmEl);
-            buttonEl.parentElement.insertBefore(container, buttonEl);
-            buttonEl.style = 'display: none';
-        }
-
-        buttonEls.forEach(function (linkEl) {
-            linkEl.addEventListener('click', function (e) {
-                e.preventDefault();
-                showConfirmation(linkEl);
-            });
-        });
-    }
-
-    function initGlobalShortcuts() {
-        // Focus search button
-        document.addEventListener('keydown', function (event) {
-            // Filter for shortcut key
-            if (event.key !== 's') return;
-            // Skip if event occurred within an input element
-            const targetNodeName = event.target.nodeName;
-            const isInputTarget = targetNodeName === 'INPUT'
-                || targetNodeName === 'SELECT'
-                || targetNodeName === 'TEXTAREA';
-
-            if (isInputTarget) return;
-
-            const searchInput = document.querySelector('input[type="search"]');
-
-            if (searchInput) {
-                searchInput.focus();
-                event.preventDefault();
-            }
-        });
-
-        // Add new bookmark
-        document.addEventListener('keydown', function(event) {
-            // Filter for new entry shortcut key
-            if (event.key !== 'n') return;
-            // Skip if event occurred within an input element
-            const targetNodeName = event.target.nodeName;
-            const isInputTarget = targetNodeName === 'INPUT'
-                || targetNodeName === 'SELECT'
-                || targetNodeName === 'TEXTAREA';
-
-            if (isInputTarget) return;
-
-            window.location.assign("/bookmarks/new");
-        });
-    }
-
-    initConfirmationButtons();
-    initGlobalShortcuts();
-})()
--- a/bookmarks/styles/auth.scss
+++ b/bookmarks/styles/auth.scss
@@ -1,6 +0,0 @@
-.auth-page {
-  > .columns {
-    align-items: center;
-    justify-content: center;
-  }
-}
--- a/bookmarks/styles/base.scss
+++ b/bookmarks/styles/base.scss
@@ -1,14 +1,29 @@
+/* Main layout */
 body {
  margin: 20px 10px;

  @media (min-width: $size-sm) {
-    // High horizontal padding accounts for checkboxes that show up in bulk edit mode
-    margin: 20px 24px;
+    // Horizontal padding accounts for checkboxes that show up in bulk edit mode
+    margin: 20px 32px;
  }
 }

 header {
-  margin-bottom: 40px;
+  margin-bottom: $unit-10;
+
+  .logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  a:hover {
+    text-decoration: none;
+  }
+
+  h1 {
+    margin: 0 0 0 $unit-3;
+    font-size: $font-size-lg;
+  }
 }

 header .toasts {
@@ -23,82 +38,107 @@ header .toasts {
  }
 }

-.navbar {
+/* Shared components */

-  .navbar-brand {
+// Content area component
+section.content-area {
+  h2 {
+    font-size: $font-size-lg;
+  }

+  .content-area-header {
+    border-bottom: solid 1px $border-color;
    display: flex;
-    align-items: center;
+    flex-wrap: wrap;
+    column-gap: $unit-6;
+    padding-bottom: $unit-2;
+    margin-bottom: $unit-4;

-    .logo {
-      width: 28px;
-      height: 28px;
+    h2 {
+      flex: 0 0 auto;
+      line-height: 1.8rem;
+      margin-bottom: 0;
    }

-    h1 {
-      text-transform: uppercase;
-      display: inline-block;
-      margin: 0 0 0 8px;
+    .header-controls {
+      flex: 1 1 0;
+      display: flex;
    }
  }
-
-  .dropdown-toggle {
-  }
 }

-/* Overrides */
+// Confirm button component
+span.confirmation {
+  display: flex;
+  align-items: baseline;
+  gap: $unit-1;
+  color: $error-color !important;

-// Reduce heading sizes
-h1 {
-  font-size: inherit;
+  svg {
+    align-self: center;
+  }
+
+  .btn.btn-link {
+    color: $error-color !important;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }

-h2 {
-  font-size: .85rem;
+/* Additional utilities */
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.text-sm {
+  font-size: 0.7rem;
+}
+
+.text-gray-dark {
  color: $gray-color-dark;
 }

-// Fix up visited styles
-a:visited {
-  color: $link-color;
-}
-a:visited:hover {
-  color: $link-color-dark;
-}
-.btn-link:visited:not(.btn-primary) {
-  color: $link-color;
-}
-.btn-link:visited:not(.btn-primary):hover {
-  color: $link-color-dark;
+.align-baseline {
+  align-items: baseline;
 }

-// Increase spacing between columns
-.container > .columns > .column:not(:first-child) {
-  padding-left: 2rem;
+.align-center {
+  align-items: center;
 }

-// Remove left padding from first pagination link
-.pagination .page-item:first-child a {
-  padding-left: 0;
+.justify-between {
+  justify-content: space-between;
 }

-// Override border color for tab block
-.tab-block {
-  border-bottom: solid 1px $border-color;
+.mb-4 {
+  margin-bottom: $unit-4;
 }

-// Form auto-complete menu
-.form-autocomplete .menu {
-  .menu-item.selected > a, .menu-item > a:hover {
-    background: $secondary-color;
-    color: $primary-color;
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.ml-auto {
+  margin-left: auto;
+}
+
+.btn.btn-wide {
+  padding-left: $unit-6;
+  padding-right: $unit-6;
+}
+
+.btn.btn-sm.btn-icon {
+  display: inline-flex;
+  align-items: baseline;
+  gap: $unit-h;
+
+  svg {
+    align-self: center;
  }
-
-  .group-item, .group-item:hover {
-    color: $gray-color;
-    text-transform: uppercase;
-    background: none;
-    font-size: 0.6rem;
-    font-weight: bold;
-  }
-}
+}
--- a/bookmarks/styles/bookmark-form.scss
+++ b/bookmarks/styles/bookmark-form.scss
@@ -0,0 +1,50 @@
+.bookmarks-form {
+
+  .btn.form-icon {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    visibility: hidden;
+    color: $gray-color;
+
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+      color: $gray-color-dark;
+    }
+
+    > svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .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-input-hint.bookmark-exists {
+    display: none;
+    color: $warning-color;
+
+    a {
+      color: $warning-color;
+      text-decoration: underline;
+      font-weight: bold;
+    }
+  }
+
+  details.notes textarea {
+    box-sizing: border-box;
+  }
+}
--- a/bookmarks/styles/bookmark-page.scss
+++ b/bookmarks/styles/bookmark-page.scss
@@ -0,0 +1,365 @@
+.bookmarks-page.grid {
+  grid-gap: $unit-10;
+}
+
+/* Bookmark area header controls */
+.bookmarks-page .content-area-header {
+  --searchbox-max-width: 350px;
+  --searchbox-height: 1.8rem;
+
+  @media (max-width: $size-sm) {
+    --searchbox-max-width: initial;
+    flex-direction: column;
+  }
+}
+
+.bookmarks-page .search-container {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: flex-end;
+
+  // Regular input
+  input[type='search'] {
+    height: var(--searchbox-height);
+    -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(--searchbox-height);
+
+    .form-autocomplete-input {
+      width: 100%;
+      height: var(--searchbox-height);
+
+      input[type='search'] {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        border: none;
+      }
+    }
+  }
+
+  .input-group {
+    flex: 1 1 0;
+    min-width: var(--searchbox-min-width);
+    max-width: var(--searchbox-max-width);
+  }
+
+  .input-group > :first-child {
+    flex: 1 1 0;
+  }
+
+  // Group search options button with search button
+  .input-group input[type='submit'] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .dropdown-toggle {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .dropdown {
+    margin-left: -1px;
+  }
+
+  // Search option menu styles
+  .dropdown {
+    .menu {
+      padding: $unit-4;
+      min-width: 250px;
+    }
+
+    .menu .actions {
+      margin-top: $unit-4;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .radio-group {
+      margin-bottom: $unit-1;
+      .form-label {
+        padding-bottom: 0;
+      }
+      .form-radio.form-inline {
+        margin: 0 $unit-2 0 0;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        column-gap: $unit-1;
+      }
+      .form-icon {
+        top: 0;
+        position: relative;
+      }
+    }
+  }
+}
+
+/* Bookmark list */
+ul.bookmark-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Bookmarks */
+li[ld-bookmark-item] {
+  position: relative;
+
+  [ld-bulk-edit-checkbox].form-checkbox {
+    display: none;
+  }
+
+  .title a {
+    display: inline-block;
+    vertical-align: top;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.unread .title a {
+    font-style: italic;
+  }
+
+  .title img {
+    width: 16px;
+    height: 16px;
+    margin-right: $unit-h;
+    vertical-align: text-top;
+  }
+
+  .url-display {
+    color: $secondary-link-color;
+  }
+
+  .description {
+    color: $gray-color-dark;
+
+    a, a:visited:hover {
+      color: $alternative-color;
+    }
+  }
+
+  .actions, .extra-actions {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    column-gap: $unit-2;
+  }
+
+  @media (max-width: $size-sm) {
+    .extra-actions {
+      width: 100%;
+      margin-top: $unit-1;
+    }
+  }
+
+  .actions {
+    a, button.btn-link {
+      color: $gray-color;
+      padding: 0;
+      height: auto;
+      vertical-align: unset;
+      border: none;
+      transition: none;
+      text-decoration: none;
+
+      &:focus,
+      &:hover,
+      &:active,
+      &.active {
+        color: $gray-color-dark;
+      }
+    }
+
+    .separator {
+      align-self: flex-start;
+    }
+  }
+}
+
+.bookmark-pagination {
+  margin-top: $unit-4;
+}
+
+.tag-cloud {
+
+  .selected-tags {
+    margin-bottom: $unit-4;
+
+    a, a:visited:hover {
+      color: $error-color;
+    }
+  }
+
+  .unselected-tags {
+    a, a:visited:hover {
+      color: $alternative-color;
+    }
+  }
+
+  .group {
+    margin-bottom: $unit-2;
+  }
+
+  .highlight-char {
+    font-weight: bold;
+    text-transform: uppercase;
+    color: $alternative-color-dark;
+  }
+}
+
+/* Bookmark notes */
+ul.bookmark-list {
+  .notes {
+    display: none;
+    max-height: 300px;
+    margin: $unit-1 0;
+    overflow-y: auto;
+  }
+
+  &.show-notes .notes,
+  li.show-notes .notes {
+    display: block;
+  }
+}
+
+/* Bookmark notes markdown styles */
+ul.bookmark-list .notes-content {
+  & {
+    padding: $unit-2 $unit-3;
+  }
+
+  p, ul, ol, pre, blockquote {
+    margin: 0 0 $unit-2 0;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  ul, ol {
+    margin-left: $unit-4;
+  }
+
+  ul li, ol li {
+    margin-top: $unit-1;
+  }
+
+  pre {
+    padding: $unit-1 $unit-2;
+    background-color: $code-bg-color;
+    border-radius: $unit-1;
+    overflow-x: auto;
+  }
+
+  pre code {
+    background: none;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  > pre:first-child:last-child {
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+}
+
+/* Bookmark bulk edit */
+$bulk-edit-toggle-width: 16px;
+$bulk-edit-toggle-offset: 8px;
+$bulk-edit-bar-offset: $bulk-edit-toggle-width + (2 * $bulk-edit-toggle-offset);
+$bulk-edit-transition-duration: 400ms;
+
+[ld-bulk-edit] {
+  .bulk-edit-bar {
+    margin-top: -1px;
+    margin-left: -$bulk-edit-bar-offset;
+    margin-bottom: $unit-4;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height $bulk-edit-transition-duration;
+  }
+
+  &.active .bulk-edit-bar {
+    max-height: 37px;
+    border-bottom: solid 1px $border-color;
+  }
+
+  /* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
+  &.active:not(.activating) .bulk-edit-bar {
+    overflow: visible;
+  }
+
+  /* All checkbox */
+  [ld-bulk-edit-checkbox][all].form-checkbox {
+    display: block;
+    width: $bulk-edit-toggle-width;
+    margin: 0 0 0 $bulk-edit-toggle-offset;
+    padding: 0;
+    min-height: 1rem;
+  }
+
+  /* Bookmark checkboxes */
+  li[ld-bookmark-item] [ld-bulk-edit-checkbox].form-checkbox {
+    display: block;
+    position: absolute;
+    width: $bulk-edit-toggle-width;
+    left: -$bulk-edit-toggle-width - $bulk-edit-toggle-offset;
+    top: 0;
+    padding: 0;
+    margin: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: all $bulk-edit-transition-duration;
+
+    .form-icon {
+      top: $unit-1;
+    }
+  }
+
+  &.active li[ld-bookmark-item] [ld-bulk-edit-checkbox].form-checkbox {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  /* Actions */
+  .bulk-edit-actions {
+    display: flex;
+    align-items: baseline;
+    padding: $unit-1 0;
+    border-top: solid 1px $border-color;
+    gap: $unit-2;
+
+    button {
+      padding: 0 !important;
+    }
+
+    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: $font-size-sm;
+    }
+  }
+}
--- a/bookmarks/styles/bookmarks.scss
+++ b/bookmarks/styles/bookmarks.scss
@@ -1,277 +0,0 @@
-.bookmarks-page .search {
-  $searchbox-width: 180px;
-  $searchbox-width-md: 300px;
-  $searchbox-height: 1.8rem;
-
-  // Regular input
-  input[type='search'] {
-    width: $searchbox-width;
-    height: $searchbox-height;
-    -webkit-appearance: none;
-
-    @media (min-width: $control-width-md) {
-      width: $searchbox-width-md;
-    }
-  }
-
-  // Enhanced auto-complete input
-  // This needs a bit more wrangling to make the CSS component align with the attached button
-  .form-autocomplete {
-    height: $searchbox-height;
-
-    .form-autocomplete-input {
-      width: $searchbox-width;
-      height: $searchbox-height;
-
-      input[type='search'] {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border: none;
-      }
-
-      @media (min-width: $control-width-md) {
-        width: $searchbox-width-md;
-      }
-    }
-  }
-}
-
-.bookmarks-page .content-area-header {
-  span.btn {
-    margin-left: 8px;
-  }
-}
-
-ul.bookmark-list {
-
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  .title a {
-    display: inline-block;
-    vertical-align: top;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .title img {
-    width: 16px;
-    height: 16px;
-    vertical-align: text-top;
-  }
-
-  .description {
-    color: $gray-color-dark;
-
-    a, a:visited:hover {
-      color: $alternative-color;
-    }
-  }
-
-  .actions > *:not(:last-child) {
-    margin-right: 0.1rem;
-  }
-
-  .actions .date-label a {
-    color: $gray-color;
-  }
-
-  .actions .btn-link {
-    color: $gray-color;
-    padding: 0;
-    height: auto;
-    vertical-align: unset;
-    border: none;
-
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      color: $gray-color-dark;
-    }
-  }
-
-  .bulk-edit-toggle {
-    display: none;
-  }
-}
-
-.bookmark-pagination {
-  margin-top: 1rem;
-}
-
-.tag-cloud {
-
-  .selected-tags {
-    margin-bottom: 0.8rem;
-
-    a, a:visited:hover {
-      color: $error-color;
-    }
-  }
-
-  .unselected-tags {
-    a, a:visited:hover {
-      color: $alternative-color;
-    }
-  }
-
-  .group {
-    margin-bottom: 0.4rem;
-  }
-
-  .highlight-char {
-    font-weight: bold;
-    text-transform: uppercase;
-    color: $alternative-color-dark;
-  }
-}
-
-.bookmarks-form {
-
-  .btn.form-icon {
-    padding: 0;
-    width: 20px;
-    height: 20px;
-    visibility: hidden;
-    color: $gray-color;
-
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      color: $gray-color-dark;
-    }
-
-    > svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .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-input-hint.bookmark-exists {
-    display: none;
-    color: $warning-color;
-
-    a {
-      color: $warning-color;
-      text-decoration: underline;
-      font-weight: bold;
-    }
-  }
-}
-
-/* Bookmark actions / bulk edit */
-$bulk-edit-toggle-width: 16px;
-$bulk-edit-toggle-offset: 8px;
-$bulk-edit-bar-offset: $bulk-edit-toggle-width + (2 * $bulk-edit-toggle-offset);
-$bulk-edit-transition-duration: 400ms;
-
-.bookmarks-page form.bookmark-actions {
-
-  .bulk-edit-bar {
-    margin-top: -17px;
-    margin-bottom: 16px;
-    margin-left: -$bulk-edit-bar-offset;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height $bulk-edit-transition-duration;
-  }
-
-  .bulk-edit-actions {
-    display: flex;
-    align-items: baseline;
-    padding: 4px 0;
-    border-top: solid 1px $border-color;
-
-    button:hover {
-      text-decoration: underline;
-    }
-
-    > label.form-checkbox {
-      min-height: 1rem;
-    }
-
-    > button {
-      padding: 0;
-      margin-left: 8px;
-    }
-
-    > span {
-      margin-left: 8px;
-    }
-
-    > input, .form-autocomplete {
-      width: auto;
-      margin-left: 4px;
-      max-width: 200px;
-      -webkit-appearance: none;
-    }
-
-    span.confirmation {
-      display: flex;
-    }
-
-    span.confirmation button {
-      padding: 0;
-    }
-  }
-
-  .bulk-edit-all-toggle {
-    width: $bulk-edit-toggle-width;
-    margin: 0 0 0 $bulk-edit-toggle-offset;
-    padding: 0;
-  }
-
-  ul.bookmark-list li {
-    position: relative;
-  }
-
-  ul.bookmark-list li .bulk-edit-toggle {
-    display: block;
-    position: absolute;
-    width: $bulk-edit-toggle-width;
-    left: -$bulk-edit-toggle-width - $bulk-edit-toggle-offset;
-    top: 0;
-    padding: 0;
-    margin: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: all $bulk-edit-transition-duration;
-
-    i {
-      top: 0.2rem;
-    }
-  }
-}
-
-#bulk-edit-mode {
-  display: none;
-}
-
-#bulk-edit-mode:checked ~ .bookmarks-page .bulk-edit-toggle {
-  visibility: visible;
-  opacity: 1;
-}
-
-#bulk-edit-mode:checked ~ .bookmarks-page .bulk-edit-bar {
-  max-height: 37px;
-  border-bottom: solid 1px $border-color;
-}
--- a/bookmarks/styles/dark.scss
+++ b/bookmarks/styles/dark.scss
@@ -1,32 +0,0 @@
-/* Dark theme overrides */
-
-/* Buttons */
-.btn.btn-primary {
-  background: $dt-primary-button-color;
-  border-color: darken($dt-primary-button-color, 5%);
-
-  &:hover, &:active, &:focus {
-    background: darken($dt-primary-button-color, 5%);
-    border-color: darken($dt-primary-button-color, 10%);
-  }
-}
-
-/* Focus ring*/
-a:focus, .btn:focus {
-  box-shadow: 0 0 0 .1rem rgba($primary-color, .5);
-}
-
-/* Forms */
-.has-error .form-input, .form-input.is-error, .has-error .form-select, .form-select.is-error {
-  background: darken($error-color, 40%);
-}
-
-.form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon {
-  background: $dt-primary-button-color;
-  border-color: $dt-primary-button-color;
-}
-
-/* Pagination */
-.pagination .page-item.active a {
-  background: $dt-primary-button-color;
-}
--- a/bookmarks/styles/responsive.scss
+++ b/bookmarks/styles/responsive.scss
@@ -0,0 +1,108 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: $size-lg;
+}
+
+.show-sm,
+.show-md {
+  display: none !important;
+}
+
+.width-25 {
+  width: 25%;
+}
+
+.width-50 {
+  width: 50%;
+}
+
+.width-75 {
+  width: 75%;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.grid {
+  --grid-columns: 3;
+  display: grid;
+  grid-template-columns: repeat(var(--grid-columns), 1fr);
+  grid-gap: $unit-4;
+}
+
+.grid > * {
+  min-width: 0;
+}
+
+.col-1 {
+  grid-column: unquote("span min(1, var(--grid-columns))");
+}
+
+.col-2 {
+  grid-column: unquote("span min(2, var(--grid-columns))");
+}
+
+.col-3 {
+  grid-column: unquote("span min(3, var(--grid-columns))");
+}
+
+@media (max-width: $size-md) {
+  .hide-md {
+    display: none !important;
+  }
+  .show-md {
+    display: block !important;
+  }
+
+  .width-md-25 {
+    width: 25%;
+  }
+  .width-md-50 {
+    width: 50%;
+  }
+  .width-md-75 {
+    width: 75%;
+  }
+  .width-md-100 {
+    width: 100%;
+  }
+
+  .columns-md-1 {
+    --grid-columns: 1;
+  }
+  .columns-md-2 {
+    --grid-columns: 2;
+  }
+}
+
+@media (max-width: $size-sm) {
+  .hide-sm {
+    display: none !important;
+  }
+  .show-sm {
+    display: block !important;
+  }
+
+  .width-sm-25 {
+    width: 25%;
+  }
+  .width-sm-50 {
+    width: 50%;
+  }
+  .width-sm-75 {
+    width: 75%;
+  }
+  .width-sm-100 {
+    width: 100%;
+  }
+
+  .columns-sm-1 {
+    --grid-columns: 1;
+  }
+  .columns-sm-2 {
+    --grid-columns: 2;
+  }
+}
--- a/bookmarks/styles/settings.scss
+++ b/bookmarks/styles/settings.scss
@@ -1,10 +1,9 @@
 .settings-page {
  section.content-area {
-    margin-bottom: 2rem;
+    margin-bottom: $unit-12;

    h2 {
-      font-size: 1.0rem;
-      margin-bottom: 0.8rem;
+      margin-bottom: $unit-4;
    }
  }

--- a/bookmarks/styles/shared.scss
+++ b/bookmarks/styles/shared.scss
@@ -1,22 +0,0 @@
-// Content area component
-section.content-area {
-
-  .content-area-header {
-    border-bottom: solid 1px $border-color;
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 16px;
-
-    h2 {
-      line-height: 1.8rem;
-    }
-  }
-}
-
-// Confirm button component
-.btn-confirmation-action {
-  color: $error-color !important;
-  &:hover {
-    text-decoration: underline;
-  }
-}
--- a/bookmarks/styles/spectre.scss
+++ b/bookmarks/styles/spectre.scss
@@ -0,0 +1,137 @@
+// Customized Spectre CSS imports, removing modules that are not used
+// See node_modules/spectre.css/src/spectre.scss for the original version
+
+// Variables and mixins
+@import "../../node_modules/spectre.css/src/variables";
+@import "../../node_modules/spectre.css/src/mixins";
+
+/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
+// Reset and dependencies
+@import "../../node_modules/spectre.css/src/normalize";
+@import "../../node_modules/spectre.css/src/base";
+
+// Elements
+@import "../../node_modules/spectre.css/src/typography";
+@import "../../node_modules/spectre.css/src/asian";
+@import "../../node_modules/spectre.css/src/tables";
+@import "../../node_modules/spectre.css/src/buttons";
+@import "../../node_modules/spectre.css/src/forms";
+@import "../../node_modules/spectre.css/src/labels";
+@import "../../node_modules/spectre.css/src/codes";
+@import "../../node_modules/spectre.css/src/media";
+
+// Components
+@import "../../node_modules/spectre.css/src/badges";
+@import "../../node_modules/spectre.css/src/dropdowns";
+@import "../../node_modules/spectre.css/src/empty";
+@import "../../node_modules/spectre.css/src/menus";
+@import "../../node_modules/spectre.css/src/modals";
+@import "../../node_modules/spectre.css/src/pagination";
+@import "../../node_modules/spectre.css/src/tabs";
+@import "../../node_modules/spectre.css/src/toasts";
+@import "../../node_modules/spectre.css/src/tooltips";
+
+// Utility classes
+@import "../../node_modules/spectre.css/src/animations";
+@import "../../node_modules/spectre.css/src/utilities";
+
+// Auto-complete component
+@import "../../node_modules/spectre.css/src/autocomplete";
+
+
+/* Spectre overrides / fixes */
+
+// Fix up visited styles
+a:visited {
+  color: $link-color;
+}
+
+a:visited:hover {
+  color: $link-color-dark;
+}
+
+.btn-link:visited:not(.btn-primary) {
+  color: $link-color;
+}
+
+.btn-link:visited:not(.btn-primary):hover {
+  color: $link-color-dark;
+}
+
+// Disable transitions on buttons, which can otherwise flicker while loading CSS file
+// something to do with .btn applying a transition for background, and then .btn-link setting a different background
+.btn {
+  transition: none !important;
+}
+
+// Fix radio button sub-pixel size
+.form-radio .form-icon {
+  width: 14px;
+  height: 14px;
+  border-width: 1px;
+}
+
+.form-radio input:checked + .form-icon::before {
+  top: 3px;
+  left: 3px;
+  transform: unset;
+}
+
+// Make code work with light and dark theme
+code {
+  color: $gray-color-dark;
+  background-color: $code-bg-color;
+  box-shadow: 1px 1px 0 $code-shadow-color;
+}
+
+// Remove left padding from first pagination link
+.pagination .page-item:first-child a {
+  padding-left: 0;
+}
+
+// Override border color for tab block
+.tab-block {
+  border-bottom: solid 1px $border-color;
+}
+
+// Fix padding for first menu item
+ul.menu li:first-child {
+  margin-top: 0;
+}
+
+// Form auto-complete menu
+.form-autocomplete .menu {
+  .menu-item.selected > a, .menu-item > a:hover {
+    background: $secondary-color;
+    color: $primary-color;
+  }
+
+  .group-item, .group-item:hover {
+    color: $gray-color;
+    text-transform: uppercase;
+    background: none;
+    font-size: 0.6rem;
+    font-weight: bold;
+  }
+}
+
+.modal {
+  // Add border to separate from background in dark mode
+  .modal-container {
+    border: solid 1px $border-color;
+  }
+
+  // Fix modal header to use default color
+  .modal-header {
+    color: inherit;
+  }
+}
+
+// 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;
+  }
+}
--- a/bookmarks/styles/theme-dark.scss
+++ b/bookmarks/styles/theme-dark.scss
@@ -2,16 +2,53 @@
@import "variables-dark";

 // Import Spectre CSS lib
-@import "../../node_modules/spectre.css/src/spectre";
-@import "../../node_modules/spectre.css/src/autocomplete";
+@import "spectre";

 // Import style modules
@import "base";
-@import "util";
-@import "shared";
-@import "bookmarks";
+@import "responsive";
+@import "bookmark-page";
+@import "bookmark-form";
@import "settings";
-@import "auth";

-// Dark theme overrides
-@import "dark";
+/* Dark theme overrides */
+
+// Buttons
+.btn.btn-primary {
+  background: $dt-primary-button-color;
+  border-color: darken($dt-primary-button-color, 5%);
+
+  &:hover, &:active, &:focus {
+    background: darken($dt-primary-button-color, 5%);
+    border-color: darken($dt-primary-button-color, 10%);
+  }
+}
+
+// Focus ring
+a:focus, .btn:focus {
+  box-shadow: 0 0 0 .1rem rgba($primary-color, .5);
+}
+
+// Forms
+.form-input:not(:placeholder-shown):invalid,
+.form-input:not(:placeholder-shown):invalid:focus,
+.has-error .form-input,
+.form-input.is-error,
+.has-error .form-select,
+.form-select.is-error {
+  background: darken($error-color, 40%);
+}
+
+.form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon {
+  background: $dt-primary-button-color;
+  border-color: $dt-primary-button-color;
+}
+
+.form-radio input:checked + .form-icon::before {
+  background: $light-color;
+}
+
+// Pagination
+.pagination .page-item.active a {
+  background: $dt-primary-button-color;
+}
--- a/bookmarks/styles/theme-light.scss
+++ b/bookmarks/styles/theme-light.scss
@@ -2,13 +2,11 @@
@import "variables-light";

 // Import Spectre CSS lib
-@import "../../node_modules/spectre.css/src/spectre";
-@import "../../node_modules/spectre.css/src/autocomplete";
+@import "spectre";

 // Import style modules
@import "base";
-@import "util";
-@import "shared";
-@import "bookmarks";
+@import "responsive";
+@import "bookmark-page";
+@import "bookmark-form";
@import "settings";
-@import "auth";
--- a/bookmarks/styles/util.scss
+++ b/bookmarks/styles/util.scss
@@ -1,21 +0,0 @@
-.spacer {
-  flex: 1 1 0;
-}
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.text-sm {
-  font-size: 0.7rem;
-}
-
-.text-gray-dark {
-  color: $gray-color-dark;
-}
-
-.align-baseline {
-  align-items: baseline;
-}
--- a/bookmarks/styles/variables-dark.scss
+++ b/bookmarks/styles/variables-dark.scss
@@ -21,8 +21,13 @@ $link-color: $primary-color !default;
 $link-color-dark: darken($link-color, 5%) !default;
 $link-color-light: $link-color !default;

+$secondary-link-color: rgba(168, 177, 255, 0.73);
+
 $alternative-color: #59bdb9;
 $alternative-color-dark: #73f1eb;

+$code-bg-color: rgba(255, 255, 255, 0.1);
+$code-shadow-color: rgba(255, 255, 255, 0.2);
+
 /* Dark theme specific */
 $dt-primary-button-color: #5761cb !default;
--- a/bookmarks/styles/variables-light.scss
+++ b/bookmarks/styles/variables-light.scss
@@ -2,3 +2,8 @@ $html-font-size: 18px !default;

 $alternative-color: #05a6a3;
 $alternative-color-dark: darken($alternative-color, 5%);
+
+$secondary-link-color: rgba(87, 85, 217, 0.64);
+
+$code-bg-color: rgba(0, 0, 0, 0.05);
+$code-shadow-color: rgba(0, 0, 0, 0.15);
--- a/bookmarks/templates/bookmarks/archive.html
+++ b/bookmarks/templates/bookmarks/archive.html
@@ -4,43 +4,45 @@
 {% load bookmarks %}

 {% block content %}
-
-  {% include 'bookmarks/bulk_edit/state.html' %}
-
-  <div class="bookmarks-page columns">
+  <div class="bookmarks-page grid columns-md-1"
+       ld-bulk-edit
+       ld-bookmark-page
+       bookmarks-url="{% url 'bookmarks:partials.bookmark_list.archived' %}"
+       tags-url="{% url 'bookmarks:partials.tag_cloud.archived' %}">

    {# Bookmark list #}
-    <section class="content-area column col-8 col-md-12">
-      <div class="content-area-header">
+    <section class="content-area col-2">
+      <div class="content-area-header mb-0">
        <h2>Archived bookmarks</h2>
-        <div class="spacer"></div>
-        {% bookmark_search filters tags mode='archived' %}
-        {% include 'bookmarks/bulk_edit/toggle.html' %}
+        <div class="header-controls">
+          {% bookmark_search bookmark_list.search tag_cloud.tags mode='archived' %}
+          {% include 'bookmarks/bulk_edit/toggle.html' %}
+          <button ld-modal modal-content=".tag-cloud" class="btn ml-2 show-md">Tags</button>
+        </div>
      </div>

-      <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ return_url }}"
-            method="post">
+      <form class="bookmark-actions"
+            action="{{ bookmark_list.action_url|safe }}"
+            method="post" autocomplete="off">
        {% csrf_token %}
-        {% include 'bookmarks/bulk_edit/bar.html' with mode='archive' %}
+        {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_archive' %}

-        {% if empty %}
-          {% include 'bookmarks/empty_bookmarks.html' %}
-        {% else %}
-          {% bookmark_list bookmarks return_url link_target %}
-        {% endif %}
+        <div class="bookmark-list-container">
+          {% include 'bookmarks/bookmark_list.html' %}
+        </div>
      </form>
    </section>

-    {# Tag list #}
-    <section class="content-area column col-4 hide-md">
+    {# Tag cloud #}
+    <section class="content-area col-1 hide-md">
      <div class="content-area-header">
        <h2>Tags</h2>
      </div>
-      {% tag_cloud tags selected_tags %}
+      <div class="tag-cloud-container">
+        {% include 'bookmarks/tag_cloud.html' %}
+      </div>
    </section>
  </div>

-  <script src="{% static "bundle.js" %}"></script>
-  <script src="{% static "shared.js" %}"></script>
-  <script src="{% static "bookmark_list.js" %}"></script>
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
 {% endblock %}
--- a/bookmarks/templates/bookmarks/bookmark_list.html
+++ b/bookmarks/templates/bookmarks/bookmark_list.html
@@ -1,102 +1,128 @@
 {% load static %}
 {% load shared %}
 {% load pagination %}
-{% htmlmin %}
-  <ul class="bookmark-list">
-    {% for bookmark in bookmarks %}
-      <li data-is-bookmark-item>
-        <label class="form-checkbox bulk-edit-toggle">
-          <input type="checkbox" name="bookmark_id" value="{{ bookmark.id }}">
+
+{% if bookmark_list.is_empty %}
+  {% include 'bookmarks/empty_bookmarks.html' %}
+{% else %}
+  <ul class="bookmark-list{% if bookmark_list.show_notes %} show-notes{% endif %}"
+      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 %}>
+        <label ld-bulk-edit-checkbox class="form-checkbox">
+          <input type="checkbox" name="bookmark_id" value="{{ bookmark_item.id }}">
          <i class="form-icon"></i>
        </label>
        <div class="title">
-          <a href="{{ bookmark.url }}" target="{{ link_target }}" rel="noopener"
-             class="{% if bookmark.unread %}text-italic{% endif %}">
-            {% if bookmark.favicon_file and request.user.profile.enable_favicons %}
-              <img src="{% static bookmark.favicon_file %}" alt="">
+          <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener">
+            {% if bookmark_item.favicon_file and bookmark_list.show_favicons %}
+              <img src="{% static bookmark_item.favicon_file %}" alt="">
            {% endif %}
-            {{ bookmark.resolved_title }}
+            {{ bookmark_item.title }}
          </a>
        </div>
+        {% if bookmark_list.show_url %}
+          <div class="url-path truncate">
+            <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener"
+               class="url-display text-sm">
+              {{ bookmark_item.url }}
+            </a>
+          </div>
+        {% endif %}
        <div class="description truncate">
-          {% if bookmark.tag_names %}
+          {% if bookmark_item.tag_names %}
            <span>
-              {% for tag_name in bookmark.tag_names %}
-                <a href="?{% append_to_query_param q=tag_name|hash_tag %}">{{ tag_name|hash_tag }}</a>
+              {% for tag_name in bookmark_item.tag_names %}
+                <a href="?{% add_tag_to_query tag_name %}">{{ tag_name|hash_tag }}</a>
              {% endfor %}
            </span>
          {% endif %}
-          {% if bookmark.tag_names and bookmark.resolved_description %} | {% endif %}
-          {% if bookmark.resolved_description %}
-            <span>{{ bookmark.resolved_description }}</span>
+          {% if bookmark_item.tag_names and bookmark_item.description %} | {% endif %}
+          {% if bookmark_item.description %}
+            <span>{{ bookmark_item.description }}</span>
          {% endif %}
        </div>
-        <div class="actions">
-          {% if request.user.profile.bookmark_date_display == 'relative' %}
-            <span class="date-label text-gray text-sm">
-              {% if bookmark.web_archive_snapshot_url %}
-                <a href="{{ bookmark.web_archive_snapshot_url }}"
-                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
-                   rel="noopener">
-              {% endif %}
-              <span>{{ bookmark.date_added|humanize_relative_date }}</span>
-              {% if bookmark.web_archive_snapshot_url %}
-                <span>∞</span>
-                </a>
-              {% endif %}
-            </span>
-            <span class="text-gray text-sm">|</span>
+        {% if bookmark_item.notes %}
+          <div class="notes bg-gray text-gray-dark">
+            <div class="notes-content">
+              {% markdown bookmark_item.notes %}
+            </div>
+          </div>
+        {% endif %}
+        <div class="actions text-gray text-sm">
+          {% if bookmark_item.display_date %}
+            {% if bookmark_item.web_archive_snapshot_url %}
+              <a href="{{ bookmark_item.web_archive_snapshot_url }}"
+                 title="Show snapshot on the Internet Archive Wayback Machine"
+                 target="{{ bookmark_list.link_target }}"
+                 rel="noopener">
+                {{ bookmark_item.display_date }} ∞
+              </a>
+            {% else %}
+              <span>{{ bookmark_item.display_date }}</span>
+            {% endif %}
+            <span class="separator">|</span>
          {% endif %}
-          {% if request.user.profile.bookmark_date_display == 'absolute' %}
-            <span class="date-label text-gray text-sm">
-              {% if bookmark.web_archive_snapshot_url %}
-                <a href="{{ bookmark.web_archive_snapshot_url }}"
-                   title="Show snapshot on the Internet Archive Wayback Machine" target="{{ link_target }}"
-                   rel="noopener">
-              {% endif %}
-              <span>{{ bookmark.date_added|humanize_absolute_date }}</span>
-              {% if bookmark.web_archive_snapshot_url %}
-                <span>∞</span>
-                </a>
-              {% endif %}
-            </span>
-            <span class="text-gray text-sm">|</span>
-          {% endif %}
-          {% if bookmark.owner == request.user %}
+          {% if bookmark_item.is_editable %}
            {# Bookmark owner actions #}
-            <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}"
-               class="btn btn-link btn-sm">Edit</a>
-            {% if bookmark.is_archived %}
-              <button type="submit" name="unarchive" value="{{ bookmark.id }}"
+            <a href="{% url 'bookmarks:edit' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}">Edit</a>
+            {% if bookmark_item.is_archived %}
+              <button type="submit" name="unarchive" value="{{ bookmark_item.id }}"
                      class="btn btn-link btn-sm">Unarchive
              </button>
            {% else %}
-              <button type="submit" name="archive" value="{{ bookmark.id }}"
+              <button type="submit" name="archive" value="{{ bookmark_item.id }}"
                      class="btn btn-link btn-sm">Archive
              </button>
            {% endif %}
-            <button type="submit" name="remove" value="{{ bookmark.id }}"
-                    class="btn btn-link btn-sm btn-confirmation">Remove
+            <button ld-confirm-button type="submit" name="remove" value="{{ bookmark_item.id }}"
+                    class="btn btn-link btn-sm">Remove
            </button>
-            {% if bookmark.unread %}
-              <span class="text-gray text-sm">|</span>
-              <button type="submit" name="mark_as_read" value="{{ bookmark.id }}"
-                      class="btn btn-link btn-sm">Mark as read
-              </button>
-            {% endif %}
          {% else %}
            {# Shared bookmark actions #}
-            <span class="text-gray text-sm">Shared by
-              <a class="text-gray"
-                 href="?{% replace_query_param user=bookmark.owner.username %}">{{ bookmark.owner.username }}</a>
+            <span>Shared by
+              <a href="?{% replace_query_param user=bookmark_item.owner.username %}">{{ bookmark_item.owner.username }}</a>
            </span>
          {% endif %}
+          {% if bookmark_item.has_extra_actions %}
+            <div class="extra-actions">
+              <span class="separator hide-sm">|</span>
+              {% if bookmark_item.show_mark_as_read %}
+                <button type="submit" name="mark_as_read" value="{{ bookmark_item.id }}"
+                        class="btn btn-link btn-sm btn-icon"
+                        ld-confirm-button confirm-icon="ld-icon-read" confirm-question="Mark as read?">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                    <use xlink:href="#ld-icon-unread"></use>
+                  </svg>
+                  Unread
+                </button>
+              {% endif %}
+              {% if bookmark_item.show_unshare %}
+                <button type="submit" name="unshare" value="{{ bookmark_item.id }}"
+                        class="btn btn-link btn-sm btn-icon"
+                        ld-confirm-button confirm-icon="ld-icon-unshare" confirm-question="Unshare?">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                    <use xlink:href="#ld-icon-share"></use>
+                  </svg>
+                  Shared
+                </button>
+              {% endif %}
+              {% if bookmark_item.show_notes_button %}
+                <button type="button" class="btn btn-link btn-sm btn-icon toggle-notes">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+                    <use xlink:href="#ld-icon-note"></use>
+                  </svg>
+                  Notes
+                </button>
+              {% endif %}
+            </div>
+          {% endif %}
        </div>
      </li>
    {% endfor %}
  </ul>

  <div class="bookmark-pagination">
-    {% pagination bookmarks %}
+    {% pagination bookmark_list.bookmarks_page %}
  </div>
-{% endhtmlmin %}
+{% endif %}
--- a/bookmarks/templates/bookmarks/bulk_edit/bar.html
+++ b/bookmarks/templates/bookmarks/bulk_edit/bar.html
@@ -1,34 +1,39 @@
 {% load shared %}
 {% htmlmin %}
-<div class="bulk-edit-bar">
-  <div class="bulk-edit-actions bg-gray">
-    <label class="form-checkbox bulk-edit-all-toggle">
-      <input type="checkbox" style="display: none">
-      <i class="form-icon"></i>
-    </label>
-    {% if mode == 'archive' %}
-      <button type="submit" name="bulk_unarchive" class="btn btn-link btn-sm btn-confirmation"
-              title="Unarchive selected bookmarks">Unarchive
-      </button>
-    {% else %}
-      <button type="submit" name="bulk_archive" class="btn btn-link btn-sm btn-confirmation"
-              title="Archive selected bookmarks">Archive
-      </button>
-    {% endif %}
-    <span class="text-sm text-gray-dark">•</span>
-    <button type="submit" name="bulk_delete" class="btn btn-link btn-sm btn-confirmation"
-            title="Delete selected bookmarks">Delete
-    </button>
-    <span class="text-sm text-gray-dark">•</span>
-    <span class="text-sm text-gray-dark"><label for="bulk-edit-tags-input">Tags:</label></span>
-    <input id="bulk-edit-tags-input" name="bulk_tag_string" class="form-input input-sm"
-           placeholder="&nbsp;">
-    <button type="submit" name="bulk_tag" class="btn btn-link btn-sm"
-            title="Add tags to selected bookmarks">Add
-    </button>
-    <button type="submit" name="bulk_untag" class="btn btn-link btn-sm"
-            title="Remove tags from selected bookmarks">Remove
-    </button>
+  <div class="bulk-edit-bar">
+    <div class="bulk-edit-actions bg-gray">
+      <label ld-bulk-edit-checkbox all class="form-checkbox">
+        <input type="checkbox">
+        <i class="form-icon"></i>
+      </label>
+      <select name="bulk_action" class="form-select select-sm">
+        {% if not 'bulk_archive' in disable_actions %}
+          <option value="bulk_archive">Archive</option>
+        {% endif %}
+        {% if not 'bulk_unarchive' in disable_actions %}
+          <option value="bulk_unarchive">Unarchive</option>
+        {% endif %}
+        <option value="bulk_delete">Delete</option>
+        <option value="bulk_tag">Add tags</option>
+        <option value="bulk_untag">Remove tags</option>
+        <option value="bulk_read">Mark as read</option>
+        <option value="bulk_unread">Mark as unread</option>
+        {% if request.user_profile.enable_sharing %}
+          <option value="bulk_share">Share</option>
+          <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>
+      <button ld-confirm-button type="submit" name="bulk_execute" class="btn btn-link btn-sm">Execute</button>
+
+      <label class="form-checkbox select-across d-none">
+        <input type="checkbox" name="bulk_select_across">
+        <i class="form-icon"></i>
+        All pages (<span class="total">{{ bookmark_list.bookmarks_total }}</span> bookmarks)
+      </label>
+    </div>
  </div>
-</div>
 {% endhtmlmin %}
--- a/bookmarks/templates/bookmarks/bulk_edit/state.html
+++ b/bookmarks/templates/bookmarks/bulk_edit/state.html
@@ -1 +0,0 @@
-<input id="bulk-edit-mode" type="checkbox">
--- a/bookmarks/templates/bookmarks/bulk_edit/toggle.html
+++ b/bookmarks/templates/bookmarks/bulk_edit/toggle.html
@@ -1,9 +1,7 @@
-<label for="bulk-edit-mode" class="hide-sm">
-    <span class="btn" title="Bulk edit">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20px"
-             height="20px">
-            <path
-                d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
-        </svg>
-    </span>
-</label>
+<button ld-bulk-edit-active-toggle class="btn hide-sm ml-2" title="Bulk edit">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20px"
+       height="20px">
+    <path
+        d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
+  </svg>
+</button>
--- a/bookmarks/templates/bookmarks/edit.html
+++ b/bookmarks/templates/bookmarks/edit.html
@@ -2,15 +2,13 @@
 {% load bookmarks %}

 {% block content %}
-  <div class="columns">
-    <section class="content-area column col-12">
-      <div class="content-area-header">
-        <h2>Edit bookmark</h2>
-      </div>
-      <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post"
-            class="col-6 col-md-12" novalidate>
-        {% bookmark_form form return_url bookmark_id %}
-      </form>
-    </section>
-  </div>
+  <section class="content-area">
+    <div class="content-area-header">
+      <h2>Edit bookmark</h2>
+    </div>
+    <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post"
+          class="width-50 width-md-100" novalidate>
+      {% bookmark_form form return_url bookmark_id %}
+    </form>
+  </section>
 {% endblock %}
--- a/bookmarks/templates/bookmarks/form.html
+++ b/bookmarks/templates/bookmarks/form.html
@@ -21,7 +21,7 @@
  </div>
  <div class="form-group">
    <label for="{{ form.tag_string.id_for_label }}" class="form-label">Tags</label>
-    {{ form.tag_string|add_class:"form-input"|attr:"autocomplete:off" }}
+    {{ form.tag_string|add_class:"form-input"|attr:"ld-tag-autocomplete"|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
@@ -67,6 +67,19 @@
    </div>
    {{ form.description.errors }}
  </div>
+  <div class="form-group">
+    <details class="notes"{% if form.has_notes %} open{% endif %}>
+      <summary>
+        <span class="form-label d-inline-block">Notes</span>
+      </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>
+      {{ form.notes.errors }}
+    </details>
+  </div>
  <div class="form-group">
    <label for="{{ form.unread.id_for_label }}" class="form-checkbox">
      {{ form.unread }}
@@ -77,7 +90,7 @@
      Unread bookmarks can be filtered for, and marked as read after you had a chance to look at them.
    </div>
  </div>
-  {% if request.user.profile.enable_sharing %}
+  {% if request.user_profile.enable_sharing %}
    <div class="form-group">
      <label for="{{ form.shared.id_for_label }}" class="form-checkbox">
        {{ form.shared }}
@@ -85,7 +98,11 @@
        <span>Share</span>
      </label>
      <div class="form-input-hint">
-        Share this bookmark with other users.
+        {% if request.user_profile.enable_public_sharing %}
+          Share this bookmark with other registered users and anonymous users.
+        {% else %}
+          Share this bookmark with other registered users.
+        {% endif %}
      </div>
    </div>
  {% endif %}
@@ -99,25 +116,7 @@
    <a href="{{ cancel_url }}" class="btn">Nevermind</a>
  </div>

-  {# Replace tag input with auto-complete component #}
-  <script src="{% static "bundle.js" %}"></script>
-  <script type="application/javascript">
-    const wrapper = document.createElement('div');
-    const tagInput = document.getElementById('{{ form.tag_string.id_for_label }}');
-    const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
-
-    new linkding.TagAutoComplete({
-      target: wrapper,
-      props: {
-        id: '{{ form.tag_string.id_for_label }}',
-        name: '{{ form.tag_string.name }}',
-        value: tagInput.value,
-        apiClient: apiClient
-      }
-    });
-
-    tagInput.parentElement.replaceChild(wrapper, tagInput);
-  </script>
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
  <script type="application/javascript">
    /**
     * - Pre-fill title and description placeholders with metadata from website as soon as URL changes
@@ -128,6 +127,8 @@
      const urlInput = document.getElementById('{{ form.url.id_for_label }}');
      const titleInput = document.getElementById('{{ form.title.id_for_label }}');
      const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');
+      const notesDetails = document.querySelector('form details.notes');
+      const notesInput = document.getElementById('{{ form.notes.id_for_label }}');
      const tagsInput = document.getElementById('{{ form.tag_string.id_for_label }}');
      const unreadCheckbox = document.getElementById('{{ form.unread.id_for_label }}');
      const sharedCheckbox = document.getElementById('{{ form.shared.id_for_label }}');
@@ -149,11 +150,17 @@
      }

      function updateInput(input, value) {
-          input.value = value;
+        if (!input) {
+          return;
+        }
+        input.value = value;
      }

      function updateCheckbox(input, value) {
-          input.checked = value;
+        if (!input) {
+          return;
+        }
+        input.checked = value;
      }

      function checkUrl() {
@@ -179,8 +186,10 @@

            if (existingBookmark && !editedBookmarkId) {
              bookmarkExistsHint.style['display'] = 'block';
+              notesDetails.open = !!existingBookmark.notes;
              updateInput(titleInput, existingBookmark.title);
              updateInput(descriptionInput, existingBookmark.description);
+              updateInput(notesInput, existingBookmark.notes);
              updateInput(tagsInput, existingBookmark.tag_names.join(" "));
              updateCheckbox(unreadCheckbox, existingBookmark.unread);
              updateCheckbox(sharedCheckbox, existingBookmark.shared);
@@ -201,6 +210,9 @@
        });
      }

+      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) {
@@ -213,9 +225,6 @@
        updatePlaceholder(titleInput, websiteTitleInput.value);
        updatePlaceholder(descriptionInput, websiteDescriptionInput.value);
      }
-
-      setupEditAutoValueButton(titleInput);
-      setupEditAutoValueButton(descriptionInput);
    })();
  </script>
 </div>
--- a/bookmarks/templates/bookmarks/index.html
+++ b/bookmarks/templates/bookmarks/index.html
@@ -4,43 +4,45 @@
 {% load bookmarks %}

 {% block content %}
-
-  {% include 'bookmarks/bulk_edit/state.html' %}
-
-  <div class="bookmarks-page columns">
+  <div class="bookmarks-page grid columns-md-1"
+       ld-bulk-edit
+       ld-bookmark-page
+       bookmarks-url="{% url 'bookmarks:partials.bookmark_list.active' %}"
+       tags-url="{% url 'bookmarks:partials.tag_cloud.active' %}">

    {# Bookmark list #}
-    <section class="content-area column col-8 col-md-12">
-      <div class="content-area-header">
+    <section class="content-area col-2">
+      <div class="content-area-header mb-0">
        <h2>Bookmarks</h2>
-        <div class="spacer"></div>
-        {% bookmark_search filters tags %}
-        {% include 'bookmarks/bulk_edit/toggle.html' %}
+        <div class="header-controls">
+          {% bookmark_search bookmark_list.search tag_cloud.tags %}
+          {% include 'bookmarks/bulk_edit/toggle.html' %}
+          <button ld-modal modal-content=".tag-cloud" class="btn ml-2 show-md">Tags</button>
+        </div>
      </div>

-      <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ return_url }}"
-            method="post">
+      <form class="bookmark-actions"
+            action="{{ bookmark_list.action_url|safe }}"
+            method="post" autocomplete="off">
        {% csrf_token %}
-        {% include 'bookmarks/bulk_edit/bar.html' with mode='default' %}
+        {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_unarchive' %}

-        {% if empty %}
-          {% include 'bookmarks/empty_bookmarks.html' %}
-        {% else %}
-          {% bookmark_list bookmarks return_url link_target %}
-        {% endif %}
+        <div class="bookmark-list-container">
+          {% include 'bookmarks/bookmark_list.html' %}
+        </div>
      </form>
    </section>

-    {# Tag list #}
-    <section class="content-area column col-4 hide-md">
-      <div class="content-area-header">
+    {# Tag cloud #}
+    <section class="content-area col-1 hide-md">
+      <div class="content-area-header mb-4">
        <h2>Tags</h2>
      </div>
-      {% tag_cloud tags selected_tags %}
+      <div class="tag-cloud-container">
+        {% include 'bookmarks/tag_cloud.html' %}
+      </div>
    </section>
  </div>

-  <script src="{% static "bundle.js" %}"></script>
-  <script src="{% static "shared.js" %}"></script>
-  <script src="{% static "bookmark_list.js" %}"></script>
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
 {% endblock %}
--- a/bookmarks/templates/bookmarks/layout.html
+++ b/bookmarks/templates/bookmarks/layout.html
@@ -8,6 +8,8 @@
  <meta charset="UTF-8">
  <link rel="icon" href="{% static 'favicon.png' %}"/>
  <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
+  <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">
@@ -15,22 +17,82 @@
  <title>linkding</title>
  {# Include SASS styles, files are resolved from bookmarks/styles #}
  {# Include specific theme variant based on user profile setting #}
-  {% if request.user.profile.theme == 'light' %}
-    <link href="{% sass_src 'theme-light.scss' %}" rel="stylesheet" type="text/css"/>
-  {% elif request.user.profile.theme == 'dark' %}
-    <link href="{% sass_src 'theme-dark.scss' %}" rel="stylesheet" type="text/css"/>
+  {% if request.user_profile.theme == 'light' %}
+    <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+  {% elif request.user_profile.theme == 'dark' %}
+    <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
  {% else %}
    {# Use auto theme as fallback #}
-    <link href="{% sass_src 'theme-dark.scss' %}" rel="stylesheet" type="text/css"
+    <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
          media="(prefers-color-scheme: dark)"/>
-    <link href="{% sass_src 'theme-light.scss' %}" rel="stylesheet" type="text/css"
+    <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
          media="(prefers-color-scheme: light)"/>
  {% endif %}
 </head>
-<body>
-<header>
+<body ld-global-shortcuts>
+
+<div class="d-none">
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="ld-icon-unread" 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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
+      <path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
+      <path d="M3 6l0 13"></path>
+      <path d="M12 6l0 13"></path>
+      <path d="M21 6l0 13"></path>
+    </symbol>
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="ld-icon-read" 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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 5.899 -1.096"></path>
+      <path d="M3 6a9 9 0 0 1 2.114 -.884m3.8 -.21c1.07 .17 2.116 .534 3.086 1.094a9 9 0 0 1 9 0"></path>
+      <path d="M3 6v13"></path>
+      <path d="M12 6v2m0 4v7"></path>
+      <path d="M21 6v11"></path>
+      <path d="M3 3l18 18"></path>
+    </symbol>
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="ld-icon-share" 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="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      <path d="M8.7 10.7l6.6 -3.4"></path>
+      <path d="M8.7 13.3l6.6 3.4"></path>
+    </symbol>
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="ld-icon-unshare" 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="M6 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      <path d="M18 6m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
+      <path d="M15.861 15.896a3 3 0 0 0 4.265 4.22m.578 -3.417a3.012 3.012 0 0 0 -1.507 -1.45"></path>
+      <path d="M8.7 10.7l1.336 -.688m2.624 -1.352l2.64 -1.36"></path>
+      <path d="M8.7 13.3l6.6 3.4"></path>
+      <path d="M3 3l18 18"></path>
+    </symbol>
+  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <symbol id="ld-icon-note" 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="M5 3m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z"></path>
+      <path d="M9 7l6 0"></path>
+      <path d="M9 11l6 0"></path>
+      <path d="M9 15l4 0"></path>
+    </symbol>
+  </svg>
+</div>
+
+<header class="container">
  {% if has_toasts %}
-    <div class="toasts container grid-lg">
+    <div class="toasts">
      <form action="{% url 'bookmarks:toasts.acknowledge' %}?return_url={{ request.path | urlencode }}" method="post">
        {% csrf_token %}
        {% for toast in toast_messages %}
@@ -42,22 +104,21 @@
      </form>
    </div>
  {% endif %}
-  <div class="navbar container grid-lg">
-    <section class="navbar-section">
-      <a href="{% url 'bookmarks:index' %}" class="navbar-brand text-bold">
-        <img class="logo" src="{% static 'logo.png' %}" alt="Application logo">
-        <h1>linkding</h1>
-      </a>
-    </section>
-    {# Only show nav items menu when logged in #}
+  <div class="d-flex justify-between">
+    <a href="{% url 'bookmarks:index' %}" class="d-flex align-center">
+      <img class="logo" src="{% static 'logo.png' %}" alt="Application logo">
+      <h1>LINKDING</h1>
+    </a>
    {% if request.user.is_authenticated %}
-      <section class="navbar-section">
-        {% include 'bookmarks/nav_menu.html' %}
-      </section>
+      {# Only show nav items menu when logged in #}
+      {% include 'bookmarks/nav_menu.html' %}
+    {% elif has_public_shares %}
+      {# Otherwise show link to shared bookmarks if there are publicly shared bookmarks #}
+      <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared bookmarks</a>
    {% endif %}
  </div>
 </header>
-<div class="content container grid-lg">
+<div class="content container">
  {% block content %}
  {% endblock %}
 </div>
--- a/bookmarks/templates/bookmarks/nav_menu.html
+++ b/bookmarks/templates/bookmarks/nav_menu.html
@@ -20,13 +20,13 @@
      <li>
        <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
      </li>
-      {% if request.user.profile.enable_sharing %}
+      {% if request.user_profile.enable_sharing %}
        <li>
          <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
        </li>
      {% endif %}
      <li>
-        <a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
+        <a href="{% url 'bookmarks:index' %}?unread=yes" class="btn btn-link">Unread</a>
      </li>
      <li>
        <a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
@@ -44,8 +44,8 @@
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
    </svg>
  </a>
-  <div class="dropdown dropdown-right">
-    <a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
+  <div ld-dropdown class="dropdown dropdown-right">
+    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
           style="width: 24px; height: 24px">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
@@ -59,13 +59,13 @@
      <li style="padding-left: 1rem">
        <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
      </li>
-      {% if request.user.profile.enable_sharing %}
+      {% if request.user_profile.enable_sharing %}
        <li style="padding-left: 1rem">
          <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
        </li>
      {% endif %}
      <li style="padding-left: 1rem">
-        <a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
+        <a href="{% url 'bookmarks:index' %}?unread=yes" class="btn btn-link">Unread</a>
      </li>
      <li style="padding-left: 1rem">
        <a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
@@ -80,22 +80,3 @@
  </div>
 </div>
 {% endhtmlmin %}
-<script>
-  // Hide mobile menu on outside click
-  // The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like
-  // Safari will not trigger a blur event when clicking on a non-focusable element, so we have to simulate the
-  // behaviour through Javascript
-  const mobileNavMenuTrigger = document.getElementById('mobile-nav-menu-trigger');
-
-  function mobileNavMenuOutsideClickHandler(clickEvent) {
-    if (mobileNavMenuTrigger.parentElement.contains(clickEvent.target)) return
-    mobileNavMenuTrigger.blur();
-  }
-
-  mobileNavMenuTrigger.addEventListener('focus', function () {
-    document.addEventListener('click', mobileNavMenuOutsideClickHandler);
-  })
-  mobileNavMenuTrigger.addEventListener('blur', function () {
-    document.removeEventListener('click', mobileNavMenuOutsideClickHandler);
-  })
-</script>
--- a/bookmarks/templates/bookmarks/new.html
+++ b/bookmarks/templates/bookmarks/new.html
@@ -2,14 +2,12 @@
 {% load bookmarks %}

 {% block content %}
-  <div class="columns">
-    <section class="content-area column col-12">
-      <div class="content-area-header">
-        <h2>New bookmark</h2>
-      </div>
-      <form action="{% url 'bookmarks:new' %}" method="post" class="col-6 col-md-12" novalidate>
-        {% bookmark_form form return_url auto_close=auto_close %}
-      </form>
-    </section>
-  </div>
+  <section class="content-area">
+    <div class="content-area-header">
+      <h2>New bookmark</h2>
+    </div>
+    <form action="{% url 'bookmarks:new' %}" method="post" class="width-50 width-md-100" novalidate>
+      {% bookmark_form form return_url auto_close=auto_close %}
+    </form>
+  </section>
 {% endblock %}
--- a/bookmarks/templates/bookmarks/search.html
+++ b/bookmarks/templates/bookmarks/search.html
@@ -1,43 +1,108 @@
-<div class="search">
-  <form action="" method="get" role="search">
-    <div class="input-group">
-            <span id="search-input-wrap">
-                <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
-                       value="{{ filters.query }}">
-            </span>
-      <input type="submit" value="Search" class="btn input-group-btn">
-    </div>
-    {% if filters.user %}
-      <input type="hidden" name="user" value="{{ filters.user }}">
-    {% endif %}
+{% load widget_tweaks %}
+
+<div class="search-container">
+  <form id="search" class="input-group" action="" method="get" role="search">
+    <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
+           value="{{ search.q }}">
+    <input type="submit" value="Search" class="btn input-group-btn">
+    {% for hidden_field in search_form.hidden_fields %}
+      {{ hidden_field }}
+    {% endfor %}
  </form>
+  <div ld-dropdown class="search-options dropdown dropdown-right">
+    <button type="button" class="btn dropdown-toggle{% if search.has_modified_preferences %} badge{% endif %}">
+      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
+        <path d="M6 4v4"></path>
+        <path d="M6 12v8"></path>
+        <path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
+        <path d="M12 4v10"></path>
+        <path d="M12 18v2"></path>
+        <path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
+        <path d="M18 4v1"></path>
+        <path d="M18 9v11"></path>
+      </svg>
+    </button>
+    <div class="menu text-sm" tabindex="0">
+      <form id="search_preferences" action="" method="post">
+        {% csrf_token %}
+        {% if 'sort' in preferences_form.editable_fields %}
+          <div class="form-group">
+            <label for="{{ preferences_form.sort.id_for_label }}"
+                   class="form-label{% if 'sort' in search.modified_params %} text-bold{% endif %}">Sort by</label>
+            {{ preferences_form.sort|add_class:"form-select select-sm" }}
+          </div>
+        {% endif %}
+        {% if 'shared' in preferences_form.editable_fields %}
+          <div class="form-group radio-group">
+            <div class="form-label{% if 'shared' in search.modified_params %} text-bold{% endif %}">Shared filter</div>
+            {% for radio in preferences_form.shared %}
+              <label for="{{ radio.id_for_label }}" class="form-radio form-inline">
+                {{ radio.tag }}
+                <i class="form-icon"></i>
+                {{ radio.choice_label }}
+              </label>
+            {% endfor %}
+          </div>
+        {% endif %}
+        {% if 'unread' in preferences_form.editable_fields %}
+          <div class="form-group radio-group">
+            <div class="form-label{% if 'unread' in search.modified_params %} text-bold{% endif %}">Unread filter</div>
+            {% for radio in preferences_form.unread %}
+              <label for="{{ radio.id_for_label }}" class="form-radio form-inline">
+                {{ radio.tag }}
+                <i class="form-icon"></i>
+                {{ radio.choice_label }}
+              </label>
+            {% endfor %}
+          </div>
+        {% endif %}
+        <div class="actions">
+          <button type="submit" class="btn btn-sm btn-primary" name="apply">Apply</button>
+          {% if request.user.is_authenticated %}
+            <button type="submit" class="btn btn-sm" name="save">Save as default</button>
+          {% endif %}
+        </div>
+
+        {% for hidden_field in preferences_form.hidden_fields %}
+          {{ hidden_field }}
+        {% endfor %}
+      </form>
+    </div>
+  </div>
 </div>

+
 {# Replace search input with auto-complete component #}
 <script type="application/javascript">
  window.addEventListener("load", function () {
    const currentTagsString = '{{ tags_string }}';
    const currentTags = currentTagsString.split(' ');
    const uniqueTags = [...new Set(currentTags)]
-    const filters = {
-      q: '{{ filters.query }}',
-      user: '{{ filters.user }}',
+    const search = {
+      q: '{{ search.q }}',
+      user: '{{ search.user }}',
+      shared: '{{ search.shared }}',
+      unread: '{{ search.unread }}',
    }
    const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
-    const wrapper = document.getElementById('search-input-wrap')
-    const newWrapper = document.createElement('div')
+    const input = document.querySelector('#search input[name="q"]')
+    const wrapper = document.createElement('div')
    new linkding.SearchAutoComplete({
-      target: newWrapper,
+      target: wrapper,
      props: {
        name: 'q',
        placeholder: 'Search for words or #tags',
-        value: '{{ filters.query }}',
+        value: input.value,
        tags: uniqueTags,
        mode: '{{ mode }}',
+        linkTarget: '{{ request.user_profile.bookmark_link_target }}',
        apiClient,
-        filters,
+        search,
      }
    })
-    wrapper.parentElement.replaceChild(newWrapper, wrapper)
+    input.replaceWith(wrapper.firstElementChild);
  });
 </script>
--- a/bookmarks/templates/bookmarks/shared.html
+++ b/bookmarks/templates/bookmarks/shared.html
@@ -4,45 +4,48 @@
 {% load bookmarks %}

 {% block content %}
-
-  <div class="bookmarks-page columns">
+  <div class="bookmarks-page grid columns-md-1"
+       ld-bookmark-page
+       bookmarks-url="{% url 'bookmarks:partials.bookmark_list.shared' %}"
+       tags-url="{% url 'bookmarks:partials.tag_cloud.shared' %}">

    {# Bookmark list #}
-    <section class="content-area column col-8 col-md-12">
+    <section class="content-area col-2">
      <div class="content-area-header">
        <h2>Shared bookmarks</h2>
-        <div class="spacer"></div>
-        {% bookmark_search filters tags mode='shared' %}
+        <div class="header-controls">
+          {% bookmark_search bookmark_list.search tag_cloud.tags mode='shared' %}
+          <button ld-modal modal-content=".tag-cloud" class="btn ml-2 show-md">Tags</button>
+        </div>
      </div>

-      <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ return_url }}"
+      <form class="bookmark-actions" action="{{ bookmark_list.action_url|safe }}"
            method="post">
        {% csrf_token %}

-        {% if empty %}
-          {% include 'bookmarks/empty_bookmarks.html' %}
-        {% else %}
-          {% bookmark_list bookmarks return_url link_target %}
-        {% endif %}
+        <div class="bookmark-list-container">
+          {% include 'bookmarks/bookmark_list.html' %}
+        </div>
      </form>
    </section>

    {# Filters #}
-    <section class="content-area column col-4 hide-md">
+    <section class="content-area col-1 hide-md">
      <div class="content-area-header">
        <h2>User</h2>
      </div>
      <div>
-        {% user_select filters users %}
+        {% user_select bookmark_list.search users %}
        <br>
      </div>
      <div class="content-area-header">
        <h2>Tags</h2>
      </div>
-      {% tag_cloud tags selected_tags %}
+      <div class="tag-cloud-container">
+        {% include 'bookmarks/tag_cloud.html' %}
+      </div>
    </section>
  </div>

-  <script src="{% static "bundle.js" %}"></script>
-  <script src="{% static "shared.js" %}"></script>
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
 {% endblock %}
--- a/bookmarks/templates/bookmarks/tag_cloud.html
+++ b/bookmarks/templates/bookmarks/tag_cloud.html
@@ -1,10 +1,10 @@
 {% load shared %}
 {% htmlmin %}
  <div class="tag-cloud">
-    {% if has_selected_tags %}
+    {% if tag_cloud.has_selected_tags %}
      <p class="selected-tags">
-        {% for tag in selected_tags %}
-          <a href="?{% remove_from_query_param q=tag.name|hash_tag %}"
+        {% for tag in tag_cloud.selected_tags %}
+          <a href="?{% remove_tag_from_query tag.name %}"
             class="text-bold mr-2">
            <span>-{{ tag.name }}</span>
          </a>
@@ -12,19 +12,19 @@
      </p>
    {% endif %}
    <div class="unselected-tags">
-      {% for group in groups %}
+      {% for group in tag_cloud.groups %}
        <p class="group">
          {% for tag in group.tags %}
            {# Highlight first char of first tag in group #}
            {% if forloop.counter == 1 %}
-              <a href="?{% append_to_query_param q=tag.name|hash_tag %}"
+              <a href="?{% add_tag_to_query tag.name %}"
                 class="mr-2" data-is-tag-item>
                <span
                    class="highlight-char">{{ tag.name|first_char }}</span><span>{{ tag.name|remaining_chars:1 }}</span>
              </a>
            {% else %}
              {# Render remaining tags normally #}
-              <a href="?{% append_to_query_param q=tag.name|hash_tag %}"
+              <a href="?{% add_tag_to_query tag.name %}"
                 class="mr-2" data-is-tag-item>
                <span>{{ tag.name }}</span>
              </a>
--- a/bookmarks/templates/bookmarks/user_select.html
+++ b/bookmarks/templates/bookmarks/user_select.html
@@ -1,19 +1,12 @@
+{% load widget_tweaks %}
+
 <form id="user-select" action="" method="get">
-  {% if filters.query %}
-    <input type="hidden" name="q" value="{{ filters.query }}">
-  {% endif %}
+  {% for hidden_field in form.hidden_fields %}
+    {{ hidden_field }}
+  {% endfor %}
  <div class="form-group">
    <div class="d-flex">
-      <select name="user" class="form-select">
-        <option value="">Everyone</option>
-        {% for user in users %}
-          <option value="{{ user.username }}"
-                  {% if user.username == filters.user %}selected{% endif %}
-                  data-is-user-option>
-            {{ user.username }}
-          </option>
-        {% endfor %}
-      </select>
+      {{ form.user|add_class:"form-select" }}
      <noscript>
        <button type="submit" class="btn btn-link ml-2">Apply</button>
      </noscript>
--- a/bookmarks/templates/django_registration/registration_complete.html
+++ b/bookmarks/templates/django_registration/registration_complete.html
@@ -4,13 +4,5 @@
 {% block title %}Registration complete{% endblock %}

 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-12">
-                <p>Registration complete. You can now use the application.</p>
-            </section>
-        </div>
-    </div>
-
+  <p>Registration complete. You can now use the application.</p>
 {% endblock %}
--- a/bookmarks/templates/django_registration/registration_form.html
+++ b/bookmarks/templates/django_registration/registration_form.html
@@ -4,41 +4,35 @@
 {% block title %}Registration{% endblock %}

 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Register</h2>
-                </div>
-                <form method="post" action="{% url 'django_registration_register' %}">
-                    {% csrf_token %}
-                    <div class="form-group  {% if form.errors.username %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
-                        {{ form.username|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.username }}</div>
-                    </div>
-                    <div class="form-group {% if form.errors.email %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.email.id_for_label }}">Email</label>
-                        {{ form.email|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.email }}</div>
-                    </div>
-                    <div class="form-group {% if form.errors.password1 %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.password1.id_for_label }}">Password</label>
-                        {{ form.password1|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.password1 }}</div>
-                    </div>
-                    <div class="form-group {% if form.errors.password2 %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.password2.id_for_label }}">Confirm Password</label>
-                        {{ form.password2|add_class:'form-input' }}
-                        <div class="form-input-hint">{{ form.errors.password2 }}</div>
-                    </div>
-                    <br/>
-                    <input type="submit" value="Register" class="btn btn-primary col-md-12">
-                    <input type="hidden" name="next" value="{{ next }}">
-                </form>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Register</h2>
    </div>
-
+    <form method="post" action="{% url 'django_registration_register' %}" novalidate>
+      {% csrf_token %}
+      <div class="form-group  {% if form.errors.username %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
+        {{ form.username|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.username }}</div>
+      </div>
+      <div class="form-group {% if form.errors.email %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.email.id_for_label }}">Email</label>
+        {{ form.email|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.email }}</div>
+      </div>
+      <div class="form-group {% if form.errors.password1 %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.password1.id_for_label }}">Password</label>
+        {{ form.password1|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.password1 }}</div>
+      </div>
+      <div class="form-group {% if form.errors.password2 %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.password2.id_for_label }}">Confirm Password</label>
+        {{ form.password2|add_class:'form-input'|attr:"placeholder: " }}
+        <div class="form-input-hint">{{ form.errors.password2 }}</div>
+      </div>
+      <br/>
+      <input type="submit" value="Register" class="btn btn-primary btn-wide">
+      <input type="hidden" name="next" value="{{ next }}">
+    </form>
+  </section>
 {% endblock %}
--- a/bookmarks/templates/registration/login.html
+++ b/bookmarks/templates/registration/login.html
@@ -4,46 +4,35 @@
 {% block title %}Login{% endblock %}

 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Login</h2>
-                </div>
-                <form method="post" action="{% url 'login' %}">
-                    {% csrf_token %}
-                    {% if form.errors %}
-                        <div class="form-group has-error">
-                            <p class="form-input-hint">Your username and password didn't match. Please try again.</p>
-                        </div>
-                    {% endif %}
-                    <div class="form-group">
-                        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
-                        {{ form.username|add_class:'form-input'|attr:"placeholder: " }}
-                    </div>
-                    <div class="form-group">
-                        <label class="form-label" for="{{ form.password.id_for_label }}">Password</label>
-                        {{ form.password|add_class:'form-input'|attr:"placeholder: " }}
-                    </div>
-
-                    <br/>
-                    <div class="columns">
-                        <div class="column col-3">
-                            <input type="submit" value="Login" class="btn btn-primary">
-                            <input type="hidden" name="next" value="{{ next }}">
-                        </div>
-                        {% if allow_registration %}
-                        <div class="column col-auto col-ml-auto">
-                            <a href="{% url 'django_registration_register' %}" class="btn btn-link">Register</a>
-                        </div>
-                        {% endif %}
-                    </div>
-
-                </form>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Login</h2>
    </div>
+    <form method="post" action="{% url 'login' %}">
+      {% csrf_token %}
+      {% if form.errors %}
+        <div class="form-group has-error">
+          <p class="form-input-hint">Your username and password didn't match. Please try again.</p>
+        </div>
+      {% endif %}
+      <div class="form-group">
+        <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
+        {{ form.username|add_class:'form-input'|attr:"placeholder: " }}
+      </div>
+      <div class="form-group">
+        <label class="form-label" for="{{ form.password.id_for_label }}">Password</label>
+        {{ form.password|add_class:'form-input'|attr:"placeholder: " }}
+      </div>

+      <br/>
+      <div class="d-flex justify-between">
+        <input type="submit" value="Login" class="btn btn-primary btn-wide">
+        <input type="hidden" name="next" value="{{ next }}">
+        {% if allow_registration %}
+          <a href="{% url 'django_registration_register' %}" class="btn btn-link">Register</a>
+        {% endif %}
+      </div>

+    </form>
+  </section>
 {% endblock %}
--- a/bookmarks/templates/registration/password_change_done.html
+++ b/bookmarks/templates/registration/password_change_done.html
@@ -4,18 +4,12 @@
 {% block title %}Password changed{% endblock %}

 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Password Changed</h2>
-                </div>
-                <p class="text-success">
-                    Your password was changed successfully.
-                </p>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Password Changed</h2>
    </div>
-
+    <p class="text-success">
+      Your password was changed successfully.
+    </p>
+  </section>
 {% endblock %}
--- a/bookmarks/templates/registration/password_change_form.html
+++ b/bookmarks/templates/registration/password_change_form.html
@@ -4,52 +4,42 @@
 {% block title %}Change Password{% endblock %}

 {% block content %}
-
-    <div class="auth-page">
-        <div class="columns">
-            <section class="content-area column col-5 col-md-12">
-                <div class="content-area-header">
-                    <h2>Change Password</h2>
-                </div>
-                <form method="post" action="{% url 'change_password' %}">
-                    {% csrf_token %}
-                    <div class="form-group {% if form.old_password.errors %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.old_password.id_for_label }}">Old password</label>
-                        {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }}
-                        {% if form.old_password.errors %}
-                            <div class="form-input-hint">
-                                {{ form.old_password.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div class="form-group {% if form.new_password1.errors %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.new_password1.id_for_label }}">New password</label>
-                        {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }}
-                        {% if form.new_password1.errors %}
-                            <div class="form-input-hint">
-                                {{ form.new_password1.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-                    <div class="form-group {% if form.new_password2.errors %}has-error{% endif %}">
-                        <label class="form-label" for="{{ form.new_password2.id_for_label }}">Confirm new password</label>
-                        {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }}
-                        {% if form.new_password2.errors %}
-                            <div class="form-input-hint">
-                                {{ form.new_password2.errors }}
-                            </div>
-                        {% endif %}
-                    </div>
-
-                    <br/>
-                    <div class="columns">
-                        <div class="column col-3">
-                            <input type="submit" value="Change Password" class="btn btn-primary">
-                        </div>
-                    </div>
-                </form>
-            </section>
-        </div>
+  <section class="content-area mx-auto width-50 width-md-100">
+    <div class="content-area-header">
+      <h2>Change Password</h2>
    </div>
+    <form method="post" action="{% url 'change_password' %}">
+      {% csrf_token %}
+      <div class="form-group {% if form.old_password.errors %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.old_password.id_for_label }}">Old password</label>
+        {{ form.old_password|add_class:'form-input'|attr:"placeholder: " }}
+        {% if form.old_password.errors %}
+          <div class="form-input-hint">
+            {{ form.old_password.errors }}
+          </div>
+        {% endif %}
+      </div>
+      <div class="form-group {% if form.new_password1.errors %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.new_password1.id_for_label }}">New password</label>
+        {{ form.new_password1|add_class:'form-input'|attr:"placeholder: " }}
+        {% if form.new_password1.errors %}
+          <div class="form-input-hint">
+            {{ form.new_password1.errors }}
+          </div>
+        {% endif %}
+      </div>
+      <div class="form-group {% if form.new_password2.errors %}has-error{% endif %}">
+        <label class="form-label" for="{{ form.new_password2.id_for_label }}">Confirm new password</label>
+        {{ form.new_password2|add_class:'form-input'|attr:"placeholder: " }}
+        {% if form.new_password2.errors %}
+          <div class="form-input-hint">
+            {{ form.new_password2.errors }}
+          </div>
+        {% endif %}
+      </div>

+      <br/>
+      <input type="submit" value="Change Password" class="btn btn-primary btn-wide">
+    </form>
+  </section>
 {% endblock %}
--- a/bookmarks/templates/settings/general.html
+++ b/bookmarks/templates/settings/general.html
@@ -16,26 +16,55 @@
        {% csrf_token %}
        <div class="form-group">
          <label for="{{ form.theme.id_for_label }}" class="form-label">Theme</label>
-          {{ form.theme|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.theme|add_class:"form-select width-25 width-sm-100" }}
          <div class="form-input-hint">
            Whether to use a light or dark theme, or automatically adjust the theme based on your system's settings.
          </div>
        </div>
        <div class="form-group">
          <label for="{{ form.bookmark_date_display.id_for_label }}" class="form-label">Bookmark date format</label>
-          {{ form.bookmark_date_display|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.bookmark_date_display|add_class:"form-select width-25 width-sm-100" }}
          <div class="form-input-hint">
            Whether to show bookmark dates as relative (how long ago), or as absolute dates. Alternatively the date can
            be hidden.
          </div>
        </div>
+        <div class="form-group">
+          <label for="{{ form.display_url.id_for_label }}" class="form-checkbox">
+            {{ form.display_url }}
+            <i class="form-icon"></i> Show bookmark URL
+          </label>
+          <div class="form-input-hint">
+            When enabled, this setting displays the bookmark URL below the title.
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="{{ form.permanent_notes.id_for_label }}" class="form-checkbox">
+            {{ form.permanent_notes }}
+            <i class="form-icon"></i> Show notes permanently
+          </label>
+          <div class="form-input-hint">
+            Whether to show bookmark notes permanently, without having to toggle them individually.
+            Alternatively the keyboard shortcut <code>e</code> can be used to temporarily show all notes.
+          </div>
+        </div>
        <div class="form-group">
          <label for="{{ form.bookmark_link_target.id_for_label }}" class="form-label">Open bookmarks in</label>
-          {{ form.bookmark_link_target|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.bookmark_link_target|add_class:"form-select width-25 width-sm-100" }}
          <div class="form-input-hint">
            Whether to open bookmarks a new page or in the same page.
          </div>
        </div>
+        <div class="form-group">
+          <label for="{{ form.tag_search.id_for_label }}" class="form-label">Tag search</label>
+          {{ form.tag_search|add_class:"form-select width-25 width-sm-100" }}
+          <div class="form-input-hint">
+            In strict mode, tags must be prefixed with a hash character (#).
+            In lax mode, tags can also be searched without the hash character.
+            Note that tags without the hash character are indistinguishable from search terms, which means the search
+            result will also include bookmarks where a search term matches otherwise.
+          </div>
+        </div>
        <div class="form-group">
          <label for="{{ form.enable_favicons.id_for_label }}" class="form-checkbox">
            {{ form.enable_favicons }}
@@ -45,11 +74,11 @@
            Automatically loads favicons for bookmarked websites and displays them next to each bookmark.
            By default, this feature uses a <b>Google service</b> to download favicons.
            If you don't want to use this service, check the <a
-              href="https://github.com/sissbruecker/linkding/blob/master/docs/Options.md" target="_blank">options
-            documentation</a> on how to configure a custom favicon provider.
+              href="https://github.com/sissbruecker/linkding/blob/master/docs/Options.md#ld_favicon_provider"
+              target="_blank">options documentation</a> on how to configure a custom favicon provider.
            Icons are downloaded in the background, and it may take a while for them to show up.
          </div>
-          {% if request.user.profile.enable_favicons and enable_refresh_favicons %}
+          {% if request.user_profile.enable_favicons and enable_refresh_favicons %}
            <button class="btn mt-2" name="refresh_favicons">Refresh Favicons</button>
          {% endif %}
          {% if refresh_favicons_success_message %}
@@ -63,7 +92,7 @@
        <div class="form-group">
          <label for="{{ form.web_archive_integration.id_for_label }}" class="form-label">Internet Archive
            integration</label>
-          {{ form.web_archive_integration|add_class:"form-select col-2 col-sm-12" }}
+          {{ form.web_archive_integration|add_class:"form-select width-25 width-sm-100" }}
          <div class="form-input-hint">
            Enabling this feature will automatically create snapshots of bookmarked websites on the <a
              href="https://web.archive.org/" target="_blank" rel="noopener">Internet Archive Wayback
@@ -84,6 +113,17 @@
            Disabling this feature will hide all previously shared bookmarks from other users.
          </div>
        </div>
+        <div class="form-group">
+          <label for="{{ form.enable_public_sharing.id_for_label }}" class="form-checkbox">
+            {{ form.enable_public_sharing }}
+            <i class="form-icon"></i> Enable public bookmark sharing
+          </label>
+          <div class="form-input-hint">
+            Makes shared bookmarks publicly accessible, without requiring a login.
+            That means that anyone with a link to this instance can view shared bookmarks via the <a
+              href="{% url 'bookmarks:shared' %}">shared bookmarks page</a>.
+          </div>
+        </div>
        <div class="form-group">
          <input type="submit" name="update_profile" value="Save" class="btn btn-primary mt-2">
          {% if update_profile_success_message %}
@@ -105,9 +145,19 @@
      <form method="post" enctype="multipart/form-data" action="{% url 'bookmarks:settings.import' %}">
        {% csrf_token %}
        <div class="form-group">
-          <div class="input-group col-8 col-md-12">
+          <label for="import_map_private_flag" class="form-checkbox">
+            <input type="checkbox" id="import_map_private_flag" name="map_private_flag">
+            <i class="form-icon"></i> Import public bookmarks as shared
+          </label>
+          <div class="form-input-hint">
+            When importing bookmarks from a service that supports marking bookmarks as public or private (using the <code>PRIVATE</code> attribute), enabling this option will import all bookmarks that are marked as not private as shared bookmarks.
+            Otherwise, all bookmarks will be imported as private bookmarks.
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="input-group width-75 width-md-100">
            <input class="form-input" type="file" name="import_file">
-            <input type="submit" class="input-group-btn col-2 btn btn-primary" value="Upload">
+            <input type="submit" class="input-group-btn btn btn-primary" value="Upload">
          </div>
          {% if import_success_message %}
            <div class="has-success">
@@ -131,6 +181,10 @@
    <section class="content-area">
      <h2>Export</h2>
      <p>Export all bookmarks in Netscape HTML format.</p>
+      <p>
+        Note that exporting bookmark notes is currently not supported due to limitations of the format.
+        For proper backups please use a database backup as described in the documentation.
+      </p>
      <a class="btn btn-primary" href="{% url 'bookmarks:settings.export' %}">Download (.html)</a>
      {% if export_error %}
        <div class="has-error">
@@ -168,4 +222,22 @@
    </section>
  </div>

+  <script>
+    // Automatically disable public bookmark sharing if bookmark sharing is disabled
+    const enableSharing = document.getElementById("{{ form.enable_sharing.id_for_label }}");
+    const enablePublicSharing = document.getElementById("{{ form.enable_public_sharing.id_for_label }}");
+
+    function updatePublicSharing() {
+      if (enableSharing.checked) {
+        enablePublicSharing.disabled = false;
+      } else {
+        enablePublicSharing.disabled = true;
+        enablePublicSharing.checked = false;
+      }
+    }
+
+    updatePublicSharing();
+    enableSharing.addEventListener("change", updatePublicSharing);
+  </script>
+
 {% endblock %}
--- a/bookmarks/templates/settings/integrations.html
+++ b/bookmarks/templates/settings/integrations.html
@@ -9,7 +9,7 @@
            <h2>Browser Extension</h2>
            <p>The browser extension allows you to quickly add new bookmarks without leaving the page that you are on. The extension is available in the official extension stores for:</p>
            <ul>
-                <li><a href="https://addons.mozilla.org/de/firefox/addon/linkding-extension/" target="_blank">Firefox</a></li>
+                <li><a href="https://addons.mozilla.org/firefox/addon/linkding-extension/" target="_blank">Firefox</a></li>
                <li><a href="https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe" target="_blank">Chrome</a></li>
            </ul>
            <p>The extension is <a href="https://github.com/sissbruecker/linkding-extension" target="_blank">open source</a> as well, which enables you to build and manually load it into any browser that supports Chrome extensions.</p>
@@ -33,7 +33,7 @@
            <p>The following token can be used to authenticate 3rd-party applications against the REST API:</p>
            <div class="form-group">
                <div class="columns">
-                    <div class="column col-6 col-md-12">
+                    <div class="column width-50 width-md-100">
                        <input class="form-input" value="{{ api_token }}" readonly>
                    </div>
                </div>
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`<input id="bulk-edit-mode" type="checkbox">`