Bump version

Bumps [terser](https://github.com/terser/terser) from 5.5.1 to 5.14.2.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.coveragerc

@@ -0,0 +1,3 @@
+[run]
+source = bookmarks
+omit = bookmarks/tests/*

.dockerignore

@@ -5,13 +5,27 @@
 /node_modules
 /tmp
 /docs
+/static
+/build
+/out
+/.git
 
 /.dockerignore
 /.gitignore
-/build-*.sh
 /Dockerfile
+/docker-compose.yml
+/*.sh
 /*.iml
-/package*.json
+/*.patch
+/*.md
+/*.js
+/*.log
+/*.pid
+
+# Whitelist files needed in build or prod image
+!/rollup.config.js
+!/bootstrap.sh
+!/background-tasks-wrapper.sh
 
 # Remove development settings
 /siteroot/settings/dev.py

.env.sample

@@ -0,0 +1,11 @@
+# Docker container name
+LD_CONTAINER_NAME=linkding
+# Port on the host system that the application should be published on
+LD_HOST_PORT=9090
+# Directory on the host system that should be mounted as data dir into the Docker container
+LD_HOST_DATA_DIR=./data
+
+# Option to disable background tasks
+LD_DISABLE_BACKGROUND_TASKS=False
+# Option to disable URL validation for bookmarks completely
+LD_DISABLE_URL_VALIDATION=False

.github/workflows/main.yaml

@@ -0,0 +1,24 @@
+name: linkding CI
+
+on: [push]
+
+jobs:
+  run_tests:
+    name: Run Django Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: Set up Python
+        uses: actions/setup-python@v1
+        with:
+          python-version: 3.7
+      - name: Set up Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Install Python dependencies
+        run: pip install -r requirements.txt
+      - name: Install Node dependencies
+        run: npm install
+      - name: Run tests
+        run: python manage.py test

.gitignore

@@ -3,55 +3,14 @@
 # Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and WebStorm
 # Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
 
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# CMake
-cmake-build-debug/
-cmake-build-release/
-
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
 # File-based project format
 *.iws
 
 # IntelliJ
+.idea
+*.iml
 out/
 
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-# Editor-based Rest Client
-.idea/httpRequests
 ### Python template
 # Byte-compiled / optimized / DLL files
 __pycache__/

.idea/compiler.xml

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="CompilerConfiguration">
-    <wildcardResourcePatterns>
-      <entry name="!?*.java" />
-      <entry name="!?*.form" />
-      <entry name="!?*.class" />
-      <entry name="!?*.groovy" />
-      <entry name="!?*.scala" />
-      <entry name="!?*.flex" />
-      <entry name="!?*.kt" />
-      <entry name="!?*.clj" />
-    </wildcardResourcePatterns>
-  </component>
-</project>

.idea/dataSources.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DataSourceManagerImpl" format="xml" multifile-model="true">
-    <data-source source="LOCAL" name="SQLite - db.sqlite3" uuid="c880bd6d-554c-484d-a5be-45581d9a9377">
-      <driver-ref>sqlite.xerial</driver-ref>
-      <synchronize>true</synchronize>
-      <jdbc-driver>org.sqlite.JDBC</jdbc-driver>
-      <jdbc-url>jdbc:sqlite:$PROJECT_DIR$/data/db.sqlite3</jdbc-url>
-    </data-source>
-  </component>
-</project>

.idea/encodings.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
-</project>

.idea/inspectionProfiles/Project_Default.xml

@@ -1,12 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="PyPep8Inspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
-      <option name="ignoredErrors">
-        <list>
-          <option value="E402" />
-        </list>
-      </option>
-    </inspection_tool>
-  </profile>
-</component>

.idea/misc.xml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="HaskellBuildOptions">
-    <ghcPath>/usr/local/bin/ghc</ghcPath>
-    <stackPath>/usr/local/bin/stack</stackPath>
-  </component>
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="ES6" />
-  </component>
-  <component name="ProjectRootManager" version="2" languageLevel="JDK_1_6" default="false" project-jdk-name="Python 3.7 (linkding)" project-jdk-type="Python SDK">
-    <output url="file://$PROJECT_DIR$/out" />
-  </component>
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/linkdings.iml" filepath="$PROJECT_DIR$/linkdings.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

.idea/watcherTasks.xml

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions" suppressed-tasks="SCSS" />
-</project>

CHANGELOG.md

@@ -1,6 +1,288 @@
 # Changelog
 
+## v1.11.1 (03/07/2022)
+
+### What's Changed
+* Fix duplicate tags on import by @wahlm in https://github.com/sissbruecker/linkding/pull/289
+* Add apple-touch-icon by @daveonkels in https://github.com/sissbruecker/linkding/pull/282
+* Bump waybackpy to 3.0.6 by @dustinblackman in https://github.com/sissbruecker/linkding/pull/281
+
+### New Contributors
+* @wahlm made their first contribution in https://github.com/sissbruecker/linkding/pull/289
+* @daveonkels made their first contribution in https://github.com/sissbruecker/linkding/pull/282
+* @dustinblackman made their first contribution in https://github.com/sissbruecker/linkding/pull/281
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.11.0...v1.11.1
+
+---
+
+## v1.11.0 (26/05/2022)
+
+### What's Changed
+* Add background tasks to admin by @sissbruecker in https://github.com/sissbruecker/linkding/pull/264
+* Improve about section by @sissbruecker in https://github.com/sissbruecker/linkding/pull/265
+* Allow creating archived bookmark through REST API by @kencx in https://github.com/sissbruecker/linkding/pull/268
+* Add PATCH support to bookmarks endpoint by @sissbruecker in https://github.com/sissbruecker/linkding/pull/269
+* Add community reference to linkding-cli by @bachya in https://github.com/sissbruecker/linkding/pull/270
+
+### New Contributors
+* @kencx made their first contribution in https://github.com/sissbruecker/linkding/pull/268
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.10.1...v1.11.0
+
+---
+
+## v1.10.1 (21/05/2022)
+
+### What's Changed
+* Fake request headers to reduce bot detection by @sissbruecker in https://github.com/sissbruecker/linkding/pull/263
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.10.0...v1.10.1
+
+---
+
+## v1.10.0 (21/05/2022)
+
+### What's Changed
+* Add to managed hosting options by @m3nu in https://github.com/sissbruecker/linkding/pull/253
+* Add community reference to aiolinkding by @bachya in https://github.com/sissbruecker/linkding/pull/259
+* Improve import performance by @sissbruecker in https://github.com/sissbruecker/linkding/pull/261
+* Update how-to.md to fix unclear/paraphrased Safari action in IOS Shortcuts by @feoh in https://github.com/sissbruecker/linkding/pull/260
+* Allow searching for untagged bookmarks by @sissbruecker in https://github.com/sissbruecker/linkding/pull/226
+
+### New Contributors
+* @m3nu made their first contribution in https://github.com/sissbruecker/linkding/pull/253
+* @bachya made their first contribution in https://github.com/sissbruecker/linkding/pull/259
+* @feoh made their first contribution in https://github.com/sissbruecker/linkding/pull/260
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.9.0...v1.10.0
+
+---
+
+## v1.9.0 (14/05/2022)
+
+### What's Changed
+* Scroll menu items into view when using keyboard by @sissbruecker in https://github.com/sissbruecker/linkding/pull/248
+* Add whitespace after auto-completed tag by @sissbruecker in https://github.com/sissbruecker/linkding/pull/249
+* Bump django from 3.2.12 to 3.2.13 by @dependabot in https://github.com/sissbruecker/linkding/pull/244
+* Add community helm chart reference to readme by @pascaliske in https://github.com/sissbruecker/linkding/pull/242
+* Feature: Shortcut key for new bookmark by @rithask in https://github.com/sissbruecker/linkding/pull/241
+* Clarify archive.org feature by @clach04 in https://github.com/sissbruecker/linkding/pull/229
+* Make Internet Archive integration opt-in by @sissbruecker in https://github.com/sissbruecker/linkding/pull/250
+
+### New Contributors
+* @pascaliske made their first contribution in https://github.com/sissbruecker/linkding/pull/242
+* @rithask made their first contribution in https://github.com/sissbruecker/linkding/pull/241
+* @clach04 made their first contribution in https://github.com/sissbruecker/linkding/pull/229
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.8.8...v1.9.0
+
+---
+
+## v1.8.8 (27/03/2022)
+
+- [**bug**] Prevent bookmark actions through get requests
+- [**bug**] Prevent external redirects
+
+---
+
+## v1.8.7 (26/03/2022)
+
+- [**bug**] Increase request buffer size [#28](https://github.com/sissbruecker/linkding/issues/28)
+- [**enhancement**]  Allow specifying port through LINKDING_PORT environment variable [#156](https://github.com/sissbruecker/linkding/pull/156)
+- [**chore**] Bump NPM packages [#224](https://github.com/sissbruecker/linkding/pull/224)
+
+---
+
+## v1.8.6 (25/03/2022)
+
+- [bug] fix bookmark access restrictions
+- [bug] prevent external redirects
+- [chore] bump dependencies
+
+---
+
+## v1.8.5 (12/12/2021)
+
+- [**bug**] Ensure tag names do not contain spaces [#182](https://github.com/sissbruecker/linkding/issues/182)
+- [**bug**] Consider not copying whole GIT repository to Docker image [#174](https://github.com/sissbruecker/linkding/issues/174)
+- [**enhancement**] Make bookmarks count column in admin sortable [#183](https://github.com/sissbruecker/linkding/pull/183)
+
+---
+
+## v1.8.4 (16/10/2021)
+
+- [**enhancement**] Allow non-admin users to change their password [#166](https://github.com/sissbruecker/linkding/issues/166)
+
+---
+
+## v1.8.3 (03/10/2021)
+
+- [**enhancement**] Enhancement: let user configure to open links in same tab instead on a new window/tab [#27](https://github.com/sissbruecker/linkding/issues/27)
+
+---
+
+## v1.8.2 (02/10/2021)
+
+- [**bug**] Fix jumping search box [#163](https://github.com/sissbruecker/linkding/pull/163)
+
+---
+
+## v1.8.1 (01/10/2021)
+
+- [**enhancement**] Add global shortcut for search [#161](https://github.com/sissbruecker/linkding/pull/161)
+  - allows to press `s` to focus the search input
+
+---
+
+## v1.8.0 (04/09/2021)
+
+- [**enhancement**] Wayback Machine Integration [#59](https://github.com/sissbruecker/linkding/issues/59)
+  - Automatically creates snapshots of bookmarked websites on [web archive](https://archive.org/web/)
+  - This is one of the largest changes yet and adds a task processor that runs as a separate process in the background. If you run into issues with this feature, it can be disabled using the [LD_DISABLE_BACKGROUND_TASKS](https://github.com/sissbruecker/linkding/blob/master/docs/Options.md#ld_disable_background_tasks) option
+
+---
+
+## v1.7.2 (26/08/2021)
+
+- [**enhancement**] Add support for nanosecond resolution timestamps for bookmark import (e.g. Google Bookmarks) [#146](https://github.com/sissbruecker/linkding/issues/146)
+
+---
+
+## v1.7.1 (25/08/2021)
+
+- [**bug**] umlaut/non-ascii characters broken when using bookmarklet (firefox) [#148](https://github.com/sissbruecker/linkding/issues/148)
+- [**bug**] Bookmark import accepts empty URL values [#124](https://github.com/sissbruecker/linkding/issues/124)
+- [**enhancement**] Show the version in the settings [#104](https://github.com/sissbruecker/linkding/issues/104)
+
+---
+
+## v1.7.0 (17/08/2021)
+
+- Upgrade to Django 3
+- Bump other dependencies
+
+---
+
+## v1.6.5 (15/08/2021)
+
+- [**enhancement**] query with multiple hashtags very slow [#112](https://github.com/sissbruecker/linkding/issues/112)
+
+---
+
+## v1.6.4 (13/05/2021)
+
+- Update dependencies for security fixes
+
+---
+
+## v1.6.3 (06/04/2021)
+
+- [**bug**] relative names use the wrong "today" after day change [#107](https://github.com/sissbruecker/linkding/issues/107)
+
+---
+
+## v1.6.2 (04/04/2021)
+
+- [**enhancement**] Expose `date_added` in UI [#85](https://github.com/sissbruecker/linkding/issues/85)
+- [**closed**] Archived bookmarks - no result when searching for a word which is used only as tag [#83](https://github.com/sissbruecker/linkding/issues/83)
+- [**closed**] Add archive/unarchive button to edit bookmark page [#82](https://github.com/sissbruecker/linkding/issues/82)
+- [**enhancement**] Make scraped title and description editable [#80](https://github.com/sissbruecker/linkding/issues/80)
+
+---
+
+## v1.6.1 (31/03/2021)
+
+- Expose date_added in UI [#85](https://github.com/sissbruecker/linkding/issues/85)
+
+---
+
+## v1.6.0 (28/03/2021)
+
+- Bulk edit mode [#101](https://github.com/sissbruecker/linkding/pull/101)
+
+---
+
+## v1.5.0 (28/03/2021)
+
+- [**closed**] Add a dark mode [#49](https://github.com/sissbruecker/linkding/issues/49)
+
+---
+
+## v1.4.1 (20/03/2021)
+
+- Security patches
+- Documentation improvements
+
+---
+
+## v1.4.0 (24/02/2021)
+
+- [**enhancement**] Improve admin utilization [#76](https://github.com/sissbruecker/linkding/issues/76)
+
+---
+
+## v1.3.3 (18/02/2021)
+
+- [**closed**] Missing "description" request body parameter in API causes 500 [#78](https://github.com/sissbruecker/linkding/issues/78)
+
+---
+
+## v1.3.2 (18/02/2021)
+
+- [**closed**] /archive and /unarchive API routes return 404 [#77](https://github.com/sissbruecker/linkding/issues/77)
+- [**closed**] API - /api/check_url?url= with token authetification [#55](https://github.com/sissbruecker/linkding/issues/55)
+
+---
+
+## v1.3.1 (15/02/2021)
+
+[enhancement] Enhance delete links with inline confirmation
+
+---
+
+## v1.3.0 (14/02/2021)
+
+- [**closed**] Novice help. [#71](https://github.com/sissbruecker/linkding/issues/71)
+- [**closed**] Option to create bookmarks public [#70](https://github.com/sissbruecker/linkding/issues/70)
+- [**enhancement**] Show URL if title is not available [#64](https://github.com/sissbruecker/linkding/issues/64)
+- [**bug**] minor ui nitpicks [#62](https://github.com/sissbruecker/linkding/issues/62)
+- [**enhancement**] add an archive function [#46](https://github.com/sissbruecker/linkding/issues/46)
+- [**closed**] remove non fqdn check and alert [#36](https://github.com/sissbruecker/linkding/issues/36)
+- [**closed**] Add Lotus Notes links [#22](https://github.com/sissbruecker/linkding/issues/22)
+
+---
+
+## v1.2.1 (12/01/2021)
+
+- [**bug**] Bug: Two equal tags with different capitalisation lead to 500 server errors [#65](https://github.com/sissbruecker/linkding/issues/65)
+- [**closed**] Enhancement: category and pagination [#11](https://github.com/sissbruecker/linkding/issues/11)
+
+---
+
+## v1.2.0 (09/01/2021)
+
+- [**closed**] Add Favicon [#58](https://github.com/sissbruecker/linkding/issues/58)
+- [**closed**] Make tags case-insensitive [#45](https://github.com/sissbruecker/linkding/issues/45)
+
+---
+
+## v1.1.1 (01/01/2021)
+
+- [**enhancement**] Add docker-compose support [#54](https://github.com/sissbruecker/linkding/pull/54)
+
+---
+
+## v1.1.0 (31/12/2020)
+
+- [**enhancement**] Search autocomplete [#52](https://github.com/sissbruecker/linkding/issues/52)
+- [**enhancement**] Improve Netscape bookmarks file parsing [#50](https://github.com/sissbruecker/linkding/issues/50)
+
+---
+
 ## v1.0.0 (31/12/2020)
+
 - [**bug**] Import does not import bookmark descriptions [#47](https://github.com/sissbruecker/linkding/issues/47)
 - [**enhancement**] Enhancement: return to same page we were on after editing a bookmark [#26](https://github.com/sissbruecker/linkding/issues/26)
 - [**bug**] Increase limit on bookmark URL length [#25](https://github.com/sissbruecker/linkding/issues/25)
@@ -9,4 +291,4 @@
 - [**bug**] Error importing bookmarks [#18](https://github.com/sissbruecker/linkding/issues/18)
 - [**enhancement**] Enhancement: better administration page [#4](https://github.com/sissbruecker/linkding/issues/4)
 - [**enhancement**] Bug: Navigation bar active link stays on add bookmark [#3](https://github.com/sissbruecker/linkding/issues/3)
-- [**bug**] CSS Stylesheet presented as text/plain [#2](https://github.com/sissbruecker/linkding/issues/2)
+- [**bug**] CSS Stylesheet presented as text/plain [#2](https://github.com/sissbruecker/linkding/issues/2)

Dockerfile

@@ -1,22 +1,54 @@
-FROM python:3.7-slim-stretch
-
-# Install packages required for uswgi
-RUN apt-get update
-RUN apt-get -y install build-essential
-RUN apt-get -y install mime-support
-
-# Install requirements and uwsgi server for running python web apps
+FROM node:current-alpine AS node-build
 WORKDIR /etc/linkding
-COPY requirements.prod.txt ./requirements.txt
-RUN pip install -U pip
-RUN pip install -Ur requirements.txt
-
-# Copy application
+# 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.9.6-slim-buster AS python-base
+RUN apt-get update && apt-get -y install build-essential
+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.9.6-slim-buster as final
+RUN apt-get update && apt-get -y install mime-support
+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"]
 CMD ["./bootstrap.sh"]

README.md

@@ -1,11 +1,47 @@
-#  linkding
+<div align="center">
+    <br>
+    <a href="https://github.com/sissbruecker/linkding">
+        <img src="docs/header.svg" height="50">
+    </a>
+    <br>
+</div>
 
-*linkding* is a simple bookmark service that you can host yourself. It supports managing bookmarks, categorizing them with tags and has a search function. It provides a bookmarklet for quickly adding new bookmarks while browsing the web. It also supports import / export of bookmarks in the Netscape HTML format. And that's basically it 🙂.
+## Overview
+- [Introduction](#introduction)
+- [Installation](#installation)
+    - [Using Docker](#using-docker)
+    - [Using Docker Compose](#using-docker-compose)
+    - [User Setup](#user-setup)
+    - [Managed Hosting Options](#managed-hosting-options)
+- [Documentation](#documentation)
+- [Browser Extension](#browser-extension)
+- [Community](#community)
+- [Development](#development)
+
+##  Introduction
+
+linkding is a simple bookmark service that you can host yourself.
+It's designed be to be minimal, fast, and easy to set up using Docker.
 
 The name comes from:
 - *link* which is often used as a synonym for URLs and bookmarks in common language
-- *Ding* which is german for *thing*
-- ...so basically some thing for managing your links
+- *Ding* which is German for thing
+- ...so basically something for managing your links
+
+**Feature Overview:**
+- Tags for organizing bookmarks
+- Search by text or tags
+- Bulk editing
+- Bookmark archive
+- Dark mode
+- Automatically creates snapshots of bookmarked websites on [the Internet Archive Wayback Machine](https://archive.org/web/)
+- Automatically provides titles and descriptions of bookmarked websites
+- 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), and a bookmarklet that should work in most browsers
+- REST API for developing 3rd party apps
+- Admin panel for user self-service and raw data access
+- Easy to set up using Docker, uses SQLite as database
+
 
 **Demo:** https://demo.linkding.link/ (configured with open registration)
 
@@ -15,65 +51,90 @@ The name comes from:
 
 ## Installation
 
-The easiest way to run linkding is to use [Docker](https://docs.docker.com/get-started/).  The Docker image should be compatible with ARM platforms, so it can be run on a Raspberry Pi.
+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.
 
-There is also the option to set up the installation manually which I do not support, but can give some pointers on below.
+###  Using Docker
 
-###  Docker setup
-
-To install linkding using Docker you can just run the image from the Docker registry:
-```
+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`, but you can map it to a different host port by modifying the command above.
+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.
 
-However for **production use** you also want to mount a data folder on your system, so that the applications database is not stored in the container, but on your hosts file system. This is safer in case something happens to the container and makes it easier to update the container later on, or to run backups. To do so you can use the following extended command, where you replace `{host-data-folder}` with the absolute path to a folder on your system where you want to store the data:
-```
+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
 ```
 
-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. 
+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.
 
-### Automated Docker setup
+To complete the setup, you still have to [create an initial user](#user-setup), so that you can access your installation.
 
-If you are using a Linux system you can use the following [shell script](https://github.com/sissbruecker/linkding/blob/master/install-linkding.sh) for an automated setup. The script does basically everything described above, but also handles updating an existing container to a new application version (technically replaces the existing container with a new container built from a newer image, while mounting the same data folder).
+###  Using Docker Compose
 
-The script can be configured using using shell variables - for more details have a look at the script itself.
+To install linkding using [Docker Compose](https://docs.docker.com/compose/), you can use the [`docker-compose.yml`](https://github.com/sissbruecker/linkding/blob/master/docker-compose.yml) file. Copy the [`.env.sample`](https://github.com/sissbruecker/linkding/blob/master/.env.sample) file to `.env`, configure the parameters, and then run:
+```shell
+docker-compose up -d
+```
+
+To complete the setup, you still have to [create an initial user](#user-setup), so that you can access your installation.
 
 ### User setup
 
-Finally you need to create a user so that you can access the frontend. Replace the credentials in the following command and run it:
-```
+For security reasons, the linkding Docker image does not provide an initial user, so you have to create one after setting up an installation. To do so, replace the credentials in the following command and run it:
+
+**Docker**
+```shell
 docker exec -it linkding python manage.py createsuperuser --username=joe --email=joe@example.com
 ```
+
+**Docker Compose**
+```shell
+docker-compose exec linkding python manage.py createsuperuser --username=joe --email=joe@example.com
+```
+
 The command will prompt you for a secure password. After the command has completed you can start using the application by logging into the UI with your credentials.
 
-### Manual setup
+### Managed Hosting Options
 
-If you can not or don't want to use Docker you can install the application manually on your server. To do so you can basically follow the steps from the *Development* section below while cross-referencing the `Dockerfile` and `bootstrap.sh` on how to make the application production-ready.
+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.
 
-### Hosting
+- [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)
 
-The application runs in a web-server called [uWSGI](https://uwsgi-docs.readthedocs.io/en/latest/) that is production-ready and that you can expose to the web. If you don't know how to configure your server to expose the application to the web there are several more steps involved. I can not support support the process here, but I can give some pointers on what to search for:
-- first get the app running (described in this document)
-- open the port that the application is running on in your servers firewall
-- depending on your network configuration, forward the opened port in your network router, so that the application can be addressed from the internet using your public IP address and the opened port
+## Documentation
 
-### Backups
+| Document                                                                                        | Description                                              |
+|-------------------------------------------------------------------------------------------------|----------------------------------------------------------|
+| [Options](https://github.com/sissbruecker/linkding/blob/master/docs/Options.md)                 | Lists available options, and describes how to apply them |
+| [Backups](https://github.com/sissbruecker/linkding/blob/master/docs/backup.md)                  | How to backup the linkding database                      |
+| [Troubleshooting](https://github.com/sissbruecker/linkding/blob/master/docs/troubleshooting.md) | Advice for troubleshooting common problems               |
+| [How To](https://github.com/sissbruecker/linkding/blob/master/docs/how-to.md)                   | Tips and tricks around using linking                     |
+| [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                           |
 
-For backups you have two options: manually or automatic.
+## Browser Extension
 
-For manual backups you can export your bookmarks from the UI and store them on a backup device or online service.
+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/)
+- [Chrome Web Store](https://chrome.google.com/webstore/detail/linkding-extension/beakmhbijpdhipnjhnclmhgjlddhidpe)
 
-For automatic backups you want to backup the applications database. As described above, for production setups you should [mount](https://stackoverflow.com/questions/23439126/how-to-mount-a-host-directory-in-a-docker-container) the `/etc/linkding/data` directory from the Docker container to a directory on your host system. You can then use a backup tool of your choice to backup the contents of that directory.
+The extension is open-source as well, and can be found [here](https://github.com/sissbruecker/linkding-extension).
 
-## API
+## Community
 
-The application provides a REST API that can be used by 3rd party applications to manage bookmarks. Check the [API docs](API.md) for further information.
+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.
+
+- [Helm Chart](https://charts.pascaliske.dev/charts/linkding/) Helm Chart for deploying linkding inside a Kubernetes cluster. By [pascaliske](https://github.com/pascaliske)
+- [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)
+- [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)
 
 ## Development
 
-The application is open source, so you are free to modify or contribute. The application is built using the Django web framework. You can get started by checking out the excellent Django docs: https://docs.djangoproject.com/en/3.0/. The `bookmarks` folder contains the actual bookmark application, `siteroot` is the Django root application. Other than that the code should be self-explanatory / standard Django stuff 🙂.
+The application is open source, so you are free to modify or contribute. The application is built using the Django web framework. You can get started by checking out the excellent Django docs: https://docs.djangoproject.com/en/3.2/. The `bookmarks` folder contains the actual bookmark application, `siteroot` is the Django root application. Other than that the code should be self-explanatory / standard Django stuff 🙂.
 
 ### Prerequisites
 - Python 3
@@ -115,7 +176,3 @@ Start the Django development server with:
 python3 manage.py runserver
 ```
 The frontend is now available under http://localhost:8000
-
-## Community
-
-- [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)

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 1.10.x   | :white_check_mark: |
+
+## Reporting a Vulnerability
+
+To report a vulnerability, please send a mail to: 588ex5zl8@mozmail.com
+
+I'll try to get back to you as soon as possible.

background-tasks-wrapper.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+# Wrapper script used by supervisord to first clear task locks before starting the background task processor
+
+python manage.py clean_tasks
+exec python manage.py process_tasks

bookmarks/admin.py

@@ -1,17 +1,138 @@
-from django.contrib import admin
+from background_task.admin import TaskAdmin, CompletedTaskAdmin
+from background_task.models import Task, CompletedTask
+from django.contrib import admin, messages
+from django.contrib.admin import AdminSite
+from django.contrib.auth.admin import UserAdmin
+from django.contrib.auth.models import User
+from django.db.models import Count, QuerySet
+from django.utils.translation import ngettext, gettext
+from rest_framework.authtoken.admin import TokenAdmin
+from rest_framework.authtoken.models import TokenProxy
+
+from bookmarks.models import Bookmark, Tag, UserProfile, Toast, FeedToken
+from bookmarks.services.bookmarks import archive_bookmark, unarchive_bookmark
+
+
+class LinkdingAdminSite(AdminSite):
+    site_header = 'linkding administration'
+    site_title = 'linkding Admin'
 
-from bookmarks.models import Bookmark, Tag
 
-@admin.register(Bookmark)
 class AdminBookmark(admin.ModelAdmin):
-  list_display = ('title', 'url', 'date_added')
-  search_fields = ('title', 'url', 'tags__name')
-  list_filter = ('tags',)
-  ordering = ('-date_added', )
+    list_display = ('resolved_title', 'url', 'is_archived', 'owner', 'date_added')
+    search_fields = ('title', 'description', 'website_title', 'website_description', 'url', 'tags__name')
+    list_filter = ('owner__username', 'is_archived', 'unread', 'tags',)
+    ordering = ('-date_added',)
+    actions = ['archive_selected_bookmarks', 'unarchive_selected_bookmarks', 'mark_as_read', 'mark_as_unread']
+
+    def archive_selected_bookmarks(self, request, queryset: QuerySet):
+        for bookmark in queryset:
+            archive_bookmark(bookmark)
+        bookmarks_count = queryset.count()
+        self.message_user(request, ngettext(
+            '%d bookmark was successfully archived.',
+            '%d bookmarks were successfully archived.',
+            bookmarks_count,
+        ) % bookmarks_count, messages.SUCCESS)
+
+    def unarchive_selected_bookmarks(self, request, queryset: QuerySet):
+        for bookmark in queryset:
+            unarchive_bookmark(bookmark)
+        bookmarks_count = queryset.count()
+        self.message_user(request, ngettext(
+            '%d bookmark was successfully unarchived.',
+            '%d bookmarks were successfully unarchived.',
+            bookmarks_count,
+        ) % bookmarks_count, messages.SUCCESS)
+
+    def mark_as_read(self, request, queryset: QuerySet):
+        bookmarks_count = queryset.count()
+        queryset.update(unread=False)
+        self.message_user(request, ngettext(
+            '%d bookmark marked as read.',
+            '%d bookmarks marked as read.',
+            bookmarks_count,
+        ) % bookmarks_count, messages.SUCCESS)
+
+    def mark_as_unread(self, request, queryset: QuerySet):
+        bookmarks_count = queryset.count()
+        queryset.update(unread=True)
+        self.message_user(request, ngettext(
+            '%d bookmark marked as unread.',
+            '%d bookmarks marked as unread.',
+            bookmarks_count,
+        ) % bookmarks_count, messages.SUCCESS)
+
 
-@admin.register(Tag)
 class AdminTag(admin.ModelAdmin):
-  list_display = ('name', 'date_added', 'owner')
-  search_fields = ('name', 'owner__username')
-  list_filter = ('owner__username', )
-  ordering = ('-date_added', )
+    list_display = ('name', 'bookmarks_count', 'owner', 'date_added')
+    search_fields = ('name', 'owner__username')
+    list_filter = ('owner__username',)
+    ordering = ('-date_added',)
+    actions = ['delete_unused_tags']
+
+    def get_queryset(self, request):
+        queryset = super().get_queryset(request)
+        queryset = queryset.annotate(bookmarks_count=Count("bookmark"))
+        return queryset
+
+    def bookmarks_count(self, obj):
+        return obj.bookmarks_count
+
+    bookmarks_count.admin_order_field = 'bookmarks_count'
+
+    def delete_unused_tags(self, request, queryset: QuerySet):
+        unused_tags = queryset.filter(bookmark__isnull=True)
+        unused_tags_count = unused_tags.count()
+        for tag in unused_tags:
+            tag.delete()
+
+        if unused_tags_count > 0:
+            self.message_user(request, ngettext(
+                '%d unused tag was successfully deleted.',
+                '%d unused tags were successfully deleted.',
+                unused_tags_count,
+            ) % unused_tags_count, messages.SUCCESS)
+        else:
+            self.message_user(request, gettext(
+                'There were no unused tags in the selection',
+            ), messages.SUCCESS)
+
+
+class AdminUserProfileInline(admin.StackedInline):
+    model = UserProfile
+    can_delete = False
+    verbose_name_plural = 'Profile'
+    fk_name = 'user'
+
+
+class AdminCustomUser(UserAdmin):
+    inlines = (AdminUserProfileInline,)
+
+    def get_inline_instances(self, request, obj=None):
+        if not obj:
+            return list()
+        return super(AdminCustomUser, self).get_inline_instances(request, obj)
+
+
+class AdminToast(admin.ModelAdmin):
+    list_display = ('key', 'message', 'owner', 'acknowledged')
+    search_fields = ('key', 'message')
+    list_filter = ('owner__username',)
+
+
+class AdminFeedToken(admin.ModelAdmin):
+    list_display = ('key', 'user')
+    search_fields = ['key']
+    list_filter = ('user__username',)
+
+
+linkding_admin_site = LinkdingAdminSite()
+linkding_admin_site.register(Bookmark, AdminBookmark)
+linkding_admin_site.register(Tag, AdminTag)
+linkding_admin_site.register(User, AdminCustomUser)
+linkding_admin_site.register(TokenProxy, TokenAdmin)
+linkding_admin_site.register(Toast, AdminToast)
+linkding_admin_site.register(FeedToken, AdminFeedToken)
+linkding_admin_site.register(Task, TaskAdmin)
+linkding_admin_site.register(CompletedTask, CompletedTaskAdmin)

bookmarks/api/routes.py

@@ -1,9 +1,14 @@
-from rest_framework import viewsets, mixins
+from django.urls import reverse
+from rest_framework import viewsets, mixins, status
+from rest_framework.decorators import action
+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, Tag
+from bookmarks.services.bookmarks import archive_bookmark, unarchive_bookmark
+from bookmarks.services.website_loader import load_website_metadata
 
 
 class BookmarkViewSet(viewsets.GenericViewSet,
@@ -27,6 +32,47 @@ class BookmarkViewSet(viewsets.GenericViewSet,
     def get_serializer_context(self):
         return {'user': self.request.user}
 
+    @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)
+        page = self.paginate_queryset(query_set)
+        serializer = self.get_serializer_class()
+        data = serializer(page, many=True).data
+        return self.get_paginated_response(data)
+
+    @action(methods=['post'], detail=True)
+    def archive(self, request, pk):
+        bookmark = self.get_object()
+        archive_bookmark(bookmark)
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    @action(methods=['post'], detail=True)
+    def unarchive(self, request, pk):
+        bookmark = self.get_object()
+        unarchive_bookmark(bookmark)
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    @action(methods=['get'], detail=False)
+    def check(self, request):
+        url = request.GET.get('url')
+        bookmark = Bookmark.objects.filter(owner=request.user, url=url).first()
+        existing_bookmark_data = None
+
+        if bookmark is not None:
+            existing_bookmark_data = {
+                'id': bookmark.id,
+                'edit_url': reverse('bookmarks:edit', args=[bookmark.id])
+            }
+
+        metadata = load_website_metadata(url)
+
+        return Response({
+            'bookmark': existing_bookmark_data,
+            'metadata': metadata.to_dict()
+        }, status=status.HTTP_200_OK)
+
 
 class TagViewSet(viewsets.GenericViewSet,
                  mixins.ListModelMixin,

bookmarks/api/serializers.py

@@ -12,25 +12,55 @@ class TagListField(serializers.ListField):
 class BookmarkSerializer(serializers.ModelSerializer):
     class Meta:
         model = Bookmark
-        fields = ['id', 'url', 'title', 'description', 'tag_names', 'date_added', 'date_modified']
-        read_only_fields = ['date_added', 'date_modified']
+        fields = [
+            'id',
+            'url',
+            'title',
+            'description',
+            'website_title',
+            'website_description',
+            'is_archived',
+            'unread',
+            'tag_names',
+            'date_added',
+            'date_modified'
+        ]
+        read_only_fields = [
+            'website_title',
+            'website_description',
+            'date_added',
+            'date_modified'
+        ]
 
+    # 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='')
+    is_archived = serializers.BooleanField(required=False, default=False)
+    unread = serializers.BooleanField(required=False, default=False)
     # Override readonly tag_names property to allow passing a list of tag names to create/update
-    tag_names = TagListField()
+    tag_names = TagListField(required=False, default=[])
 
     def create(self, validated_data):
         bookmark = Bookmark()
         bookmark.url = validated_data['url']
         bookmark.title = validated_data['title']
         bookmark.description = validated_data['description']
-        tag_string = build_tag_string(validated_data['tag_names'], ' ')
+        bookmark.is_archived = validated_data['is_archived']
+        bookmark.unread = validated_data['unread']
+        tag_string = build_tag_string(validated_data['tag_names'])
         return create_bookmark(bookmark, tag_string, self.context['user'])
 
     def update(self, instance: Bookmark, validated_data):
-        instance.url = validated_data['url']
-        instance.title = validated_data['title']
-        instance.description = validated_data['description']
-        tag_string = build_tag_string(validated_data['tag_names'], ' ')
+        # Update fields if they were provided in the payload
+        for key in ['url', 'title', 'description', 'unread']:
+            if key in validated_data:
+                setattr(instance, key, validated_data[key])
+
+        # Use tag string from payload, or use bookmark's current tags as fallback
+        tag_string = build_tag_string(instance.tag_names)
+        if 'tag_names' in validated_data:
+            tag_string = build_tag_string(validated_data['tag_names'])
+
         return update_bookmark(instance, tag_string, self.context['user'])
 
 

bookmarks/apps.py

@@ -3,3 +3,7 @@ from django.apps import AppConfig
 
 class BookmarksConfig(AppConfig):
     name = 'bookmarks'
+
+    def ready(self):
+        # Register signal handlers
+        import bookmarks.signals

bookmarks/components/SearchAutoComplete.svelte

@@ -0,0 +1,267 @@
+<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 = 'default';
+    export let apiClient;
+
+    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 fetchedBookmarks = mode === 'archive'
+                ? await apiClient.getArchivedBookmarks(value, {limit: 5, offset: 0})
+                : await apiClient.getBookmarks(value, {limit: 5, offset: 0})
+            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>

bookmarks/components/SearchHistory.js

@@ -0,0 +1,48 @@
+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)
+    }
+}

bookmarks/components/TagAutocomplete.svelte

@@ -1,16 +1,33 @@
 <script>
+    import {getCurrentWord, getCurrentWordBounds} from "./util";
+
     export let id;
     export let name;
     export let value;
-    export let tags;
+    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;
     }
@@ -23,9 +40,11 @@
     function handleInput(e) {
         input = e.target;
 
-        const word = getCurrentWord();
+        const word = getCurrentWord(input);
 
-        suggestions = word ? tags.filter(tag => tag.indexOf(word) === 0) : [];
+        suggestions = word
+            ? tags.filter(tag => tag.name.toLowerCase().indexOf(word.toLowerCase()) === 0)
+            : [];
 
         if (word && suggestions.length > 0) {
             open();
@@ -68,32 +87,11 @@
     function complete(suggestion) {
         const bounds = getCurrentWordBounds(input);
         const value = input.value;
-        input.value = value.substring(0, bounds.start) + suggestion + value.substring(bounds.end);
+        input.value = value.substring(0, bounds.start) + suggestion.name + ' ' + value.substring(bounds.end);
 
         close();
     }
 
-    function getCurrentWordBounds() {
-        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};
-    }
-
-    function getCurrentWord() {
-        const bounds = getCurrentWordBounds(input);
-
-        return input.value.substring(bounds.start, bounds.end);
-    }
-
     function updateSelection(dir) {
 
         const length = suggestions.length;
@@ -103,28 +101,39 @@
         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">
+<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 ||''}"
+        <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}>
+    <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}
+                            {tag.name}
                         </div>
                     </div>
                 </a>
@@ -144,9 +153,16 @@
         display: block;
     }
 
-    /* TODO: Should be read from theme */
-    .menu-item.selected > a {
-        background: #f1f1fc;
-        color: #5755d9;
+    .form-autocomplete.small .form-autocomplete-input {
+        height: 1.4rem;
+        min-height: 1.4rem;
     }
-</style>
+    .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>

bookmarks/components/api.js

@@ -0,0 +1,31 @@
+export class ApiClient {
+    constructor(baseUrl) {
+        this.baseUrl = baseUrl
+    }
+
+    getBookmarks(query, options = {limit: 100, offset: 0}) {
+        const encodedQuery = encodeURIComponent(query)
+        const url = `${this.baseUrl}bookmarks/?q=${encodedQuery}&limit=${options.limit}&offset=${options.offset}`
+
+        return fetch(url)
+            .then(response => response.json())
+            .then(data => data.results)
+    }
+
+    getArchivedBookmarks(query, options = {limit: 100, offset: 0}) {
+        const encodedQuery = encodeURIComponent(query)
+        const url = `${this.baseUrl}bookmarks/archived/?q=${encodedQuery}&limit=${options.limit}&offset=${options.offset}`
+
+        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)
+    }
+}

bookmarks/components/index.js

@@ -1,6 +1,10 @@
 import TagAutoComplete from './TagAutocomplete.svelte'
+import SearchAutoComplete from './SearchAutoComplete.svelte'
+import {ApiClient} from './api'
 
 export default {
-    TagAutoComplete
+    ApiClient,
+    TagAutoComplete,
+    SearchAutoComplete
 }
 

bookmarks/components/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);
+}

