Bump version

* Implement IPv6 capability

Enables uWSGI to listen for IPv6 requests also.
This is done by defaulting to [::] as the listen address, which creates a dual stack socket, which can respond to IPv4 and IPv6 requests simultaneously.
Furthermore a config option is adden to overwrite this default, if a user so desires.

* Add LD_SERVER_HOST to .env.sample

Additionally fix the default name of the LD_SERVER_PORT variable, which was falsely LD_HOST_PORT here.

* revert .env.sample

---------

Co-authored-by: Sascha Ißbrücker <sascha.issbruecker@googlemail.com>

.dockerignore

@@ -10,6 +10,7 @@
 !/manage.py
 !/package.json
 !/package-lock.json
+!/postcss.config.js
 !/requirements.dev.txt
 !/requirements.txt
 !/rollup.config.mjs

.github/workflows/main.yaml

@@ -53,7 +53,6 @@ jobs:
       - name: Run build
         run: |
           npm run build
-          python manage.py compilescss
-          python manage.py collectstatic --ignore=*.scss
+          python manage.py collectstatic
       - name: Run tests
         run: python manage.py test bookmarks.e2e --pattern="e2e_test_*.py"

.gitignore

@@ -183,7 +183,7 @@ typings/
 ### Custom
 # Rollup compilation output
 /bookmarks/static/bundle.js*
-# SASS compilation output
+# CSS compilation output
 /bookmarks/static/theme-*.css*
 # Collected static files for deployment
 /static

CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## v1.33.0 (14/09/2024)
+
+### What's Changed
+* Theme improvements by @sissbruecker in https://github.com/sissbruecker/linkding/pull/822
+* Speed up navigation by @sissbruecker in https://github.com/sissbruecker/linkding/pull/824
+* Rename "SingeFileError" to "SingleFileError" by @curiousleo in https://github.com/sissbruecker/linkding/pull/823
+* Bump svelte from 4.2.12 to 4.2.19 by @dependabot in https://github.com/sissbruecker/linkding/pull/806
+
+### New Contributors
+* @curiousleo made their first contribution in https://github.com/sissbruecker/linkding/pull/823
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.32.0...v1.33.0
+
+---
+
+## v1.32.0 (10/09/2024)
+
+### What's Changed
+* Allow configuring landing page for unauthenticated users by @sissbruecker in https://github.com/sissbruecker/linkding/pull/808
+* Allow configuring guest user profile by @sissbruecker in https://github.com/sissbruecker/linkding/pull/809
+* Return bookmark tags in RSS feeds by @sissbruecker in https://github.com/sissbruecker/linkding/pull/810
+* Additional filter parameters for RSS feeds by @sissbruecker in https://github.com/sissbruecker/linkding/pull/811
+* Allow pre-filling notes in new bookmark form by @sissbruecker in https://github.com/sissbruecker/linkding/pull/812
+* Fix inconsistent tag order in bookmarks by @sissbruecker in https://github.com/sissbruecker/linkding/pull/819
+* Fix auto-tagging when URL includes port by @sissbruecker in https://github.com/sissbruecker/linkding/pull/820
+
+
+**Full Changelog**: https://github.com/sissbruecker/linkding/compare/v1.31.1...v1.32.0
+
+---
+
 ## v1.31.1 (30/08/2024)
 
 ### What's Changed

bookmarks/e2e/e2e_test_bookmark_details_modal.py

@@ -121,8 +121,9 @@ class BookmarkDetailsModalE2ETestCase(LinkdingE2ETestCase):
             with self.page.expect_navigation():
                 details_modal.get_by_text("Edit").click()
 
-            # Cancel edit, verify return url
-            with self.page.expect_navigation(url=self.live_server_url + url):
+            # Cancel edit, verify return to details url
+            details_url = url + f"&details={bookmark.id}"
+            with self.page.expect_navigation(url=self.live_server_url + details_url):
                 self.page.get_by_text("Nevermind").click()
 
     def test_delete(self):
@@ -167,7 +168,7 @@ class BookmarkDetailsModalE2ETestCase(LinkdingE2ETestCase):
             # Has new snapshots
             expect(snapshot).to_be_visible()
 
-            # Create snapshot
+            # Remove snapshot
             asset_list.get_by_text("Remove", exact=False).click()
             asset_list.get_by_text("Confirm", exact=False).click()
 

bookmarks/e2e/e2e_test_bookmark_details_view.py

@@ -1,37 +0,0 @@
-from django.urls import reverse
-from playwright.sync_api import sync_playwright
-
-from bookmarks.e2e.helpers import LinkdingE2ETestCase
-
-
-class BookmarkDetailsViewE2ETestCase(LinkdingE2ETestCase):
-    def test_edit_return_url(self):
-        bookmark = self.setup_bookmark()
-
-        with sync_playwright() as p:
-            self.open(reverse("bookmarks:details", args=[bookmark.id]), p)
-
-            # Navigate to edit page
-            with self.page.expect_navigation():
-                self.page.get_by_text("Edit").click()
-
-            # Cancel edit, verify return url
-            with self.page.expect_navigation(
-                url=self.live_server_url
-                + reverse("bookmarks:details", args=[bookmark.id])
-            ):
-                self.page.get_by_text("Nevermind").click()
-
-    def test_delete_return_url(self):
-        bookmark = self.setup_bookmark()
-
-        with sync_playwright() as p:
-            self.open(reverse("bookmarks:details", args=[bookmark.id]), p)
-
-            # Trigger delete, verify return url
-            # Should probably return to last bookmark list page, but for now just returns to index
-            with self.page.expect_navigation(
-                url=self.live_server_url + reverse("bookmarks:index")
-            ):
-                self.page.get_by_text("Delete...").click()
-                self.page.get_by_text("Confirm").click()

bookmarks/e2e/e2e_test_tag_cloud_modal.py

@@ -1,9 +1,7 @@
-from django.test import override_settings
 from django.urls import reverse
-from playwright.sync_api import sync_playwright, expect, Locator
+from playwright.sync_api import sync_playwright, expect
 
 from bookmarks.e2e.helpers import LinkdingE2ETestCase
-from bookmarks.models import Bookmark
 
 
 class TagCloudModalE2ETestCase(LinkdingE2ETestCase):
@@ -26,7 +24,7 @@ class TagCloudModalE2ETestCase(LinkdingE2ETestCase):
             # verify modal is visible
             modal = page.locator(".modal")
             expect(modal).to_be_visible()
-            expect(modal.locator(".modal-title")).to_have_text("Tags")
+            expect(modal.locator("h2")).to_have_text("Tags")
 
             # close with close button
             modal.locator("button.close").click()

bookmarks/frontend/api.js

