add bookmark collection editor

data/static/css/style.css

@@ -297,6 +297,25 @@ a.site-title {
       margin-top: var(--medium-padding);
     }
   }
+
+  &.primary-bg {
+    --main-color: var(--bg-color-primary);
+    background-color: var(--bg-color-primary);
+  }
+
+  &.secondary-bg {
+    --main-color: var(--bg-color-secondary);
+    --rotation: 0deg;
+  }
+
+  &.tertiary-bg {
+    --main-color: var(--bg-color-tertiary);
+    --rotation: 0deg;
+  }
+
+  &.contrast-bg {
+    --main-color: var(--bg-color-contrast);
+  }
 }
 
 .info {
@@ -368,25 +387,6 @@ ul.horizontal, ol.horizontal {
   }
 }
 
-.primary-bg {
-  --main-color: var(--bg-color-primary);
-  background-color: var(--bg-color-primary);
-}
-
-.secondary-bg {
-  --main-color: var(--bg-color-secondary);
-  --rotation: 0deg;
-}
-
-.tertiary-bg {
-  --main-color: var(--bg-color-tertiary);
-  --rotation: 0deg;
-}
-
-.contrast-bg {
-  --main-color: var(--bg-color-contrast);
-}
-
 .motd {
   display: flex;
   gap: var(--big-padding);

data/static/js/bits/collections-editor.js

@@ -0,0 +1,18 @@
+export const b = {}
+
+export function addCollection(ev, sender, el) {
+  el.innerHTML += b.templates.collectionItem;
+}
+
+export function deleteCollection(ev, sender, el) {
+  if (!el.contains(sender)) return;
+  b.send({ 'id': el.prop('id') }, 'countDeletedCollection');
+  el.remove();
+}
+
+export function countDeletedCollection(payload, _, el) {
+  if (payload.id === 'new') {
+    return;
+  }
+  el.value += `${payload.id};`
+}

data/static/js/bits/progressive-enhancement.js

@@ -1,5 +1,5 @@
 export const b = {
-  init: 'enhance',
+  init: 'enhance enhanceHide',
 }
 
 export function enhance(_, __, el) {
@@ -18,3 +18,11 @@ export function enhance(_, __, el) {
     }
   }
 }
+
+export function enhanceHide(_, __, el) {
+  if (el === undefined) {
+    return;
+  }
+
+  el.style.display = 'none';
+}

data/static/js/ui.js

@@ -70,8 +70,8 @@
           if (listItems.has(node)) return;
 
           const dragger = node.querySelector('.dragger');
-          dragger.addEventListener('dragstart', e => { sortableItemDragStart(e, item) });
-          dragger.addEventListener('dragend', e => { sortableItemDragEnd(e, item) });
+          dragger.addEventListener('dragstart', e => { sortableItemDragStart(e, node) });
+          dragger.addEventListener('dragend', e => { sortableItemDragEnd(e, node) });
           node.addEventListener('dragover', e => { sortableItemDragOver(e, node) });
           listItems.add(node);
           listItemsHandled.set(list, listItems);