bookmarks/context_processors.py

@@ -0,0 +1,12 @@
+from bookmarks.models import Toast
+
+
+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 []
+    has_toasts = len(toast_messages) > 0
+
+    return {
+        'has_toasts': has_toasts,
+        'toast_messages': toast_messages,
+    }

bookmarks/feeds.py

@@ -0,0 +1,56 @@
+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
+
+
+@dataclass
+class FeedContext:
+    feed_token: FeedToken
+    query_set: QuerySet[Bookmark]
+
+
+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)
+        return FeedContext(feed_token, query_set)
+
+    def item_title(self, item: Bookmark):
+        return item.resolved_title
+
+    def item_description(self, item: Bookmark):
+        return item.resolved_description
+
+    def item_link(self, item: Bookmark):
+        return item.url
+
+    def item_pubdate(self, item: Bookmark):
+        return item.date_added
+
+
+class AllBookmarksFeed(BaseBookmarksFeed):
+    title = 'All bookmarks'
+    description = 'All bookmarks'
+
+    def link(self, context: FeedContext):
+        return reverse('bookmarks:feeds.all', args=[context.feed_token.key])
+
+    def items(self, context: FeedContext):
+        return context.query_set
+
+
+class UnreadBookmarksFeed(BaseBookmarksFeed):
+    title = 'Unread bookmarks'
+    description = 'All unread bookmarks'
+
+    def link(self, context: FeedContext):
+        return reverse('bookmarks:feeds.unread', args=[context.feed_token.key])
+
+    def items(self, context: FeedContext):
+        return context.query_set.filter(unread=True)

