bookmark collections

data/static/css/style.css

@@ -1060,6 +1060,22 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   background-color: rgb(177, 206, 204.5);
 }
 
+.draggable-collection {
+  cursor: pointer;
+  user-select: none;
+  background-color: #c1ceb1;
+  padding: 20px;
+  margin: 15px 0;
+  border-top: 5px outset rgb(217.26, 220.38, 213.42);
+  border-bottom: 5px outset rgb(135.1928346457, 145.0974015748, 123.0025984252);
+}
+.draggable-collection.dragged {
+  background-color: rgb(177, 206, 204.5);
+}
+.draggable-collection.default {
+  background-color: #beb1ce;
+}
+
 .editing {
   background-color: rgb(217.26, 220.38, 213.42);
 }

data/static/css/theme-otomotone.css

@@ -1060,6 +1060,22 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   background-color: #3c283c;
 }
 
+.draggable-collection {
+  cursor: pointer;
+  user-select: none;
+  background-color: #9b649b;
+  padding: 20px;
+  margin: 15px 0;
+  border-top: 5px outset #503250;
+  border-bottom: 5px outset rgb(96.95, 81.55, 96.95);
+}
+.draggable-collection.dragged {
+  background-color: #3c283c;
+}
+.draggable-collection.default {
+  background-color: #8a5584;
+}
+
 .editing {
   background-color: #503250;
 }

data/static/css/theme-peachy.css

@@ -1060,6 +1060,22 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus
   background-color: #f27a5a;
 }
 
+.draggable-collection {
+  cursor: pointer;
+  user-select: none;
+  background-color: #f27a5a;
+  padding: 12px;
+  margin: 8px 0;
+  border-top: 5px outset rgb(219.84, 191.04, 183.36);
+  border-bottom: 5px outset rgb(155.8907865169, 93.2211235955, 76.5092134831);
+}
+.draggable-collection.dragged {
+  background-color: #f27a5a;
+}
+.draggable-collection.default {
+  background-color: #b54444;
+}
+
 .editing {
   background-color: rgb(219.84, 191.04, 183.36);
 }

data/static/js/manage-bookmark-collections.js

@@ -0,0 +1,128 @@
+let removedCollections = [];
+
+document.getElementById("add-collection-button").addEventListener("click", () => {
+  const container = document.getElementById("collections-container");
+  const currentCount = container.querySelectorAll(".draggable-collection").length;
+
+  const newId = `new-${Date.now()}`
+  const collectionHtml = `
+    <div class="draggable-collection"
+         data-collection-id="${newId}"
+         draggable="true"
+         ondragover="dragOver(event)"
+         ondragstart="dragStart(event)"
+         ondragend="dragEnd()">
+      <input type="text" class="collection-name" value="" required placeholder="Enter collection name" autocomplete="off" maxlength="60"><br>
+      <div>0 threads, 0 posts</div>
+      <button type="button" class="delete-button critical">Delete</button>
+    </div>
+  `;
+  container.insertAdjacentHTML('beforeend', collectionHtml);
+})
+
+document.addEventListener("click", e => {
+  if (!e.target.classList.contains("delete-button")) {
+    return;
+  }
+  const collectionDiv = e.target.closest(".draggable-collection");
+  const collectionId = collectionDiv.dataset.collectionId;
+
+  if (!collectionId.startsWith("new-")) {
+    removedCollections.push(collectionId);
+  }
+
+  collectionDiv.remove();
+})
+
+document.getElementById("save-button").addEventListener("click", async () => {
+  const collections = [];
+  const collectionDivs = document.querySelectorAll(".draggable-collection");
+  let isValid = true;
+  collectionDivs.forEach((collection, index) => {
+    const collectionId = collection.dataset.collectionId;
+    const nameInput = collection.querySelector(".collection-name");
+
+    if (!nameInput.reportValidity()) {
+      isValid = false;
+      return;
+    }
+
+    collections.push({
+      id: collectionId,
+      name: nameInput.value,
+      is_new: collectionId.startsWith("new-"),
+    });
+  })
+
+  if (!isValid) {
+    return;
+  }
+
+  const data = {
+    collections: collections,
+    removed_collections: removedCollections,
+  };
+
+  try {
+    const saveHref = document.getElementById('save-button').dataset.submitHref;
+    const response = await fetch(saveHref, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (response.ok) {
+      window.location.reload();
+    } else {
+      console.error("Error saving collections");
+    }
+
+  } catch (error) {
+    console.error("Error saving collections: ", error);
+  }
+})
+
+// drag logic
+// https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap
+
+let selected = null;
+const container = document.getElementById("collections-container");
+function isBefore(el1, el2) {
+  let cur;
+  if (el2.parentNode === el1.parentNode) {
+    for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
+      if (cur === el2) return true;
+    }
+  }
+  return false;
+}
+
+function dragOver(e) {
+  let target = e.target.closest(".draggable-collection")
+
+  if (!target || target === selected) {
+    return;
+  }
+
+  if (isBefore(selected, target)) {
+    container.insertBefore(selected, target)
+  } else {
+    container.insertBefore(selected, target.nextSibling)
+  }
+}
+
+function dragEnd() {
+  if (!selected) return;
+
+  selected.classList.remove("dragged")
+  selected = null;
+}
+
+function dragStart(e) {
+  e.dataTransfer.effectAllowed = 'move'
+  e.dataTransfer.setData('text/plain', "")
+  selected = e.target
+  selected.classList.add("dragged")
+}