feature(web): Alphabetical sorting for lists. Fixes #315 (#351)

* [Feature Request] Alphabetical sorting for lists #315
sorting lists alphabetical

* [Feature Request] Alphabetical sorting for lists #315
added sorting also for sublists

1 files changed, 24 insertions, 20 deletions

diff --git a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
index da1b7408..77a67f5f 100644
--- a/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
+++ b/apps/web/components/dashboard/lists/CollapsibleBookmarkLists.tsx
@@ -53,16 +53,18 @@ function ListItem({
         open,
       })}
       <CollapsibleContent>
-        {node.children.map((l) => (
-          <ListItem
-            isOpenFunc={isOpenFunc}
-            key={l.item.id}
-            node={l}
-            render={render}
-            level={level + 1}
-            className={className}
-          />
-        ))}
+        {node.children
+          .sort((a, b) => a.item.name.localeCompare(b.item.name))
+          .map((l) => (
+            <ListItem
+              isOpenFunc={isOpenFunc}
+              key={l.item.id}
+              node={l}
+              render={render}
+              level={level + 1}
+              className={className}
+            />
+          ))}
       </CollapsibleContent>
     </Collapsible>
   );
@@ -96,16 +98,18 @@ export function CollapsibleBookmarkLists({
 
   return (
     <div>
-      {Object.values(root).map((l) => (
-        <ListItem
-          key={l.item.id}
-          node={l}
-          render={render}
-          level={0}
-          className={className}
-          isOpenFunc={isOpenFunc ?? (() => false)}
-        />
-      ))}
+      {Object.values(root)
+        .sort((a, b) => a.item.name.localeCompare(b.item.name))
+        .map((l) => (
+          <ListItem
+            key={l.item.id}
+            node={l}
+            render={render}
+            level={0}
+            className={className}
+            isOpenFunc={isOpenFunc ?? (() => false)}
+          />
+        ))}
     </div>
   );
 }