bookmarks/management/commands/clean_tasks.py

@@ -0,0 +1,15 @@
+from background_task.models import Task, CompletedTask
+from django.core.management.base import BaseCommand
+
+
+class Command(BaseCommand):
+    help = "Remove task locks and clear completed task history"
+
+    def handle(self, *args, **options):
+        # Remove task locks
+        # If the background task processor exited while executing tasks, these tasks would still be marked as locked,
+        # even though no process is working on them, and would prevent the task processor from picking the next task in
+        # the queue
+        Task.objects.all().update(locked_by=None, locked_at=None)
+        # Clear task history to prevent them from bloating the DB
+        CompletedTask.objects.all().delete()

bookmarks/migrations/0005_auto_20210103_1212.py

@@ -0,0 +1,19 @@
+# Generated by Django 2.2.13 on 2021-01-03 12:12
+
+import bookmarks.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0004_auto_20200926_1028'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='bookmark',
+            name='url',
+            field=models.CharField(max_length=2048, validators=[bookmarks.validators.BookmarkURLValidator()]),
+        ),
+    ]

bookmarks/migrations/0006_bookmark_is_archived.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.2.13 on 2021-02-14 09:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0005_auto_20210103_1212'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bookmark',
+            name='is_archived',
+            field=models.BooleanField(default=False),
+        ),
+    ]

bookmarks/migrations/0007_userprofile.py

@@ -0,0 +1,43 @@
+# Generated by Django 2.2.18 on 2021-03-26 22:39
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+def forwards(apps, schema_editor):
+    User = apps.get_model('auth', 'User')
+    UserProfile = apps.get_model('bookmarks', 'UserProfile')
+    for user in User.objects.all():
+        try:
+            if user.profile:
+                continue
+        except UserProfile.DoesNotExist:
+            profile = UserProfile(user=user)
+            profile.save()
+
+
+def reverse(apps, schema_editor):
+    pass
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('bookmarks', '0006_bookmark_is_archived'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='UserProfile',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('theme',
+                 models.CharField(choices=[('auto', 'Auto'), ('light', 'Light'), ('dark', 'Dark')], default='auto',
+                                  max_length=10)),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='profile',
+                                              to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.RunPython(forwards, reverse),
+    ]

bookmarks/migrations/0008_userprofile_bookmark_date_display.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.2.18 on 2021-03-30 10:40
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0007_userprofile'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='bookmark_date_display',
+            field=models.CharField(choices=[('relative', 'Relative'), ('absolute', 'Absolute'), ('hidden', 'Hidden')], default='relative', max_length=10),
+        ),
+    ]

bookmarks/migrations/0009_bookmark_web_archive_snapshot_url.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.2.20 on 2021-05-16 14:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0008_userprofile_bookmark_date_display'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='bookmark',
+            name='web_archive_snapshot_url',
+            field=models.CharField(blank=True, max_length=2048),
+        ),
+    ]

bookmarks/migrations/0010_userprofile_bookmark_link_target.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.6 on 2021-10-03 06:35
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0009_bookmark_web_archive_snapshot_url'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='bookmark_link_target',
+            field=models.CharField(choices=[('_blank', 'New page'), ('_self', 'Same page')], default='_blank', max_length=10),
+        ),
+    ]

bookmarks/migrations/0011_userprofile_web_archive_integration.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.6 on 2022-01-08 12:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('bookmarks', '0010_userprofile_bookmark_link_target'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userprofile',
+            name='web_archive_integration',
+            field=models.CharField(choices=[('disabled', 'Disabled'), ('enabled', 'Enabled')], default='disabled', max_length=10),
+        ),
+    ]

bookmarks/migrations/0012_toast.py

