Add bundles for organizing bookmarks (#1097)

* add bundle model and query logic

* cleanup tests

* add basic form

* add success message

* Add form tests

* Add bundle list view

* fix edit view

* Add remove button

* Add basic preview logic

* Make pagination use absolute URLs

* Hide bookmark edits when rendering preview

* Render bookmark list in preview

* Reorder bundles

* Show bundles in bookmark view

* Make bookmark search respect selected bundle

* UI tweaks

* Fix bookmark scope

* Improve bundle preview

* Skip preview if form is submitted

* Show correct preview after invalid form submission

* Add option to hide bundles

* Merge new migrations

* Add tests for bundle menu

* Improve check for preview being removed

bookmarks/styles/bookmark-details.css

@@ -49,50 +49,9 @@
   & .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 {
+    & .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 {

bookmarks/styles/bookmark-page.css

@@ -379,6 +379,26 @@ li[ld-bookmark-item] {
   }
 }
 
+.bundle-menu {
+  list-style-type: none;
+  margin: 0 0 var(--unit-6);
+
+  .bundle-menu-item {
+    margin: 0;
+    margin-bottom: var(--unit-2);
+  }
+
+  .bundle-menu-item a {
+    padding: var(--unit-1) var(--unit-2);
+    border-radius: var(--border-radius);
+  }
+
+  .bundle-menu-item.selected a {
+    background: var(--primary-color);
+    color: var(--contrast-text-color);
+  }
+}
+
 .tag-cloud {
   /* Increase line-height for better separation within / between items */
   line-height: 1.1rem;

bookmarks/styles/bundles.css

@@ -0,0 +1,34 @@
+.bundles-page {
+  h1 {
+    font-size: var(--font-size-lg);
+    margin-bottom: var(--unit-6);
+  }
+
+  .item-list {
+    .list-item .list-item-icon {
+      cursor: grab;
+    }
+
+    .list-item.drag-start {
+      --secondary-border-color: transparent;
+    }
+
+    .list-item.dragging > * {
+      visibility: hidden;
+    }
+  }
+}
+
+.bundles-editor-page {
+  &.grid {
+    gap: var(--unit-9);
+  }
+
+  .form-footer {
+    position: sticky;
+    bottom: 0;
+    border-top: solid 1px var(--secondary-border-color);
+    background: var(--body-color);
+    padding: var(--unit-3) 0;
+  }
+}

bookmarks/styles/components.css

@@ -60,3 +60,60 @@ span.confirmation {
 .turbo-progress-bar {
   background-color: var(--primary-color);
 }
+
+/* Messages */
+.message-list {
+  margin: var(--unit-4) 0;
+
+  .toast {
+    margin-bottom: var(--unit-2);
+  }
+
+  .toast a.btn-clear:visited {
+    color: currentColor;
+  }
+}
+
+/* Item list */
+.item-list {
+  & .list-item {
+    display: flex;
+    align-items: center;
+    gap: var(--unit-2);
+    padding: var(--unit-2) 0;
+    border-top: var(--unit-o) solid var(--secondary-border-color);
+  }
+
+  & .list-item:last-child {
+    border-bottom: var(--unit-o) solid var(--secondary-border-color);
+  }
+
+  & .list-item-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  & .list-item-text {
+    flex: 1 1 0;
+    gap: var(--unit-2);
+    min-width: 0;
+    display: flex;
+  }
+
+  & .list-item-text .truncate {
+    flex-shrink: 1;
+  }
+
+  & .list-item-actions {
+    display: flex;
+    gap: var(--unit-4);
+    align-items: center;
+
+    & .btn.btn-link {
+      height: unset;
+      padding: 0;
+      border: none;
+    }
+  }
+}

bookmarks/styles/layout.css

@@ -27,15 +27,3 @@ header {
     line-height: 1.2;
   }
 }
-
-header .toasts {
-  margin-bottom: 20px;
-
-  .toast {
-    margin-bottom: 0.4rem;
-  }
-
-  .toast a.btn-clear:visited {
-    color: currentColor;
-  }
-}

bookmarks/styles/theme-light.css

@@ -28,3 +28,4 @@
 @import "markdown.css";
 @import "reader-mode.css";
 @import "settings.css";
+@import "bundles.css";

bookmarks/styles/theme/utilities.css

@@ -242,6 +242,14 @@
   margin-top: var(--unit-4) !important;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
+.mr-auto {
+  margin-right: auto;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;