@@ -1,4 +1,4 @@
-export class ApiClient {
+export class Api {
   constructor(baseUrl) {
     this.baseUrl = baseUrl;
   }
@@ -27,3 +27,6 @@ export class ApiClient {
       .then((data) => data.results);
   }
 }
+
+const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
+export const api = new Api(apiBaseUrl);

bookmarks/frontend/behaviors/bookmark-page.js

@@ -5,9 +5,10 @@ class BookmarkItem extends Behavior {
     super(element);
 
     // Toggle notes
-    const notesToggle = element.querySelector(".toggle-notes");
-    if (notesToggle) {
-      notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
+    this.onToggleNotes = this.onToggleNotes.bind(this);
+    this.notesToggle = element.querySelector(".toggle-notes");
+    if (this.notesToggle) {
+      this.notesToggle.addEventListener("click", this.onToggleNotes);
     }
 
     // Add tooltip to title if it is truncated
@@ -20,6 +21,12 @@ class BookmarkItem extends Behavior {
     });
   }
 
+  destroy() {
+    if (this.notesToggle) {
+      this.notesToggle.removeEventListener("click", this.onToggleNotes);
+    }
+  }
+
   onToggleNotes(event) {
     event.preventDefault();
     event.stopPropagation();

bookmarks/frontend/behaviors/bulk-edit.js

@@ -4,16 +4,22 @@ class BulkEdit extends Behavior {
   constructor(element) {
     super(element);
 
-    this.active = false;
+    this.active = element.classList.contains("active");
 
+    this.init = this.init.bind(this);
     this.onToggleActive = this.onToggleActive.bind(this);
     this.onToggleAll = this.onToggleAll.bind(this);
     this.onToggleBookmark = this.onToggleBookmark.bind(this);
     this.onActionSelected = this.onActionSelected.bind(this);
 
     this.init();
-    // Reset when bookmarks are refreshed
-    document.addEventListener("refresh-bookmark-list-done", () => this.init());
+    // Reset when bookmarks are updated
+    document.addEventListener("bookmark-list-updated", this.init);
+  }
+
+  destroy() {
+    this.removeListeners();
+    document.removeEventListener("bookmark-list-updated", this.init);
   }
 
   init() {
@@ -31,13 +37,9 @@ class BulkEdit extends Behavior {
       this.element.querySelectorAll(".bulk-edit-checkbox:not(.all) input"),
     );
 
-    // Remove previous listeners if elements are the same
-    this.activeToggle.removeEventListener("click", this.onToggleActive);
-    this.actionSelect.removeEventListener("change", this.onActionSelected);
-    this.allCheckbox.removeEventListener("change", this.onToggleAll);
-    this.bookmarkCheckboxes.forEach((checkbox) => {
-      checkbox.removeEventListener("change", this.onToggleBookmark);
-    });
+    // Add listeners, ensure there are no dupes by possibly removing existing listeners
+    this.removeListeners();
+    this.addListeners();
 
     // Reset checkbox states
     this.reset();
@@ -47,8 +49,9 @@ class BulkEdit extends Behavior {
     const total = totalHolder?.dataset.bookmarksTotal || 0;
     const totalSpan = this.selectAcross.querySelector("span.total");
     totalSpan.textContent = total;
+  }
 
-    // Add new listeners
+  addListeners() {
     this.activeToggle.addEventListener("click", this.onToggleActive);
     this.actionSelect.addEventListener("change", this.onActionSelected);
     this.allCheckbox.addEventListener("change", this.onToggleAll);
@@ -57,6 +60,15 @@ class BulkEdit extends Behavior {
     });
   }
 
+  removeListeners() {
+    this.activeToggle.removeEventListener("click", this.onToggleActive);
+    this.actionSelect.removeEventListener("change", this.onActionSelected);
+    this.allCheckbox.removeEventListener("change", this.onToggleAll);
+    this.bookmarkCheckboxes.forEach((checkbox) => {
+      checkbox.removeEventListener("change", this.onToggleBookmark);
+    });
+  }
+
   onToggleActive() {
     this.active = !this.active;
     if (this.active) {

bookmarks/frontend/behaviors/confirm-button.js

@@ -3,17 +3,14 @@ import { Behavior, registerBehavior } from "./index";
 class ConfirmButtonBehavior extends Behavior {
   constructor(element) {
     super(element);
-    element.dataset.type = element.type;
-    element.dataset.name = element.name;
-    element.dataset.value = element.value;
-    element.removeAttribute("type");
-    element.removeAttribute("name");
-    element.removeAttribute("value");
-    element.addEventListener("click", this.onClick.bind(this));
+
+    this.onClick = this.onClick.bind(this);
+    element.addEventListener("click", this.onClick);
   }
 
   destroy() {
-    Behavior.interacting = false;
+    this.reset();
+    this.element.removeEventListener("click", this.onClick);
   }
 
   onClick(event) {
@@ -53,9 +50,9 @@ class ConfirmButtonBehavior extends Behavior {
     cancelButton.addEventListener("click", this.reset.bind(this));
 
     const confirmButton = document.createElement(this.element.nodeName);
-    confirmButton.type = this.element.dataset.type;
-    confirmButton.name = this.element.dataset.name;
-    confirmButton.value = this.element.dataset.value;
+    confirmButton.type = this.element.type;
+    confirmButton.name = this.element.name;
+    confirmButton.value = this.element.value;
     confirmButton.innerText = question ? "Yes" : "Confirm";
     confirmButton.className = buttonClasses;
     confirmButton.addEventListener("click", this.reset.bind(this));
@@ -70,7 +67,10 @@ class ConfirmButtonBehavior extends Behavior {
   reset() {
     setTimeout(() => {
       Behavior.interacting = false;
-      this.container.remove();
+      if (this.container) {
+        this.container.remove();
+        this.container = null;
+      }
       this.element.classList.remove("d-none");
     });
   }

bookmarks/frontend/behaviors/details-modal.js

@@ -0,0 +1,62 @@
+import { Behavior, registerBehavior } from "./index";
+
+class DetailsModalBehavior extends Behavior {
+  constructor(element) {
+    super(element);
+
+    this.onClose = this.onClose.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+
+    this.overlayLink = element.querySelector("a:has(.modal-overlay)");
+    this.buttonLink = element.querySelector("a:has(button.close)");
+
+    this.overlayLink.addEventListener("click", this.onClose);
+    this.buttonLink.addEventListener("click", this.onClose);
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    this.overlayLink.removeEventListener("click", this.onClose);
+    this.buttonLink.removeEventListener("click", this.onClose);
+    document.removeEventListener("keydown", this.onKeyDown);
+  }
+
+  onKeyDown(event) {
+    // Skip if event occurred within an input element
+    const targetNodeName = event.target.nodeName;
+    const isInputTarget =
+      targetNodeName === "INPUT" ||
+      targetNodeName === "SELECT" ||
+      targetNodeName === "TEXTAREA";
+
+    if (isInputTarget) {
+      return;
+    }
+
+    if (event.key === "Escape") {
+      this.onClose(event);
+    }
+  }
+
+  onClose(event) {
+    event.preventDefault();
+    this.element.classList.add("closing");
+    this.element.addEventListener(
+      "animationend",
+      (event) => {
+        if (event.animationName === "fade-out") {
+          this.element.remove();
+
+          const closeUrl = this.overlayLink.href;
+          Turbo.visit(closeUrl, {
+            action: "replace",
+            frame: "details-modal",
+          });
+        }
+      },
+      { once: true },
+    );
+  }
+}
+
+registerBehavior("ld-details-modal", DetailsModalBehavior);

bookmarks/frontend/behaviors/dropdown.js

@@ -4,16 +4,16 @@ class DropdownBehavior extends Behavior {
   constructor(element) {
     super(element);
     this.opened = false;
+    this.onClick = this.onClick.bind(this);
     this.onOutsideClick = this.onOutsideClick.bind(this);
 
-    const toggle = element.querySelector(".dropdown-toggle");
-    toggle.addEventListener("click", () => {
-      if (this.opened) {
-        this.close();
-      } else {
-        this.open();
-      }
-    });
+    this.toggle = element.querySelector(".dropdown-toggle");
+    this.toggle.addEventListener("click", this.onClick);
+  }
+
+  destroy() {
+    this.close();
+    this.toggle.removeEventListener("click", this.onClick);
   }
 
   open() {
@@ -26,6 +26,14 @@ class DropdownBehavior extends Behavior {
     document.removeEventListener("click", this.onOutsideClick);
   }
 
+  onClick() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
   onOutsideClick(event) {
     if (!this.element.contains(event.target)) {
       this.close();

bookmarks/frontend/behaviors/fetch.js

@@ -1,48 +0,0 @@
-import { Behavior, fireEvents, registerBehavior, swap } from "./index";
-
-class FetchBehavior extends Behavior {
-  constructor(element) {
-    super(element);
-
-    const eventName = element.getAttribute("ld-on");
-    const interval = parseInt(element.getAttribute("ld-interval")) * 1000;
-
-    this.onFetch = this.onFetch.bind(this);
-    this.onInterval = this.onInterval.bind(this);
-
-    element.addEventListener(eventName, this.onFetch);
-    if (interval) {
-      this.intervalId = setInterval(this.onInterval, interval);
-    }
-  }
-
-  destroy() {
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-    }
-  }
-
-  async onFetch(maybeEvent) {
-    if (maybeEvent) {
-      maybeEvent.preventDefault();
-    }
-    const url = this.element.getAttribute("ld-fetch");
-    const html = await fetch(url).then((response) => response.text());
-
-    const target = this.element.getAttribute("ld-target");
-    const select = this.element.getAttribute("ld-select");
-    swap(this.element, html, { target, select });
-
-    const events = this.element.getAttribute("ld-fire");
-    fireEvents(events);
-  }
-
-  onInterval() {
-    if (Behavior.interacting) {
-      return;
-    }
-    this.onFetch();
-  }
-}
-
-registerBehavior("ld-fetch", FetchBehavior);

bookmarks/frontend/behaviors/form.js

@@ -1,64 +1,55 @@
-import { Behavior, fireEvents, registerBehavior } from "./index";
-
-class FormBehavior extends Behavior {
-  constructor(element) {
-    super(element);
-
-    element.addEventListener("submit", this.onSubmit.bind(this));
-  }
-
-  async onSubmit(event) {
-    event.preventDefault();
-
-    const url = this.element.action;
-    const formData = new FormData(this.element);
-    if (event.submitter) {
-      formData.append(event.submitter.name, event.submitter.value);
-    }
-
-    await fetch(url, {
-      method: "POST",
-      body: formData,
-      redirect: "manual", // ignore redirect
-    });
-
-    const events = this.element.getAttribute("ld-fire");
-    if (fireEvents) {
-      fireEvents(events);
-    }
-  }
-}
+import { Behavior, registerBehavior } from "./index";
 
 class AutoSubmitBehavior extends Behavior {
   constructor(element) {
     super(element);
 
-    element.addEventListener("change", () => {
-      const form = element.closest("form");
-      form.dispatchEvent(new Event("submit", { cancelable: true }));
-    });
+    this.submit = this.submit.bind(this);
+    element.addEventListener("change", this.submit);
+  }
+
+  destroy() {
+    this.element.removeEventListener("change", this.submit);
+  }
+
+  submit() {
+    this.element.closest("form").requestSubmit();
   }
 }
 
 class UploadButton extends Behavior {
   constructor(element) {
     super(element);
+    this.fileInput = element.nextElementSibling;
 
-    const fileInput = element.nextElementSibling;
+    this.onClick = this.onClick.bind(this);
+    this.onChange = this.onChange.bind(this);
 
-    element.addEventListener("click", () => {
-      fileInput.click();
-    });
+    element.addEventListener("click", this.onClick);
+    this.fileInput.addEventListener("change", this.onChange);
+  }
 
-    fileInput.addEventListener("change", () => {
-      const form = fileInput.closest("form");
-      const event = new Event("submit", { cancelable: true });
-      event.submitter = element;
-      form.dispatchEvent(event);
-    });
+  destroy() {
+    this.element.removeEventListener("click", this.onClick);
+    this.fileInput.removeEventListener("change", this.onChange);
+  }
+
+  onClick(event) {
+    event.preventDefault();
+    this.fileInput.click();
+  }
+
+  onChange() {
+    // Check if the file input has a file selected
+    if (!this.fileInput.files.length) {
+      return;
+    }
+    const form = this.fileInput.closest("form");
+    form.requestSubmit(this.element);
+    // remove selected file so it doesn't get submitted again
+    this.fileInput.value = "";
   }
 }
 
-registerBehavior("ld-form", FormBehavior);
 registerBehavior("ld-auto-submit", AutoSubmitBehavior);
 registerBehavior("ld-upload-button", UploadButton);

bookmarks/frontend/behaviors/global-shortcuts.js

@@ -4,7 +4,12 @@ class GlobalShortcuts extends Behavior {
   constructor(element) {
     super(element);
 
-    document.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.onKeyDown = this.onKeyDown.bind(this);
+    document.addEventListener("keydown", this.onKeyDown);
+  }
+
+  destroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
   }
 
   onKeyDown(event) {

bookmarks/frontend/behaviors/index.js

@@ -16,9 +16,17 @@ const mutationObserver = new MutationObserver((mutations) => {
   });
 });
 
-mutationObserver.observe(document.body, {
-  childList: true,
-  subtree: true,
+document.addEventListener("turbo:load", () => {
+  mutationObserver.observe(document.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  applyBehaviors(document.body);
+});
+
+document.addEventListener("turbo:before-cache", () => {
+  destroyBehaviors(document.body);
 });
 
 export class Behavior {
@@ -95,51 +103,3 @@ export function destroyBehaviors(element) {
     });
   });
 }
-
-export function swap(element, html, options) {
-  const dom = new DOMParser().parseFromString(html, "text/html");
-
-  let targetElement = element;
-  let strategy = "innerHTML";
-  if (options.target) {
-    const parts = options.target.split("|");
-    targetElement =
-      parts[0] === "self" ? element : document.querySelector(parts[0]);
-    strategy = parts[1] || "innerHTML";
-  }
-
-  let contents = Array.from(dom.body.children);
-  if (options.select) {
-    contents = Array.from(dom.querySelectorAll(options.select));
-  }
-
-  switch (strategy) {
-    case "append":
-      targetElement.append(...contents);
-      break;
-    case "outerHTML":
-      targetElement.parentElement.replaceChild(contents[0], targetElement);
-      break;
-    case "innerHTML":
-    default:
-      Array.from(targetElement.children).forEach((child) => {
-        child.remove();
-      });
-      targetElement.append(...contents);
-  }
-}
-
-export function fireEvents(events) {
-  if (!events) {
-    return;
-  }
-  events.split(",").forEach((eventName) => {
-    const targets = Array.from(
-      document.querySelectorAll(`[ld-on='${eventName}']`),
-    );
-    targets.push(document);
-    targets.forEach((target) => {
-      target.dispatchEvent(new CustomEvent(eventName));
-    });
-  });
-}

bookmarks/frontend/behaviors/modal.js

@@ -1,51 +0,0 @@
-import { Behavior, registerBehavior } from "./index";
-
-class ModalBehavior extends Behavior {
-  constructor(element) {
-    super(element);
-
-    this.onClose = this.onClose.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-
-    const modalOverlay = element.querySelector(".modal-overlay");
-    const closeButton = element.querySelector("button.close");
-    modalOverlay.addEventListener("click", this.onClose);
-    closeButton.addEventListener("click", this.onClose);
-
-    document.addEventListener("keydown", this.onKeyDown);
-  }
-
-  destroy() {
-    document.removeEventListener("keydown", this.onKeyDown);
-  }
-
-  onKeyDown(event) {
-    // Skip if event occurred within an input element
-    const targetNodeName = event.target.nodeName;
-    const isInputTarget =
-      targetNodeName === "INPUT" ||
-      targetNodeName === "SELECT" ||
-      targetNodeName === "TEXTAREA";
-
-    if (isInputTarget) {
-      return;
-    }
-
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.onClose();
-    }
-  }
-
-  onClose() {
-    document.removeEventListener("keydown", this.onKeyDown);
-    this.element.classList.add("closing");
-    this.element.addEventListener("animationend", (event) => {
-      if (event.animationName === "fade-out") {
-        this.element.remove();
-      }
-    });
-  }
-}
-
-registerBehavior("ld-modal", ModalBehavior);

bookmarks/frontend/behaviors/search-autocomplete.js

@@ -0,0 +1,41 @@
+import { Behavior, registerBehavior } from "./index";
+import SearchAutoCompleteComponent from "../components/SearchAutoComplete.svelte";
+
+class SearchAutocomplete extends Behavior {
+  constructor(element) {
+    super(element);
+    const input = element.querySelector("input");
+    if (!input) {
+      console.warn("SearchAutocomplete: input element not found");
+      return;
+    }
+
+    const container = document.createElement("div");
+
+    new SearchAutoCompleteComponent({
+      target: container,
+      props: {
+        name: "q",
+        placeholder: input.getAttribute("placeholder") || "",
+        value: input.value,
+        linkTarget: input.dataset.linkTarget,
+        mode: input.dataset.mode,
+        search: {
+          user: input.dataset.user,
+          shared: input.dataset.shared,
+          unread: input.dataset.unread,
+        },
+      },
+    });
+
+    this.input = input;
+    this.autocomplete = container.firstElementChild;
+    input.replaceWith(this.autocomplete);
+  }
+
+  destroy() {
+    this.autocomplete.replaceWith(this.input);
+  }
+}
+
+registerBehavior("ld-search-autocomplete", SearchAutocomplete);

bookmarks/frontend/behaviors/tag-autocomplete.js

@@ -1,27 +1,35 @@
 import { Behavior, registerBehavior } from "./index";
 import TagAutoCompleteComponent from "../components/TagAutocomplete.svelte";
-import { ApiClient } from "../api";
 
 class TagAutocomplete extends Behavior {
   constructor(element) {
     super(element);
-    const wrapper = document.createElement("div");
-    const apiBaseUrl = document.documentElement.dataset.apiBaseUrl || "";
-    const apiClient = new ApiClient(apiBaseUrl);
+    const input = element.querySelector("input");
+    if (!input) {
+      console.warn("TagAutocomplete: input element not found");
+      return;
+    }
+
+    const container = document.createElement("div");
 
     new TagAutoCompleteComponent({
-      target: wrapper,
+      target: container,
       props: {
-        id: element.id,
-        name: element.name,
-        value: element.value,
-        placeholder: element.getAttribute("placeholder") || "",
-        apiClient: apiClient,
-        variant: element.getAttribute("variant"),
+        id: input.id,
+        name: input.name,
+        value: input.value,
+        placeholder: input.getAttribute("placeholder") || "",
+        variant: input.getAttribute("variant"),
       },
     });
 
-    element.replaceWith(wrapper.firstElementChild);
+    this.input = input;
+    this.autocomplete = container.firstElementChild;
+    input.replaceWith(this.autocomplete);
+  }
+
+  destroy() {
+    this.autocomplete.replaceWith(this.input);
   }
 }
 

bookmarks/frontend/behaviors/tag-modal.js

@@ -0,0 +1,68 @@
+import { Behavior, registerBehavior } from "./index";
+
+class TagModalBehavior extends Behavior {
+  constructor(element) {
+    super(element);
+
+    this.onClick = this.onClick.bind(this);
+    this.onClose = this.onClose.bind(this);
+
+    element.addEventListener("click", this.onClick);
+  }
+
+  destroy() {
+    this.onClose();
+    this.element.removeEventListener("click", this.onClick);
+  }
+
+  onClick() {
+    const modal = document.createElement("div");
+    modal.classList.add("modal", "active");
+    modal.innerHTML = `
+      <div class="modal-overlay" aria-label="Close"></div>
+      <div class="modal-container">
+        <div class="modal-header">
+          <h2>Tags</h2>
+          <button class="close" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+                 stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+              <path d="M18 6l-12 12"></path>
+              <path d="M6 6l12 12"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="content"></div>
+        </div>
+      </div>    
+    `;
+
+    const tagCloud = document.querySelector(".tag-cloud");
+    const tagCloudContainer = tagCloud.parentElement;
+
+    const content = modal.querySelector(".content");
+    content.appendChild(tagCloud);
+
+    const overlay = modal.querySelector(".modal-overlay");
+    const closeButton = modal.querySelector(".close");
+    overlay.addEventListener("click", this.onClose);
+    closeButton.addEventListener("click", this.onClose);
+
+    this.modal = modal;
+    this.tagCloud = tagCloud;
+    this.tagCloudContainer = tagCloudContainer;
+    document.body.appendChild(modal);
+  }
+
+  onClose() {
+    if (!this.modal) {
+      return;
+    }
+
+    this.modal.remove();
+    this.tagCloudContainer.appendChild(this.tagCloud);
+  }
+}
+
+registerBehavior("ld-tag-modal", TagModalBehavior);

bookmarks/frontend/cache.js

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

bookmarks/frontend/components/SearchAutoComplete.svelte

@@ -1,5 +1,7 @@
 <script>
   import {SearchHistory} from "./SearchHistory";
+  import {api} from "../api";
+  import {cache} from "../cache";
   import {clampText, debounce, getCurrentWord, getCurrentWordBounds} from "../util";
 
   const searchHistory = new SearchHistory()
@@ -7,9 +9,7 @@
   export let name;
   export let placeholder;
   export let value;
-  export let tags;
   export let mode = '';
-  export let apiClient;
   export let search;
   export let linkTarget = '_blank';
 
@@ -88,17 +88,18 @@
     }
 
     // Tag suggestions
+    const tags = await cache.getTags();
     let tagSuggestions = []
     const currentWord = getCurrentWord(input)
     if (currentWord && currentWord.length > 1 && currentWord[0] === '#') {
       const searchTag = currentWord.substring(1, currentWord.length)
-      tagSuggestions = (tags || []).filter(tagName => tagName.toLowerCase().indexOf(searchTag.toLowerCase()) === 0)
+      tagSuggestions = (tags || []).filter(tag => tag.name.toLowerCase().indexOf(searchTag.toLowerCase()) === 0)
         .slice(0, 5)
-        .map(tagName => ({
+        .map(tag => ({
           type: 'tag',
           index: nextIndex(),
-          label: `#${tagName}`,
-          tagName: tagName
+          label: `#${tag.name}`,
+          tagName: tag.name
         }))
     }
 
@@ -119,7 +120,7 @@
         ...search,
         q: value
       }
-      const fetchedBookmarks = await apiClient.listBookmarks(suggestionSearch, {limit: 5, offset: 0, path})
+      const fetchedBookmarks = await api.listBookmarks(suggestionSearch, {limit: 5, offset: 0, path})
       bookmarks = fetchedBookmarks.map(bookmark => {
         const fullLabel = bookmark.title || bookmark.website_title || bookmark.url
         const label = clampText(fullLabel, 60)

bookmarks/frontend/components/TagAutocomplete.svelte

@@ -1,14 +1,13 @@
 <script>
+  import {cache} from "../cache";
   import {getCurrentWord, getCurrentWordBounds} from "../util";
 
   export let id;
   export let name;
   export let value;
   export let placeholder;
-  export let apiClient;
   export let variant = 'default';
 
-  let tags = [];
   let isFocus = false;
   let isOpen = false;
   let input = null;
@@ -17,18 +16,6 @@
   let suggestions = [];
   let selectedIndex = 0;
 
-  init();
-
-  async function init() {
-    // For now we cache all tags on load as the template did before
-    try {
-      tags = await apiClient.getTags({limit: 5000, offset: 0});
-      tags.sort((left, right) => left.name.toLowerCase().localeCompare(right.name.toLowerCase()))
-    } catch (e) {
-      console.warn('TagAutocomplete: Error loading tag list');
-    }
-  }
-
   function handleFocus() {
     isFocus = true;
   }
@@ -38,9 +25,10 @@
     close();
   }
 
-  function handleInput(e) {
+  async function handleInput(e) {
     input = e.target;
 
+    const tags = await cache.getTags();
     const word = getCurrentWord(input);
 
     suggestions = word

bookmarks/frontend/index.js

@@ -1,12 +1,16 @@
+import "@hotwired/turbo";
 import "./behaviors/bookmark-page";
 import "./behaviors/bulk-edit";
 import "./behaviors/confirm-button";
 import "./behaviors/dropdown";
-import "./behaviors/fetch";
 import "./behaviors/form";
-import "./behaviors/modal";
+import "./behaviors/details-modal";
 import "./behaviors/global-shortcuts";
+import "./behaviors/search-autocomplete";
 import "./behaviors/tag-autocomplete";
+import "./behaviors/tag-modal";
+
 export { default as TagAutoComplete } from "./components/TagAutocomplete.svelte";
 export { default as SearchAutoComplete } from "./components/SearchAutoComplete.svelte";
-export { ApiClient } from "./api";
+export { api } from "./api";
+export { cache } from "./cache";

bookmarks/middlewares.py

@@ -8,28 +8,33 @@ class CustomRemoteUserMiddleware(RemoteUserMiddleware):
     header = settings.LD_AUTH_PROXY_USERNAME_HEADER
 
 
+default_global_settings = GlobalSettings()
+
 standard_profile = UserProfile()
 standard_profile.enable_favicons = True
 
 
-class UserProfileMiddleware:
+class LinkdingMiddleware:
     def __init__(self, get_response):
         self.get_response = get_response
 
     def __call__(self, request):
+        # add global settings to request
+        try:
+            global_settings = GlobalSettings.get()
+        except:
+            global_settings = default_global_settings
+        request.global_settings = global_settings
+
+        # add user profile to request
         if request.user.is_authenticated:
             request.user_profile = request.user.profile
         else:
             # check if a custom profile for guests exists, otherwise use standard profile
-            guest_profile = None
-            try:
-                global_settings = GlobalSettings.get()
-                if global_settings.guest_profile_user:
-                    guest_profile = global_settings.guest_profile_user.profile
-            except:
-                pass
-
-            request.user_profile = guest_profile or standard_profile
+            if global_settings.guest_profile_user:
+                request.user_profile = global_settings.guest_profile_user.profile
+            else:
+                request.user_profile = standard_profile
 
         response = self.get_response(request)
 

bookmarks/migrations/0039_globalsettings_enable_link_prefetch.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.8 on 2024-09-14 07:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("bookmarks", "0038_globalsettings_guest_profile_user"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="globalsettings",
+            name="enable_link_prefetch",
+            field=models.BooleanField(default=False),
+        ),
+    ]

bookmarks/models.py

@@ -282,7 +282,7 @@ class BookmarkSearchForm(forms.Form):
     ]
 
     q = forms.CharField()
-    user = forms.ChoiceField()
+    user = forms.ChoiceField(required=False)
     sort = forms.ChoiceField(choices=SORT_CHOICES)
     shared = forms.ChoiceField(choices=FILTER_SHARED_CHOICES, widget=forms.RadioSelect)
     unread = forms.ChoiceField(choices=FILTER_UNREAD_CHOICES, widget=forms.RadioSelect)
@@ -514,6 +514,7 @@ class GlobalSettings(models.Model):
     guest_profile_user = models.ForeignKey(
         get_user_model(), on_delete=models.SET_NULL, null=True, blank=True
     )
+    enable_link_prefetch = models.BooleanField(default=False, null=False)
 
     @classmethod
     def get(cls):
@@ -532,7 +533,7 @@ class GlobalSettings(models.Model):
 class GlobalSettingsForm(forms.ModelForm):
     class Meta:
         model = GlobalSettings
-        fields = ["landing_page", "guest_profile_user"]
+        fields = ["landing_page", "guest_profile_user", "enable_link_prefetch"]
 
     def __init__(self, *args, **kwargs):
         super(GlobalSettingsForm, self).__init__(*args, **kwargs)

bookmarks/services/singlefile.py

@@ -9,7 +9,7 @@ import subprocess
 from django.conf import settings
 
 
-class SingeFileError(Exception):
+class SingleFileError(Exception):
     pass
 
 
@@ -31,7 +31,7 @@ def create_snapshot(url: str, filepath: str):
 
         # check if the file was created
         if not os.path.exists(temp_filepath):
-            raise SingeFileError("Failed to create snapshot")
+            raise SingleFileError("Failed to create snapshot")
 
         with open(temp_filepath, "rb") as raw_file, gzip.open(
             filepath, "wb"
@@ -47,12 +47,12 @@ def create_snapshot(url: str, filepath: str):
             )
             process.terminate()
             process.wait(timeout=20)
-            raise SingeFileError("Timeout expired while creating snapshot")
+            raise SingleFileError("Timeout expired while creating snapshot")
         except subprocess.TimeoutExpired:
             # Kill the whole process group, which should also clean up any chromium
             # processes spawned by single-file
             logger.error("Timeout expired while terminating. Killing process...")
             os.killpg(os.getpgid(process.pid), signal.SIGTERM)
-            raise SingeFileError("Timeout expired while creating snapshot")
+            raise SingleFileError("Timeout expired while creating snapshot")
     except subprocess.CalledProcessError as error:
-        raise SingeFileError(f"Failed to create snapshot: {error.stderr}")
+        raise SingleFileError(f"Failed to create snapshot: {error.stderr}")

bookmarks/styles/base.scss

@@ -1,136 +0,0 @@
-/* Main layout */
-body {
-  margin: 20px 10px;
-
-  @media (min-width: $size-sm) {
-    // Horizontal padding accounts for checkboxes that show up in bulk edit mode
-    margin: 20px 32px;
-  }
-}
-
-header {
-  margin-bottom: $unit-9;
-
-  .logo {
-    width: 28px;
-    height: 28px;
-  }
-
-  a:hover {
-    text-decoration: none;
-  }
-
-  h1 {
-    margin: 0 0 0 $unit-3;
-    font-size: $font-size-lg;
-  }
-}
-
-header .toasts {
-  margin-bottom: 20px;
-
-  .toast {
-    margin-bottom: 0.4rem;
-  }
-
-  .toast a.btn-clear:visited {
-    color: currentColor;
-  }
-}
-
-/* Shared components */
-
-// Content area component
-section.content-area {
-  h2 {
-    font-size: $font-size-lg;
-  }
-
-  .content-area-header {
-    border-bottom: solid 1px $border-color;
-    display: flex;
-    flex-wrap: wrap;
-    column-gap: $unit-5;
-    padding-bottom: $unit-1;
-    margin-bottom: $unit-3;
-
-    h2 {
-      flex: 0 0 auto;
-      line-height: $unit-9;
-      margin: 0;
-    }
-
-    .header-controls {
-      flex: 1 1 0;
-      display: flex;
-    }
-  }
-}
-
-// Confirm button component
-span.confirmation {
-  display: flex;
-  align-items: baseline;
-  gap: $unit-1;
-  color: $error-color !important;
-
-  svg {
-    align-self: center;
-  }
-
-  .btn.btn-link {
-    color: $error-color !important;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
-
-/* Additional utilities */
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.text-gray-dark {
-  color: $gray-color-dark;
-}
-
-.align-baseline {
-  align-items: baseline;
-}
-
-.align-center {
-  align-items: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.mb-4 {
-  margin-bottom: $unit-4;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.btn.btn-wide {
-  padding-left: $unit-6;
-  padding-right: $unit-6;
-}
-
-.btn.btn-sm.btn-icon {
-  display: inline-flex;
-  align-items: baseline;
-  gap: $unit-h;
-
-  svg {
-    align-self: center;
-  }
-}

bookmarks/styles/bookmark-details.css

@@ -0,0 +1,129 @@
+/* Common styles */
+.bookmark-details {
+  & .weblinks {
+    display: flex;
+    flex-direction: column;
+    gap: var(--unit-2);
+  }
+
+  & a.weblink {
+    display: flex;
+    align-items: center;
+    gap: var(--unit-2);
+  }
+
+  & a.weblink img, & a.weblink svg {
+    flex: 0 0 auto;
+    width: 16px;
+    height: 16px;
+    color: var(--text-color);
+  }
+
+  & a.weblink span {
+    flex: 1 1 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  & .preview-image {
+    margin: var(--unit-4 0);
+
+    img {
+      max-width: 100%;
+      max-height: 200px;
+    }
+  }
+
+  & dl {
+    margin-bottom: 0;
+  }
+
+  & .assets {
+    margin-top: var(--unit-2);
+
+    & .asset {
+      display: flex;
+      align-items: center;
+      gap: var(--unit-2);
+      padding: var(--unit-2) 0;
+      border-top: var(--unit-o) solid var(--secondary-border-color);
+    }
+
+    & .asset:last-child {
+      border-bottom: var(--unit-o) solid var(--secondary-border-color);
+    }
+
+    & .asset-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    & .asset-text {
+      flex: 1 1 0;
+      gap: var(--unit-2);
+      min-width: 0;
+      display: flex;
+    }
+
+    & .asset-text .truncate {
+      flex-shrink: 1;
+    }
+
+    & .asset-text .filesize {
+      color: var(--tertiary-text-color);
+    }
+
+    & .asset-actions {
+      display: flex;
+      gap: var(--unit-4);
+      align-items: center;
+
+      & .btn.btn-link {
+        height: unset;
+        padding: 0;
+        border: none;
+      }
+    }
+  }
+
+  & .assets-actions {
+    display: flex;
+    gap: var(--unit-4);
+    align-items: center;
+    margin-top: var(--unit-2);
+
+    & .btn.btn-link {
+      height: unset;
+      padding: 0;
+      border: none;
+    }
+  }
+
+  & .tags a {
+    color: var(--alternative-color);
+  }
+
+  & .status form {
+    display: flex;
+    gap: var(--unit-2);
+  }
+
+  & .status .form-group, .status .form-switch {
+    margin: 0;
+  }
+
+  & .actions {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+/* Bookmark details view specific */
+.bookmark-details.page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--unit-6);
+}

bookmarks/styles/bookmark-details.scss

@@ -1,141 +0,0 @@
-/* Common styles */
-.bookmark-details {
-  h2 {
-    flex: 1 1 0;
-    align-items: flex-start;
-    font-size: 1rem;
-    margin: 0;
-  }
-
-  .weblinks {
-    display: flex;
-    flex-direction: column;
-    gap: $unit-2;
-  }
-
-  a.weblink {
-    display: flex;
-    align-items: center;
-    gap: $unit-2;
-  }
-
-  a.weblink img, a.weblink svg {
-    flex: 0 0 auto;
-    width: 16px;
-    height: 16px;
-    color: $body-font-color;
-  }
-
-  a.weblink span {
-    flex: 1 1 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .preview-image {
-    margin: $unit-4 0;
-
-    img {
-      max-width: 100%;
-      max-height: 200px;
-    }
-  }
-
-  dl {
-    margin-bottom: 0;
-  }
-
-  .assets {
-    margin-top: $unit-2;
-  }
-
-  .assets .asset {
-    display: flex;
-    align-items: center;
-    gap: $unit-3;
-    padding: $unit-2 0;
-    border-top: $unit-o solid $border-color-light;
-  }
-
-  .assets .asset:last-child {
-    border-bottom: $unit-o solid $border-color-light;
-  }
-
-  .assets .asset-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .assets .asset-text {
-    flex: 1 1 0;
-    gap: $unit-2;
-    min-width: 0;
-    display: flex;
-  }
-
-  .assets .asset-text .truncate {
-    flex-shrink: 1;
-  }
-
-  .assets .asset-text .filesize {
-    color: $gray-color;
-  }
-
-  .assets .asset-actions, .assets-actions {
-    display: flex;
-    gap: $unit-4;
-    align-items: center;
-  }
-
-  .assets .asset-actions .btn, .assets-actions .btn {
-    height: unset;
-    padding: 0;
-    border: none;
-  }
-
-  .assets-actions {
-    margin-top: $unit-2;
-  }
-
-  .tags a {
-    color: $alternative-color;
-  }
-
-  .status form {
-    display: flex;
-    gap: $unit-2;
-  }
-
-  .status .form-group, .status .form-switch {
-    margin: 0;
-  }
-
-  .actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-
-/* Bookmark details view specific */
-.bookmark-details.page {
-  display: flex;
-  flex-direction: column;
-  gap: $unit-6;
-}
-
-/* Bookmark details modal specific */
-.bookmark-details.modal {
-  .modal-header {
-    display: flex;
-    align-items: flex-start;
-    gap: $unit-2;
-  }
-
-  .modal-body {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}

bookmarks/styles/bookmark-form.css

@@ -0,0 +1,48 @@
+.bookmarks-form-page {
+  section {
+    max-width: 550px;
+    margin: 0 auto;
+  }
+}
+
+.bookmarks-form {
+  & .btn.btn-link.form-icon {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    visibility: hidden;
+    --btn-icon-color: var(--tertiary-text-color);
+
+    & > svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  & .has-icon-right > input, & .has-icon-right > textarea {
+    padding-right: 30px;
+  }
+
+  & .has-icon-right > input:placeholder-shown ~ .btn.form-icon,
+  & .has-icon-right > textarea:placeholder-shown ~ .btn.form-icon {
+    visibility: visible;
+  }
+
+  & .form-icon.loading {
+    visibility: hidden;
+  }
+
+  & .form-input-hint.bookmark-exists {
+    display: none;
+    color: var(--warning-color);
+  }
+
+  & .form-input-hint.auto-tags {
+    display: none;
+    color: var(--success-color);
+  }
+
+  & details.notes textarea {
+    box-sizing: border-box;
+  }
+}

bookmarks/styles/bookmark-form.scss

@@ -1,49 +0,0 @@
-.bookmarks-form {
-
-  .btn.form-icon {
-    padding: 0;
-    width: 20px;
-    height: 20px;
-    visibility: hidden;
-    color: $gray-color;
-
-    &:focus,
-    &:hover,
-    &:active,
-    &.active {
-      color: $gray-color-dark;
-    }
-
-    > svg {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  .has-icon-right > input, .has-icon-right > textarea {
-    padding-right: 30px;
-  }
-
-  .has-icon-right > input:placeholder-shown ~ .btn.form-icon,
-  .has-icon-right > textarea:placeholder-shown ~ .btn.form-icon {
-    visibility: visible;
-  }
-
-  .form-icon.loading {
-    visibility: hidden;
-  }
-
-  .form-input-hint.bookmark-exists {
-    display: none;
-    color: $warning-color;
-  }
-
-  .form-input-hint.auto-tags {
-    display: none;
-    color: $success-color;
-  }
-
-  details.notes textarea {
-    box-sizing: border-box;
-  }
-}

bookmarks/styles/bookmark-page.css

@@ -0,0 +1,457 @@
+:root {
+    --bookmark-title-color: var(--primary-text-color);
+    --bookmark-title-weight: 500;
+    --bookmark-description-color: var(--text-color);
+    --bookmark-description-weight: 400;
+    --bookmark-actions-color: var(--secondary-text-color);
+    --bookmark-actions-hover-color: var(--text-color);
+    --bookmark-actions-weight: 400;
+    --bulk-actions-bg-color: var(--gray-50);
+}
+
+/* Bookmark page grid */
+.bookmarks-page.grid {
+    grid-gap: var(--unit-9);
+}
+
+/* Bookmark area header controls */
+.bookmarks-page .search-container {
+    flex: 1 1 0;
+    display: flex;
+    max-width: 300px;
+    margin-left: auto;
+
+    & form {
+        width: 100%;
+    }
+
+    @media (max-width: 600px) {
+        max-width: initial;
+        margin-left: 0;
+    }
+
+    /* Regular input */
+
+    & input[type='search'] {
+        height: var(--control-size);
+        -webkit-appearance: none;
+    }
+
+    /* Enhanced auto-complete input */
+    /* This needs a bit more wrangling to make the CSS component align with the attached button */
+
+    & .form-autocomplete {
+        height: var(--control-size);
+
+        & .form-autocomplete-input {
+            width: 100%;
+            height: var(--control-size);
+
+            & input[type='search'] {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                border: none;
+            }
+        }
+    }
+
+    /* Group search options button with search button */
+    height: var(--control-size);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow-xs);
+
+    & input, & .form-autocomplete-input {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        box-shadow: none;
+    }
+
+    & .dropdown-toggle {
+        border-left: none;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        box-shadow: none;
+        outline-offset: calc(var(--focus-outline-offset) * -1);
+    }
+
+    /* Search option menu styles */
+
+    & .dropdown {
+        & .menu {
+            padding: var(--unit-4);
+            min-width: 250px;
+            font-size: var(--font-size-sm);
+        }
+
+        & .menu .actions {
+            margin-top: var(--unit-4);
+            display: flex;
+            justify-content: space-between;
+        }
+
+        & .form-group:first-of-type {
+            margin-top: 0;
+        }
+
+        & .form-group {
+            margin-bottom: var(--unit-3);
+        }
+
+        & .radio-group {
+            & .form-label {
+                margin-bottom: var(--unit-1);
+            }
+
+            & .form-radio.form-inline {
+                margin: 0 var(--unit-2) 0 0;
+                padding: 0;
+                display: inline-flex;
+                align-items: center;
+                column-gap: var(--unit-1);
+            }
+
+            & .form-icon {
+                top: 0;
+                position: relative;
+            }
+        }
+    }
+}
+
+/* Bookmark list */
+ul.bookmark-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    /* Increase line-height for better separation within / between items */
+    line-height: 1.1rem;
+}
+
+@keyframes appear {
+    0% {
+        opacity: 0;
+    }
+    90% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+/* Bookmarks */
+li[ld-bookmark-item] {
+    position: relative;
+    display: flex;
+    gap: var(--unit-2);
+    margin-top: 0;
+    margin-bottom: var(--unit-3);
+
+    & .content {
+        flex: 1 1 0;
+        min-width: 0;
+    }
+
+    & img.preview-image {
+        flex: 0 0 auto;
+        width: 100px;
+        height: 60px;
+        margin-top: var(--unit-h);
+        object-fit: cover;
+        border-radius: var(--border-radius);
+        border: solid 1px var(--border-color);
+    }
+
+    & .form-checkbox.bulk-edit-checkbox {
+        display: none;
+    }
+
+    & .title {
+        position: relative;
+    }
+
+    & .title img {
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        pointer-events: none;
+    }
+
+    & .title img + a {
+        padding-left: 22px;
+    }
+
+    & .title a {
+        color: var(--bookmark-title-color);
+        font-weight: var(--bookmark-title-weight);
+        display: block;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    & .title a[data-tooltip]:hover::after, & .title a[data-tooltip]:focus::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        z-index: 10;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: max-content;
+        max-width: 90%;
+        height: fit-content;
+        background-color: #292f62;
+        color: #fff;
+        padding: var(--unit-1);
+        border-radius: var(--border-radius);
+        border: 1px solid #424a8c;
+        font-size: var(--font-size-sm);
+        font-style: normal;
+        white-space: normal;
+        pointer-events: none;
+        animation: 0.3s ease 0s appear;
+    }
+
+    @media (pointer: coarse) {
+        & .title a[data-tooltip]::after {
+            display: none;
+        }
+    }
+
+    &.unread .title a {
+        font-style: italic;
+    }
+
+    & .url-path, & .url-display {
+        font-size: var(--font-size-sm);
+        color: var(--secondary-link-color);
+    }
+
+    & .description {
+        color: var(--bookmark-description-color);
+        font-weight: var(--bookmark-description-weight);
+    }
+
+    & .description.separate {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--ld-bookmark-description-max-lines, 1);
+        overflow: hidden;
+    }
+
+    & .tags {
+        & a, & a:visited:hover {
+            color: var(--alternative-color);
+        }
+    }
+
+    & .actions, & .extra-actions {
+        display: flex;
+        align-items: baseline;
+        flex-wrap: wrap;
+        column-gap: var(--unit-2);
+    }
+
+    @media (max-width: 600px) {
+        & .extra-actions {
+            width: 100%;
+            margin-top: var(--unit-1);
+        }
+    }
+
+    & .actions {
+        color: var(--bookmark-actions-color);
+        font-size: var(--font-size-sm);
+
+        & a, & button.btn-link {
+            color: var(--bookmark-actions-color);
+            --btn-icon-color: var(--bookmark-actions-color);
+            font-weight: var(--bookmark-actions-weight);
+            padding: 0;
+            height: auto;
+            vertical-align: unset;
+            border: none;
+            box-sizing: border-box;
+            transition: none;
+            text-decoration: none;
+
+            &:focus,
+            &:hover,
+            &:active,
+            &.active {
+                color: var(--bookmark-actions-hover-color);
+                --btn-icon-color: var(--bookmark-actions-hover-color);
+            }
+        }
+    }
+}
+
+.bookmark-pagination {
+    margin-top: var(--unit-4);
+
+    /* Remove left padding from first pagination link */
+
+    & .page-item:first-child a {
+        padding-left: 0;
+    }
+}
+
+.tag-cloud {
+    /* Increase line-height for better separation within / between items */
+    line-height: 1.1rem;
+
+    & .selected-tags {
+        margin-bottom: var(--unit-4);
+
+        & a,
+        & a:visited:hover {
+            color: var(--error-color);
+        }
+    }
+
+    & .unselected-tags {
+        & a,
+        & a:visited:hover {
+            color: var(--alternative-color);
+        }
+    }
+
+    & .group {
+        margin-bottom: var(--unit-3);
+    }
+
+    & .highlight-char {
+        font-weight: bold;
+        text-transform: uppercase;
+        color: var(--alternative-color-dark);
+    }
+}
+
+/* Bookmark notes */
+ul.bookmark-list {
+    & .notes {
+        display: none;
+        max-height: 300px;
+        margin: var(--unit-1) 0;
+        overflow-y: auto;
+        background: var(--body-color-contrast);
+        border-radius: var(--border-radius);
+    }
+
+    & .notes .markdown {
+        padding: var(--unit-2) var(--unit-3);
+    }
+
+    &.show-notes .notes,
+    & li.show-notes .notes {
+        display: block;
+    }
+}
+
+/* Bookmark bulk edit */
+:root {
+    --bulk-edit-toggle-width: 16px;
+    --bulk-edit-toggle-offset: 8px;
+    --bulk-edit-bar-offset: calc(var(--bulk-edit-toggle-width) + (2 * var(--bulk-edit-toggle-offset)));
+    --bulk-edit-transition-duration: 400ms;
+}
+
+[ld-bulk-edit] {
+    & .bulk-edit-bar {
+        margin-top: -1px;
+        margin-left: calc(-1 * var(--bulk-edit-bar-offset));
+        margin-bottom: var(--unit-4);
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height var(--bulk-edit-transition-duration);
+        background: var(--bulk-actions-bg-color);
+    }
+
+    &.active .bulk-edit-bar {
+        max-height: 37px;
+        border-bottom: solid 1px var(--secondary-border-color);
+    }
+
+    /* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */
+    &.active section:first-of-type .content-area-header {
+        border-bottom-color: transparent;
+    }
+
+    /* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
+
+    &.active:not(.activating) .bulk-edit-bar {
+        overflow: visible;
+    }
+
+    /* All checkbox */
+
+    & .form-checkbox.bulk-edit-checkbox.all {
+        display: block;
+        width: var(--bulk-edit-toggle-width);
+        margin: 0 0 0 var(--bulk-edit-toggle-offset);
+        padding: 0;
+    }
+
+    /* Bookmark checkboxes */
+
+    & li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
+        display: block;
+        position: absolute;
+        width: var(--bulk-edit-toggle-width);
+        min-height: var(--bulk-edit-toggle-width);
+        left: calc(-1 * var(--bulk-edit-toggle-width) - var(--bulk-edit-toggle-offset));
+        top: 50%;
+        transform: translateY(-50%);
+        padding: 0;
+        margin: 0;
+        visibility: hidden;
+        opacity: 0;
+        transition: all var(--bulk-edit-transition-duration);
+
+        .form-icon {
+            top: 0;
+        }
+    }
+
+    &.active li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    /* Actions */
+
+    & .bulk-edit-actions {
+        display: flex;
+        align-items: center;
+        padding: var(--unit-1) 0;
+        border-top: solid 1px var(--secondary-border-color);
+        gap: var(--unit-2);
+
+        & button {
+            --control-padding-x-sm: 0;
+        }
+
+        & button:hover {
+            text-decoration: underline;
+        }
+
+        & > input,
+        & .form-autocomplete,
+        & select {
+            width: auto;
+            max-width: 140px;
+            -webkit-appearance: none;
+        }
+
+        & .select-across {
+            margin: 0 0 0 auto;
+            font-size: var(--font-size-sm);
+        }
+    }
+}

bookmarks/styles/bookmark-page.scss

@@ -1,408 +0,0 @@
-.bookmarks-page.grid {
-  grid-gap: $unit-9;
-}
-
-/* Bookmark area header controls */
-.bookmarks-page .content-area-header {
-  --searchbox-max-width: 350px;
-
-  @media (max-width: $size-sm) {
-    --searchbox-max-width: initial;
-    flex-direction: column;
-  }
-}
-
-.bookmarks-page .search-container {
-  flex: 1 1 0;
-  display: flex;
-  justify-content: flex-end;
-
-  // Regular input
-  input[type='search'] {
-    height: $control-size;
-    -webkit-appearance: none;
-  }
-
-  // Enhanced auto-complete input
-  // This needs a bit more wrangling to make the CSS component align with the attached button
-  .form-autocomplete {
-    height: $control-size;
-
-    .form-autocomplete-input {
-      width: 100%;
-      height: $control-size;
-
-      input[type='search'] {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        border: none;
-      }
-    }
-  }
-
-  .input-group {
-    flex: 1 1 0;
-    min-width: var(--searchbox-min-width);
-    max-width: var(--searchbox-max-width);
-  }
-
-  .input-group > :first-child {
-    flex: 1 1 0;
-  }
-
-  // Group search options button with search button
-  .input-group input[type='submit'] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .dropdown-toggle {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .dropdown {
-    margin-left: -1px;
-  }
-
-  // Search option menu styles
-  .dropdown {
-    .menu {
-      padding: $unit-4;
-      min-width: 250px;
-      font-size: $font-size-sm;
-    }
-
-    .menu .actions {
-      margin-top: $unit-4;
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .radio-group {
-      margin-bottom: $unit-1;
-
-      .form-label {
-        padding-bottom: 0;
-      }
-
-      .form-radio.form-inline {
-        margin: 0 $unit-2 0 0;
-        padding: 0;
-        display: inline-flex;
-        align-items: center;
-        column-gap: $unit-1;
-      }
-
-      .form-icon {
-        top: 0;
-        position: relative;
-      }
-    }
-  }
-}
-
-/* Bookmark list */
-ul.bookmark-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-
-  /* Increase line-height for better separation within / between items */
-  line-height: 1.1rem;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-  90% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-/* Bookmarks */
-li[ld-bookmark-item] {
-  position: relative;
-  display: flex;
-  gap: $unit-2;
-  margin-top: $unit-2;
-
-  .content {
-    flex: 1 1 0;
-    min-width: 0;
-  }
-
-  img.preview-image {
-    flex: 0 0 auto;
-    width: 100px;
-    height: 60px;
-    margin-top: $unit-h;
-    object-fit: cover;
-    border-radius: $border-radius;
-    border: solid 1px $border-color-dark;
-  }
-
-  .form-checkbox.bulk-edit-checkbox {
-    display: none;
-  }
-
-  .title {
-    position: relative;
-  }
-
-  .title img {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-  }
-
-  .title img + a {
-    padding-left: 22px;
-  }
-
-  .title a {
-    display: block;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .title a[data-tooltip]:hover::after, .title a[data-tooltip]:focus::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    z-index: 10;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: max-content;
-    max-width: 90%;
-    height: fit-content;
-    background-color: #292f62;
-    color: #fff;
-    padding: $unit-1;
-    border-radius: $border-radius;
-    border: 1px solid #424a8c;
-    font-size: $font-size-sm;
-    font-style: normal;
-    white-space: normal;
-    pointer-events: none;
-    animation: 0.3s ease 0s appear;
-  }
-
-  @media (pointer:coarse) {
-    .title a[data-tooltip]::after {
-      display: none;
-    }
-  }
-
-  &.unread .title a {
-    font-style: italic;
-  }
-
-  .url-path, .url-display {
-    font-size: $font-size-sm;
-    color: $secondary-link-color;
-  }
-
-  .description {
-    color: $gray-color-dark;
-  }
-
-  .description.separate {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--ld-bookmark-description-max-lines, 1);
-    overflow: hidden;
-  }
-
-  .tags {
-    a, a:visited:hover {
-      color: $alternative-color;
-    }
-  }
-
-  .actions, .extra-actions {
-    display: flex;
-    align-items: baseline;
-    flex-wrap: wrap;
-    column-gap: $unit-2;
-  }
-
-  @media (max-width: $size-sm) {
-    .extra-actions {
-      width: 100%;
-      margin-top: $unit-1;
-    }
-  }
-
-  .actions {
-    font-size: $font-size-sm;
-
-    a, button.btn-link {
-      color: $gray-color;
-      padding: 0;
-      height: auto;
-      vertical-align: unset;
-      border: none;
-      transition: none;
-      text-decoration: none;
-
-      &:focus,
-      &:hover,
-      &:active,
-      &.active {
-        color: $gray-color-dark;
-      }
-    }
-  }
-}
-
-.bookmark-pagination {
-  margin-top: $unit-4;
-}
-
-.tag-cloud {
-  /* Increase line-height for better separation within / between items */
-  line-height: 1.1rem;
-
-  .selected-tags {
-    margin-bottom: $unit-4;
-
-    a, a:visited:hover {
-      color: $error-color;
-    }
-  }
-
-  .unselected-tags {
-    a, a:visited:hover {
-      color: $alternative-color;
-    }
-  }
-
-  .group {
-    margin-bottom: $unit-2;
-  }
-
-  .highlight-char {
-    font-weight: bold;
-    text-transform: uppercase;
-    color: $alternative-color-dark;
-  }
-}
-
-/* Bookmark notes */
-ul.bookmark-list {
-  .notes {
-    display: none;
-    max-height: 300px;
-    margin: $unit-1 0;
-    overflow-y: auto;
-  }
-
-  .notes .markdown {
-    padding: $unit-2 $unit-3;
-  }
-
-  &.show-notes .notes,
-  li.show-notes .notes {
-    display: block;
-  }
-}
-
-/* Bookmark bulk edit */
-$bulk-edit-toggle-width: 16px;
-$bulk-edit-toggle-offset: 8px;
-$bulk-edit-bar-offset: $bulk-edit-toggle-width + (2 * $bulk-edit-toggle-offset);
-$bulk-edit-transition-duration: 400ms;
-
-[ld-bulk-edit] {
-  .bulk-edit-bar {
-    margin-top: -1px;
-    margin-left: -$bulk-edit-bar-offset;
-    margin-bottom: $unit-3;
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height $bulk-edit-transition-duration;
-  }
-
-  &.active .bulk-edit-bar {
-    max-height: 37px;
-    border-bottom: solid 1px $border-color;
-  }
-
-  /* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
-  &.active:not(.activating) .bulk-edit-bar {
-    overflow: visible;
-  }
-
-  /* All checkbox */
-  .form-checkbox.bulk-edit-checkbox.all {
-    display: block;
-    width: $bulk-edit-toggle-width;
-    margin: 0 0 0 $bulk-edit-toggle-offset;
-    padding: 0;
-  }
-
-  /* Bookmark checkboxes */
-  li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
-    display: block;
-    position: absolute;
-    width: $bulk-edit-toggle-width;
-    min-height: $bulk-edit-toggle-width;
-    left: -$bulk-edit-toggle-width - $bulk-edit-toggle-offset;
-    top: 50%;
-    transform: translateY(-50%);
-    padding: 0;
-    margin: 0;
-    visibility: hidden;
-    opacity: 0;
-    transition: all $bulk-edit-transition-duration;
-
-    .form-icon {
-      top: 0;
-    }
-  }
-
-  &.active li[ld-bookmark-item] .form-checkbox.bulk-edit-checkbox {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  /* Actions */
-  .bulk-edit-actions {
-    display: flex;
-    align-items: center;
-    padding: $unit-1 0;
-    border-top: solid 1px $border-color;
-    gap: $unit-2;
-
-    button {
-      padding: 0 !important;
-    }
-
-    button:hover {
-      text-decoration: underline;
-    }
-
-    > input, .form-autocomplete, select {
-      width: auto;
-      max-width: 140px;
-      -webkit-appearance: none;
-    }
-
-    .select-across {
-      margin: 0 0 0 auto;
-      font-size: $font-size-sm;
-    }
-  }
-}

bookmarks/styles/components.css

@@ -0,0 +1,65 @@
+/* Shared components */
+
+/* Content area component */
+section.content-area {
+    h2 {
+        font-size: var(--font-size-lg);
+    }
+
+    .content-area-header {
+        border-bottom: solid 1px var(--secondary-border-color);
+        display: flex;
+        flex-wrap: wrap;
+        column-gap: var(--unit-5);
+        padding-bottom: var(--unit-2);
+        margin-bottom: var(--unit-4);
+
+        h2 {
+            flex: 0 0 auto;
+            line-height: var(--unit-9);
+            margin: 0;
+        }
+
+        .header-controls {
+            flex: 1 1 0;
+            display: flex;
+        }
+    }
+}
+
+@media (max-width: 600px) {
+    section.content-area .content-area-header {
+        flex-direction: column;
+    }
+}
+
+/* Confirm button component */
+span.confirmation {
+    display: flex;
+    align-items: baseline;
+    gap: var(--unit-1);
+    color: var(--error-color) !important;
+
+    svg {
+        align-self: center;
+    }
+
+    .btn.btn-link {
+        color: var(--error-color) !important;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+/* Divider */
+.divider {
+    border-bottom: solid 1px var(--secondary-border-color);
+    margin: var(--unit-5) 0;
+}
+
+/* Turbo progress bar */
+.turbo-progress-bar {
+    background-color: var(--primary-color);
+}

bookmarks/styles/layout.css

@@ -0,0 +1,39 @@
+/* Main layout */
+body {
+    margin: 20px 10px;
+
+    @media (min-width: 600px) {
+        /* Horizontal offset accounts for checkboxes that show up in bulk edit mode */
+        margin: 20px 32px;
+    }
+}
+
+header {
+    margin-bottom: var(--unit-9);
+
+    .logo {
+        width: 28px;
+        height: 28px;
+    }
+
+    a:hover {
+        text-decoration: none;
+    }
+
+    h1 {
+        margin: 0 0 0 var(--unit-3);
+        font-size: var(--font-size-lg);
+    }
+}
+
+header .toasts {
+    margin-bottom: 20px;
+
+    .toast {
+        margin-bottom: 0.4rem;
+    }
+
+    .toast a.btn-clear:visited {
+        color: currentColor;
+    }
+}

bookmarks/styles/markdown.css

@@ -0,0 +1,40 @@
+.markdown {
+    & p, & ul, & ol, & pre, & blockquote {
+        margin: 0 0 var(--unit-2) 0;
+    }
+
+    & > *:first-child {
+        margin-top: 0;
+    }
+
+    & > *:last-child {
+        margin-bottom: 0;
+    }
+
+    & ul, & ol {
+        margin-left: var(--unit-4);
+    }
+
+    & ul li, & ol li {
+        margin-top: var(--unit-1);
+    }
+
+    & pre {
+        padding: var(--unit-1) var(--unit-2);
+        background-color: var(--code-bg-color);
+        border-radius: var(--unit-1);
+        overflow-x: auto;
+    }
+
+    & pre code {
+        background: none;
+        box-shadow: none;
+        padding: 0;
+    }
+
+    & > pre:first-child:last-child {
+        padding: 0;
+        background: none;
+        border-radius: 0;
+    }
+}

bookmarks/styles/markdown.scss

@@ -1,40 +0,0 @@
-.markdown {
-  p, ul, ol, pre, blockquote {
-    margin: 0 0 $unit-2 0;
-  }
-
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  ul, ol {
-    margin-left: $unit-4;
-  }
-
-  ul li, ol li {
-    margin-top: $unit-1;
-  }
-
-  pre {
-    padding: $unit-1 $unit-2;
-    background-color: $code-bg-color;
-    border-radius: $unit-1;
-    overflow-x: auto;
-  }
-
-  pre code {
-    background: none;
-    box-shadow: none;
-    padding: 0;
-  }
-
-  > pre:first-child:last-child {
-    padding: 0;
-    background: none;
-    border-radius: 0;
-  }
-}

bookmarks/styles/responsive.css

@@ -1,10 +1,3 @@
-.container {
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-  max-width: $size-lg;
-}
-
 .show-sm,
 .show-md {
   display: none !important;
@@ -26,11 +19,18 @@
   width: 100%;
 }
 
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: var(--size-lg);
+}
+
 .grid {
   --grid-columns: 3;
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), 1fr);
-  grid-gap: $unit-4;
+  grid-gap: var(--unit-4);
 }
 
 .grid > * {
@@ -46,18 +46,18 @@
 }
 
 .col-1 {
-  grid-column: unquote("span min(1, var(--grid-columns))");
+  grid-column: span min(1, var(--grid-columns));
 }
 
 .col-2 {
-  grid-column: unquote("span min(2, var(--grid-columns))");
+  grid-column: span min(2, var(--grid-columns));
 }
 
 .col-3 {
-  grid-column: unquote("span min(3, var(--grid-columns))");
+  grid-column: span min(3, var(--grid-columns));
 }
 
-@media (max-width: $size-md) {
+@media (max-width: 840px) {
   .hide-md {
     display: none !important;
   }
@@ -86,7 +86,7 @@
   }
 }
 
-@media (max-width: $size-sm) {
+@media (max-width: 600px) {
   .hide-sm {
     display: none !important;
   }

bookmarks/styles/settings.css

@@ -1,9 +1,9 @@
 .settings-page {
   section.content-area {
-    margin-bottom: $unit-10;
+    margin-bottom: var(--unit-10);
 
     h2 {
-      margin-bottom: $unit-3;
+      margin-bottom: var(--unit-3);
     }
   }
 
@@ -17,6 +17,10 @@
   }
 
   section.about table {
-    max-width: 500px;
+    max-width: 400px;
+  }
+
+  & .form-group {
+    margin-bottom: var(--unit-4);
   }
 }

bookmarks/styles/spectre.scss

@@ -1,204 +0,0 @@
-// Customized Spectre CSS imports, removing modules that are not used
-// See node_modules/spectre.css/src/spectre.scss for the original version
-
-// Variables and mixins
-@import "../../node_modules/spectre.css/src/variables";
-
-// Customize variables to reduce font and control sizes
-
-// Can use CSS variables for font sizes, as they are not used in SCSS calculations
-$font-size: var(--font-size);
-$font-size-sm: var(--font-size-sm);
-$font-size-lg: var(--font-size-lg);
-
-// Can't use CSS variables for these, used in SCSS calculations
-$line-height: 1rem;
-$control-size: $unit-8;
-$control-size-sm: $unit-6;
-$control-size-lg: $unit-9;
-
-// Declare defaults for CSS variables, expose SCSS variables as CSS variables
-html {
-  --font-size: 0.7rem;
-  --font-size-sm: 0.65rem;
-  --font-size-lg: 0.8rem;
-
-  --control-size: #{$control-size};
-  --control-size-sm: #{$control-size-sm};
-  --control-size-lg: #{$control-size-lg};
-}
-
-// Mixins
-@import "../../node_modules/spectre.css/src/mixins";
-
-/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
-// Reset and dependencies
-@import "../../node_modules/spectre.css/src/normalize";
-@import "../../node_modules/spectre.css/src/base";
-
-// Elements
-@import "../../node_modules/spectre.css/src/typography";
-@import "../../node_modules/spectre.css/src/asian";
-@import "../../node_modules/spectre.css/src/tables";
-@import "../../node_modules/spectre.css/src/buttons";
-@import "../../node_modules/spectre.css/src/forms";
-@import "../../node_modules/spectre.css/src/labels";
-@import "../../node_modules/spectre.css/src/codes";
-@import "../../node_modules/spectre.css/src/media";
-
-// Components
-@import "../../node_modules/spectre.css/src/badges";
-@import "../../node_modules/spectre.css/src/dropdowns";
-@import "../../node_modules/spectre.css/src/empty";
-@import "../../node_modules/spectre.css/src/menus";
-@import "../../node_modules/spectre.css/src/modals";
-@import "../../node_modules/spectre.css/src/pagination";
-@import "../../node_modules/spectre.css/src/tabs";
-@import "../../node_modules/spectre.css/src/toasts";
-@import "../../node_modules/spectre.css/src/tooltips";
-
-// Utility classes
-@import "../../node_modules/spectre.css/src/animations";
-@import "../../node_modules/spectre.css/src/utilities";
-
-// Auto-complete component
-@import "../../node_modules/spectre.css/src/autocomplete";
-
-
-/* Spectre overrides / fixes */
-
-// Fix up visited styles
-a:visited {
-  color: $link-color;
-}
-
-a:visited:hover {
-  color: $link-color-dark;
-}
-
-.btn-link:visited:not(.btn-primary) {
-  color: $link-color;
-}
-
-.btn-link:visited:not(.btn-primary):hover {
-  color: $link-color-dark;
-}
-
-// Disable transitions on buttons, which can otherwise flicker while loading CSS file
-// something to do with .btn applying a transition for background, and then .btn-link setting a different background
-.btn {
-  transition: none !important;
-}
-
-// Make code work with light and dark theme
-code {
-  color: $gray-color-dark;
-  background-color: $code-bg-color;
-  box-shadow: 1px 1px 0 $code-shadow-color;
-}
-
-// Remove left padding from first pagination link
-.pagination .page-item:first-child a {
-  padding-left: 0;
-}
-
-// Override border color for tab block
-.tab-block {
-  border-bottom: solid 1px $border-color;
-}
-
-// Fix padding for first menu item
-ul.menu li:first-child {
-  margin-top: 0;
-}
-
-// Form auto-complete menu
-.form-autocomplete .menu {
-  .menu-item.selected > a, .menu-item > a:hover {
-    background: $secondary-color;
-    color: $primary-color;
-  }
-
-  .group-item, .group-item:hover {
-    color: $gray-color;
-    text-transform: uppercase;
-    background: none;
-    font-size: 0.6rem;
-    font-weight: bold;
-  }
-}
-
-.modal {
-  // Add border to separate from background in dark mode
-  .modal-container {
-    border: solid 1px $border-color;
-  }
-
-  // Fix modal header to use default color
-  .modal-header {
-    color: inherit;
-  }
-}
-
-// Customize modal animation
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.modal.active .modal-container, .modal.active .modal-overlay {
-  animation: fade-in .15s ease 1;
-}
-
-.modal.active.closing .modal-container, .modal.active.closing .modal-overlay {
-  animation: fade-out .15s ease 1;
-}
-
-// Customize menu animation
-.dropdown .menu {
-  animation: fade-in .15s ease 1;
-}
-
-// Modal close button
-.modal .modal-header button.close {
-  background: none;
-  border: none;
-  padding: 0;
-  line-height: 0;
-  cursor: pointer;
-  opacity: .85;
-  color: $gray-color-dark;
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-// Increase input font size on small viewports to prevent zooming on focus the input
-// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max
-// viewport size
-@media screen and (max-width: 430px) {
-  .form-input {
-    font-size: 16px;
-  }
-}
-
-// Hide tooltips on mobile
-@media (pointer:coarse) {
-  .tooltip::after {
-    display: none;
-  }
-}

bookmarks/styles/theme-dark.css

@@ -0,0 +1,143 @@
+@import "theme-light.css";
+
+:root {
+    /* Color palette */
+    --contrast-5: hsla(241, 65%, 85%, 0.06);
+    --contrast-10: hsla(241, 60%, 80%, 0.14);
+    --contrast-20: hsla(241, 64%, 82%, 0.23);
+    --contrast-30: hsla(241, 69%, 84%, 0.32);
+    --contrast-40: hsla(241, 73%, 86%, 0.41);
+    --contrast-50: hsla(241, 78%, 88%, 0.5);
+    --contrast-60: hsla(241, 82%, 90%, 0.58);
+    --contrast-70: hsla(241, 87%, 92%, 0.69);
+    --contrast-80: hsla(241, 91%, 94%, 0.8);
+    --contrast-90: hsla(241, 96%, 96%, 0.9);
+
+    --primary-color: hsl(241, 75%, 64%);
+    --primary-color-highlight: hsl(241, 75%, 68%);
+    --primary-color-shade: hsl(241, 75%, 64%, 0.42);
+
+    --alternative-color: hsl(179, 50%, 58%);
+    --alternative-color-dark: hsl(179, 80%, 75%);
+
+    --success-color: hsl(142, 76%, 36%);
+    --success-color-highlight: hsl(142, 76%, 40%);
+    --success-color-shade: hsla(142, 76%, 36%, 0.1);
+
+    --warning-color: hsl(38, 92%, 50%);
+    --warning-color-highlight: hsl(38, 92%, 55%);
+    --warning-color-shade: hsla(38, 92%, 50%, 0.1);
+
+    --error-color: hsl(0, 80%, 60%);
+    --error-color-highlight: hsl(0, 72%, 60%);
+    --error-color-shade: hsla(0, 72%, 51%, 0.1);
+
+    /* Core colors */
+    --text-color: var(--gray-300);
+    --secondary-text-color: var(--gray-400);
+    --tertiary-text-color: var(--gray-500);
+    --contrast-text-color: #fff;
+    --primary-text-color: hsl(241, 82%, 82%);
+
+    --link-color: var(--primary-text-color);
+    --secondary-link-color: hsla(241, 82%, 82%, 0.8);
+
+    --icon-color: var(--text-color);
+
+    --border-color: var(--contrast-30);
+    --secondary-border-color: var(--contrast-20);
+
+    --body-color: hsl(241, 15%, 14%);
+    --body-color-contrast: var(--contrast-10);
+
+    /* Focus */
+    --focus-outline: 2px solid hsl(241, 100%, 78%);
+    --focus-outline-offset: 2px;
+
+    /* Shadows */
+    --box-shadow-xs: none;
+    --box-shadow: none;
+    --box-shadow-lg: none;
+}
+
+:root {
+    --input-bg-color: var(--contrast-5);
+    --input-disabled-bg-color: var(--contrast-30);
+    --input-text-color: var(--text-color);
+    --input-hint-color: var(--secondary-text-color);
+    --input-border-color: var(--border-color);
+    --input-placeholder-color: var(--tertiary-text-color);
+    --input-box-shadow: var(--box-shadow-xs);
+
+    --checkbox-bg-color: var(--contrast-10);
+    --checkbox-checked-bg-color: var(--primary-color);
+    --checkbox-disabled-bg-color: var(--contrast-30);
+    --checkbox-border-color: var(--border-color);
+    --checkbox-icon-color: #fff;
+
+    --switch-bg-color: var(--contrast-10);
+    --switch-border-color: var(--border-color);
+    --switch-toggle-color: var(--text-color);
+}
+
+:root {
+    --btn-bg-color: var(--contrast-5);
+    --btn-hover-bg-color: var(--contrast-20);
+    --btn-border-color: var(--border-color);
+    --btn-text-color: var(--text-color);
+    --btn-icon-color: var(--icon-color);
+    --btn-font-weight: 400;
+    --btn-box-shadow: var(--box-shadow-xs);
+
+    --btn-primary-bg-color: var(--primary-color);
+    --btn-primary-hover-bg-color: var(--primary-color-highlight);
+    --btn-primary-text-color: var(--contrast-text-color);
+
+    --btn-success-bg-color: var(--success-color);
+    --btn-success-hover-bg-color: var(--success-color-highlight);
+    --btn-success-text-color: var(--contrast-text-color);
+
+    --btn-error-bg-color: var(--error-color);
+    --btn-error-hover-bg-color: var(--error-color-highlight);
+    --btn-error-text-color: var(--contrast-text-color);
+
+    --btn-link-text-color: var(--link-color);
+    --btn-link-hover-text-color: var(--link-color);
+}
+
+:root {
+    --modal-overlay-bg-color: hsla(229, 21%, 16%, 0.55);
+    --modal-container-bg-color: hsl(241, 20%, 20%);
+    --modal-container-border-color: var(--contrast-30);
+    --modal-border-radius: var(--border-radius-lg);
+    --modal-box-shadow: none;
+}
+
+:root {
+    --menu-bg-color: hsl(241, 20%, 20%);
+    --menu-border-color: var(--contrast-30);
+    --menu-border-radius: var(--border-radius);
+    --menu-box-shadow: none;
+    --menu-item-color: var(--text-color);
+    --menu-item-hover-color: var(--text-color);
+    --menu-item-bg-color: transparent;
+    --menu-item-hover-bg-color: var(--contrast-20);
+}
+
+:root {
+    --tab-color: var(--text-color);
+    --tab-hover-color: var(--primary-text-color);
+    --tab-active-color: var(--primary-text-color);
+    --tab-highlight-color: var(--primary-text-color);
+}
+
+:root {
+    --bookmark-title-color: var(--primary-text-color);
+    --bookmark-title-weight: 500;
+    --bookmark-description-color: var(--text-color);
+    --bookmark-description-weight: 400;
+    --bookmark-actions-color: var(--secondary-text-color);
+    --bookmark-actions-hover-color: var(--text-color);
+    --bookmark-actions-weight: 400;
+    --bulk-actions-bg-color: var(--contrast-5);
+}

bookmarks/styles/theme-dark.scss

@@ -1,66 +0,0 @@
-// Import custom variables
-@import "variables-dark";
-
-// Import Spectre CSS lib
-@import "spectre";
-
-// Import style modules
-@import "base";
-@import "responsive";
-@import "bookmark-details";
-@import "bookmark-page";
-@import "bookmark-form";
-@import "settings";
-@import "markdown";
-@import "reader-mode";
-
-/* Dark theme overrides */
-
-// Buttons
-.btn.btn-primary {
-  background: $dt-primary-button-color;
-  border-color: darken($dt-primary-button-color, 5%);
-
-  &:hover, &:active, &:focus {
-    background: darken($dt-primary-button-color, 5%);
-    border-color: darken($dt-primary-button-color, 10%);
-  }
-}
-
-// Focus ring
-a:focus, .btn:focus {
-  box-shadow: 0 0 0 .1rem rgba($primary-color, .5);
-}
-
-// Forms
-.form-input:not(:placeholder-shown):invalid,
-.form-input:not(:placeholder-shown):invalid:focus,
-.has-error .form-input,
-.form-input.is-error,
-.has-error .form-select,
-.form-select.is-error {
-  background: darken($error-color, 40%);
-}
-
-.form-checkbox input:checked + .form-icon, .form-radio input:checked + .form-icon, .form-switch input:checked + .form-icon {
-  background: $dt-primary-input-color;
-  border-color: $dt-primary-input-color;
-}
-
-.form-switch .form-icon::before, .form-switch input:active + .form-icon::before {
-  background: $light-color;
-}
-
-.form-switch input:checked + .form-icon {
-  background: $dt-primary-input-color;
-  border-color: $dt-primary-input-color;
-}
-
-.form-radio input:checked + .form-icon::before {
-  background: $light-color;
-}
-
-// Pagination
-.pagination .page-item.active a {
-  background: $dt-primary-button-color;
-}

bookmarks/styles/theme-light.css

@@ -0,0 +1,30 @@
+@import "theme/variables.css";
+@import "theme/_normalize.css";
+@import "theme/base.css";
+@import "theme/typography.css";
+@import "theme/asian.css";
+@import "theme/tables.css";
+@import "theme/buttons.css";
+@import "theme/forms.css";
+@import "theme/code.css";
+@import "theme/dropdowns.css";
+@import "theme/menus.css";
+@import "theme/badges.css";
+@import "theme/empty.css";
+@import "theme/modals.css";
+@import "theme/pagination.css";
+@import "theme/tabs.css";
+@import "theme/toasts.css";
+@import "theme/autocomplete.css";
+@import "theme/animations.css";
+@import "theme/utilities.css";
+
+@import "responsive.css";
+@import "layout.css";
+@import "components.css";
+@import "bookmark-details.css";
+@import "bookmark-form.css";
+@import "bookmark-page.css";
+@import "markdown.css";
+@import "reader-mode.css";
+@import "settings.css";

bookmarks/styles/theme-light.scss

@@ -1,15 +0,0 @@
-// Import custom variables
-@import "variables-light";
-
-// Import Spectre CSS lib
-@import "spectre";
-
-// Import style modules
-@import "base";
-@import "responsive";
-@import "bookmark-details";
-@import "bookmark-page";
-@import "bookmark-form";
-@import "settings";
-@import "markdown";
-@import "reader-mode";

bookmarks/styles/theme/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 - 2020 Yan Zhu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

bookmarks/styles/theme/_normalize.css

@@ -0,0 +1,446 @@
+/* Manually forked from Normalize.css */
+/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ *    IE on Windows Phone and in iOS.
+ */
+
+/* Document
+   ========================================================================== */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 3 */
+  -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct margin in IE 8 (removed).
+ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers. (removed)
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/**
+ * Modify default styling of address.
+ */
+
+address {
+  font-style: normal;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)
+ */
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: var(--mono-font-family); /* 1 (changed) */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-. (Removed)
+ */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+  font-weight: 400; /* (added) */
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 (changed) */
+  font-size: inherit; /* 1 (changed) */
+  line-height: inherit; /* 1 (changed) */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule (removed).
+ */
+
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated) (changed).
+ */
+
+fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+  outline: none;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}

bookmarks/styles/theme/animations.css

@@ -0,0 +1,38 @@
+/* Animations */
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes slide-down {
+    0% {
+        opacity: 0;
+        transform: translateY(calc(-1 * var(--unit-8)));
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
+}

bookmarks/styles/theme/asian.css

@@ -0,0 +1,43 @@
+/* Optimized for East Asian CJK */
+html:lang(zh),
+html:lang(zh-Hans),
+.lang-zh,
+.lang-zh-hans {
+    font-family: var(--cjk-zh-hans-font-family);
+}
+
+html:lang(zh-Hant),
+.lang-zh-hant {
+    font-family: var(--cjk-zh-hant-font-family);
+}
+
+html:lang(ja),
+.lang-ja {
+    font-family: var(--cjk-jp-font-family);
+}
+
+html:lang(ko),
+.lang-ko {
+    font-family: var(--cjk-ko-font-family);
+}
+
+:lang(zh),
+:lang(ja),
+.lang-cjk {
+    & ins,
+    & u {
+        border-bottom: var(--border-width) solid;
+        text-decoration: none;
+    }
+
+    & del + del,
+    & del + s,
+    & ins + ins,
+    & ins + u,
+    & s + del,
+    & s + s,
+    & u + ins,
+    & u + u {
+        margin-left: .125em;
+    }
+}

bookmarks/styles/theme/autocomplete.css

@@ -0,0 +1,55 @@
+/* Autocomplete */
+.form-autocomplete {
+    position: relative;
+
+    & .form-autocomplete-input {
+        align-content: flex-start;
+        display: flex;
+        flex-wrap: wrap;
+        height: auto;
+        min-height: var(--unit-8);
+        padding: var(--unit-h);
+        background: var(--input-bg-color);
+
+        &.is-focused {
+            outline: var(--focus-outline);
+            outline-offset: calc(var(--focus-outline-offset) * -1);
+        }
+
+        & .form-input {
+            background: transparent;
+            border-color: transparent;
+            box-shadow: none;
+            display: inline-block;
+            flex: 1 0 auto;
+            height: var(--unit-6);
+            line-height: var(--unit-4);
+            margin: var(--unit-h);
+            width: auto;
+
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    & .menu {
+        left: 0;
+        position: absolute;
+        top: 100%;
+        width: 100%;
+
+        & .menu-item.selected > a, & .menu-item > a:hover {
+            background: var(--menu-item-hover-bg-color);
+            color: var(--menu-item-hover-color);
+        }
+
+        & .group-item, & .group-item:hover {
+            color: var(--tertiary-text-color);
+            text-transform: uppercase;
+            background: none;
+            font-size: 0.6rem;
+            font-weight: bold;
+        }
+    }
+}

bookmarks/styles/theme/badges.css

@@ -0,0 +1,64 @@
+/* Badges */
+.badge {
+    position: relative;
+    white-space: nowrap;
+
+    &[data-badge],
+    &:not([data-badge]) {
+        &::after {
+            background: var(--primary-color);
+            background-clip: padding-box;
+            border-radius: .5rem;
+            box-shadow: 0 0 0 1px var(--body-color);
+            color: var(--contrast-text-color);
+            content: attr(data-badge);
+            display: inline-block;
+            transform: translate(-.05rem, -.5rem);
+        }
+    }
+
+    &[data-badge] {
+        &::after {
+            font-size: var(--font-size-sm);
+            height: .9rem;
+            line-height: 1;
+            min-width: .9rem;
+            padding: .1rem .2rem;
+            text-align: center;
+            white-space: nowrap;
+        }
+    }
+
+    &:not([data-badge]),
+    &[data-badge=""] {
+        &::after {
+            height: 6px;
+            min-width: 6px;
+            padding: 0;
+            width: 6px;
+        }
+    }
+
+    /* Badges for Buttons */
+
+    &.btn {
+        &::after {
+            position: absolute;
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+        }
+    }
+
+    /* Badges for Avatars */
+
+    &.avatar {
+        &::after {
+            position: absolute;
+            top: 14.64%;
+            right: 14.64%;
+            transform: translate(50%, -50%);
+            z-index: var(--zindex-1);
+        }
+    }
+}

bookmarks/styles/theme/base.css

@@ -0,0 +1,61 @@
+/* Base */
+*,
+*::before,
+*::after {
+    box-sizing: inherit;
+}
+
+html {
+    box-sizing: border-box;
+    font-size: var(--html-font-size);
+    line-height: var(--html-line-height);
+    -webkit-tap-highlight-color: transparent;
+    scrollbar-gutter: stable;
+}
+
+/* Reserve space for vert. scrollbar to avoid layout shifting when scrollbars are added */
+html {
+    scrollbar-gutter: stable;
+}
+
+@media (pointer: coarse) {
+    html {
+        scrollbar-gutter: initial;
+    }
+}
+
+body {
+    background: var(--body-color);
+    color: var(--text-color);
+    font-family: var(--body-font-family);
+    font-size: var(--font-size);
+    overflow-x: hidden;
+    text-rendering: optimizeLegibility;
+}
+
+a {
+    color: var(--link-color);
+    outline: none;
+    text-decoration: none;
+}
+
+a:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+}
+
+a:focus,
+a:hover,
+a:active,
+a.active {
+    text-decoration: underline;
+}
+
+summary {
+    cursor: pointer;
+}
+
+summary:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+}

bookmarks/styles/theme/buttons.css

@@ -0,0 +1,264 @@
+/* Buttons */
+:root {
+    --btn-bg-color: var(--body-color);
+    --btn-hover-bg-color: var(--gray-50);
+    --btn-border-color: var(--border-color);
+    --btn-text-color: var(--text-color);
+    --btn-icon-color: var(--icon-color);
+    --btn-font-weight: 400;
+    --btn-box-shadow: var(--box-shadow-xs);
+
+    --btn-primary-bg-color: var(--primary-color);
+    --btn-primary-hover-bg-color: var(--primary-color-highlight);
+    --btn-primary-text-color: var(--contrast-text-color);
+
+    --btn-success-bg-color: var(--success-color);
+    --btn-success-hover-bg-color: var(--success-color-highlight);
+    --btn-success-text-color: var(--contrast-text-color);
+
+    --btn-error-bg-color: var(--error-color);
+    --btn-error-hover-bg-color: var(--error-color-highlight);
+    --btn-error-text-color: var(--contrast-text-color);
+
+    --btn-link-text-color: var(--link-color);
+    --btn-link-hover-text-color: var(--link-color);
+}
+
+.btn {
+    appearance: none;
+    background: var(--btn-bg-color);
+    border: var(--border-width) solid var(--btn-border-color);
+    border-radius: var(--border-radius);
+    color: var(--btn-text-color);
+    font-weight: var(--btn-font-weight);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: baseline;
+    justify-content: center;
+    font-size: var(--font-size);
+    height: var(--control-size);
+    line-height: var(--line-height);
+    outline: none;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    box-shadow: var(--btn-box-shadow);
+    text-align: center;
+    text-decoration: none;
+    transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+
+    &:focus-visible {
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-offset);
+    }
+
+    &:hover {
+        background: var(--btn-hover-bg-color);
+        text-decoration: none;
+    }
+
+    &[disabled],
+    &:disabled,
+    &.disabled {
+        cursor: default;
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    &:focus,
+    &:hover,
+    &:active,
+    &.active {
+        text-decoration: none;
+    }
+
+    /* Button Primary */
+
+    &.btn-primary {
+        background: var(--btn-primary-bg-color);
+        border-color: transparent;
+        color: var(--btn-primary-text-color);
+        --btn-icon-color: var(--btn-primary-text-color);
+
+        &:hover {
+            background: var(--btn-primary-hover-bg-color);
+        }
+
+        &.loading {
+            &::after {
+                border-bottom-color: var(--btn-primary-text-color);
+                border-left-color: var(--btn-primary-text-color);
+            }
+        }
+    }
+
+    /* Button Colors */
+
+    &.btn-success {
+        background: var(--btn-success-bg-color);
+        border-color: transparent;
+        color: var(--btn-success-text-color);
+        --btn-icon-color: var(--btn-success-text-color);
+
+        &:hover {
+            background: var(--btn-success-hover-bg-color);
+        }
+    }
+
+    &.btn-error {
+        --btn-border-color: var(--error-color);
+        --btn-text-color: var(--error-color);
+
+        &:hover {
+            --btn-hover-bg-color: var(--error-color-shade);
+        }
+    }
+
+    /* Button Link */
+
+    &.btn-link {
+        background: transparent;
+        border-color: transparent;
+        box-shadow: none;
+        color: var(--btn-link-text-color);
+        --btn-icon-color: var(--btn-link-text-color);
+
+        &:hover {
+            color: var(--btn-link-hover-text-color);
+            --btn-icon-color: var(--btn-link-hover-text-color);
+        }
+
+        &:focus,
+        &:hover,
+        &:active,
+        &.active {
+            text-decoration: none;
+        }
+    }
+
+    /* Button Sizes */
+
+    &.btn-sm {
+        font-size: var(--font-size-sm);
+        height: var(--control-size-sm);
+        padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
+    }
+
+    &.btn-lg {
+        font-size: var(--font-size-lg);
+        height: var(--control-size-lg);
+        padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+    }
+
+    /* Button Block */
+
+    &.btn-block {
+        display: block;
+        width: 100%;
+    }
+
+    /* Button Action */
+
+    &.btn-action {
+        width: var(--control-size);
+        padding-left: 0;
+        padding-right: 0;
+
+        &.btn-sm {
+            width: var(--control-size-sm);
+        }
+
+        &.btn-lg {
+            width: var(--control-size-lg);
+        }
+    }
+
+    /* Button Clear */
+
+    &.btn-clear {
+        background: transparent;
+        border: 0;
+        color: currentColor;
+        box-shadow: none;
+        height: var(--unit-5);
+        line-height: var(--unit-4);
+        margin-left: var(--unit-1);
+        margin-right: -2px;
+        opacity: 1;
+        padding: var(--unit-h);
+        text-decoration: none;
+        width: var(--unit-5);
+
+        &::before {
+            content: "\2715";
+        }
+    }
+
+    /* Wider button */
+
+    &.btn-wide {
+        padding-left: var(--unit-6);
+        padding-right: var(--unit-6);
+    }
+
+    /* Small icon button */
+
+    &.btn-sm.btn-icon {
+        display: inline-flex;
+        align-items: baseline;
+        gap: var(--unit-h);
+
+        svg {
+            align-self: center;
+        }
+    }
+
+    /* Button icons */
+
+    & svg {
+        color: var(--btn-icon-color);
+        align-self: center;
+    }
+}
+
+/* Button groups */
+.btn-group {
+    display: inline-flex;
+    flex-wrap: wrap;
+
+    .btn {
+        flex: 1 0 auto;
+
+        &:first-child:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+            margin-left: calc(-1 * var(--border-width));
+        }
+
+        &:last-child:not(:first-child) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            margin-left: calc(-1 * var(--border-width));
+        }
+
+        &:focus,
+        &:hover,
+        &:active,
+        &.active {
+            z-index: var(--zindex-0);
+        }
+    }
+
+    &.btn-group-block {
+        display: flex;
+
+        .btn {
+            flex: 1 0 0;
+        }
+    }
+}

bookmarks/styles/theme/code.css

@@ -0,0 +1,30 @@
+/* Code */
+:root {
+    --code-bg-color: var(--body-color-contrast);
+    --code-color: var(--text-color);
+}
+
+code {
+    border-radius: var(--border-radius);
+    line-height: 1.25;
+    padding: .1rem .2rem;
+    background: var(--code-bg-color);
+    color: var(--code-color);
+    font-size: 85%;
+}
+
+.code {
+    border-radius: var(--border-radius);
+    background: var(--code-bg-color);
+    color: var(--text-color);
+    position: relative;
+
+    & code {
+        color: inherit;
+        display: block;
+        line-height: 1.5;
+        overflow-x: auto;
+        padding: var(--unit-2);
+        width: 100%;
+    }
+}

bookmarks/styles/theme/dropdowns.css

@@ -0,0 +1,36 @@
+/* Dropdown */
+.dropdown {
+  display: inline-block;
+  position: relative;
+
+  .menu {
+    animation: fade-in .15s ease 1;
+    display: none;
+    left: 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    position: absolute;
+    top: 100%;
+  }
+
+  &.dropdown-right {
+    .menu {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.active .menu,
+  .dropdown-toggle:focus + .menu,
+  .menu:hover {
+    display: block;
+  }
+
+  /* Fix dropdown-toggle border radius in button groups */
+  .btn-group {
+    .dropdown-toggle:nth-last-child(2) {
+      border-bottom-right-radius: var(--border-radius);
+      border-top-right-radius: var(--border-radius);
+    }
+  }
+}

bookmarks/styles/theme/empty.css

@@ -0,0 +1,21 @@
+/* Empty states (or Blank slates) */
+.empty {
+    background: var(--body-color-contrast);
+    border-radius: var(--border-radius);
+    color: var(--secondary-text-color);
+    text-align: center;
+    padding: var(--unit-16) var(--unit-8);
+
+    .empty-icon {
+        margin-bottom: var(--layout-spacing-lg);
+    }
+
+    .empty-title,
+    .empty-subtitle {
+        margin: var(--layout-spacing) auto;
+    }
+
+    .empty-action {
+        margin-top: var(--layout-spacing-lg);
+    }
+}

bookmarks/styles/theme/forms.css

@@ -0,0 +1,515 @@
+/* Forms */
+:root {
+    --input-bg-color: var(--body-color);
+    --input-disabled-bg-color: var(--gray-100);
+    --input-text-color: var(--text-color);
+    --input-hint-color: var(--secondary-text-color);
+    --input-border-color: var(--border-color);
+    --input-placeholder-color: var(--tertiary-text-color);
+    --input-box-shadow: var(--box-shadow-xs);
+
+    --checkbox-bg-color: var(--body-color);
+    --checkbox-checked-bg-color: var(--primary-color);
+    --checkbox-disabled-bg-color: var(--gray-100);
+    --checkbox-border-color: var(--border-color);
+    --checkbox-icon-color: #fff;
+
+    --switch-bg-color: var(--gray-300);
+    --switch-border-color: var(--gray-400);
+    --switch-toggle-color: #fff;
+}
+
+.form-group {
+    &:first-of-type {
+        margin-top: var(--unit-4);
+    }
+    &:not(:last-child) {
+        margin-bottom: var(--unit-4);
+    }
+}
+
+fieldset {
+    margin-bottom: var(--layout-spacing-lg);
+}
+
+legend {
+    font-size: var(--font-size-lg);
+    font-weight: 500;
+    margin-bottom: var(--layout-spacing-lg);
+}
+
+/* Form element: Label */
+.form-label {
+    display: block;
+    line-height: var(--line-height);
+    margin-bottom: var(--unit-2);
+    font-weight: 500;
+}
+
+details summary .form-label {
+    margin-bottom: 0;
+}
+
+details[open] summary .form-label {
+    margin-bottom: var(--unit-2);
+}
+
+/* Form element: Input */
+.form-input {
+    appearance: none;
+    background: var(--input-bg-color);
+    background-image: none;
+    border: var(--border-width) solid var(--input-border-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--input-box-shadow);
+    color: var(--input-text-color);
+    display: block;
+    font-size: var(--font-size);
+    height: var(--control-size);
+    line-height: var(--line-height);
+    max-width: 100%;
+    outline: none;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    position: relative;
+    transition: background 0.2s, border 0.2s, color 0.2s;
+    width: 100%;
+
+    &:focus {
+        outline: var(--focus-outline);
+        outline-offset: calc(var(--focus-outline-offset) * -1);
+    }
+
+    &::placeholder {
+        color: var(--input-placeholder-color);
+        opacity: 1;
+    }
+
+    /* Input sizes */
+
+    &.input-sm {
+        font-size: var(--font-size-sm);
+        height: var(--control-size-sm);
+        padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
+    }
+
+    &.input-lg {
+        font-size: var(--font-size-lg);
+        height: var(--control-size-lg);
+        padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+    }
+
+    &.input-inline {
+        display: inline-block;
+        vertical-align: middle;
+        width: auto;
+    }
+
+    /* Input types */
+
+    &[type="file"] {
+        height: auto;
+    }
+}
+
+/* Form element: Textarea */
+textarea.form-input {
+    &,
+    &.input-lg,
+    &.input-sm {
+        height: auto;
+    }
+}
+
+/* Form element: Input hint */
+.form-input-hint {
+    color: var(--input-hint-color);
+    font-size: var(--font-size-sm);
+    margin-top: var(--unit-1);
+
+    .has-success &,
+    .is-success + & {
+        color: var(--success-color);
+    }
+
+    .has-error &,
+    .is-error + & {
+        color: var(--error-color);
+    }
+}
+
+/* Form element: Select */
+.form-select {
+    appearance: none;
+    background: var(--input-bg-color);
+    border: var(--border-width) solid var(--input-border-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--input-box-shadow);
+    color: var(--input-text-color);
+    font-size: var(--font-size);
+    height: var(--control-size);
+    line-height: var(--line-height);
+    outline: none;
+    padding: var(--control-padding-y) var(--control-padding-x);
+    vertical-align: middle;
+    width: 100%;
+
+    &:focus {
+        outline: var(--focus-outline);
+        outline-offset: calc(var(--focus-outline-offset) * -1);
+    }
+
+    /* Select sizes */
+
+    &.select-sm {
+        font-size: var(--font-size-sm);
+        height: var(--control-size-sm);
+        padding: var(--control-padding-y-sm) calc(var(--control-icon-size) + var(--control-padding-x-sm)) var(--control-padding-y-sm) var(--control-padding-x-sm);
+    }
+
+    &.select-lg {
+        font-size: var(--font-size-lg);
+        height: var(--control-size-lg);
+        padding: var(--control-padding-y-lg) calc(var(--control-icon-size) + var(--control-padding-x-lg)) var(--control-padding-y-lg) var(--control-padding-x-lg);
+    }
+
+    /* Multiple select */
+
+    &[size],
+    &[multiple] {
+        height: auto;
+        padding: var(--control-padding-y) var(--control-padding-x);
+
+        & option {
+            padding: var(--unit-h) var(--unit-1);
+        }
+    }
+
+    &:not([multiple]):not([size]) {
+        background: var(--input-bg-color) url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
+        padding-right: calc(var(--control-icon-size) + var(--control-padding-x));
+    }
+}
+
+/* Form element: Checkbox and Radio */
+.form-checkbox,
+.form-radio,
+.form-switch {
+    display: block;
+    line-height: var(--line-height);
+    margin: calc((var(--control-size) - var(--control-size-sm)) / 2) 0;
+    min-height: var(--control-size-sm);
+    padding: calc((var(--control-size-sm) - var(--line-height)) / 2) var(--control-padding-x) calc((var(--control-size-sm) - var(--line-height)) / 2) calc(var(--control-icon-size) + var(--control-padding-x));
+    position: relative;
+
+    input {
+        clip: rect(0, 0, 0, 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        position: absolute;
+        width: 1px;
+
+        &:focus-visible + .form-icon {
+            outline: var(--focus-outline);
+            outline-offset: var(--focus-outline-offset);
+        }
+
+        &:checked + .form-icon {
+            background: var(--checkbox-checked-bg-color);
+            border-color: var(--checkbox-checked-bg-color);
+        }
+    }
+
+    .form-icon {
+        border: var(--border-width) solid var(--checkbox-border-color);
+        box-shadow: var(--input-box-shadow);
+        cursor: pointer;
+        display: inline-block;
+        position: absolute;
+        transition: background .2s, border .2s, color .2s;
+    }
+
+    /* Input checkbox, radio, and switch sizes */
+
+    &.input-sm {
+        font-size: var(--font-size-sm);
+        margin: 0;
+    }
+
+    &.input-lg {
+        font-size: var(--font-size-lg);
+        margin: calc((var(--control-size-lg) - var(--control-size-sm)) / 2) 0;
+    }
+}
+
+.form-checkbox,
+.form-radio {
+    .form-icon {
+        background: var(--checkbox-bg-color);
+        height: var(--control-icon-size);
+        left: 0;
+        top: calc((var(--control-size-sm) - var(--control-icon-size)) / 2);
+        width: var(--control-icon-size);
+    }
+}
+
+.form-checkbox {
+    font-weight: 500;
+
+    .form-icon {
+        border-radius: var(--border-radius);
+    }
+
+    input {
+        &:checked + .form-icon {
+            &::before {
+                background-clip: padding-box;
+                border: var(--border-width-lg) solid var(--checkbox-icon-color);
+                border-left-width: 0;
+                border-top-width: 0;
+                content: "";
+                height: 9px;
+                left: 50%;
+                margin-left: -3px;
+                margin-top: -6px;
+                position: absolute;
+                top: 50%;
+                transform: rotate(45deg);
+                width: 6px;
+            }
+        }
+
+        &:indeterminate + .form-icon {
+            background: var(--checkbox-checked-bg-color);
+            border-color: var(--checkbox-checked-bg-color);
+
+            &::before {
+                background: var(--checkbox-icon-color);
+                content: "";
+                height: 2px;
+                left: 50%;
+                margin-left: -5px;
+                margin-top: -1px;
+                position: absolute;
+                top: 50%;
+                width: 10px;
+            }
+        }
+    }
+}
+
+.form-radio {
+    .form-icon {
+        border-radius: 50%;
+    }
+
+    input {
+        &:checked + .form-icon {
+            &::before {
+                background: var(--checkbox-icon-color);
+                border-radius: 50%;
+                content: "";
+                height: 6px;
+                left: 50%;
+                position: absolute;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                width: 6px;
+            }
+        }
+    }
+}
+
+/* Form element: Switch */
+.form-switch {
+    padding-left: calc(var(--unit-8) + var(--control-padding-x));
+
+    .form-icon {
+        background: var(--switch-bg-color);
+        background-clip: padding-box;
+        border-color: var(--switch-border-color);
+        border-radius: calc(var(--unit-2) + var(--border-width));
+        height: calc(var(--unit-4) + var(--border-width) * 2);
+        left: 0;
+        top: calc((var(--control-size-sm) - var(--unit-4)) / 2 - var(--border-width));
+        width: var(--unit-8);
+
+        &::before {
+            background: var(--switch-toggle-color);
+            border-radius: 50%;
+            content: "";
+            display: block;
+            height: var(--unit-4);
+            left: 0;
+            position: absolute;
+            top: 0;
+            transition: background .2s, border .2s, color .2s, left .2s;
+            width: var(--unit-4);
+        }
+    }
+
+    input {
+        &:checked + .form-icon {
+            &::before {
+                left: 14px;
+            }
+        }
+    }
+}
+
+/* Form Icons */
+.has-icon-left,
+.has-icon-right {
+    position: relative;
+
+    .form-icon {
+        height: var(--control-icon-size);
+        margin: 0 var(--control-padding-y);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        width: var(--control-icon-size);
+        z-index: calc(var(--zindex-0) + 1);
+    }
+}
+
+.has-icon-left {
+    & .form-icon {
+        left: var(--border-width);
+    }
+
+    & .form-input {
+        padding-left: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
+    }
+}
+
+.has-icon-right {
+    & .form-icon {
+        right: var(--border-width);
+    }
+
+    & .form-input {
+        padding-right: calc(var(--control-icon-size) + var(--control-padding-y) * 2);
+    }
+}
+
+
+/* Form element: Input groups */
+.input-group {
+    display: flex;
+
+    .input-group-addon {
+        background: var(--body-color);
+        border: var(--border-width) solid var(--input-border-color);
+        border-radius: var(--border-radius);
+        line-height: var(--line-height);
+        padding: var(--control-padding-y) var(--control-padding-x);
+        white-space: nowrap;
+
+        &.addon-sm {
+            font-size: var(--font-size-sm);
+            padding: var(--control-padding-y-sm) var(--control-padding-x-sm);
+        }
+
+        &.addon-lg {
+            font-size: var(--font-size-lg);
+            padding: var(--control-padding-y-lg) var(--control-padding-x-lg);
+        }
+    }
+
+    .form-input,
+    .form-select {
+        flex: 1 1 auto;
+        width: 1%;
+    }
+
+    .input-group-btn {
+        z-index: var(--zindex-0);
+    }
+
+    .form-input,
+    .form-select,
+    .input-group-addon,
+    .input-group-btn {
+        &:first-child:not(:last-child) {
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        &:not(:first-child):not(:last-child) {
+            border-radius: 0;
+            margin-left: calc(-1 * var(--border-width));
+        }
+
+        &:last-child:not(:first-child) {
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            margin-left: calc(-1 * var(--border-width));
+        }
+
+        &:focus {
+            z-index: calc(var(--zindex-0) + 1);
+        }
+    }
+
+    .form-select {
+        width: auto;
+    }
+
+    &.input-inline {
+        display: inline-flex;
+    }
+}
+
+/* Form validation states */
+.form-input,
+.form-select {
+    .has-success &,
+    &.is-success {
+        background: var(--success-color-shade);
+        border-color: var(--success-color);
+
+        &:focus {
+            outline-color: var(--success-color);
+        }
+    }
+
+    .has-error &,
+    &.is-error {
+        background: var(--error-color-shade);
+        border-color: var(--error-color);
+
+        &:focus {
+            outline-color: var(--error-color);
+        }
+    }
+}
+
+/* Form disabled and readonly */
+.form-input,
+.form-select {
+    &:disabled,
+    &.disabled {
+        background-color: var(--input-disabled-bg-color);
+        cursor: not-allowed;
+    }
+}
+
+input {
+    &:disabled,
+    &.disabled {
+        & + .form-icon {
+            background: var(--checkbox-disabled-bg-color);
+            cursor: not-allowed;
+        }
+    }
+}
+
+/* Increase input font size on small viewports to prevent zooming on focus the input */
+/* on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max */
+/* viewport size */
+@media screen and (max-width: 430px) {
+    .form-input {
+        font-size: 16px;
+    }
+}

bookmarks/styles/theme/menus.css

@@ -0,0 +1,89 @@
+:root {
+    --menu-bg-color: var(--body-color);
+    --menu-border-color: var(--gray-200);
+    --menu-border-radius: var(--border-radius);
+    --menu-box-shadow: var(--box-shadow);
+    --menu-item-color: var(--text-color);
+    --menu-item-hover-color: var(--primary-text-color);
+    --menu-item-bg-color: transparent;
+    --menu-item-hover-bg-color: var(--primary-color-shade);
+}
+
+/* Menus */
+.menu {
+    background: var(--menu-bg-color);
+    border: solid 1px var(--menu-border-color);
+    border-radius: var(--menu-border-radius);
+    box-shadow: var(--menu-box-shadow);
+    list-style: none;
+    margin: 0;
+    min-width: var(--control-width-xs);
+    transform: translateY(var(--layout-spacing-sm));
+    z-index: var(--zindex-3);
+
+    &.menu-nav {
+        background: transparent;
+        box-shadow: none;
+    }
+
+    .menu-item {
+        margin-top: 0;
+        padding: 0 var(--unit-4);
+        position: relative;
+        text-decoration: none;
+
+        &:first-of-type {
+            padding-top: var(--unit-2);
+        }
+
+        &:last-of-type {
+            padding-bottom: var(--unit-2);
+        }
+
+        & > a, .btn.btn-link {
+            border-radius: var(--menu-border-radius);
+            color: var(--menu-item-color);
+            background: var(--menu-item-bg-color);
+            display: block;
+            margin: 0 calc(-1 * var(--unit-2));
+            padding: var(--unit-1) var(--unit-2);
+            text-decoration: none;
+
+            &:focus,
+            &:hover,
+            &:active,
+            &.active {
+                background: var(--menu-item-hover-bg-color);
+                color: var(--menu-item-hover-color);
+            }
+        }
+
+        .form-checkbox,
+        .form-radio,
+        .form-switch {
+            margin: var(--unit-h) 0;
+        }
+
+        & + .menu-item {
+            margin-top: var(--unit-1);
+        }
+    }
+
+    & .menu-badge {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+
+        .label {
+            margin-right: var(--unit-2);
+        }
+    }
+
+    & .divider {
+        border-bottom: solid 1px var(--secondary-border-color);
+        margin: var(--unit-2) 0;
+    }
+}

bookmarks/styles/theme/modals.css

@@ -0,0 +1,103 @@
+/* Modals */
+:root {
+    --modal-overlay-bg-color: rgba(243, 244, 246, 0.6);
+    --modal-container-bg-color: var(--body-color);
+    --modal-container-border-color: var(--gray-200);
+    --modal-border-radius: var(--border-radius-lg);
+    --modal-box-shadow: var(--box-shadow-lg);
+}
+
+.modal {
+    align-items: center;
+    bottom: 0;
+    display: none;
+    justify-content: center;
+    left: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding: var(--layout-spacing);
+    position: fixed;
+    right: 0;
+    top: 0;
+
+    &:target,
+    &.active {
+        display: flex;
+        opacity: 1;
+        z-index: var(--zindex-4);
+
+        & .modal-overlay {
+            animation: fade-in .15s ease 1;
+            background: var(--modal-overlay-bg-color);
+            bottom: 0;
+            cursor: default;
+            display: block;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+
+        & .modal-container {
+            animation: fade-in .15s ease 1;
+            z-index: var(--zindex-0);
+        }
+    }
+
+    &.active.closing {
+        & .modal-overlay, & .modal-container {
+            animation: fade-out .15s ease 1;
+        }
+    }
+}
+
+.modal-container {
+    background: var(--modal-container-bg-color);
+    border: solid 1px var(--modal-container-border-color);
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--modal-box-shadow);
+    display: flex;
+    flex-direction: column;
+    gap: var(--unit-4);
+    max-height: 75vh;
+    max-width: var(--control-width-md);
+    padding: var(--unit-6);
+    width: 100%;
+
+    & .modal-header {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--unit-2);
+        color: var(--text-color);
+
+        & h2 {
+            flex: 1 1 0;
+            align-items: flex-start;
+            font-size: 1rem;
+            margin: 0;
+        }
+
+        & button.close {
+            background: none;
+            border: none;
+            padding: 0;
+            line-height: 0;
+            cursor: pointer;
+            opacity: .85;
+            color: var(--secondary-text-color);
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+
+    & .modal-body {
+        overflow-y: auto;
+        position: relative;
+    }
+
+    & .modal-footer {
+        text-align: right;
+    }
+}

bookmarks/styles/theme/pagination.css

@@ -0,0 +1,61 @@
+/* Pagination */
+.pagination {
+    display: flex;
+    list-style: none;
+    margin: var(--unit-1) 0;
+    padding: var(--unit-1) 0;
+
+    & .page-item {
+        margin: var(--unit-1) var(--unit-o);
+
+        & span {
+            display: inline-block;
+            padding: var(--unit-1) var(--unit-1);
+        }
+
+        & a {
+            border-radius: var(--border-radius);
+            display: inline-block;
+            padding: var(--unit-1) var(--unit-2);
+            text-decoration: none;
+
+            &:focus,
+            &:hover {
+                color: var(--primary-text-color);
+            }
+        }
+
+        &.disabled {
+            & a {
+                cursor: default;
+                opacity: .5;
+                pointer-events: none;
+            }
+        }
+
+        &.active {
+            & a {
+                background: var(--primary-color);
+                color: var(--contrast-text-color);
+            }
+        }
+
+        &.page-prev,
+        &.page-next {
+            flex: 1 0 50%;
+        }
+
+        &.page-next {
+            text-align: right;
+        }
+
+        & .page-item-title {
+            margin: 0;
+        }
+
+        & .page-item-subtitle {
+            margin: 0;
+            opacity: .5;
+        }
+    }
+}

bookmarks/styles/theme/tables.css

@@ -0,0 +1,26 @@
+/* Tables */
+.table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    text-align: left;
+
+    /* Scrollable tables */
+
+    &.table-scroll {
+        display: block;
+        overflow-x: auto;
+        padding-bottom: 0.75rem;
+        white-space: nowrap;
+    }
+
+    & td,
+    & th {
+        border-bottom: var(--border-width) solid var(--border-color);
+        padding: var(--unit-3) var(--unit-2);
+    }
+
+    & th {
+        border-bottom-width: var(--border-width-lg);
+    }
+}

bookmarks/styles/theme/tabs.css

@@ -0,0 +1,75 @@
+/* Tabs */
+:root {
+    --tab-color: var(--text-color);
+    --tab-hover-color: var(--primary-text-color);
+    --tab-active-color: var(--primary-text-color);
+    --tab-highlight-color: var(--primary-color);
+}
+
+.tab {
+    align-items: center;
+    border-bottom: var(--border-width) solid var(--border-color);
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: var(--unit-1) 0 calc(var(--unit-1) - var(--border-width)) 0;
+
+    & .tab-item {
+        margin-top: 0;
+
+        & a {
+            border-bottom: var(--border-width-lg) solid transparent;
+            color: var(--tab-color);
+            display: block;
+            margin: 0 var(--unit-2) 0 0;
+            padding: var(--unit-2) var(--unit-1) calc(var(--unit-2) - var(--border-width-lg)) var(--unit-1);
+            text-decoration: none;
+
+            &:focus,
+            &:hover {
+                color: var(--tab-hover-color);
+            }
+        }
+
+        &.active a,
+        & a.active {
+            border-bottom-color: var(--tab-highlight-color);
+            color: var(--tab-active-color);
+        }
+
+        &.tab-action {
+            flex: 1 0 auto;
+            text-align: right;
+        }
+
+        & .btn-clear {
+            margin-top: calc(-1 * var(--unit-1));
+        }
+    }
+
+    &.tab-block {
+        & .tab-item {
+            flex: 1 0 0;
+            text-align: center;
+
+            & a {
+                margin: 0;
+            }
+
+            & .badge {
+                &[data-badge]::after {
+                    position: absolute;
+                    right: var(--unit-h);
+                    top: var(--unit-h);
+                    transform: translate(0, 0);
+                }
+            }
+        }
+    }
+
+    &:not(.tab-block) {
+        & .badge {
+            padding-right: 0;
+        }
+    }
+}

bookmarks/styles/theme/toasts.css

@@ -0,0 +1,35 @@
+/* Toasts */
+.toast {
+    background: var(--gray-600);
+    border-radius: var(--border-radius);
+    color: var(--contrast-text-color);
+    display: block;
+    padding: var(--layout-spacing);
+    width: 100%;
+
+    &.toast-primary {
+        background: var(--primary-color);
+    }
+
+    &.toast-success {
+        background: var(--success-color);
+    }
+
+    &.toast-warning {
+        background: var(--warning-color);
+    }
+
+    &.toast-error {
+        background: var(--error-color);
+    }
+
+    .btn-clear {
+        margin: var(--unit-h);
+    }
+
+    p {
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}

bookmarks/styles/theme/typography.css

@@ -0,0 +1,117 @@
+/* Typography */
+/* Headings */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: inherit;
+    font-weight: 500;
+    line-height: 1.2;
+    margin-bottom: 0.5em;
+    margin-top: 0;
+}
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+    font-weight: 500;
+}
+h1,
+.h1 {
+    font-size: 2rem;
+}
+h2,
+.h2 {
+    font-size: 1.6rem;
+}
+h3,
+.h3 {
+    font-size: 1.4rem;
+}
+h4,
+.h4 {
+    font-size: 1.2rem;
+}
+h5,
+.h5 {
+    font-size: 1rem;
+}
+h6,
+.h6 {
+    font-size: 0.8rem;
+}
+
+/* Paragraphs */
+p {
+    margin: 0 0 var(--line-height);
+}
+
+/* Semantic text elements */
+a,
+ins,
+u {
+    text-decoration-skip-ink: auto;
+}
+
+abbr[title] {
+    border-bottom: var(--border-width) dotted;
+    cursor: help;
+    text-decoration: none;
+}
+
+/* Blockquote */
+blockquote {
+    border-left: var(--border-width-lg) solid var(--border-color);
+    margin-left: 0;
+    padding: var(--unit-2) var(--unit-4);
+
+    & p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* Lists */
+ul,
+ol {
+    margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
+    padding: 0;
+
+    & ul,
+    & ol {
+        margin: var(--unit-4) 0 var(--unit-4) var(--unit-4);
+    }
+
+    & li {
+        margin-top: var(--unit-2);
+    }
+}
+
+ul {
+    list-style: disc inside;
+
+    & ul {
+        list-style-type: circle;
+    }
+}
+
+ol {
+    list-style: decimal inside;
+
+    & ol {
+        list-style-type: lower-alpha;
+    }
+}
+
+dl {
+    & dt {
+        font-weight: bold;
+    }
+
+    & dd {
+        margin: var(--unit-1) 0 var(--unit-4) 0;
+    }
+}

bookmarks/styles/theme/utilities.css

@@ -0,0 +1,296 @@
+/* Colors */
+.text-primary {
+    color: var(--primary-text-color);
+}
+
+.text-secondary {
+    color: var(--secondary-text-color);
+}
+
+.text-tertiary {
+    color: var(--tertiary-text-color);
+}
+
+.text-success {
+    color: var(--success-color);
+}
+
+.text-warning {
+    color: var(--warning-color);
+}
+
+.text-error {
+    color: var(--error-color);
+}
+
+.icon-color {
+    color: var(--icon-color);
+}
+
+/* Display */
+.d-block {
+    display: block;
+}
+
+.d-inline {
+    display: inline;
+}
+
+.d-inline-block {
+    display: inline-block;
+}
+
+.d-flex {
+    display: flex;
+}
+
+.d-inline-flex {
+    display: inline-flex;
+}
+
+.d-none,
+.d-hide {
+    display: none !important;
+}
+
+.d-visible {
+    visibility: visible;
+}
+
+.d-invisible {
+    visibility: hidden;
+}
+
+.text-hide {
+    background: transparent;
+    border: 0;
+    color: transparent;
+    font-size: 0;
+    line-height: 0;
+    text-shadow: none;
+}
+
+.text-assistive {
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/* Loading */
+.loading {
+    color: transparent !important;
+    min-height: var(--unit-4);
+    pointer-events: none;
+    position: relative;
+
+    &::after {
+        animation: loading 500ms infinite linear;
+        background: transparent;
+        border: var(--border-width-lg) solid var(--primary-color);
+        border-radius: 50%;
+        border-right-color: transparent;
+        border-top-color: transparent;
+        content: "";
+        display: block;
+        height: var(--unit-4);
+        left: 50%;
+        margin-left: calc(-1 * var(--unit-2));
+        margin-top: calc(-1 * var(--unit-2));
+        opacity: 1;
+        padding: 0;
+        position: absolute;
+        top: 50%;
+        width: var(--unit-4);
+        z-index: var(--zindex-0);
+    }
+
+    &.loading-lg {
+        min-height: var(--unit-10);
+
+        &::after {
+            height: var(--unit-8);
+            margin-left: calc(-1 * var(--unit-4));
+            margin-top: calc(-1 * var(--unit-4));
+            width: var(--unit-8);
+        }
+    }
+}
+
+/* Position */
+.m-0 {
+    margin: 0 !important;
+}
+
+.mb-0 {
+    margin-bottom: 0 !important;
+}
+
+.ml-0 {
+    margin-left: 0 !important;
+}
+
+.mr-0 {
+    margin-right: 0 !important;
+}
+
+.mt-0 {
+    margin-top: 0 !important;
+}
+
+.mx-0 {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.my-0 {
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
+}
+
+.m-1 {
+    margin: var(--unit-1) !important;
+}
+
+.mb-1 {
+    margin-bottom: var(--unit-1) !important;
+}
+
+.ml-1 {
+    margin-left: var(--unit-1) !important;
+}
+
+.mr-1 {
+    margin-right: var(--unit-1) !important;
+}
+
+.mt-1 {
+    margin-top: var(--unit-1) !important;
+}
+
+.mx-1 {
+    margin-left: var(--unit-1) !important;
+    margin-right: var(--unit-1) !important;
+}
+
+.my-1 {
+    margin-bottom: var(--unit-1) !important;
+    margin-top: var(--unit-1) !important;
+}
+
+.m-2 {
+    margin: var(--unit-2) !important;
+}
+
+.mb-2 {
+    margin-bottom: var(--unit-2) !important;
+}
+
+.ml-2 {
+    margin-left: var(--unit-2) !important;
+}
+
+.mr-2 {
+    margin-right: var(--unit-2) !important;
+}
+
+.mt-2 {
+    margin-top: var(--unit-2) !important;
+}
+
+.mx-2 {
+    margin-left: var(--unit-2) !important;
+    margin-right: var(--unit-2) !important;
+}
+
+.my-2 {
+    margin-bottom: var(--unit-2) !important;
+    margin-top: var(--unit-2) !important;
+}
+
+.m-4 {
+    margin: var(--unit-4) !important;
+}
+
+.mb-4 {
+    margin-bottom: var(--unit-4) !important;
+}
+
+.ml-4 {
+    margin-left: var(--unit-4) !important;
+}
+
+.mr-4 {
+    margin-right: var(--unit-4) !important;
+}
+
+.mt-4 {
+    margin-top: var(--unit-4) !important;
+}
+
+.mx-4 {
+    margin-left: var(--unit-4) !important;
+    margin-right: var(--unit-4) !important;
+}
+
+.my-4 {
+    margin-bottom: var(--unit-4) !important;
+    margin-top: var(--unit-4) !important;
+}
+
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Text */
+.text-normal {
+    font-weight: normal;
+}
+
+.text-bold {
+    font-weight: bold;
+}
+
+.text-italic {
+    font-style: italic;
+}
+
+.text-large {
+    font-size: 1.2em;
+}
+
+.text-small {
+    font-size: .9em;
+}
+
+.text-tiny {
+    font-size: .8em;
+}
+
+.text-muted {
+    opacity: .8;
+}
+
+.truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Flex */
+.align-baseline {
+    align-items: baseline;
+}
+
+.align-center {
+    align-items: center;
+}
+
+.justify-between {
+    justify-content: space-between;
+}

bookmarks/styles/theme/variables.css

@@ -0,0 +1,135 @@
+:root {
+    /* Color palette */
+    --gray-50: rgb(249, 250, 251);
+    --gray-100: rgb(243, 244, 246);
+    --gray-200: rgb(229, 231, 235);
+    --gray-300: rgb(209, 213, 219);
+    --gray-400: rgb(156, 163, 175);
+    --gray-500: rgb(107, 114, 128);
+    --gray-600: rgb(75, 85, 99);
+    --gray-700: rgb(55, 65, 81);
+    --gray-800: rgb(31, 41, 55);
+    --gray-900: rgb(17, 24, 39);
+
+    --primary-color: hsl(241, 63%, 59%);
+    --primary-color-highlight: hsl(241, 63%, 64%);
+    --primary-color-shade: hsl(241, 63%, 59%, 0.075);
+
+    --alternative-color: hsl(179, 94%, 29%);
+    --alternative-color-dark: hsl(179, 94%, 22%);
+
+    --success-color: hsl(142, 76%, 36%);
+    --success-color-highlight: hsl(142, 76%, 40%);
+    --success-color-shade: hsla(142, 76%, 36%, 0.1);
+
+    --warning-color: hsl(38, 92%, 50%);
+    --warning-color-highlight: hsl(38, 92%, 55%);
+    --warning-color-shade: hsla(38, 92%, 50%, 0.1);
+
+    --error-color: hsl(0, 72%, 51%);
+    --error-color-highlight: hsl(0, 72%, 60%);
+    --error-color-shade: hsla(0, 72%, 51%, 0.1);
+
+    /* Core colors */
+    --text-color: var(--gray-700);
+    --secondary-text-color: var(--gray-500);
+    --tertiary-text-color: var(--gray-500);
+    --contrast-text-color: #fff;
+    --primary-text-color: hsl(241, 63%, 55%);
+
+    --link-color: var(--primary-text-color);
+    --secondary-link-color: hsla(241, 63%, 54%, 0.8);
+
+    --icon-color: var(--gray-500);
+
+    --border-color: var(--gray-300);
+    --secondary-border-color: var(--gray-200);
+
+    --body-color: #fff;
+    --body-color-contrast: var(--gray-100);
+
+    /* Fonts */
+    --base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
+    --mono-font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+    --fallback-font-family: "Helvetica Neue", sans-serif;
+    --cjk-zh-hans-font-family: var(--base-font-family), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", var(--fallback-font-family);
+    --cjk-zh-hant-font-family: var(--base-font-family), "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", var(--fallback-font-family);
+    --cjk-jp-font-family: var(--base-font-family), "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, var(--fallback-font-family);
+    --cjk-ko-font-family: var(--base-font-family), "Malgun Gothic", var(--fallback-font-family);
+    --body-font-family: var(--base-font-family), var(--fallback-font-family);
+
+    /* Unit sizes */
+    --unit-o: 0.05rem;
+    --unit-h: 0.1rem;
+    --unit-1: 0.2rem;
+    --unit-2: 0.4rem;
+    --unit-3: 0.6rem;
+    --unit-4: 0.8rem;
+    --unit-5: 1rem;
+    --unit-6: 1.2rem;
+    --unit-7: 1.4rem;
+    --unit-8: 1.6rem;
+    --unit-9: 1.8rem;
+    --unit-10: 2rem;
+    --unit-12: 2.4rem;
+    --unit-16: 3.2rem;
+
+    /* Font sizes */
+    --html-font-size: 20px;
+    --html-line-height: 1.5;
+    --font-size: 0.7rem;
+    --font-size-sm: 0.65rem;
+    --font-size-lg: 0.8rem;
+    --line-height: 1rem;
+
+    /* Sizes */
+    --layout-spacing: var(--unit-2);
+    --layout-spacing-sm: var(--unit-1);
+    --layout-spacing-lg: var(--unit-4);
+    --border-radius: var(--unit-1);
+    --border-radius-lg: var(--unit-2);
+    --border-width: var(--unit-o);
+    --border-width-lg: var(--unit-h);
+    --control-size: var(--unit-8);
+    --control-size-sm: var(--unit-6);
+    --control-size-lg: var(--unit-9);
+    --control-padding-x: var(--unit-2);
+    --control-padding-x-sm: calc(var(--unit-2) * 0.75);
+    --control-padding-x-lg: calc(var(--unit-2) * 1.5);
+    --control-padding-y: calc((var(--control-size) - var(--line-height)) / 2 - var(--border-width));
+    --control-padding-y-sm: calc((var(--control-size-sm) - var(--line-height)) / 2 - var(--border-width));
+    --control-padding-y-lg: calc((var(--control-size-lg) - var(--line-height)) / 2 - var(--border-width));
+    --control-icon-size: 0.8rem;
+
+    --control-width-xs: 180px;
+    --control-width-sm: 320px;
+    --control-width-md: 640px;
+    --control-width-lg: 960px;
+    --control-width-xl: 1280px;
+
+    /* Responsive breakpoints */
+    --size-xs: 480px;
+    --size-sm: 600px;
+    --size-md: 840px;
+    --size-lg: 960px;
+    --size-xl: 1280px;
+    --size-2x: 1440px;
+
+    --responsive-breakpoint: var(--size-xs);
+
+    /* Z-index */
+    --zindex-0: 1;
+    --zindex-1: 100;
+    --zindex-2: 200;
+    --zindex-3: 300;
+    --zindex-4: 400;
+
+    /* Focus */
+    --focus-outline: 2px solid var(--primary-color);
+    --focus-outline-offset: 2px;
+
+    /* Shadows */
+    --box-shadow-xs: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+    --box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+}

bookmarks/styles/variables-dark.scss

@@ -1,32 +0,0 @@
-$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;
-
-$secondary-link-color: rgba(168, 177, 255, 0.73);
-
-$alternative-color: #59bdb9;
-$alternative-color-dark: #73f1eb;
-
-$code-bg-color: rgba(255, 255, 255, 0.1);
-$code-shadow-color: rgba(255, 255, 255, 0.2);
-
-/* Dark theme specific */
-$dt-primary-input-color: #5C68E7 !default;
-$dt-primary-button-color: #5761cb !default;

bookmarks/styles/variables-light.scss

@@ -1,7 +0,0 @@
-$alternative-color: #05a6a3;
-$alternative-color-dark: darken($alternative-color, 5%);
-
-$secondary-link-color: rgba(87, 85, 217, 0.64);
-
-$code-bg-color: rgba(0, 0, 0, 0.05);
-$code-shadow-color: rgba(0, 0, 0, 0.15);

bookmarks/templates/bookmarks/archive.html

@@ -11,24 +11,20 @@
       <div class="content-area-header mb-0">
         <h2>Archived bookmarks</h2>
         <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags mode='archived' %}
+          {% bookmark_search bookmark_list.search mode='archived' %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
+          <button ld-tag-modal class="btn ml-2 show-md">Tags
           </button>
         </div>
       </div>
 
-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
             action="{{ bookmark_list.action_url|safe }}"
             method="post" autocomplete="off">
         {% csrf_token %}
         {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_archive' %}
 
-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
           {% include 'bookmarks/bookmark_list.html' %}
         </div>
       </form>
@@ -39,10 +35,16 @@
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
+
+    {# Bookmark details #}
+    <turbo-frame id="details-modal" target="_top">
+      {% if details %}
+        {% include 'bookmarks/details/modal.html' %}
+      {% endif %}
+    </turbo-frame>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/bookmark_list.html

@@ -26,7 +26,7 @@
           {% if bookmark_list.show_url %}
             <div class="url-path truncate">
               <a href="{{ bookmark_item.url }}" target="{{ bookmark_list.link_target }}" rel="noopener"
-                class="url-display">
+                 class="url-display">
                 {{ bookmark_item.url }}
               </a>
             </div>
@@ -58,18 +58,18 @@
             {% endif %}
           {% endif %}
           {% if bookmark_item.notes %}
-            <div class="notes bg-gray text-gray-dark">
+            <div class="notes">
               <div class="markdown">{% markdown bookmark_item.notes %}</div>
             </div>
           {% endif %}
-          <div class="actions text-gray">
+          <div class="actions">
             {% if bookmark_item.display_date %}
               {% if bookmark_item.web_archive_snapshot_url %}
                 <a href="{{ bookmark_item.web_archive_snapshot_url }}"
-                  title="Show snapshot on the Internet Archive Wayback Machine"
-                  target="{{ bookmark_list.link_target }}"
-                  rel="noopener">
-                  {{ bookmark_item.display_date }} ∞
+                   title="Show snapshot on the Internet Archive Wayback Machine"
+                   target="{{ bookmark_list.link_target }}"
+                   rel="noopener">
+                  {{ bookmark_item.display_date }}
                 </a>
               {% else %}
                 <span>{{ bookmark_item.display_date }}</span>
@@ -78,9 +78,7 @@
             {% endif %}
             {# View link is visible for both owned and shared bookmarks #}
             {% if bookmark_list.show_view_action %}
-              <a ld-fetch="{% url 'bookmarks:details_modal' bookmark_item.id %}?return_url={{ bookmark_list.return_url|urlencode }}"
-                ld-on="click" ld-target="body|append"
-                href="{% url 'bookmarks:details' bookmark_item.id %}">View</a>
+              <a href="{{ bookmark_item.details_url }}" data-turbo-action="replace" data-turbo-frame="details-modal">View</a>
             {% endif %}
             {% if bookmark_item.is_editable %}
               {# Bookmark owner actions #}

bookmarks/templates/bookmarks/bulk_edit/bar.html

@@ -1,7 +1,7 @@
 {% load shared %}
 {% htmlmin %}
   <div class="bulk-edit-bar">
-    <div class="bulk-edit-actions bg-gray">
+    <div class="bulk-edit-actions">
       <label class="form-checkbox bulk-edit-checkbox all">
         <input type="checkbox">
         <i class="form-icon"></i>
@@ -23,11 +23,12 @@
           <option value="bulk_unshare">Unshare</option>
         {% endif %}
       </select>
-      <div class="tag-autocomplete d-none">
-        <input ld-tag-autocomplete variant="small"
-               name="bulk_tag_string" class="form-input input-sm" placeholder="Tag names...">
+      <div class="tag-autocomplete d-none" ld-tag-autocomplete>
+        <input name="bulk_tag_string" class="form-input input-sm" placeholder="Tag names..." variant="small">
       </div>
-      <button ld-confirm-button type="submit" name="bulk_execute" class="btn btn-link btn-sm">Execute</button>
+      <button ld-confirm-button type="submit" name="bulk_execute" class="btn btn-link btn-sm">
+        <span>Execute</span>
+      </button>
 
       <label class="form-checkbox select-across d-none">
         <input type="checkbox" name="bulk_select_across">

bookmarks/templates/bookmarks/bulk_edit/toggle.html

@@ -1,7 +1,9 @@
 <button class="btn hide-sm ml-2 bulk-edit-active-toggle" 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 xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
+    <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
+    <path d="M16 5l3 3"/>
   </svg>
 </button>

bookmarks/templates/bookmarks/details.html

@@ -1,13 +0,0 @@
-{% extends 'bookmarks/layout.html' %}
-
-{% block content %}
-  <div class="bookmark-details page">
-    {% if details.is_editable %}
-      {% include 'bookmarks/details/actions.html' %}
-    {% endif %}
-    {% include 'bookmarks/details/title.html' %}
-    <div>
-      {% include 'bookmarks/details/form.html' %}
-    </div>
-  </div>
-{% endblock %}

bookmarks/templates/bookmarks/details/actions.html

@@ -1,16 +0,0 @@
-<div class="actions">
-  <div class="left-actions">
-    <a class="btn"
-       href="{% url 'bookmarks:edit' details.bookmark.id %}?return_url={{ details.edit_return_url|urlencode }}">Edit</a>
-  </div>
-  <div class="right-actions">
-    <form action="{% url 'bookmarks:index.action' %}?return_url={{ details.delete_return_url|urlencode }}"
-          method="post">
-      {% csrf_token %}
-      <button ld-confirm-button type="submit" name="remove" value="{{ details.bookmark.id }}"
-              class="btn btn-link text-error">
-        Delete...
-      </button>
-    </form>
-  </div>
-</div>

bookmarks/templates/bookmarks/details/assets.html

@@ -1,7 +1,4 @@
-<div {% if details.has_pending_assets %}
-  ld-fetch="{% url 'bookmarks:details_assets' details.bookmark.id %}"
-  ld-interval="5" ld-target="self|outerHTML"
-{% endif %}>
+<div>
   {% if details.assets %}
     <div class="assets">
       {% for asset in details.assets %}
@@ -36,11 +33,11 @@
 
   {% if details.is_editable %}
     <div class="assets-actions">
-      <button type="submit" name="create_snapshot" class="btn btn-link"
+      <button type="submit" name="create_html_snapshot" value="{{ details.bookmark.id }}" class="btn btn-sm"
               {% if details.has_pending_assets %}disabled{% endif %}>Create HTML snapshot
       </button>
-      <button ld-upload-button id="upload-asset" name="upload_asset" value="{{ details.bookmark.id }}" type="button"
-              class="btn btn-link">Upload file
+      <button ld-upload-button id="upload-asset" name="upload_asset" value="{{ details.bookmark.id }}" type="submit"
+              class="btn btn-sm">Upload file
       </button>
       <input id="upload-asset-file" name="upload_asset_file" type="file" class="d-hide">
     </div>

bookmarks/templates/bookmarks/details/form.html

@@ -1,9 +1,10 @@
 {% load static %}
 {% load shared %}
 
-<form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud,refresh-details"
-      action="{% url 'bookmarks:details' details.bookmark.id %}"
-      method="post">
+<form action="{{ details.action_url }}" method="post" enctype="multipart/form-data">
+  {% csrf_token %}
+  <input type="hidden" name="update_state" value="{{ details.bookmark.id }}">
+
   <div class="weblinks">
     <a class="weblink" href="{{ details.bookmark.url }}" rel="noopener"
        target="{{ details.profile.bookmark_link_target }}">
@@ -47,7 +48,6 @@
       <div class="status col-2">
         <dt>Status</dt>
         <dd class="d-flex" style="gap: .8rem">
-          {% csrf_token %}
           <div class="form-group">
             <label class="form-switch">
               <input ld-auto-submit type="checkbox" name="is_archived"

bookmarks/templates/bookmarks/details/modal.html

@@ -0,0 +1,47 @@
+<div class="modal active bookmark-details"
+     ld-details-modal>
+  <a href="{{ details.close_url }}" data-turbo-frame="details-modal">
+    <div class="modal-overlay" aria-label="Close"></div>
+  </a>
+  <div class="modal-container">
+    <div class="modal-header">
+      <h2>{{ details.bookmark.resolved_title }}</h2>
+      <a href="{{ details.close_url }}" data-turbo-frame="details-modal">
+        <button class="close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
+               stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M18 6l-12 12"></path>
+            <path d="M6 6l12 12"></path>
+          </svg>
+        </button>
+      </a>
+    </div>
+    <div class="modal-body">
+      <div class="content">
+        {% include 'bookmarks/details/form.html' %}
+      </div>
+    </div>
+
+    {% if details.is_editable %}
+      <div class="modal-footer">
+        <div class="actions">
+          <div class="left-actions">
+            <a class="btn btn-wide"
+               href="{% url 'bookmarks:edit' details.bookmark.id %}?return_url={{ details.edit_return_url|urlencode }}">Edit</a>
+          </div>
+          <div class="right-actions">
+            <form action="{{ details.delete_url }}" method="post" data-turbo-action="replace">
+              {% csrf_token %}
+              <input type="hidden" name="disable_turbo" value="true">
+              <button ld-confirm-button class="btn btn-error btn-wide"
+                      type="submit" name="remove" value="{{ details.bookmark.id }}">
+                Delete...
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    {% endif %}
+  </div>
+</div>

bookmarks/templates/bookmarks/details/title.html

@@ -1,3 +0,0 @@
-<h2>
-  {{ details.bookmark.resolved_title }}
-</h2>

bookmarks/templates/bookmarks/details_modal.html

@@ -1,30 +0,0 @@
-<div ld-modal
-     ld-fetch="{% url 'bookmarks:details_modal' details.bookmark.id %}" ld-on="refresh-details"
-     ld-select=".content" ld-target=".modal.bookmark-details .content|outerHTML"
-     class="modal active bookmark-details">
-  <div class="modal-overlay" aria-label="Close"></div>
-  <div class="modal-container">
-    <div class="modal-header">
-      {% include 'bookmarks/details/title.html' %}
-      <button class="close">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M18 6l-12 12"></path>
-          <path d="M6 6l12 12"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        {% include 'bookmarks/details/form.html' %}
-      </div>
-    </div>
-
-    {% if details.is_editable %}
-      <div class="modal-footer">
-        {% include 'bookmarks/details/actions.html' %}
-      </div>
-    {% endif %}
-  </div>
-</div>

bookmarks/templates/bookmarks/edit.html

@@ -2,13 +2,15 @@
 {% load bookmarks %}
 
 {% block content %}
-  <section class="content-area">
-    <div class="content-area-header">
-      <h2>Edit bookmark</h2>
-    </div>
-    <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post"
-          class="width-50 width-md-100" novalidate>
-      {% bookmark_form form return_url bookmark_id %}
-    </form>
-  </section>
+  <div class="bookmarks-form-page">
+    <section class="content-area">
+      <div class="content-area-header">
+        <h2>Edit bookmark</h2>
+      </div>
+      <form action="{% url 'bookmarks:edit' bookmark_id %}?return_url={{ return_url|urlencode }}" method="post"
+            novalidate>
+        {% bookmark_form form return_url bookmark_id %}
+      </form>
+    </section>
+  </div>
 {% endblock %}

bookmarks/templates/bookmarks/form.html

@@ -19,9 +19,9 @@
       The form has been pre-filled with the existing bookmark, and saving the form will update the existing bookmark.
     </div>
   </div>
-  <div class="form-group">
+  <div class="form-group" ld-tag-autocomplete>
     <label for="{{ form.tag_string.id_for_label }}" class="form-label">Tags</label>
-    {{ form.tag_string|add_class:"form-input"|attr:"ld-tag-autocomplete"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
+    {{ form.tag_string|add_class:"form-input"|attr:"autocomplete:off"|attr:"autocapitalize:off" }}
     <div class="form-input-hint">
       Enter any number of tags separated by space and <strong>without</strong> the hash (#).
       If a tag does not exist it will be automatically created.
@@ -34,14 +34,15 @@
     <div class="has-icon-right">
       {{ 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"/>
+      <button type="button" class="btn btn-link form-icon" title="Edit title from website">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
+          <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
+          <path d="M16 5l3 3"/>
         </svg>
-      </a>
+      </button>
     </div>
     <div class="form-input-hint">
       Optional, leave empty to use title from website.
@@ -53,14 +54,15 @@
     <div class="has-icon-right">
       {{ 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"/>
+      <button type="button" class="btn btn-link form-icon" title="Edit description from website">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none"
+             stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+          <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"/>
+          <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"/>
+          <path d="M16 5l3 3"/>
         </svg>
-      </a>
+      </button>
     </div>
     <div class="form-input-hint">
       Optional, leave empty to use description from website.
@@ -74,11 +76,11 @@
       </summary>
       <label for="{{ form.notes.id_for_label }}" class="text-assistive">Notes</label>
       {{ form.notes|add_class:"form-input"|attr:"rows:8" }}
-      <div class="form-input-hint">
-        Additional notes, supports Markdown.
-      </div>
-      {{ form.notes.errors }}
     </details>
+    <div class="form-input-hint">
+      Additional notes, supports Markdown.
+    </div>
+    {{ form.notes.errors }}
   </div>
   <div class="form-group">
     <label for="{{ form.unread.id_for_label }}" class="form-checkbox">
@@ -106,12 +108,12 @@
       </div>
     </div>
   {% endif %}
-  <br/>
-  <div class="form-group">
+  <div class="divider"></div>
+  <div class="form-group d-flex justify-between">
     {% if auto_close %}
-      <input type="submit" value="Save and close" class="btn btn-primary mr-2">
+      <input type="submit" value="Save and close" class="btn btn-primary btn-wide">
     {% else %}
-      <input type="submit" value="Save" class="btn btn-primary mr-2">
+      <input type="submit" value="Save" class="btn btn-primary btn btn-primary btn-wide">
     {% endif %}
     <a href="{{ cancel_url }}" class="btn">Nevermind</a>
   </div>

bookmarks/templates/bookmarks/head.html

@@ -0,0 +1,40 @@
+{% load static %}
+
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
+  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
+  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
+  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
+  <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
+  <meta name="description" content="Self-hosted bookmark service">
+  <meta name="robots" content="index,follow">
+  <meta name="author" content="Sascha Ißbrücker">
+  <title>linkding</title>
+  {# Include specific theme variant based on user profile setting #}
+  {% if request.user_profile.theme == 'light' %}
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#5856e0">
+  {% elif request.user_profile.theme == 'dark' %}
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#161822">
+  {% else %}
+    {# Use auto theme as fallback #}
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+          media="(prefers-color-scheme: dark)"/>
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+          media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
+  {% endif %}
+  {% if request.user_profile.custom_css %}
+    <style>{{ request.user_profile.custom_css }}</style>
+  {% endif %}
+  <meta name="turbo-cache-control" content="no-preview">
+  {% if not request.global_settings.enable_link_prefetch %}
+    <meta name="turbo-prefetch" content="false">
+  {% endif %}
+  <script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
+</head>

bookmarks/templates/bookmarks/index.html

@@ -11,24 +11,19 @@
       <div class="content-area-header mb-0">
         <h2>Bookmarks</h2>
         <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags %}
+          {% bookmark_search bookmark_list.search %}
           {% include 'bookmarks/bulk_edit/toggle.html' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
-          </button>
+          <button ld-tag-modal class="btn ml-2 show-md">Tags</button>
         </div>
       </div>
 
-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
             action="{{ bookmark_list.action_url|safe }}"
             method="post" autocomplete="off">
         {% csrf_token %}
         {% include 'bookmarks/bulk_edit/bar.html' with disable_actions='bulk_unarchive' %}
 
-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
           {% include 'bookmarks/bookmark_list.html' %}
         </div>
       </form>
@@ -39,10 +34,16 @@
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
+
+    {# Bookmark details #}
+    <turbo-frame id="details-modal" target="_top">
+      {% if details %}
+        {% include 'bookmarks/details/modal.html' %}
+      {% endif %}
+    </turbo-frame>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/layout.html

@@ -1,43 +1,9 @@
 {% load static %}
-{% load sass_tags %}
 
 <!DOCTYPE html>
 {# Use data attributes as storage for access in static scripts #}
 <html lang="en" data-api-base-url="{% url 'bookmarks:api-root' %}">
-<head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="{% static 'favicon.ico' %}" sizes="48x48">
-  <link rel="icon" href="{% static 'favicon.svg' %}" sizes="any" type="image/svg+xml">
-  <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}">
-  <link rel="mask-icon" href="{% static 'safari-pinned-tab.svg' %}" color="#5856e0">
-  <link rel="manifest" href="{% url 'bookmarks:manifest' %}">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
-  <meta name="description" content="Self-hosted bookmark service">
-  <meta name="robots" content="index,follow">
-  <meta name="author" content="Sascha Ißbrücker">
-  <title>linkding</title>
-  {# Include SASS styles, files are resolved from bookmarks/styles #}
-  {# Include specific theme variant based on user profile setting #}
-  {% if request.user_profile.theme == 'light' %}
-    <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
-    <meta name="theme-color" content="#5856e0">
-  {% elif request.user_profile.theme == 'dark' %}
-    <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
-    <meta name="theme-color" content="#161822">
-  {% else %}
-    {# Use auto theme as fallback #}
-    <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
-          media="(prefers-color-scheme: dark)"/>
-    <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
-          media="(prefers-color-scheme: light)"/>
-    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
-    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
-  {% endif %}
-  {% if request.user_profile.custom_css %}
-    <style>{{ request.user_profile.custom_css }}</style>
-  {% endif %}
-</head>
+{% include 'bookmarks/head.html' %}
 <body ld-global-shortcuts>
 
 <div class="d-none">
@@ -131,6 +97,5 @@
   {% block content %}
   {% endblock %}
 </div>
-<script src="{% static "bundle.js" %}?v={{ app_version }}"></script>
 </body>
 </html>

bookmarks/templates/bookmarks/nav_menu.html

@@ -1,88 +1,83 @@
 {% load shared %}
 {% htmlmin %}
-{# 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" viewBox="0 0 20 20" fill="currentColor"
-           style="height:1rem;width:1rem;vertical-align: middle;">
-        <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>
-      {% if request.user_profile.enable_sharing %}
-        <li>
-          <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
+  {# Basic menu list #}
+  <div class="hide-md">
+    <a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
+    <div class="dropdown">
+      <button class="btn btn-link dropdown-toggle" tabindex="0">
+        Bookmarks
+      </button>
+      <ul class="menu">
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:index' %}" class="menu-link">Active</a>
         </li>
-      {% endif %}
-      <li>
-        <a href="{% url 'bookmarks:index' %}?unread=yes" class="btn btn-link">Unread</a>
-      </li>
-      <li>
-        <a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
-      </li>
-    </ul>
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:archived' %}" class="menu-link">Archived</a>
+        </li>
+        {% if request.user_profile.enable_sharing %}
+          <li class="menu-item">
+            <a href="{% url 'bookmarks:shared' %}" class="menu-link">Shared</a>
+          </li>
+        {% endif %}
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:index' %}?unread=yes" class="menu-link">Unread</a>
+        </li>
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:index' %}?q=!untagged" class="menu-link">Untagged</a>
+        </li>
+      </ul>
+    </div>
+    <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
+    <form class="d-inline" action="{% url 'logout' %}" method="post">
+      {% csrf_token %}
+      <button type="submit" class="btn btn-link">Logout</button>
+    </form>
   </div>
-  <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-  <form class="d-inline" action="{% url 'logout' %}" method="post">
-    {% csrf_token %}
-    <button type="submit" class="btn btn-link">Logout</button>
-  </form>
-</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 ld-dropdown class="dropdown dropdown-right">
-    <a href="#" class="btn btn-link dropdown-toggle" tabindex="0">
+  {# 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="M4 6h16M4 12h16M4 18h16"/>
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
       </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>
-      {% if request.user_profile.enable_sharing %}
-        <li style="padding-left: 1rem">
-          <a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
+    <div ld-dropdown class="dropdown dropdown-right">
+      <button 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"></path>
+        </svg>
+      </button>
+      <!-- menu component -->
+      <ul class="menu">
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:index' %}" class="menu-link">Bookmarks</a>
         </li>
-      {% endif %}
-      <li style="padding-left: 1rem">
-        <a href="{% url 'bookmarks:index' %}?unread=yes" class="btn btn-link">Unread</a>
-      </li>
-      <li style="padding-left: 1rem">
-        <a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
-      </li>
-      <li>
-        <a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
-      </li>
-      <li>
-        <form class="d-inline" action="{% url 'logout' %}" method="post">
-          {% csrf_token %}
-          <button type="submit" class="btn btn-link">Logout</button>
-        </form>
-      </li>
-    </ul>
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:archived' %}" class="menu-link">Archived</a>
+        </li>
+        {% if request.user_profile.enable_sharing %}
+          <li class="menu-item">
+            <a href="{% url 'bookmarks:shared' %}" class="menu-link">Shared</a>
+          </li>
+        {% endif %}
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:index' %}?unread=yes" class="menu-link">Unread</a>
+        </li>
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:index' %}?q=!untagged" class="menu-link">Untagged</a>
+        </li>
+        <div class="divider"></div>
+        <li class="menu-item">
+          <a href="{% url 'bookmarks:settings.index' %}" class="menu-link">Settings</a>
+        </li>
+        <li class="menu-item">
+          <form class="d-inline" action="{% url 'logout' %}" method="post">
+            {% csrf_token %}
+            <button type="submit" class="btn btn-link menu-link">Logout</button>
+          </form>
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
 {% endhtmlmin %}

bookmarks/templates/bookmarks/new.html

@@ -2,12 +2,14 @@
 {% load bookmarks %}
 
 {% block content %}
-  <section class="content-area">
-    <div class="content-area-header">
-      <h2>New bookmark</h2>
-    </div>
-    <form action="{% url 'bookmarks:new' %}" method="post" class="width-50 width-md-100" novalidate>
-      {% bookmark_form form return_url auto_close=auto_close %}
-    </form>
-  </section>
+  <div class="bookmarks-form-page">
+    <section class="content-area">
+      <div class="content-area-header">
+        <h2>New bookmark</h2>
+      </div>
+      <form action="{% url 'bookmarks:new' %}" method="post" novalidate>
+        {% bookmark_form form return_url auto_close=auto_close %}
+      </form>
+    </section>
+  </div>
 {% endblock %}

bookmarks/templates/bookmarks/pagination.html

@@ -1,9 +1,9 @@
 {% load shared %}
 
 <ul class="pagination">
-  {% if page.has_previous %}
+  {% if prev_link %}
     <li class="page-item">
-      <a href="?{% update_query_string page=page.previous_page_number %}" tabindex="-1">Previous</a>
+      <a href="?{{ prev_link }}" tabindex="-1">Previous</a>
     </li>
   {% else %}
     <li class="page-item disabled">
@@ -11,10 +11,10 @@
     </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>
+  {% for page_link in page_links %}
+    {% if page_link %}
+      <li class="page-item {% if page_link.active %}active{% endif %}">
+        <a href="?{{ page_link.link }}">{{ page_link.number }}</a>
       </li>
     {% else %}
       <li class="page-item">
@@ -23,9 +23,9 @@
     {% endif %}
   {% endfor %}
 
-  {% if page.has_next %}
+  {% if next_link %}
     <li class="page-item">
-      <a href="?{% update_query_string page=page.next_page_number %}" tabindex="-1">Next</a>
+      <a href="?{{ next_link }}" tabindex="-1">Next</a>
     </li>
   {% else %}
     <li class="page-item disabled">

bookmarks/templates/bookmarks/read.html

@@ -1,4 +1,3 @@
-{% load sass_tags %}
 {% load static %}
 <!DOCTYPE html>
 <html lang="en" class="reader-mode">
@@ -6,16 +5,21 @@
   <meta charset="UTF-8">
   <title>Reader view</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
+  {# Include specific theme variant based on user profile setting #}
   {% if request.user_profile.theme == 'light' %}
-    <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#5856e0">
   {% elif request.user_profile.theme == 'dark' %}
-    <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"/>
+    <meta name="theme-color" content="#161822">
   {% else %}
     {# Use auto theme as fallback #}
-    <link href="{% sass_src 'theme-dark.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+    <link href="{% static 'theme-dark.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
           media="(prefers-color-scheme: dark)"/>
-    <link href="{% sass_src 'theme-light.scss' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
+    <link href="{% static 'theme-light.css' %}?v={{ app_version }}" rel="stylesheet" type="text/css"
           media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#161822">
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#5856e0">
   {% endif %}
 </head>
 <body>

bookmarks/templates/bookmarks/search.html

@@ -1,10 +1,15 @@
 {% load widget_tweaks %}
 
-<div class="search-container">
-  <form id="search" class="input-group" action="" method="get" role="search">
+<div ld-search-autocomplete class="search-container">
+  <form id="search" action="" method="get" role="search">
     <input type="search" class="form-input" name="q" placeholder="Search for words or #tags"
-           value="{{ search.q }}">
-    <input type="submit" value="Search" class="btn input-group-btn">
+           value="{{ search.q }}"
+           data-link-target="{{ request.user_profile.bookmark_link_target }}"
+           data-mode="{{ mode }}"
+           data-user="{{ search.user }}"
+           data-shared="{{ search.shared }}"
+           data-unread="{{ search.unread }}">
+    <input type="submit" value="Search" class="d-none">
     {% for hidden_field in search_form.hidden_fields %}
       {{ hidden_field }}
     {% endfor %}
@@ -73,36 +78,3 @@
     </div>
   </div>
 </div>
-
-
-{# Replace search input with auto-complete component #}
-<script type="application/javascript">
-  window.addEventListener("load", function () {
-    const currentTagsString = '{{ tags_string }}';
-    const currentTags = currentTagsString.split(' ');
-    const uniqueTags = [...new Set(currentTags)]
-    const search = {
-      q: '{{ search.q }}',
-      user: '{{ search.user }}',
-      shared: '{{ search.shared }}',
-      unread: '{{ search.unread }}',
-    }
-    const apiClient = new linkding.ApiClient('{% url 'bookmarks:api-root' %}')
-    const input = document.querySelector('#search input[name="q"]')
-    const wrapper = document.createElement('div')
-    new linkding.SearchAutoComplete({
-      target: wrapper,
-      props: {
-        name: 'q',
-        placeholder: 'Search for words or #tags',
-        value: input.value,
-        tags: uniqueTags,
-        mode: '{{ mode }}',
-        linkTarget: '{{ request.user_profile.bookmark_link_target }}',
-        apiClient,
-        search,
-      }
-    })
-    input.replaceWith(wrapper.firstElementChild);
-  });
-</script>

bookmarks/templates/bookmarks/shared.html

@@ -11,21 +11,17 @@
       <div class="content-area-header">
         <h2>Shared bookmarks</h2>
         <div class="header-controls">
-          {% bookmark_search bookmark_list.search tag_cloud.tags mode='shared' %}
-          <button ld-fetch="{{ bookmark_list.tag_modal_url }}" ld-target="body|append" ld-on="click"
-                  class="btn ml-2 show-md">Tags
+          {% bookmark_search bookmark_list.search mode='shared' %}
+          <button ld-tag-modal class="btn ml-2 show-md">Tags
           </button>
         </div>
       </div>
 
-      <form ld-form ld-fire="refresh-bookmark-list,refresh-tag-cloud"
-            class="bookmark-actions"
+      <form class="bookmark-actions"
             action="{{ bookmark_list.action_url|safe }}"
             method="post" autocomplete="off">
         {% csrf_token %}
-        <div ld-fetch="{{ bookmark_list.refresh_url }}" ld-on="refresh-bookmark-list"
-             ld-fire="refresh-bookmark-list-done"
-             class="bookmark-list-container">
+        <div id="bookmark-list-container">
           {% include 'bookmarks/bookmark_list.html' %}
         </div>
       </form>
@@ -43,10 +39,16 @@
       <div class="content-area-header">
         <h2>Tags</h2>
       </div>
-      <div ld-fetch="{{ tag_cloud.refresh_url }}" ld-on="refresh-tag-cloud"
-           class="tag-cloud-container">
+      <div id="tag-cloud-container">
         {% include 'bookmarks/tag_cloud.html' %}
       </div>
     </section>
+
+    {# Bookmark details #}
+    <turbo-frame id="details-modal" target="_top">
+      {% if details %}
+        {% include 'bookmarks/details/modal.html' %}
+      {% endif %}
+    </turbo-frame>
   </div>
 {% endblock %}

bookmarks/templates/bookmarks/tag_modal.html

@@ -1,21 +0,0 @@
-<div ld-modal class="modal active">
-  <div class="modal-overlay" aria-label="Close"></div>
-  <div class="modal-container">
-    <div class="modal-header d-flex justify-between align-center">
-      <div class="modal-title h5">Tags</div>
-      <button class="close">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
-             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <path d="M18 6l-12 12"></path>
-          <path d="M6 6l12 12"></path>
-        </svg>
-      </button>
-    </div>
-    <div class="modal-body">
-      <div class="content">
-        {% include 'bookmarks/tag_cloud.html' %}
-      </div>
-    </div>
-  </div>
-</div>

bookmarks/templates/bookmarks/updates/bookmark_view_stream.html

@@ -0,0 +1,21 @@
+<turbo-stream action="update" target="bookmark-list-container">
+  <template>
+    {% include 'bookmarks/bookmark_list.html' %}
+    <script>
+      document.dispatchEvent(new CustomEvent('bookmark-list-updated'));
+    </script>
+  </template>
+</turbo-stream>
+<turbo-stream action="update" target="tag-cloud-container">
+  <template>
+    {% include 'bookmarks/tag_cloud.html' %}
+  </template>
+</turbo-stream>
+
+<turbo-stream action="update" method="morph" target="details-modal">
+  <template>
+    {% if details %}
+      {% include 'bookmarks/details/modal.html' %}
+    {% endif %}
+  </template>
+</turbo-stream>

bookmarks/templates/bookmarks/updates/details-modal-frame.html

@@ -0,0 +1,10 @@
+<html>
+{% include 'bookmarks/head.html' %}
+<body>
+<turbo-frame id="details-modal">
+  {% if details %}
+    {% include 'bookmarks/details/modal.html' %}
+  {% endif %}
+</turbo-frame>
+</body>
+</html>

bookmarks/templates/bookmarks/user_select.html

@@ -6,17 +6,10 @@
   {% endfor %}
   <div class="form-group">
     <div class="d-flex">
-      {{ form.user|add_class:"form-select" }}
+      {% render_field form.user class+="form-select" ld-auto-submit="" %}
       <noscript>
         <button type="submit" class="btn btn-link ml-2">Apply</button>
       </noscript>
     </div>
   </div>
 </form>
-<script>
-  const form = document.getElementById('user-select');
-  const select = form.querySelector('select');
-  select.addEventListener('change', () => {
-    form.submit();
-  });
-</script>