@@ -0,0 +1,26 @@
+# Generated by Django 3.2.6 on 2022-01-08 19:24
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('bookmarks', '0011_userprofile_web_archive_integration'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Toast',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('key', models.CharField(max_length=50)),
+                ('message', models.TextField()),
+                ('acknowledged', models.BooleanField(default=False)),
+                ('owner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

bookmarks/migrations/0013_web_archive_optin_toast.py

@@ -0,0 +1,30 @@
+# Generated by Django 3.2.6 on 2022-01-08 19:27
+
+from django.db import migrations
+from django.contrib.auth import get_user_model
+
+from bookmarks.models import Toast
+
+User = get_user_model()
+
+
+def forwards(apps, schema_editor):
+    for user in User.objects.all():
+        toast = Toast(key='web_archive_opt_in_hint',
+                      message='The Internet Archive Wayback Machine integration has been disabled by default. Check the Settings to re-enable it.',
+                      owner=user)
+        toast.save()
+
+
+def reverse(apps, schema_editor):
+    Toast.objects.filter(key='web_archive_opt_in_hint').delete()
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('bookmarks', '0012_toast'),
+    ]
+
+    operations = [
+        migrations.RunPython(forwards, reverse),
+    ]

bookmarks/migrations/0014_alter_bookmark_unread.py

@@ -0,0 +1,27 @@
+# Generated by Django 3.2.13 on 2022-07-23 12:30
+
+from django.db import migrations, models
+
+
+def forwards(apps, schema_editor):
+    Bookmark = apps.get_model('bookmarks', 'Bookmark')
+    Bookmark.objects.update(unread=False)
+
+
+def reverse(apps, schema_editor):
+    pass
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('bookmarks', '0013_web_archive_optin_toast'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='bookmark',
+            name='unread',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.RunPython(forwards, reverse),
+    ]

bookmarks/migrations/0015_feedtoken.py

@@ -0,0 +1,24 @@
+# Generated by Django 3.2.13 on 2022-07-23 20:35
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('bookmarks', '0014_alter_bookmark_unread'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='FeedToken',
+            fields=[
+                ('key', models.CharField(max_length=40, primary_key=True, serialize=False)),
+                ('created', models.DateTimeField(auto_now_add=True)),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, related_name='feed_token', to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

bookmarks/models.py

@@ -1,8 +1,16 @@
+import binascii
+import os
 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.db import models
+from django.db.models.signals import post_save
+from django.dispatch import receiver
+
+from bookmarks.utils import unique
+from bookmarks.validators import BookmarkURLValidator
 
 
 class Tag(models.Model):
@@ -14,11 +22,20 @@ class Tag(models.Model):
         return self.name
 
 
+def sanitize_tag_name(tag_name: str):
+    # strip leading/trailing spaces
+    # replace inner spaces with replacement char
+    return tag_name.strip().replace(' ', '-')
+
+
 def parse_tag_string(tag_string: str, delimiter: str = ','):
     if not tag_string:
         return []
     names = tag_string.strip().split(delimiter)
-    names = [name for name in names if name]
+    # remove empty names, sanitize remaining names
+    names = [sanitize_tag_name(name) for name in names if name]
+    # remove duplicates
+    names = unique(names, str.lower)
     names.sort(key=str.lower)
 
     return names
@@ -29,12 +46,14 @@ def build_tag_string(tag_names: List[str], delimiter: str = ','):
 
 
 class Bookmark(models.Model):
-    url = models.URLField(max_length=2048)
+    url = models.CharField(max_length=2048, validators=[BookmarkURLValidator()])
     title = models.CharField(max_length=512, blank=True)
     description = models.TextField(blank=True)
     website_title = models.CharField(max_length=512, blank=True, null=True)
     website_description = models.TextField(blank=True, null=True)
-    unread = models.BooleanField(default=True)
+    web_archive_snapshot_url = models.CharField(max_length=2048, blank=True)
+    unread = models.BooleanField(default=False)
+    is_archived = models.BooleanField(default=False)
     date_added = models.DateTimeField()
     date_modified = models.DateTimeField()
     date_accessed = models.DateTimeField(blank=True, null=True)
@@ -48,7 +67,12 @@ class Bookmark(models.Model):
 
     @property
     def resolved_title(self):
-        return self.website_title if not self.title else self.title
+        if self.title:
+            return self.title
+        elif self.website_title:
+            return self.website_title
+        else:
+            return self.url
 
     @property
     def resolved_description(self):
@@ -68,18 +92,104 @@ class Bookmark(models.Model):
 
 class BookmarkForm(forms.ModelForm):
     # Use URLField for URL
-    url = forms.URLField()
+    url = forms.CharField(validators=[BookmarkURLValidator()])
     tag_string = forms.CharField(required=False)
     # Do not require title and description in form as we fill these automatically if they are empty
     title = forms.CharField(max_length=512,
                             required=False)
     description = forms.CharField(required=False,
                                   widget=forms.Textarea())
+    unread = forms.BooleanField(required=False)
     # Hidden field that determines whether to close window/tab after saving the bookmark
     auto_close = forms.CharField(required=False)
-    # Hidden field that determines where to redirect after saving the form
-    return_url = forms.CharField(required=False)
 
     class Meta:
         model = Bookmark
-        fields = ['url', 'tag_string', 'title', 'description', 'auto_close', 'return_url']
+        fields = ['url', 'tag_string', 'title', 'description', 'unread', 'auto_close']
+
+
+class UserProfile(models.Model):
+    THEME_AUTO = 'auto'
+    THEME_LIGHT = 'light'
+    THEME_DARK = 'dark'
+    THEME_CHOICES = [
+        (THEME_AUTO, 'Auto'),
+        (THEME_LIGHT, 'Light'),
+        (THEME_DARK, 'Dark'),
+    ]
+    BOOKMARK_DATE_DISPLAY_RELATIVE = 'relative'
+    BOOKMARK_DATE_DISPLAY_ABSOLUTE = 'absolute'
+    BOOKMARK_DATE_DISPLAY_HIDDEN = 'hidden'
+    BOOKMARK_DATE_DISPLAY_CHOICES = [
+        (BOOKMARK_DATE_DISPLAY_RELATIVE, 'Relative'),
+        (BOOKMARK_DATE_DISPLAY_ABSOLUTE, 'Absolute'),
+        (BOOKMARK_DATE_DISPLAY_HIDDEN, 'Hidden'),
+    ]
+    BOOKMARK_LINK_TARGET_BLANK = '_blank'
+    BOOKMARK_LINK_TARGET_SELF = '_self'
+    BOOKMARK_LINK_TARGET_CHOICES = [
+        (BOOKMARK_LINK_TARGET_BLANK, 'New page'),
+        (BOOKMARK_LINK_TARGET_SELF, 'Same page'),
+    ]
+    WEB_ARCHIVE_INTEGRATION_DISABLED = 'disabled'
+    WEB_ARCHIVE_INTEGRATION_ENABLED = 'enabled'
+    WEB_ARCHIVE_INTEGRATION_CHOICES = [
+        (WEB_ARCHIVE_INTEGRATION_DISABLED, 'Disabled'),
+        (WEB_ARCHIVE_INTEGRATION_ENABLED, 'Enabled'),
+    ]
+    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,
+                                             default=BOOKMARK_DATE_DISPLAY_RELATIVE)
+    bookmark_link_target = models.CharField(max_length=10, choices=BOOKMARK_LINK_TARGET_CHOICES, blank=False,
+                                            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)
+
+
+class UserProfileForm(forms.ModelForm):
+    class Meta:
+        model = UserProfile
+        fields = ['theme', 'bookmark_date_display', 'bookmark_link_target', 'web_archive_integration']
+
+
+@receiver(post_save, sender=get_user_model())
+def create_user_profile(sender, instance, created, **kwargs):
+    if created:
+        UserProfile.objects.create(user=instance)
+
+
+@receiver(post_save, sender=get_user_model())
+def save_user_profile(sender, instance, **kwargs):
+    instance.profile.save()
+
+
+class Toast(models.Model):
+    key = models.CharField(max_length=50)
+    message = models.TextField()
+    acknowledged = models.BooleanField(default=False)
+    owner = models.ForeignKey(get_user_model(), on_delete=models.CASCADE)
+
+
+class FeedToken(models.Model):
+    """
+    Adapted from authtoken.models.Token
+    """
+    key = models.CharField(max_length=40, primary_key=True)
+    user = models.OneToOneField(get_user_model(),
+                                related_name='feed_token',
+                                on_delete=models.CASCADE,
+                                )
+    created = models.DateTimeField(auto_now_add=True)
+
+    def save(self, *args, **kwargs):
+        if not self.key:
+            self.key = self.generate_key()
+        return super().save(*args, **kwargs)
+
+    @classmethod
+    def generate_key(cls):
+        return binascii.hexlify(os.urandom(20)).decode()
+
+    def __str__(self):
+        return self.key

bookmarks/queries.py

@@ -1,7 +1,8 @@
 from django.contrib.auth.models import User
-from django.db.models import Q, Count, Aggregate, CharField, Value, BooleanField
+from django.db.models import Q, Count, Aggregate, CharField, Value, BooleanField, QuerySet
 
 from bookmarks.models import Bookmark, Tag
+from bookmarks.utils import unique
 
 
 class Concat(Aggregate):
@@ -16,7 +17,17 @@ class Concat(Aggregate):
             **extra)
 
 
-def query_bookmarks(user: User, query_string: str):
+def query_bookmarks(user: User, query_string: str) -> QuerySet:
+    return _base_bookmarks_query(user, query_string) \
+        .filter(is_archived=False)
+
+
+def query_archived_bookmarks(user: User, query_string: str) -> QuerySet:
+    return _base_bookmarks_query(user, query_string) \
+        .filter(is_archived=True)
+
+
+def _base_bookmarks_query(user: User, query_string: str) -> QuerySet:
     # Add aggregated tag info to bookmark instances
     query_set = Bookmark.objects \
         .annotate(tag_count=Count('tags'),
@@ -41,41 +52,38 @@ def query_bookmarks(user: User, query_string: str):
 
     for tag_name in query['tag_names']:
         query_set = query_set.filter(
-            tags__name=tag_name
+            tags__name__iexact=tag_name
         )
 
-    # Sort by modification date
-    query_set = query_set.order_by('-date_modified')
+    # Untagged bookmarks
+    if query['untagged']:
+        query_set = query_set.filter(
+            tags=None
+        )
+    # Unread bookmarks
+    if query['unread']:
+        query_set = query_set.filter(
+            unread=True
+        )
+
+    # Sort by date added
+    query_set = query_set.order_by('-date_added')
 
     return query_set
 
 
-def query_tags(user: User, query_string: str):
-    query_set = Tag.objects
+def query_bookmark_tags(user: User, query_string: str) -> QuerySet:
+    bookmarks_query = query_bookmarks(user, query_string)
 
-    # Filter for user
-    query_set = query_set.filter(owner=user)
+    query_set = Tag.objects.filter(bookmark__in=bookmarks_query)
 
-    # Only show tags which have bookmarks
-    query_set = query_set.filter(bookmark__isnull=False)
+    return query_set.distinct()
 
-    # Split query into search terms and tags
-    query = _parse_query_string(query_string)
 
-    # Filter for search terms and tags
-    for term in query['search_terms']:
-        query_set = query_set.filter(
-            Q(bookmark__title__contains=term)
-            | Q(bookmark__description__contains=term)
-            | Q(bookmark__website_title__contains=term)
-            | Q(bookmark__website_description__contains=term)
-            | Q(bookmark__url__contains=term)
-        )
+def query_archived_bookmark_tags(user: User, query_string: str) -> QuerySet:
+    bookmarks_query = query_archived_bookmarks(user, query_string)
 
-    for tag_name in query['tag_names']:
-        query_set = query_set.filter(
-            bookmark__tags__name=tag_name
-        )
+    query_set = Tag.objects.filter(bookmark__in=bookmarks_query)
 
     return query_set.distinct()
 
@@ -93,10 +101,17 @@ def _parse_query_string(query_string):
     keywords = query_string.strip().split(' ')
     keywords = [word for word in keywords if word]
 
-    search_terms = [word for word in keywords if word[0] != '#']
+    search_terms = [word for word in keywords if word[0] != '#' and word[0] != '!']
     tag_names = [word[1:] for word in keywords if word[0] == '#']
+    tag_names = unique(tag_names, str.lower)
+
+    # Special search commands
+    untagged = '!untagged' in keywords
+    unread = '!unread' in keywords
 
     return {
         'search_terms': search_terms,
         'tag_names': tag_names,
+        'untagged': untagged,
+        'unread': unread,
     }

bookmarks/services/bookmarks.py

@@ -1,9 +1,12 @@
+from typing import Union
+
 from django.contrib.auth.models import User
 from django.utils import timezone
 
 from bookmarks.models import Bookmark, parse_tag_string
 from bookmarks.services.tags import get_or_create_tags
 from bookmarks.services.website_loader import load_website_metadata
+from bookmarks.services import tasks
 
 
 def create_bookmark(bookmark: Bookmark, tag_string: str, current_user: User):
@@ -25,10 +28,16 @@ def create_bookmark(bookmark: Bookmark, tag_string: str, current_user: User):
     # Update tag list
     _update_bookmark_tags(bookmark, tag_string, current_user)
     bookmark.save()
+    # Create snapshot on web archive
+    tasks.create_web_archive_snapshot(current_user, bookmark, False)
+
     return bookmark
 
 
 def update_bookmark(bookmark: Bookmark, tag_string, current_user: User):
+    # Detect URL change
+    original_bookmark = Bookmark.objects.get(id=bookmark.id)
+    has_url_changed = original_bookmark.url != bookmark.url
     # Update website info
     _update_website_metadata(bookmark)
     # Update tag list
@@ -36,9 +45,74 @@ def update_bookmark(bookmark: Bookmark, tag_string, current_user: User):
     # Update dates
     bookmark.date_modified = timezone.now()
     bookmark.save()
+    # Update web archive snapshot, if URL changed
+    if has_url_changed:
+        tasks.create_web_archive_snapshot(current_user, bookmark, True)
+
     return bookmark
 
 
+def archive_bookmark(bookmark: Bookmark):
+    bookmark.is_archived = True
+    bookmark.date_modified = timezone.now()
+    bookmark.save()
+    return bookmark
+
+
+def archive_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(is_archived=True, date_modified=timezone.now())
+
+
+def unarchive_bookmark(bookmark: Bookmark):
+    bookmark.is_archived = False
+    bookmark.date_modified = timezone.now()
+    bookmark.save()
+    return bookmark
+
+
+def unarchive_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(is_archived=False, date_modified=timezone.now())
+
+
+def delete_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.delete()
+
+
+def tag_bookmarks(bookmark_ids: [Union[int, str]], tag_string: str, current_user: User):
+    sanitized_bookmark_ids = _sanitize_id_list(bookmark_ids)
+    bookmarks = Bookmark.objects.filter(owner=current_user, id__in=sanitized_bookmark_ids)
+    tag_names = parse_tag_string(tag_string)
+    tags = get_or_create_tags(tag_names, current_user)
+
+    for bookmark in bookmarks:
+        bookmark.tags.add(*tags)
+        bookmark.date_modified = timezone.now()
+
+    Bookmark.objects.bulk_update(bookmarks, ['date_modified'])
+
+
+def untag_bookmarks(bookmark_ids: [Union[int, str]], tag_string: str, current_user: User):
+    sanitized_bookmark_ids = _sanitize_id_list(bookmark_ids)
+    bookmarks = Bookmark.objects.filter(owner=current_user, id__in=sanitized_bookmark_ids)
+    tag_names = parse_tag_string(tag_string)
+    tags = get_or_create_tags(tag_names, current_user)
+
+    for bookmark in bookmarks:
+        bookmark.tags.remove(*tags)
+        bookmark.date_modified = timezone.now()
+
+    Bookmark.objects.bulk_update(bookmarks, ['date_modified'])
+
+
 def _merge_bookmark_data(from_bookmark: Bookmark, to_bookmark: Bookmark):
     to_bookmark.title = from_bookmark.title
     to_bookmark.description = from_bookmark.description
@@ -51,6 +125,11 @@ def _update_website_metadata(bookmark: Bookmark):
 
 
 def _update_bookmark_tags(bookmark: Bookmark, tag_string: str, user: User):
-    tag_names = parse_tag_string(tag_string, ' ')
+    tag_names = parse_tag_string(tag_string)
     tags = get_or_create_tags(tag_names, user)
     bookmark.tags.set(tags)
+
+
+def _sanitize_id_list(bookmark_ids: [Union[int, str]]) -> [int]:
+    # Convert string ids to int if necessary
+    return [int(bm_id) if isinstance(bm_id, str) else bm_id for bm_id in bookmark_ids]

bookmarks/services/importer.py

@@ -1,13 +1,14 @@
 import logging
 from dataclasses import dataclass
-from datetime import datetime
+from typing import List
 
-import bs4
-from bs4 import BeautifulSoup
 from django.contrib.auth.models import User
+from django.utils import timezone
 
-from bookmarks.models import Bookmark, parse_tag_string
-from bookmarks.services.tags import get_or_create_tags
+from bookmarks.models import Bookmark, Tag, parse_tag_string
+from bookmarks.services import tasks
+from bookmarks.services.parser import parse, NetscapeBookmark
+from bookmarks.utils import parse_timestamp
 
 logger = logging.getLogger(__name__)
 
@@ -19,88 +20,180 @@ class ImportResult:
     failed: int = 0
 
 
+class TagCache:
+    def __init__(self, user: User):
+        self.user = user
+        self.cache = dict()
+        # Init cache with all existing tags for that user
+        tags = Tag.objects.filter(owner=user)
+        for tag in tags:
+            self.put(tag)
+
+    def get(self, tag_name: str):
+        tag_name_lowercase = tag_name.lower()
+        if tag_name_lowercase in self.cache:
+            return self.cache[tag_name_lowercase]
+        else:
+            return None
+
+    def get_all(self, tag_names: List[str]):
+        result = []
+        for tag_name in tag_names:
+            tag = self.get(tag_name)
+            # Prevent returning duplicates
+            if not (tag in result):
+                result.append(tag)
+
+        return result
+
+    def put(self, tag: Tag):
+        self.cache[tag.name.lower()] = tag
+
+
 def import_netscape_html(html: str, user: User):
     result = ImportResult()
+    import_start = timezone.now()
 
     try:
-        soup = BeautifulSoup(html, 'html.parser')
+        netscape_bookmarks = parse(html)
     except:
         logging.exception('Could not read bookmarks file.')
         raise
 
-    bookmark_tags = soup.find_all('dt')
+    parse_end = timezone.now()
+    logger.debug(f'Parse duration: {parse_end - import_start}')
 
-    for bookmark_tag in bookmark_tags:
-        result.total = result.total + 1
-        try:
-            _import_bookmark_tag(bookmark_tag, user)
-            result.success = result.success + 1
-        except:
-            shortened_bookmark_tag_str = str(bookmark_tag)[:100] + '...'
-            logging.exception('Error importing bookmark: ' + shortened_bookmark_tag_str)
-            result.failed = result.failed + 1
+    # Create and cache all tags beforehand
+    _create_missing_tags(netscape_bookmarks, user)
+    tag_cache = TagCache(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)
+
+    # Create snapshots for newly imported bookmarks
+    tasks.schedule_bookmarks_without_snapshots(user)
+
+    end = timezone.now()
+    logger.debug(f'Import duration: {end - import_start}')
 
     return result
 
 
-def _import_bookmark_tag(bookmark_tag: bs4.Tag, user: User):
-    link_tag = bookmark_tag.a
+def _create_missing_tags(netscape_bookmarks: List[NetscapeBookmark], user: User):
+    tag_cache = TagCache(user)
+    tags_to_create = []
 
-    if link_tag is None:
-        return
+    for netscape_bookmark in netscape_bookmarks:
+        tag_names = parse_tag_string(netscape_bookmark.tag_string)
+        for tag_name in tag_names:
+            tag = tag_cache.get(tag_name)
+            if not tag:
+                tag = Tag(name=tag_name, owner=user)
+                tag.date_added = timezone.now()
+                tags_to_create.append(tag)
+                tag_cache.put(tag)
 
-    # Either modify existing bookmark for the URL or create new one
-    url = link_tag['href']
-    description = _extract_description(bookmark_tag)
-    bookmark = _get_or_create_bookmark(url, user)
+    Tag.objects.bulk_create(tags_to_create)
 
-    bookmark.url = url
-    add_date = link_tag.get('add_date', datetime.now().timestamp())
-    bookmark.date_added = datetime.utcfromtimestamp(int(add_date)).astimezone()
+
+def _get_batches(items: List, batch_size: int):
+    batches = []
+    offset = 0
+    num_items = len(items)
+
+    while offset < num_items:
+        batch = items[offset:min(offset + batch_size, num_items)]
+        if len(batch) > 0:
+            batches.append(batch)
+        offset = offset + batch_size
+
+    return batches
+
+
+def _import_batch(netscape_bookmarks: List[NetscapeBookmark], user: User, 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)
+
+    # Create or update bookmarks from parsed Netscape bookmarks
+    bookmarks_to_create = []
+    bookmarks_to_update = []
+
+    for netscape_bookmark in netscape_bookmarks:
+        result.total = result.total + 1
+        try:
+            # Lookup existing bookmark by URL, or create new bookmark if there is no bookmark for that URL yet
+            bookmark = next(
+                (bookmark for bookmark in existing_bookmarks if bookmark.url == netscape_bookmark.href), None)
+            if not bookmark:
+                bookmark = Bookmark(owner=user)
+                is_update = False
+            else:
+                is_update = True
+            # Copy data from parsed bookmark
+            _copy_bookmark_data(netscape_bookmark, bookmark)
+            # Validate bookmark fields, exclude owner to prevent n+1 database query,
+            # also there is no specific validation on owner
+            bookmark.clean_fields(exclude=['owner'])
+            # Schedule for update or insert
+            if is_update:
+                bookmarks_to_update.append(bookmark)
+            else:
+                bookmarks_to_create.append(bookmark)
+
+            result.success = result.success + 1
+        except:
+            shortened_bookmark_tag_str = str(netscape_bookmark)[:100] + '...'
+            logging.exception('Error importing bookmark: ' + shortened_bookmark_tag_str)
+            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'])
+    # Bulk insert new bookmarks into DB
+    Bookmark.objects.bulk_create(bookmarks_to_create)
+
+    # Bulk assign tags
+    # In Django 3, bulk_create does not return the auto-generated IDs when bulk inserting,
+    # so we have to reload the inserted bookmarks, and match them to the parsed bookmarks by URL
+    existing_bookmarks = Bookmark.objects.filter(owner=user, url__in=batch_urls)
+
+    BookmarkToTagRelationShip = Bookmark.tags.through
+    relationships = []
+
+    for netscape_bookmark in netscape_bookmarks:
+        # Lookup bookmark by URL again
+        bookmark = next(
+            (bookmark for bookmark in existing_bookmarks if bookmark.url == netscape_bookmark.href), None)
+
+        if not bookmark:
+            # Something is wrong, we should have just created this bookmark
+            shortened_bookmark_tag_str = str(netscape_bookmark)[:100] + '...'
+            logging.warning(
+                f'Failed to assign tags to the bookmark: {shortened_bookmark_tag_str}. Could not find bookmark by URL.')
+            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)
+        for tag in tags:
+            relationships.append(BookmarkToTagRelationShip(bookmark=bookmark, tag=tag))
+
+    # Insert all bookmark -> tag associations at once, should ignore errors if association already exists
+    BookmarkToTagRelationShip.objects.bulk_create(relationships, ignore_conflicts=True)
+
+
+def _copy_bookmark_data(netscape_bookmark: NetscapeBookmark, bookmark: Bookmark):
+    bookmark.url = netscape_bookmark.href
+    if netscape_bookmark.date_added:
+        bookmark.date_added = parse_timestamp(netscape_bookmark.date_added)
+    else:
+        bookmark.date_added = timezone.now()
     bookmark.date_modified = bookmark.date_added
-    bookmark.unread = link_tag.get('toread', '0') == '1'
-    bookmark.title = link_tag.string
-    if description:
-        bookmark.description = description
-    bookmark.owner = user
-
-    bookmark.save()
-
-    # Set tags
-    tag_string = link_tag.get('tags', '')
-    tag_names = parse_tag_string(tag_string)
-    tags = get_or_create_tags(tag_names, user)
-
-    bookmark.tags.set(tags)
-    bookmark.save()
-
-
-def _get_or_create_bookmark(url: str, user: User):
-    try:
-        return Bookmark.objects.get(url=url, owner=user)
-    except Bookmark.DoesNotExist:
-        return Bookmark()
-
-
-def _extract_description(bookmark_tag: bs4.Tag):
-    """
-    Since the Netscape HTML format has no closing tags, all following bookmark tags are part of the description tag
-    so to extract the description text we have to get creative. For now we combine the text of all text nodes until we
-    detect a <dt> tag which indicates a new bookmark
-    :param bookmark_tag:
-    :return:
-    """
-    description_tag = bookmark_tag.find('dd', recursive=False)
-
-    if description_tag is None:
-        return None
-
-    description = ''
-
-    for content in description_tag.contents:
-        if type(content) is bs4.element.Tag and content.name == 'dt':
-            break
-        if type(content) is bs4.element.NavigableString:
-            description += content
-
-    return description.strip()
+    bookmark.unread = netscape_bookmark.to_read
+    if netscape_bookmark.title:
+        bookmark.title = netscape_bookmark.title
+    if netscape_bookmark.description:
+        bookmark.description = netscape_bookmark.description

bookmarks/services/parser.py

@@ -0,0 +1,87 @@
+from dataclasses import dataclass
+from html.parser import HTMLParser
+from typing import Dict, List
+
+
+@dataclass
+class NetscapeBookmark:
+    href: str
+    title: str
+    description: str
+    date_added: str
+    tag_string: str
+    to_read: bool
+
+
+class BookmarkParser(HTMLParser):
+    def __init__(self):
+        super().__init__()
+        self.bookmarks = []
+
+        self.current_tag = None
+        self.bookmark = None
+        self.href = ''
+        self.add_date = ''
+        self.tags = ''
+        self.title = ''
+        self.description = ''
+        self.toread = ''
+
+    def handle_starttag(self, tag: str, attrs: list):
+        name = 'handle_start_' + tag.lower()
+        if name in dir(self):
+            getattr(self, name)({k.lower(): v for k, v in attrs})
+        self.current_tag = tag
+
+    def handle_endtag(self, tag: str):
+        name = 'handle_end_' + tag.lower()
+        if name in dir(self):
+            getattr(self, name)()
+        self.current_tag = None
+
+    def handle_data(self, data):
+        name = f'handle_{self.current_tag}_data'
+        if name in dir(self):
+            getattr(self, name)(data)
+
+    def handle_end_dl(self):
+        self.add_bookmark()
+
+    def handle_start_dt(self, attrs: Dict[str, str]):
+        self.add_bookmark()
+
+    def handle_start_a(self, attrs: Dict[str, str]):
+        vars(self).update(attrs)
+        self.bookmark = NetscapeBookmark(
+            href=self.href,
+            title='',
+            description='',
+            date_added=self.add_date,
+            tag_string=self.tags,
+            to_read=self.toread == '1'
+        )
+
+    def handle_a_data(self, data):
+        self.title = data.strip()
+
+    def handle_dd_data(self, data):
+        self.description = data.strip()
+
+    def add_bookmark(self):
+        if self.bookmark:
+            self.bookmark.title = self.title
+            self.bookmark.description = self.description
+            self.bookmarks.append(self.bookmark)
+        self.bookmark = None
+        self.href = ''
+        self.add_date = ''
+        self.tags = ''
+        self.title = ''
+        self.description = ''
+        self.toread = ''
+
+
+def parse(html: str) -> List[NetscapeBookmark]:
+    parser = BookmarkParser()
+    parser.feed(html)
+    return parser.bookmarks

bookmarks/services/tags.py

@@ -1,20 +1,37 @@
+import logging
+import operator
 from typing import List
 
 from django.contrib.auth.models import User
 from django.utils import timezone
 
 from bookmarks.models import Tag
+from bookmarks.utils import unique
+
+logger = logging.getLogger(__name__)
 
 
 def get_or_create_tags(tag_names: List[str], user: User):
-    return [get_or_create_tag(tag_name, user) for tag_name in tag_names]
+    tags = [get_or_create_tag(tag_name, user) for tag_name in tag_names]
+    return unique(tags, operator.attrgetter('id'))
 
 
 def get_or_create_tag(name: str, user: User):
     try:
-        return Tag.objects.get(name=name, owner=user)
+        return Tag.objects.get(name__iexact=name, owner=user)
     except Tag.DoesNotExist:
         tag = Tag(name=name, owner=user)
         tag.date_added = timezone.now()
         tag.save()
         return tag
+    except Tag.MultipleObjectsReturned:
+        # Legacy databases might contain duplicate tags with different capitalization
+        first_tag = Tag.objects.filter(name__iexact=name, owner=user).first()
+        message = (
+            "Found multiple tags for the name '{0}' with different capitalization. "
+            "Using the first tag with the name '{1}'. "
+            "Since v.1.2 tags work case-insensitive, which means duplicates of the same name are not allowed anymore. "
+            "To solve this error remove the duplicate tag in admin."
+        ).format(name, first_tag.name)
+        logger.error(message)
+        return first_tag

bookmarks/services/tasks.py

@@ -0,0 +1,66 @@
+import logging
+
+import waybackpy
+from background_task import background
+from django.conf import settings
+from django.contrib.auth import get_user_model
+from django.contrib.auth.models import User
+from waybackpy.exceptions import WaybackError
+
+from bookmarks.models import Bookmark, UserProfile
+from bookmarks.services.website_loader import DEFAULT_USER_AGENT
+
+logger = logging.getLogger(__name__)
+
+
+def is_web_archive_integration_active(user: User) -> bool:
+    background_tasks_enabled = not settings.LD_DISABLE_BACKGROUND_TASKS
+    web_archive_integration_enabled = \
+        user.profile.web_archive_integration == UserProfile.WEB_ARCHIVE_INTEGRATION_ENABLED
+
+    return background_tasks_enabled and web_archive_integration_enabled
+
+
+def create_web_archive_snapshot(user: User, bookmark: Bookmark, force_update: bool):
+    if is_web_archive_integration_active(user):
+        _create_web_archive_snapshot_task(bookmark.id, force_update)
+
+
+@background()
+def _create_web_archive_snapshot_task(bookmark_id: int, force_update: bool):
+    try:
+        bookmark = Bookmark.objects.get(id=bookmark_id)
+    except Bookmark.DoesNotExist:
+        return
+
+    # Skip if snapshot exists and update is not explicitly requested
+    if bookmark.web_archive_snapshot_url and not force_update:
+        return
+
+    logger.debug(f'Create web archive link for bookmark: {bookmark}...')
+
+    archive = waybackpy.WaybackMachineSaveAPI(bookmark.url, DEFAULT_USER_AGENT)
+
+    try:
+        archive.save()
+    except WaybackError as error:
+        logger.exception(f'Error creating web archive link for bookmark: {bookmark}...', exc_info=error)
+        raise
+
+    bookmark.web_archive_snapshot_url = archive.archive_url
+    bookmark.save()
+    logger.debug(f'Successfully created web archive link for bookmark: {bookmark}...')
+
+
+def schedule_bookmarks_without_snapshots(user: User):
+    if is_web_archive_integration_active(user):
+        _schedule_bookmarks_without_snapshots_task(user.id)
+
+
+@background()
+def _schedule_bookmarks_without_snapshots_task(user_id: int):
+    user = get_user_model().objects.get(id=user_id)
+    bookmarks_without_snapshots = Bookmark.objects.filter(web_archive_snapshot_url__exact='', owner=user)
+
+    for bookmark in bookmarks_without_snapshots:
+        _create_web_archive_snapshot_task(bookmark.id, False)

bookmarks/services/website_loader.py

@@ -2,6 +2,7 @@ from dataclasses import dataclass
 
 import requests
 from bs4 import BeautifulSoup
+from charset_normalizer import from_bytes
 
 
 @dataclass
@@ -33,5 +34,25 @@ def load_website_metadata(url: str):
 
 
 def load_page(url: str):
-    r = requests.get(url)
-    return r.text
+    headers = fake_request_headers()
+    r = requests.get(url, timeout=10, headers=headers)
+
+    # Use charset_normalizer to determine encoding that best matches the response content
+    # Several sites seem to specify the response encoding incorrectly, so we ignore it and use custom logic instead
+    # This is different from Response.text which does respect the encoding specified in the response first,
+    # before trying to determine one
+    results = from_bytes(r.content)
+    return str(results.best())
+
+
+DEFAULT_USER_AGENT = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36'
+
+
+def fake_request_headers():
+    return {
+        "Accept": "text/html,application/xhtml+xml,application/xml",
+        "Accept-Encoding": "gzip, deflate",
+        "Dnt": "1",
+        "Upgrade-Insecure-Requests": "1",
+        "User-Agent": DEFAULT_USER_AGENT,
+    }

bookmarks/signals.py

@@ -0,0 +1,8 @@
+from django.contrib.auth import user_logged_in
+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)

