tree view is now always sorted (on move, edit, and add)

src/js/bookmarkManager/treeView.js

@@ -56,7 +56,8 @@ document.addEventListener('DOMContentLoaded', () => {
             onDragover: allowDrop,
             onDragstart: drag
           });
-      parent.querySelector('ul').appendChild(newEl);
+
+      appendSorted(parent.querySelector('ul'), newEl);
 
       // note: i wrapped this in timeout because storage is updated AFTER bookmark is created
       setTimeout(() => {
@@ -82,6 +83,9 @@ document.addEventListener('DOMContentLoaded', () => {
   chrome.bookmarks.onChanged.addListener((id, changeInfo) => {
     if (changeInfo.title) {
       let elem = document.getElementById(id);
+      elem.setAttribute('name', changeInfo.title);
+      appendSorted(elem.parentElement, elem);
+
       if (elem.classList.contains('folder')) {
         elem = elem.querySelector('.folder-header') || elem;
       }
@@ -94,7 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const elem = document.getElementById(id);
     const parent = document.getElementById(moveInfo.parentId);
     if (parent.classList.contains('folder')) {
-      parent.querySelector('ul').appendChild(elem);
+      appendSorted(parent.querySelector('ul'), elem);
     }
     setTimeout(() => {
       if (elem.classList.contains('folder')) {
@@ -107,3 +111,31 @@ document.addEventListener('DOMContentLoaded', () => {
     }, 100);
   });
 });
+
+function appendSorted(parent, element) {
+  if (!parent) return console.warn('parent in appendSorted is undefined');
+  if (!element) return console.warn('element in appendSorted is undefined');
+  let appended = false;
+  const elemName = element.getAttribute('name').toLowerCase();
+  const isElemFolder = element.classList.contains('folder');
+  for (let child of parent.children) {
+    try {
+      const childName = child.getAttribute('name').toLowerCase();
+      const isChildFolder = child.classList.contains('folder');
+
+      if (
+        (isElemFolder && !isChildFolder) ||
+        (isElemFolder === isChildFolder && childName > elemName)
+      ) {
+        parent.insertBefore(element, child);
+        appended = true;
+        break;
+      }
+    } catch (err) {
+      console.warn(err);
+    }
+  }
+  if (!appended) {
+    parent.appendChild(element);
+  }
+}

src/js/components/Folder.js

@@ -17,7 +17,7 @@ const Folder = (props, ...children) => {
   const folderName = name || 'unknown';
   const iconColor = folderIconColor || defaultFolderIconColor;
   return div(
-    { className: 'folder', ...(id && { id }) },
+    { className: 'folder', name: folderName, ...(id && { id }) },
     header(
       {
         ...headerParams,