Avoid page reload when triggering actions in bookmark list (#506)

* Extract bookmark view contexts

* Implement basic partial updates for bookmark list and tag cloud

* Refactor confirm button JS into web component

* Refactor bulk edit JS into web component

* Refactor tag autocomplete JS into web component

* Refactor bookmark page JS into web component

* Refactor global shortcuts JS into web component

* Update tests

* Add E2E test for partial updates

* Add partial updates for archived bookmarks

* Add partial updates for shared bookmarks

* Cleanup helpers

* Improve naming in bulk edit

* Refactor shared components into behaviors

* Refactor bulk edit components into behaviors

* Refactor bookmark list components into behaviors

* Update tests

* Combine all scripts into bundle

* Fix E2E CI

bookmarks/frontend/behaviors/bookmark-page.js

@@ -0,0 +1,65 @@
+import { registerBehavior, swap } from "./index";
+
+class BookmarkPage {
+  constructor(element) {
+    this.element = element;
+    this.form = element.querySelector("form.bookmark-actions");
+    this.form.addEventListener("submit", this.onFormSubmit.bind(this));
+
+    this.bookmarkList = element.querySelector(".bookmark-list-container");
+    this.tagCloud = element.querySelector(".tag-cloud-container");
+  }
+
+  async onFormSubmit(event) {
+    event.preventDefault();
+
+    const url = this.form.action;
+    const formData = new FormData(this.form);
+    formData.append(event.submitter.name, event.submitter.value);
+
+    await fetch(url, {
+      method: "POST",
+      body: formData,
+      redirect: "manual", // ignore redirect
+    });
+    await this.refresh();
+  }
+
+  async refresh() {
+    const query = window.location.search;
+    const bookmarksUrl = this.element.getAttribute("bookmarks-url");
+    const tagsUrl = this.element.getAttribute("tags-url");
+    Promise.all([
+      fetch(`${bookmarksUrl}${query}`).then((response) => response.text()),
+      fetch(`${tagsUrl}${query}`).then((response) => response.text()),
+    ]).then(([bookmarkListHtml, tagCloudHtml]) => {
+      swap(this.bookmarkList, bookmarkListHtml);
+      swap(this.tagCloud, tagCloudHtml);
+
+      this.bookmarkList.dispatchEvent(
+        new CustomEvent("bookmark-list-updated", { bubbles: true }),
+      );
+    });
+  }
+}
+
+registerBehavior("ld-bookmark-page", BookmarkPage);
+
+class BookmarkItem {
+  constructor(element) {
+    this.element = element;
+
+    const notesToggle = element.querySelector(".toggle-notes");
+    if (notesToggle) {
+      notesToggle.addEventListener("click", this.onToggleNotes.bind(this));
+    }
+  }
+
+  onToggleNotes(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.element.classList.toggle("show-notes");
+  }
+}
+
+registerBehavior("ld-bookmark-item", BookmarkItem);