bookmarks/static/bulk_edit.js

@@ -0,0 +1,86 @@
+(function () {
+    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';
+        }
+    });
+
+    // Init tag auto-complete
+    function initTagAutoComplete() {
+        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);
+    }
+
+    initTagAutoComplete();
+})()

bookmarks/static/shared.js

@@ -0,0 +1,83 @@
+(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();
+})()

bookmarks/styles/base.scss

@@ -1,29 +1,48 @@
 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;
+  }
 }
 
 header {
   margin-bottom: 40px;
 }
 
+header .toasts {
+  margin-bottom: 20px;
+
+  .toast {
+    margin-bottom: 0.4rem;
+  }
+
+  .toast a.btn-clear:visited {
+    color: currentColor;
+  }
+}
+
 .navbar {
 
   .navbar-brand {
 
+    display: flex;
+    align-items: center;
+
     .logo {
-      background-color: $primary-color;
-      color: $light-color;
-      padding: 14px;
+      width: 28px;
+      height: 28px;
     }
 
     h1 {
       text-transform: uppercase;
       display: inline-block;
+      margin: 0 0 0 8px;
     }
   }
 
   .dropdown-toggle {
-    padding: 0;
   }
 }
 
@@ -39,12 +58,47 @@ h2 {
   color: $gray-color-dark;
 }
 
-// Button color should not change for anchor elements
-.btn:visited:not(.btn-primary) {
-  color: $primary-color;
+// 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;
 }
 
 // Increase spacing between columns
 .container > .columns > .column:not(:first-child) {
   padding-left: 2rem;
 }
+
+// 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;
+}
+
+// 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;
+  }
+}

bookmarks/styles/bookmarks.scss

