schemas as a tree replacing the isEntry behavior

front/js/svelte/layout/Navbar.svelte

@@ -1,13 +1,39 @@
 <script>
-    import NavbarMenu from "./NavbarMenu.svelte";
     import {getContext} from "svelte";
+    import Folder from "./Folder.svelte";
 
     export let schema;
     const channel = getContext("channel");
     const readableSchemas = getContext("readableSchemas");
 
-    const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
-    const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
+    function addToFolder(tree, folderPath, aSchema) {
+        let shoudlExpand = aSchema.name === schema?.name;
+        if (folderPath === "") {
+            tree.files.push(aSchema)
+            return tree
+        }
+        const folderNames = folderPath.split(".");
+        folderNames.forEach(folderName => {
+            let queriedFolder = tree.folders.find(folder => folder.name === folderName)
+            if (!queriedFolder) {
+                queriedFolder = {name: folderName, files: [], folders: [], shoudlExpand: shoudlExpand};
+            }
+            folderNames.shift()
+            let remainingFolderPath = folderNames.join(".");
+            queriedFolder =  addToFolder(queriedFolder, remainingFolderPath, aSchema)
+            tree.folders.push(queriedFolder);
+        })
+
+        return tree;
+    }
+
+    const schemaTree = readableSchemas.reduce((carry, schema) => {
+        carry = addToFolder(carry, schema.folder,schema)
+        return carry;
+    }, {name: "", files: [], folders: [], shoudlExpand:true});
+
+    // const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
+    // const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");
 
 </script>
 <div class="sidebar-top">
@@ -18,22 +44,25 @@
 <div class="sidebar">
 
 
-    <NavbarMenu
-            title="Content"
-            schemas={ readableSchemas.filter((sc) => sc.isEntry)}
-            schema={schema}
-            expanded={true}
-    />
+    <Folder folder={schemaTree} {schema}  ></Folder>
 
-    <NavbarMenu
-            title="Files"
-            schemas={ fileSchemas}
-            schema={schema}
-    />
 
-    <NavbarMenu
-            title="Other"
-            schemas={ otherSchemas}
-            schema={schema}
-    />
+    <!--    <NavbarMenu-->
+    <!--            title="Content"-->
+    <!--            schemas={ readableSchemas.filter((sc) => sc.isEntry)}-->
+    <!--            schema={schema}-->
+    <!--            expanded={true}-->
+    <!--    />-->
+
+    <!--    <NavbarMenu-->
+    <!--            title="Files"-->
+    <!--            schemas={ fileSchemas}-->
+    <!--            schema={schema}-->
+    <!--    />-->
+
+    <!--    <NavbarMenu-->
+    <!--            title="Other"-->
+    <!--            schemas={ otherSchemas}-->
+    <!--            schema={schema}-->
+    <!--    />-->
 </div>