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/styles/bookmarks.scss

@@ -1,3 +1,4 @@
+/* Bookmark search box */
 .bookmarks-page .search {
   $searchbox-width: 180px;
   $searchbox-width-md: 300px;
@@ -37,12 +38,6 @@
   }
 }
 
-.bookmarks-page .content-area-header {
-  span.btn {
-    margin-left: 8px;
-  }
-}
-
 /* Bookmark list */
 ul.bookmark-list {
   list-style: none;
@@ -51,9 +46,10 @@ ul.bookmark-list {
 }
 
 /* Bookmarks */
-ul.bookmark-list li {
+li[ld-bookmark-item] {
+  position: relative;
 
-  .bulk-edit-toggle {
+  [ld-bulk-edit-checkbox].form-checkbox {
     display: none;
   }
 
@@ -88,14 +84,11 @@ ul.bookmark-list li {
     display: flex;
     align-items: baseline;
     flex-wrap: wrap;
+    gap: 0.4rem;
   }
 
   .actions {
-    > *:not(:last-child) {
-      margin-right: 0.4rem;
-    }
-
-    a, button {
+    a, button.btn-link {
       color: $gray-color;
       padding: 0;
       height: auto;
@@ -235,6 +228,7 @@ ul.bookmark-list .notes-content {
   > *:first-child {
     margin-top: 0;
   }
+
   > *:last-child {
     margin-bottom: 0;
   }
@@ -266,14 +260,13 @@ ul.bookmark-list .notes-content {
   }
 }
 
-/* Bookmark actions / bulk edit */
+/* 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;
 
-.bookmarks-page form.bookmark-actions {
-
+[ld-bulk-edit] {
   .bulk-edit-bar {
     margin-top: -17px;
     margin-bottom: 16px;
@@ -283,56 +276,27 @@ $bulk-edit-transition-duration: 400ms;
     transition: max-height $bulk-edit-transition-duration;
   }
 
-  .bulk-edit-actions {
-    display: flex;
-    align-items: baseline;
-    padding: 4px 0;
-    border-top: solid 1px $border-color;
-
-    button:hover {
-      text-decoration: underline;
-    }
-
-    > label.form-checkbox {
-      min-height: 1rem;
-    }
-
-    > button {
-      padding: 0;
-      margin-left: 8px;
-    }
-
-    > span {
-      margin-left: 8px;
-    }
-
-    > input, .form-autocomplete {
-      width: auto;
-      margin-left: 4px;
-      max-width: 200px;
-      -webkit-appearance: none;
-    }
-
-    span.confirmation {
-      display: flex;
-    }
-
-    span.confirmation button {
-      padding: 0;
-    }
+  &.active .bulk-edit-bar {
+    max-height: 37px;
+    border-bottom: solid 1px $border-color;
   }
 
-  .bulk-edit-all-toggle {
+  /* remove overflow after opening animation, otherwise tag autocomplete overlay gets cut off */
+  &.active:not(.activating) .bulk-edit-bar {
+    overflow: visible;
+  }
+
+  /* All checkbox */
+  [ld-bulk-edit-checkbox][all].form-checkbox {
+    display: block;
     width: $bulk-edit-toggle-width;
     margin: 0 0 0 $bulk-edit-toggle-offset;
     padding: 0;
+    min-height: 1rem;
   }
 
-  ul.bookmark-list li {
-    position: relative;
-  }
-
-  ul.bookmark-list li .bulk-edit-toggle {
+  /* Bookmark checkboxes */
+  li[ld-bookmark-item] [ld-bulk-edit-checkbox].form-checkbox {
     display: block;
     position: absolute;
     width: $bulk-edit-toggle-width;
@@ -344,22 +308,36 @@ $bulk-edit-transition-duration: 400ms;
     opacity: 0;
     transition: all $bulk-edit-transition-duration;
 
-    i {
+    .form-icon {
       top: 0.2rem;
     }
   }
-}
 
-#bulk-edit-mode {
-  display: none;
-}
+  &.active li[ld-bookmark-item] [ld-bulk-edit-checkbox].form-checkbox {
+    visibility: visible;
+    opacity: 1;
+  }
 
-#bulk-edit-mode:checked ~ .bookmarks-page .bulk-edit-toggle {
-  visibility: visible;
-  opacity: 1;
-}
+  /* Actions */
+  .bulk-edit-actions {
+    display: flex;
+    align-items: baseline;
+    padding: 4px 0;
+    border-top: solid 1px $border-color;
+    gap: 8px;
 
-#bulk-edit-mode:checked ~ .bookmarks-page .bulk-edit-bar {
-  max-height: 37px;
-  border-bottom: solid 1px $border-color;
+    button {
+      padding: 0 !important;
+    }
+
+    button:hover {
+      text-decoration: underline;
+    }
+
+    > input, .form-autocomplete {
+      width: auto;
+      max-width: 200px;
+      -webkit-appearance: none;
+    }
+  }
 }

bookmarks/styles/shared.scss

@@ -14,9 +14,15 @@ section.content-area {
 }
 
 // Confirm button component
-.btn-confirmation-action {
+span.confirmation {
+  display: flex;
+  align-items: baseline;
+}
+
+span.confirmation .btn.btn-link {
   color: $error-color !important;
+
   &:hover {
     text-decoration: underline;
   }
-}
+}