@@ -1,7 +1,45 @@
-.bookmarks-page {
+.bookmarks-page .search {
+  $searchbox-width: 180px;
+  $searchbox-width-md: 300px;
+  $searchbox-height: 1.8rem;
 
-  .search input[type=search] {
-    width: 200px;
+  // 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;
   }
 }
 
@@ -14,28 +52,46 @@ ul.bookmark-list {
   .description {
     color: $gray-color-dark;
 
-    a {
+    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-left: 0;
-    padding-right: 0;
+    padding: 0;
+    height: auto;
+    vertical-align: unset;
+    border: none;
 
     &:focus,
     &:hover,
     &:active,
     &.active {
-      color: darken($gray-color, 10%);
+      color: $gray-color-dark;
     }
   }
+
+  .bulk-edit-toggle {
+    display: none;
+  }
+}
+
+.bookmark-pagination {
+  margin-top: 1rem;
 }
 
 .tag-cloud {
 
-  a {
+  a, a:visited:hover {
     color: $alternative-color;
   }
 
@@ -52,12 +108,41 @@ ul.bookmark-list {
 
 .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 {
-    visibility: hidden;
+    display: none;
     color: $warning-color;
 
     a {
@@ -67,3 +152,101 @@ ul.bookmark-list {
     }
   }
 }
+
+/* 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;
+}

bookmarks/styles/dark.scss

@@ -0,0 +1,32 @@
+/* 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;
+}

bookmarks/styles/index.scss

@@ -1,27 +0,0 @@
-// Font sizes
-$html-font-size: 18px !default;
-
-//$alternative-color: #c84e00;
-//$alternative-color: #FF84E8;
-//$alternative-color: #98C1D9;
-//$alternative-color: #7B287D;
-$alternative-color: #05a6a3;
-$alternative-color-dark: darken($alternative-color, 5%);
-
-// Import Spectre CSS lib
-@import "../../node_modules/spectre.css/src/spectre";
-@import "../../node_modules/spectre.css/src/autocomplete";
-// Import Spectre icons
-@import "../../node_modules/spectre.css/src/icons/icons-core";
-@import "../../node_modules/spectre.css/src/icons/icons-navigation";
-@import "../../node_modules/spectre.css/src/icons/icons-action";
-@import "../../node_modules/spectre.css/src/icons/icons-object";
-
-
-// Import style modules
-@import "base";
-@import "util";
-@import "shared";
-@import "bookmarks";
-@import "settings";
-@import "auth";

bookmarks/styles/settings.scss

@@ -1,9 +1,18 @@
 .settings-page {
   section.content-area {
     margin-bottom: 2rem;
+
+    h2 {
+      font-size: 1.0rem;
+      margin-bottom: 0.8rem;
+    }
   }
 
   .input-group > input[type=submit] {
     height: auto;
   }
+
+  section.about table {
+    max-width: 500px;
+  }
 }

bookmarks/styles/shared.scss

@@ -1,10 +1,10 @@
+// Content area component
 section.content-area {
 
   .content-area-header {
     border-bottom: solid 1px $border-color;
     display: flex;
     flex-direction: row;
-    align-items: baseline;
     margin-bottom: 16px;
 
     h2 {
@@ -12,3 +12,11 @@ section.content-area {
     }
   }
 }
+
+// Confirm button component
+.btn-confirmation-action {
+  color: $error-color !important;
+  &:hover {
+    text-decoration: underline;
+  }
+}

bookmarks/styles/theme-dark.scss

@@ -0,0 +1,17 @@
+// Import custom variables
+@import "variables-dark";
+
+// Import Spectre CSS lib
+@import "../../node_modules/spectre.css/src/spectre";
+@import "../../node_modules/spectre.css/src/autocomplete";
+
+// Import style modules
+@import "base";
+@import "util";
+@import "shared";
+@import "bookmarks";
+@import "settings";
+@import "auth";
+
+// Dark theme overrides
+@import "dark";

bookmarks/styles/theme-light.scss

@@ -0,0 +1,14 @@
+// Import custom variables
+@import "variables-light";
+
+// Import Spectre CSS lib
+@import "../../node_modules/spectre.css/src/spectre";
+@import "../../node_modules/spectre.css/src/autocomplete";
+
+// Import style modules
+@import "base";
+@import "util";
+@import "shared";
+@import "bookmarks";
+@import "settings";
+@import "auth";

bookmarks/styles/util.scss

@@ -7,3 +7,15 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.text-sm {
+  font-size: 0.7rem;
+}
+
+.text-gray-dark {
+  color: $gray-color-dark;
+}
+
+.align-baseline {
+  align-items: baseline;
+}

bookmarks/styles/variables-dark.scss

@@ -0,0 +1,28 @@
+$html-font-size: 18px !default;
+
+$body-bg: #161822 !default;
+$bg-color: lighten($body-bg, 5%) !default;
+$bg-color-light: lighten($body-bg, 5%) !default;
+
+$border-color: #4C4E53 !default;
+$border-color-dark: $border-color !default;
+
+$body-font-color: #b5bec8 !default;
+$light-color: #fafafa !default;
+
+$gray-color: #7f879b !default;
+$gray-color-dark: lighten($gray-color, 20%) !default;
+
+$primary-color: #a8b1ff !default;
+$primary-color-dark: saturate($primary-color, 5%) !default;
+$secondary-color: lighten($body-bg, 10%) !default;
+
+$link-color: $primary-color !default;
+$link-color-dark: darken($link-color, 5%) !default;
+$link-color-light: $link-color !default;
+
+$alternative-color: #59bdb9;
+$alternative-color-dark: #73f1eb;
+
+/* Dark theme specific */
+$dt-primary-button-color: #5761cb !default;

bookmarks/styles/variables-light.scss

@@ -0,0 +1,4 @@
+$html-font-size: 18px !default;
+
+$alternative-color: #05a6a3;
+$alternative-color-dark: darken($alternative-color, 5%);

bookmarks/templates/bookmarks/archive.html

@@ -0,0 +1,46 @@
+{% extends "bookmarks/layout.html" %}
+{% load static %}
+{% load shared %}
+{% load bookmarks %}
+
+{% block content %}
+
+    {% include 'bookmarks/bulk_edit/state.html' %}
+
+    <div class="bookmarks-page columns">
+
+        {# Bookmark list #}
+        <section class="content-area column col-8 col-md-12">
+            <div class="content-area-header">
+                <h2>Archived bookmarks</h2>
+                <div class="spacer"></div>
+                {% bookmark_search query tags mode='archive' %}
+                {% include 'bookmarks/bulk_edit/toggle.html' %}
+            </div>
+
+            <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ return_url }}"
+                  method="post">
+                {% csrf_token %}
+                {% include 'bookmarks/bulk_edit/bar.html' with mode='archive' %}
+
+                {% if empty %}
+                    {% include 'bookmarks/empty_bookmarks.html' %}
+                {% else %}
+                    {% bookmark_list bookmarks return_url link_target %}
+                {% endif %}
+            </form>
+        </section>
+
+        {# Tag list #}
+        <section class="content-area column col-4 hide-md">
+            <div class="content-area-header">
+                <h2>Tags</h2>
+            </div>
+            {% tag_cloud tags %}
+        </section>
+    </div>
+
+    <script src="{% static "bundle.js" %}"></script>
+    <script src="{% static "shared.js" %}"></script>
+    <script src="{% static "bulk_edit.js" %}"></script>
+{% endblock %}

bookmarks/templates/bookmarks/bookmark_list.html

@@ -1,18 +1,23 @@
 {% load shared %}
+{% load pagination %}
 
 <ul class="bookmark-list">
     {% for bookmark in bookmarks %}
-        <li>
+        <li data-is-bookmark-item>
+            <label class="form-checkbox bulk-edit-toggle">
+                <input type="checkbox" name="bookmark_id" value="{{ bookmark.id }}">
+                <i class="form-icon"></i>
+            </label>
             <div class="title truncate">
-                <a href="{{ bookmark.url }}" target="_blank" rel="noopener">{{ bookmark.resolved_title }}</a>
+                <a href="{{ bookmark.url }}" target="{{ link_target }}" rel="noopener" class="{% if bookmark.unread %}text-italic{% endif %}">{{ bookmark.resolved_title }}</a>
             </div>
             <div class="description truncate">
                 {% if bookmark.tag_names %}
                     <span>
-                        {% for tag_name in bookmark.tag_names %}
-                            <a href="?{% append_query_param q=tag_name|hash_tag %}">{{ tag_name|hash_tag }}</a>
-                        {% endfor %}
-                    </span>
+                            {% for tag_name in bookmark.tag_names %}
+                                <a href="?{% append_query_param q=tag_name|hash_tag %}">{{ tag_name|hash_tag }}</a>
+                            {% endfor %}
+                        </span>
                 {% endif %}
                 {% if bookmark.tag_names and bookmark.resolved_description %} | {% endif %}
 
@@ -21,22 +26,55 @@
                 {% 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>
+                {% 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 %}
                 <a href="{% url 'bookmarks:edit' bookmark.id %}?return_url={{ return_url }}"
                    class="btn btn-link btn-sm">Edit</a>
-                <a href="{% url 'bookmarks:remove' bookmark.id %}?return_url={{ return_url }}"
-                   class="btn btn-link btn-sm"
-                   onclick="return confirm('Do you really want to delete this bookmark?')">Remove</a>
+                {% if bookmark.is_archived %}
+                    <button type="submit" name="unarchive" value="{{ bookmark.id }}"
+                       class="btn btn-link btn-sm">Unarchive</button>
+                {% else %}
+                    <button type="submit" name="archive" value="{{ bookmark.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>
+                {% 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 %}
             </div>
         </li>
     {% endfor %}
 </ul>
-<div class="pagination">
-    {% if bookmarks.has_next %}
-        <a href="?{% update_query_string page=bookmarks.next_page_number %}"
-           class="btn mr-2">< Older</a>
-    {% endif %}
-    {% if bookmarks.has_previous %}
-        <a href="?{% update_query_string page=bookmarks.previous_page_number %}"
-           class="btn">Newer ></a>
-    {% endif %}
+
+<div class="bookmark-pagination">
+    {% pagination bookmarks %}
 </div>

bookmarks/templates/bookmarks/bookmarklet.html

@@ -1,24 +0,0 @@
-{% extends "bookmarks/layout.html" %}
-
-{% block content %}
-    <div class="columns">
-        <section class="content-area column col-12">
-            <div class="content-area-header">
-                <h2>Bookmarklet</h2>
-            </div>
-            <p>The bookmarklet is a quick way to add new bookmarks without opening the linkding application
-                first. Here's how it works:</p>
-            <ul>
-                <li>Drag the bookmarklet below into your browsers bookmark bar / toolbar</li>
-                <li>Open the website that you want to bookmark</li>
-                <li>Click the bookmarklet in your browsers toolbar</li>
-                <li>linkding opens in a new window  or tab and allows you to add a bookmark for the site</li>
-                <li>After saving the bookmark the linkding window closes and you are back on your website</li>
-            </ul>
-            <p>Drag the following bookmarklet to your browsers toolbar:</p>
-            <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}"
-               class="btn btn-primary">📎 Add bookmark</a>
-        </section>
-    </div>
-{% endblock %}
-

bookmarks/templates/bookmarks/bulk_edit/bar.html

@@ -0,0 +1,31 @@
+<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>
+</div>

bookmarks/templates/bookmarks/bulk_edit/state.html

@@ -0,0 +1 @@
+<input id="bulk-edit-mode" type="checkbox">

bookmarks/templates/bookmarks/bulk_edit/toggle.html

@@ -0,0 +1,8 @@
+<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>

bookmarks/templates/bookmarks/edit.html

@@ -7,8 +7,8 @@
             <div class="content-area-header">
                 <h2>Edit bookmark</h2>
             </div>
-            <form action="{% url 'bookmarks:edit' bookmark_id %}" method="post" class="col-6 col-md-12" novalidate>
-                {% bookmark_form form all_tags return_url bookmark_id %}
+            <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>

bookmarks/templates/bookmarks/empty_bookmarks.html

@@ -1,8 +1,8 @@
 <div class="empty">
     <p class="empty-title h5">You have no bookmarks yet</p>
     <p class="empty-subtitle">
-        You can get started by <a href="{% url 'bookmarks:new' %}">adding</a> bookmarks, <a
-            href="{% url 'bookmarks:settings.index' %}">importing</a> your existing bookmarks or <a
-            href="{% url 'bookmarks:bookmarklet' %}">configuring</a> the bookmarklet.
+        You can get started by <a href="{% url 'bookmarks:new' %}">adding</a> bookmarks,
+        <a href="{% url 'bookmarks:settings.general' %}">importing</a> your existing bookmarks or configuring the
+        <a href="{% url 'bookmarks:settings.integrations' %}">browser extension</a> or the <a href="{% url 'bookmarks:settings.integrations' %}">bookmarklet</a>.
     </p>
 </div>

bookmarks/templates/bookmarks/form.html

@@ -4,22 +4,22 @@
 <div class="bookmarks-form">
     {% csrf_token %}
     {{ form.auto_close|attr:"type:hidden" }}
-    {{ form.return_url|attr:"type:hidden" }}
     <div class="form-group {% if form.url.errors %}has-error{% endif %}">
         <label for="{{ form.url.id_for_label }}" class="form-label">URL</label>
-        {{ form.url|add_class:"form-input"|attr:"autofocus" }}
+        {{ form.url|add_class:"form-input"|attr:"autofocus"|attr:"placeholder: " }}
         {% if form.url.errors %}
             <div class="form-input-hint">
                 {{ form.url.errors }}
             </div>
         {% endif %}
         <div class="form-input-hint bookmark-exists">
-            This URL is already bookmarked. You can <a href="#">edit</a> it or you can overwrite the existing bookmark by saving this form.
+            This URL is already bookmarked. You can <a href="#">edit</a> it or you can overwrite the existing bookmark
+            by saving this form.
         </div>
     </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" }}
+        {{ form.tag_string|add_class:"form-input"|attr:"autocomplete: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
@@ -30,8 +30,16 @@
     <div class="form-group has-icon-right">
         <label for="{{ form.title.id_for_label }}" class="form-label">Title</label>
         <div class="has-icon-right">
-            {{ form.title|add_class:"form-input" }}
+            {{ form.title|add_class:"form-input"|attr:"autocomplete:off" }}
             <i class="form-icon loading"></i>
+            <a class="btn btn-link form-icon" title="Edit title from website">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
+                    <path fill-rule="evenodd"
+                          d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                          clip-rule="evenodd"/>
+                </svg>
+            </a>
         </div>
         <div class="form-input-hint">
             Optional, leave empty to use title from website.
@@ -41,14 +49,32 @@
     <div class="form-group">
         <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
         <div class="has-icon-right">
-            {{ form.description|add_class:"form-input"|attr:"rows:4" }}
+            {{ form.description|add_class:"form-input"|attr:"rows:2" }}
             <i class="form-icon loading"></i>
+            <a class="btn btn-link form-icon" title="Edit description from website">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"/>
+                    <path fill-rule="evenodd"
+                          d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                          clip-rule="evenodd"/>
+                </svg>
+            </a>
         </div>
         <div class="form-input-hint">
             Optional, leave empty to use description from website.
         </div>
         {{ form.description.errors }}
     </div>
+    <div class="form-group">
+      <label for="{{ form.unread.id_for_label }}" class="form-checkbox">
+        {{ form.unread }}
+        <i class="form-icon"></i>
+        <span>Mark as unread</span>
+      </label>
+      <div class="form-input-hint">
+        Unread bookmarks can be filtered for, and marked as read after you had a chance to look at them.
+      </div>
+    </div>
     <br/>
     <div class="form-group">
         {% if auto_close %}
@@ -64,8 +90,7 @@
     <script type="application/javascript">
         const wrapper = document.createElement('div');
         const tagInput = document.getElementById('{{ form.tag_string.id_for_label }}');
-        const allTagsString = '{{ all_tags }}';
-        const allTags = allTagsString.split(' ');
+        const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
 
         new linkding.TagAutoComplete({
             target: wrapper,
@@ -73,7 +98,7 @@
                 id: '{{ form.tag_string.id_for_label }}',
                 name: '{{ form.tag_string.name }}',
                 value: tagInput.value,
-                tags: allTags
+                apiClient: apiClient
             }
         });
 
@@ -83,49 +108,72 @@
         /**
          * - Pre-fill title and description placeholders with metadata from website as soon as URL changes
          * - Show hint if URL is already bookmarked
+         * - Setup buttons that allow editing of scraped website values
          */
         (function init() {
             const urlInput = document.getElementById('{{ form.url.id_for_label }}');
             const titleInput = document.getElementById('{{ form.title.id_for_label }}');
             const descriptionInput = document.getElementById('{{ form.description.id_for_label }}');
-            const editedBookmarkId = {{ bookmark_id }}
+            const editedBookmarkId = {{ bookmark_id }};
 
-            urlInput.addEventListener('input', checkUrl);
-
-            function checkUrl() {
-                toggleIcon(titleInput, true);
-                toggleIcon(descriptionInput, true);
-
-                const websiteUrl = encodeURIComponent(urlInput.value);
-                const requestUrl = `{% url 'bookmarks:api.check_url' %}?url=${websiteUrl}`;
-                fetch(requestUrl)
-                    .then(response => response.json())
-                    .then(data => {
-                        const metadata = data.metadata
-                        titleInput.setAttribute('placeholder', metadata.title || '');
-                        descriptionInput.setAttribute('placeholder', metadata.description || '');
-                        toggleIcon(titleInput, false);
-                        toggleIcon(descriptionInput, false);
-
-                        // Display hint if URL is already bookmarked
-                        const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists')
-                        const editExistingBookmarkLink = bookmarkExistsHint.querySelector('a')
-
-                        if(data.bookmark && data.bookmark.id !== editedBookmarkId) {
-                            bookmarkExistsHint.style['visibility'] = 'visible'
-                            editExistingBookmarkLink.href = data.bookmark.edit_url
-                        } else {
-                            bookmarkExistsHint.style['visibility'] = 'hidden'
-                        }
-                    });
-            }
-
-            function toggleIcon(input, show) {
+            function toggleLoadingIcon(input, show) {
                 const icon = input.parentNode.querySelector('i.form-icon');
                 icon.style['visibility'] = show ? 'visible' : 'hidden';
             }
 
+            function updatePlaceholder(input, value) {
+                if (value) {
+                    input.setAttribute('placeholder', value);
+                } else {
+                    input.removeAttribute('placeholder');
+                }
+            }
+
+            function checkUrl() {
+                toggleLoadingIcon(titleInput, true);
+                toggleLoadingIcon(descriptionInput, true);
+                updatePlaceholder(titleInput, null);
+                updatePlaceholder(descriptionInput, null);
+
+                const websiteUrl = encodeURIComponent(urlInput.value);
+                const requestUrl = `{% url 'bookmarks:api-root' %}bookmarks/check?url=${websiteUrl}`;
+                fetch(requestUrl)
+                    .then(response => response.json())
+                    .then(data => {
+                        const metadata = data.metadata;
+                        updatePlaceholder(titleInput, metadata.title);
+                        updatePlaceholder(descriptionInput, metadata.description);
+                        toggleLoadingIcon(titleInput, false);
+                        toggleLoadingIcon(descriptionInput, false);
+
+                        // Display hint if URL is already bookmarked
+                        const bookmarkExistsHint = document.querySelector('.form-input-hint.bookmark-exists');
+                        const editExistingBookmarkLink = bookmarkExistsHint.querySelector('a');
+
+                        if (data.bookmark && data.bookmark.id !== editedBookmarkId) {
+                            bookmarkExistsHint.style['display'] = 'block';
+                            editExistingBookmarkLink.href = data.bookmark.edit_url;
+                        } else {
+                            bookmarkExistsHint.style['display'] = 'none';
+                        }
+                    });
+            }
+
+            function setupEditAutoValueButton(input) {
+                const editAutoValueButton = input.parentNode.querySelector('.btn.form-icon');
+                if (!editAutoValueButton) return;
+                editAutoValueButton.addEventListener('click', function (event) {
+                    event.preventDefault();
+                    input.value = input.getAttribute('placeholder');
+                    input.focus();
+                    input.select();
+                });
+            }
+
             if (urlInput.value) checkUrl();
+            urlInput.addEventListener('input', checkUrl);
+            setupEditAutoValueButton(titleInput);
+            setupEditAutoValueButton(descriptionInput);
         })();
     </script>
 </div>

bookmarks/templates/bookmarks/index.html

@@ -1,8 +1,12 @@
 {% extends "bookmarks/layout.html" %}
+{% load static %}
 {% load shared %}
 {% load bookmarks %}
 
 {% block content %}
+
+    {% include 'bookmarks/bulk_edit/state.html' %}
+
     <div class="bookmarks-page columns">
 
         {# Bookmark list #}
@@ -10,21 +14,21 @@
             <div class="content-area-header">
                 <h2>Bookmarks</h2>
                 <div class="spacer"></div>
-                <div class="search">
-                    <form action="{% url 'bookmarks:index' %}" method="get">
-                        <div class="input-group">
-                            <input type="search" name="q" placeholder="Search for words or #tags" value="{{ query }}">
-                            <input type="submit" value="Search" class="btn input-group-btn">
-                        </div>
-                    </form>
-                </div>
+                {% bookmark_search query tags %}
+                {% include 'bookmarks/bulk_edit/toggle.html' %}
             </div>
 
-            {% if empty %}
-                {% include 'bookmarks/empty_bookmarks.html' %}
-            {% else %}
-                {% bookmark_list bookmarks return_url %}
-            {% endif %}
+            <form class="bookmark-actions" action="{% url 'bookmarks:action' %}?return_url={{ return_url }}"
+                  method="post">
+                {% csrf_token %}
+                {% include 'bookmarks/bulk_edit/bar.html' with mode='default' %}
+
+                {% if empty %}
+                    {% include 'bookmarks/empty_bookmarks.html' %}
+                {% else %}
+                    {% bookmark_list bookmarks return_url link_target %}
+                {% endif %}
+            </form>
         </section>
 
         {# Tag list #}
@@ -36,4 +40,7 @@
         </section>
     </div>
 
+    <script src="{% static "bundle.js" %}"></script>
+    <script src="{% static "shared.js" %}"></script>
+    <script src="{% static "bulk_edit.js" %}"></script>
 {% endblock %}

bookmarks/templates/bookmarks/layout.html

@@ -2,61 +2,60 @@
 {% load sass_tags %}
 
 <!DOCTYPE html>
-<html lang="en">
+{# Use data attributes as storage for access in static scripts #}
+<html lang="en" data-api-base-url="{% url 'bookmarks:api-root' %}">
 <head>
     <meta charset="UTF-8">
+    <link rel="icon" href="{% static 'favicon.png' %}"/>
+    <link rel="apple-touch-icon" href="{% static 'apple-touch-icon.png' %}">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
     <meta name="description" content="Self-hosted bookmark service">
     <meta name="robots" content="index,follow">
     <meta name="author" content="Sascha Ißbrücker">
     <title>linkding</title>
     {# Include SASS styles, files are resolved from bookmarks/styles #}
-    <link href="{% sass_src 'index.scss' %}" rel="stylesheet" type="text/css"/>
+    {# 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"/>
+    {% else %}
+        {# Use auto theme as fallback #}
+        <link href="{% sass_src 'theme-dark.scss' %}" rel="stylesheet" type="text/css"
+              media="(prefers-color-scheme: dark)"/>
+        <link href="{% sass_src 'theme-light.scss' %}" rel="stylesheet" type="text/css"
+              media="(prefers-color-scheme: light)"/>
+    {% endif %}
 </head>
 <body>
-<header class="navbar container grid-lg">
-    <section class="navbar-section">
-        <a href="/" class="navbar-brand text-bold">
-            <i class="logo icon icon-link s-circle"></i>
-
-            <h1>linkding</h1>
-        </a>
-    </section>
-    {# Only nav items menu when logged in #}
-    {% if request.user.is_authenticated %}
-        <section class="navbar-section">
-            {# Basic menu list #}
-            <div class="hide-md">
-                <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
-                <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
-                <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-                <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+<header>
+    {% if has_toasts %}
+    <div class="toasts container grid-lg">
+      <form action="{% url 'bookmarks:toasts.acknowledge' %}?return_url={{ request.path | urlencode }}" method="post">
+        {% csrf_token %}
+        {% for toast in toast_messages %}
+            <div class="toast">
+                {{ toast.message }}
+                <button type="submit" name="toast" value="{{ toast.id }}" class="btn btn-clear float-right"></button>
             </div>
-            {# Menu drop-down for smaller devices #}
-            <div class="show-md">
-                <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">
-                    <i class="icon icon-plus"></i>
-                </a>
-                <div class="dropdown dropdown-right">
-                    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
-                        <i class="icon icon-menu icon-2x"></i>
-                    </a>
-                    <!-- menu component -->
-                    <ul class="menu">
-                        <li>
-                            <a href="{% url 'bookmarks:bookmarklet' %}" class="btn btn-link">Bookmarklet</a>
-                        </li>
-                        <li>
-                            <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-                        </li>
-                        <li>
-                            <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </section>
+        {% endfor %}
+      </form>
+    </div>
     {% endif %}
+    <div class="navbar container grid-lg">
+        <section class="navbar-section">
+            <a href="/" 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 #}
+        {% if request.user.is_authenticated %}
+            <section class="navbar-section">
+                {% include 'bookmarks/nav_menu.html' %}
+            </section>
+        {% endif %}
+    </div>
 </header>
 <div class="content container grid-lg">
     {% block content %}

bookmarks/templates/bookmarks/nav_menu.html

@@ -0,0 +1,83 @@
+{# Basic menu list #}
+<div class="hide-md">
+    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
+    <div class="dropdown">
+        <a href="#" class="btn btn-link dropdown-toggle" tabindex="0" style="padding-right: 0.2rem">
+          Bookmarks
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" style="height:1rem;width:1rem;vertical-align: text-bottom;">
+            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </a>
+        <ul class="menu">
+          <li>
+            <a href="{% url 'bookmarks:index' %}" class="btn btn-link">Active</a>
+          </li>
+          <li>
+            <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
+          </li>
+          <li>
+            <a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
+          </li>
+          <li>
+            <a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
+          </li>
+        </ul>
+    </div>
+    <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+    <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+</div>
+{# Menu drop-down for smaller devices #}
+<div class="show-md">
+    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary">
+        <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="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">
+            <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" />
+            </svg>
+        </a>
+        <!-- menu component -->
+        <ul class="menu">
+            <li>
+              <a href="{% url 'bookmarks:index' %}" class="btn btn-link">Bookmarks</a>
+            </li>
+            <li style="padding-left: 1rem">
+              <a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
+            </li>
+            <li style="padding-left: 1rem">
+              <a href="{% url 'bookmarks:index' %}?q=!unread" 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>
+            </li>
+            <li>
+                <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+            </li>
+            <li>
+                <a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
+            </li>
+        </ul>
+    </div>
+</div>
+<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>

bookmarks/templates/bookmarks/new.html

@@ -8,7 +8,7 @@
                 <h2>New bookmark</h2>
             </div>
             <form action="{% url 'bookmarks:new' %}" method="post" class="col-6 col-md-12" novalidate>
-                {% bookmark_form form all_tags return_url auto_close=auto_close %}
+                {% bookmark_form form return_url auto_close=auto_close %}
             </form>
         </section>
     </div>

bookmarks/templates/bookmarks/pagination.html

@@ -0,0 +1,35 @@
+{% load shared %}
+
+<ul class="pagination">
+    {% if page.has_previous %}
+        <li class="page-item">
+            <a href="?{% update_query_string page=page.previous_page_number %}" tabindex="-1">Previous</a>
+        </li>
+    {% else %}
+        <li class="page-item disabled">
+            <a href="#" tabindex="-1">Previous</a>
+        </li>
+    {% endif %}
+
+    {% for page_number in visible_page_numbers %}
+        {% if page_number >= 0 %}
+            <li class="page-item {% if page.number == page_number %}active{% endif %}">
+                <a href="?{% update_query_string page=page_number %}">{{ page_number }}</a>
+            </li>
+        {% else %}
+            <li class="page-item">
+                <span>...</span>
+            </li>
+        {% endif %}
+    {% endfor %}
+
+    {% if page.has_next %}
+        <li class="page-item">
+            <a href="?{% update_query_string page=page.next_page_number %}" tabindex="-1">Next</a>
+        </li>
+    {% else %}
+        <li class="page-item disabled">
+            <a href="#" tabindex="-1">Next</a>
+        </li>
+    {% endif %}
+</ul>

bookmarks/templates/bookmarks/search.html

@@ -0,0 +1,34 @@
+<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="{{ query }}">
+            </span>
+            <input type="submit" value="Search" class="btn input-group-btn">
+        </div>
+    </form>
+</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 apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
+        const wrapper = document.getElementById('search-input-wrap')
+        const newWrapper = document.createElement('div')
+        new linkding.SearchAutoComplete({
+            target: newWrapper,
+            props: {
+                name: 'q',
+                placeholder: 'Search for words or #tags',
+                value: '{{ query }}',
+                tags: currentTags,
+                mode: '{{ mode }}',
+                apiClient
+            }
+        })
+        wrapper.parentElement.replaceChild(newWrapper, wrapper)
+    });
+</script>

bookmarks/templates/bookmarks/tag_cloud.html

@@ -7,13 +7,13 @@
                 {# Highlight first char of first tag in group #}
                 {% if forloop.counter == 1 %}
                     <a href="?{% append_query_param q=tag.name|hash_tag %}"
-                       class="mr-2">
+                       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_query_param q=tag.name|hash_tag %}"
-                       class="mr-2">
+                       class="mr-2" data-is-tag-item>
                         <span>{{ tag.name }}</span>
                     </a>
                 {% endif %}

bookmarks/templates/registration/login.html

@@ -20,11 +20,11 @@
                     {% endif %}
                     <div class="form-group">
                         <label class="form-label" for="{{ form.username.id_for_label }}">Username</label>
-                        {{ form.username|add_class:'form-input' }}
+                        {{ 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' }}
+                        {{ form.password|add_class:'form-input'|attr:"placeholder: " }}
                     </div>
 
                     <br/>

bookmarks/templates/registration/password_change_done.html

@@ -0,0 +1,21 @@
+{% extends 'bookmarks/layout.html' %}
+{% load widget_tweaks %}
+
+{% 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>
+    </div>
+
+{% endblock %}

bookmarks/templates/registration/password_change_form.html

@@ -0,0 +1,55 @@
+{% extends 'bookmarks/layout.html' %}
+{% load widget_tweaks %}
+
+{% 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>
+    </div>
+
+{% endblock %}

bookmarks/templates/settings/general.html

@@ -0,0 +1,127 @@
+{% extends "bookmarks/layout.html" %}
+{% load widget_tweaks %}
+
+{% block content %}
+    <div class="settings-page">
+
+        {% include 'settings/nav.html' %}
+
+        {# Profile section #}
+        <section class="content-area">
+            <h2>Profile</h2>
+            <p>
+                <a href="{% url 'change_password' %}">Change password</a>
+            </p>
+            <form action="{% url 'bookmarks:settings.general' %}" method="post" novalidate>
+                {% 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" }}
+                    <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" }}
+                    <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.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" }}
+                    <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.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" }}
+                    <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
+                      Machine</a>. This allows
+                      to preserve, and later access, the website as it was at the point in time it was bookmarked, in
+                      case it goes offline or its content is modified.
+                    </div>
+                </div>
+                <div class="form-group">
+                    <input type="submit" value="Save" class="btn btn-primary mt-2">
+                </div>
+            </form>
+        </section>
+
+        {# Import section #}
+        <section class="content-area">
+            <h2>Import</h2>
+            <p>Import bookmarks and tags in the Netscape HTML format. This will execute a sync where new bookmarks are
+                added and existing ones are updated.</p>
+            <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">
+                        <input class="form-input" type="file" name="import_file">
+                        <input type="submit" class="input-group-btn col-2 btn btn-primary" value="Upload">
+                    </div>
+                    {% if import_success_message %}
+                        <div class="has-success">
+                            <p class="form-input-hint">
+                                {{ import_success_message }}
+                            </p>
+                        </div>
+                    {% endif %}
+                    {% if import_errors_message %}
+                        <div class="has-error">
+                            <p class="form-input-hint">
+                                {{ import_errors_message }}
+                            </p>
+                        </div>
+                    {% endif %}
+                </div>
+            </form>
+        </section>
+
+        {# Export section #}
+        <section class="content-area">
+            <h2>Export</h2>
+            <p>Export all bookmarks in Netscape HTML format.</p>
+            <a class="btn btn-primary" href="{% url 'bookmarks:settings.export' %}">Download (.html)</a>
+            {% if export_error %}
+                <div class="has-error">
+                    <p class="form-input-hint">
+                        {{ export_error }}
+                    </p>
+                </div>
+            {% endif %}
+        </section>
+
+        {# About section #}
+        <section class="content-area about">
+            <h2>About</h2>
+            <table class="table">
+                <tbody>
+                <tr>
+                    <td>Version</td>
+                    <td>{{ version_info }}</td>
+                </tr>
+                <tr>
+                    <td rowspan="3" style="vertical-align: top">Links</td>
+                    <td><a href="https://github.com/sissbruecker/linkding/"
+                           target="_blank">GitHub</a></td>
+                </tr>
+                <tr>
+                    <td><a href="https://github.com/sissbruecker/linkding#documentation"
+                           target="_blank">Documentation</a></td>
+                </tr>
+                <tr>
+                    <td><a href="https://github.com/sissbruecker/linkding/blob/master/CHANGELOG.md"
+                           target="_blank">Changelog</a></td>
+                </tr>
+                </tbody>
+            </table>
+        </section>
+    </div>
+
+{% endblock %}

bookmarks/templates/settings/index.html

@@ -1,72 +0,0 @@
-{% extends "bookmarks/layout.html" %}
-
-{% block content %}
-    <div class="settings-page">
-
-        {# Import section #}
-        <section class="content-area">
-            <div class="content-area-header">
-                <h2>Import</h2>
-            </div>
-            <p>Import bookmarks and tags in the Netscape HTML format. This will execute a sync where new bookmarks are
-                added and existing ones are updated.</p>
-            <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">
-                        <input class="form-input" type="file" name="import_file">
-                        <input type="submit" class="input-group-btn col-2 btn btn-primary" value="Upload">
-                    </div>
-                    {% if import_success_message %}
-                        <div class="has-success">
-                            <p class="form-input-hint">
-                                {{ import_success_message }}
-                            </p>
-                        </div>
-                    {% endif %}
-                    {% if import_errors_message %}
-                        <div class="has-error">
-                            <p class="form-input-hint">
-                                {{ import_errors_message }}
-                            </p>
-                        </div>
-                    {% endif %}
-                </div>
-            </form>
-        </section>
-
-        {# Export section #}
-        <section class="content-area">
-            <div class="content-area-header">
-                <h2>Export</h2>
-            </div>
-            <p>Export all bookmarks in Netscape HTML format.</p>
-            <a class="btn btn-primary" href="{% url 'bookmarks:settings.export' %}">Download (.html)</a>
-            {% if export_error %}
-                <div class="has-error">
-                    <p class="form-input-hint">
-                        {{ export_error }}
-                    </p>
-                </div>
-            {% endif %}
-        </section>
-
-        {# API token section #}
-        <section class="content-area">
-            <div class="content-area-header">
-                <h2>API Token</h2>
-            </div>
-            <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">
-                        <input class="form-input" value="{{ api_token }}" disabled>
-                    </div>
-                </div>
-            </div>
-            <p><strong>Please treat this token as you would any other credential.</strong> Any party with access to this token can access and manage all your bookmarks.</p>
-        </section>
-
-    </div>
-
-{% endblock %}

bookmarks/templates/settings/integrations.html

@@ -0,0 +1,68 @@
+{% extends "bookmarks/layout.html" %}
+
+{% block content %}
+    <div class="settings-page">
+
+        {% include 'settings/nav.html' %}
+
+        <section class="content-area">
+            <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://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>
+            <h2>Bookmarklet</h2>
+            <p>The bookmarklet is an alternative, cross-browser way to quickly add new bookmarks without opening the linkding application
+                first. Here's how it works:</p>
+            <ul>
+                <li>Drag the bookmarklet below into your browsers bookmark bar / toolbar</li>
+                <li>Open the website that you want to bookmark</li>
+                <li>Click the bookmarklet in your browsers toolbar</li>
+                <li>linkding opens in a new window or tab and allows you to add a bookmark for the site</li>
+                <li>After saving the bookmark the linkding window closes and you are back on your website</li>
+            </ul>
+            <p>Drag the following bookmarklet to your browsers toolbar:</p>
+            <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}"
+               class="btn btn-primary">📎 Add bookmark</a>
+        </section>
+
+        <section class="content-area">
+            <h2>REST API</h2>
+            <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">
+                        <input class="form-input" value="{{ api_token }}" readonly>
+                    </div>
+                </div>
+            </div>
+            <p>
+              <strong>Please treat this token as you would any other credential.</strong>
+              Any party with access to this token can access and manage all your bookmarks.
+              If you think that a token was compromised you can revoke (delete) it in the <a href="{% url 'admin:authtoken_tokenproxy_changelist' %}">admin panel</a>.
+              After deleting the token, a new one will be generated when you reload this settings page.
+            </p>
+        </section>
+
+        <section class="content-area">
+            <h2>RSS Feeds</h2>
+            <p>The following URLs provide RSS feeds for your bookmarks:</p>
+            <ul>
+              <li><a href="{{ all_feed_url }}">All bookmarks</a></li>
+              <li><a href="{{ unread_feed_url }}">Unread bookmarks</a></li>
+            </ul>
+            <p>
+              All URLs support appending a <code>q</code> URL parameter for specifying a search query.
+              You can get an example by doing a search in the bookmarks view and then copying the parameter from the URL.
+            </p>
+            <p>
+              <strong>Please note that these URLs include an authentication token that should be treated like any other credential.</strong>
+              Any party with access to these URLs can read all your bookmarks.
+              If you think that a URL was compromised you can delete the feed token for your user in the <a href="{% url 'admin:bookmarks_feedtoken_changelist' %}">admin panel</a>.
+              After deleting the feed token, new URLs will be generated when you reload this settings page.
+            </p>
+        </section>
+    </div>
+{% endblock %}

bookmarks/templates/settings/nav.html

@@ -0,0 +1,22 @@
+{% url 'bookmarks:settings.index' as index_url %}
+{% url 'bookmarks:settings.general' as general_url %}
+{% url 'bookmarks:settings.integrations' as integrations_url %}
+
+<ul class="tab tab-block">
+    <li class="tab-item {% if request.get_full_path == index_url or request.get_full_path == general_url%}active{% endif %}">
+        <a href="{% url 'bookmarks:settings.general' %}">General</a>
+    </li>
+    <li class="tab-item {% if request.get_full_path == integrations_url %}active{% endif %}">
+        <a href="{% url 'bookmarks:settings.integrations' %}">Integrations</a>
+    </li>
+    <li class="tab-item tooltip tooltip-bottom" data-tooltip="The admin panel provides additional features &#010; such as user management and bulk operations.">
+        <a href="{% url 'admin:index' %}" target="_blank">
+            <span>Admin</span>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="ml-1" style="width: 1.2em; height: 1.2em; vertical-align: -0.2em;">
+                <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+            </svg>
+        </a>
+    </li>
+</ul>
+<br>

bookmarks/templatetags/bookmarks.py

@@ -9,15 +9,10 @@ register = template.Library()
 
 
 @register.inclusion_tag('bookmarks/form.html', name='bookmark_form')
-def bookmark_form(form: BookmarkForm, all_tags: List[Tag], cancel_url: str, bookmark_id: int = 0, auto_close: bool = False):
-
-    all_tag_names = [tag.name for tag in all_tags]
-    all_tags_string = build_tag_string(all_tag_names, ' ')
-
+def bookmark_form(form: BookmarkForm, cancel_url: str, bookmark_id: int = 0, auto_close: bool = False):
     return {
         'form': form,
         'auto_close': auto_close,
-        'all_tags': all_tags_string,
         'bookmark_id': bookmark_id,
         'cancel_url': cancel_url
     }
@@ -56,8 +51,21 @@ def tag_cloud(context, tags: List[Tag]):
 
 
 @register.inclusion_tag('bookmarks/bookmark_list.html', name='bookmark_list', takes_context=True)
-def bookmark_list(context, bookmarks: Page, return_url: str):
+def bookmark_list(context, bookmarks: Page, return_url: str, link_target: str = '_blank'):
     return {
+        'request': context['request'],
         'bookmarks': bookmarks,
-        'return_url': return_url
+        'return_url': return_url,
+        'link_target': link_target,
+    }
+
+
+@register.inclusion_tag('bookmarks/search.html', name='bookmark_search', takes_context=True)
+def bookmark_search(context, query: str, tags: [Tag], mode: str = 'default'):
+    tag_names = [tag.name for tag in tags]
+    tags_string = build_tag_string(tag_names, ' ')
+    return {
+        'query': query,
+        'tags_string': tags_string,
+        'mode': mode,
     }

bookmarks/templatetags/pagination.py

@@ -0,0 +1,55 @@
+from functools import reduce
+
+from django import template
+from django.core.paginator import Page
+
+NUM_ADJACENT_PAGES = 2
+
+register = template.Library()
+
+
+@register.inclusion_tag('bookmarks/pagination.html', name='pagination', takes_context=True)
+def pagination(context, page: Page):
+    visible_page_numbers = get_visible_page_numbers(page.number, page.paginator.num_pages)
+
+    return {
+        'page': page,
+        'visible_page_numbers': visible_page_numbers
+    }
+
+
+def get_visible_page_numbers(current_page_number: int, num_pages: int) -> [int]:
+    """
+    Generates a list of page indexes that should be rendered
+    The list can contain "holes" which indicate that a range of pages are truncated
+    Holes are indicated with a value of `-1`
+    :param current_page_number:
+    :param num_pages:
+    """
+    visible_pages = set()
+
+    # Add adjacent pages around current page
+    visible_pages |= set(range(
+        max(1, current_page_number - NUM_ADJACENT_PAGES),
+        min(num_pages, current_page_number + NUM_ADJACENT_PAGES) + 1
+    ))
+
+    # Add first page
+    visible_pages.add(1)
+
+    # Add last page
+    visible_pages.add(num_pages)
+
+    # Convert to sorted list
+    visible_pages = list(visible_pages)
+    visible_pages.sort()
+
+    def append_page(result: [int], page_number: int):
+        # Look for holes and insert a -1 as indicator
+        is_hole = len(result) > 0 and result[-1] < page_number - 1
+        if is_hole:
+            result.append(-1)
+        result.append(page_number)
+        return result
+
+    return reduce(append_page, visible_pages, [])

bookmarks/templatetags/shared.py

@@ -1,5 +1,7 @@
 from django import template
 
+from bookmarks import utils
+
 register = template.Library()
 
 
@@ -43,3 +45,17 @@ def first_char(text):
 @register.filter(name='remaining_chars')
 def remaining_chars(text, index):
     return text[index:]
+
+
+@register.filter(name='humanize_absolute_date')
+def humanize_absolute_date(value):
+    if value in (None, ''):
+        return ''
+    return utils.humanize_absolute_date(value)
+
+
+@register.filter(name='humanize_relative_date')
+def humanize_relative_date(value):
+    if value in (None, ''):
+        return ''
+    return utils.humanize_relative_date(value)

bookmarks/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

bookmarks/tests/helpers.py

@@ -0,0 +1,187 @@
+import random
+import logging
+from typing import List
+
+from django.contrib.auth.models import User
+from django.utils import timezone
+from django.utils.crypto import get_random_string
+from rest_framework import status
+from rest_framework.test import APITestCase
+
+from bookmarks.models import Bookmark, Tag
+
+
+class BookmarkFactoryMixin:
+    user = None
+
+    def get_or_create_test_user(self):
+        if self.user is None:
+            self.user = User.objects.create_user('testuser', 'test@example.com', 'password123')
+
+        return self.user
+
+    def setup_bookmark(self,
+                       is_archived: bool = False,
+                       unread: bool = False,
+                       tags=None,
+                       user: User = None,
+                       url: str = '',
+                       title: str = '',
+                       description: str = '',
+                       website_title: str = '',
+                       website_description: str = '',
+                       web_archive_snapshot_url: str = '',
+                       ):
+        if not title:
+            title = get_random_string(length=32)
+        if tags is None:
+            tags = []
+        if user is None:
+            user = self.get_or_create_test_user()
+        if not url:
+            unique_id = get_random_string(length=32)
+            url = 'https://example.com/' + unique_id
+        bookmark = Bookmark(
+            url=url,
+            title=title,
+            description=description,
+            website_title=website_title,
+            website_description=website_description,
+            date_added=timezone.now(),
+            date_modified=timezone.now(),
+            owner=user,
+            is_archived=is_archived,
+            unread=unread,
+            web_archive_snapshot_url=web_archive_snapshot_url,
+        )
+        bookmark.save()
+        for tag in tags:
+            bookmark.tags.add(tag)
+        bookmark.save()
+        return bookmark
+
+    def setup_tag(self, user: User = None, name: str = ''):
+        if user is None:
+            user = self.get_or_create_test_user()
+        if not name:
+            name = get_random_string(length=32)
+        tag = Tag(name=name, date_added=timezone.now(), owner=user)
+        tag.save()
+        return tag
+
+
+class LinkdingApiTestCase(APITestCase):
+    def get(self, url, expected_status_code=status.HTTP_200_OK):
+        response = self.client.get(url)
+        self.assertEqual(response.status_code, expected_status_code)
+        return response
+
+    def post(self, url, data=None, expected_status_code=status.HTTP_200_OK):
+        response = self.client.post(url, data, format='json')
+        self.assertEqual(response.status_code, expected_status_code)
+        return response
+
+    def put(self, url, data=None, expected_status_code=status.HTTP_200_OK):
+        response = self.client.put(url, data, format='json')
+        self.assertEqual(response.status_code, expected_status_code)
+        return response
+
+    def patch(self, url, data=None, expected_status_code=status.HTTP_200_OK):
+        response = self.client.patch(url, data, format='json')
+        self.assertEqual(response.status_code, expected_status_code)
+        return response
+
+    def delete(self, url, expected_status_code=status.HTTP_200_OK):
+        response = self.client.delete(url)
+        self.assertEqual(response.status_code, expected_status_code)
+        return response
+
+
+class BookmarkHtmlTag:
+    def __init__(self,
+                 href: str = '',
+                 title: str = '',
+                 description: str = '',
+                 add_date: str = '',
+                 tags: str = '',
+                 to_read: bool = False):
+        self.href = href
+        self.title = title
+        self.description = description
+        self.add_date = add_date
+        self.tags = tags
+        self.to_read = to_read
+
+
+class ImportTestMixin:
+    def render_tag(self, tag: BookmarkHtmlTag):
+        return f'''
+        <DT>
+        <A {f'HREF="{tag.href}"' if tag.href else ''}
+           {f'ADD_DATE="{tag.add_date}"' if tag.add_date else ''}
+           {f'TAGS="{tag.tags}"' if tag.tags else ''}
+           TOREAD="{1 if tag.to_read else 0}">
+           {tag.title if tag.title else ''}
+        </A>
+        {f'<DD>{tag.description}' if tag.description else ''}
+        '''
+
+    def render_html(self, tags: List[BookmarkHtmlTag] = None, tags_html: str = ''):
+        if tags:
+            rendered_tags = [self.render_tag(tag) for tag in tags]
+            tags_html = '\n'.join(rendered_tags)
+        return f'''
+        <!DOCTYPE NETSCAPE-Bookmark-file-1>
+        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+        <TITLE>Bookmarks</TITLE>
+        <H1>Bookmarks</H1>
+        <DL><p>
+        {tags_html}
+        </DL><p>
+        '''
+
+
+_words = [
+    'quasi',
+    'consequatur',
+    'necessitatibus',
+    'debitis',
+    'quod',
+    'vero',
+    'qui',
+    'commodi',
+    'quod',
+    'odio',
+    'aliquam',
+    'veniam',
+    'architecto',
+    'consequatur',
+    'autem',
+    'qui',
+    'iste',
+    'asperiores',
+    'soluta',
+    'et',
+]
+
+
+def random_sentence(num_words: int = None, including_word: str = ''):
+    if num_words is None:
+        num_words = random.randint(5, 10)
+    selected_words = random.choices(_words, k=num_words)
+    if including_word:
+        selected_words.append(including_word)
+    random.shuffle(selected_words)
+
+    return ' '.join(selected_words)
+
+
+def disable_logging(f):
+    def wrapper(*args):
+        logging.disable(logging.CRITICAL)
+        result = f(*args)
+        logging.disable(logging.NOTSET)
+
+        return result
+
+    return wrapper

bookmarks/tests/resources/simple_valid_import_file.html

@@ -0,0 +1,20 @@
+<!DOCTYPE NETSCAPE-Bookmark-file-1>
+
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+
+<TITLE>Bookmarks</TITLE>
+
+<H1>Bookmarks</H1>
+
+<DL><p>
+
+    <DT><A HREF="https://example.com/1" ADD_DATE="1616337559" PRIVATE="0" TOREAD="0" TAGS="tag1">test title 1</A>
+    <DD>test description 1
+
+    <DT><A HREF="https://example.com/2" ADD_DATE="1616337559000" PRIVATE="0" TOREAD="0" TAGS="tag2">test title 2</A>
+    <DD>test description 2
+
+    <DT><A HREF="https://example.com/3" ADD_DATE="1616337559000000" PRIVATE="0" TOREAD="0" TAGS="tag3">test title 3</A>
+    <DD>test description 3
+
+</DL><p>

bookmarks/tests/resources/simple_valid_import_file_with_one_invalid_bookmark.html

@@ -0,0 +1,20 @@
+<!DOCTYPE NETSCAPE-Bookmark-file-1>
+
+<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
+
+<TITLE>Bookmarks</TITLE>
+
+<H1>Bookmarks</H1>
+
+<DL><p>
+
+    <DT><A HREF="https://example.com/1" ADD_DATE="invaliddate" PRIVATE="0" TOREAD="0" TAGS="tag1">test title 1</A>
+    <DD>test description 1
+
+    <DT><A HREF="https://example.com/2" ADD_DATE="1616337559" PRIVATE="0" TOREAD="0" TAGS="tag2">test title 2</A>
+    <DD>test description 2
+
+    <DT><A HREF="https://example.com/3" ADD_DATE="1616337559" PRIVATE="0" TOREAD="0" TAGS="tag3">test title 3</A>
+    <DD>test description 3
+
+</DL><p>