working on directory creation

frontend/src/routes/files/Index.svelte

@@ -10,13 +10,43 @@
     let children = $state({});
     let new_dir = $state(null);
     let parent = $state(false);
-    let path = $state(router.path)
+    let form = $state(false);
+    let path = $state(null)
 
-    async function createDir(ev){
-        console.log(ev);
-        ev.stopPropagation();
+    let available = $derived.by(isAvailable);
+
+    function isAvailable(){
+        if (!new_dir) return false;
+        if (children){
+            if (children.dirs) {
+                for (let key of Object.values(children.dirs)){
+                    if (key == new_dir) return false;
+                }
+            }
+            if (children.files) {
+                for (let key of Object.values(children.files)){
+                    if (key == new_dir) return false;
+                }
+            }
+        }
+        return true;
+    }
+
+    async function create_dir(ev){
         ev.preventDefault();
-        alert(new_dir);
+        ev.stopPropagation();
+        const url = api('files/'+path+'/'+new_dir);
+        alert(url);
+        const res = await fetch(url,{
+            credentials: 'include',
+            method: 'PUT'
+        });
+        if (res.ok) {
+            yikes();
+            loadChildren(window.location.pathname)
+        } else {
+            error(res);
+        }
         return false;
     }
 
@@ -24,12 +54,14 @@
         p = p.substring(6);
         if (p == '') p = '/';
         children = { dirs : {}, files : {}, title : p};
+        path = p;
         console.log(p);
         if (p == '/'){
             children.dirs[`/user/${user.id}`]  = t('my_files');
             children.dirs['/project']  = t('projects')
             children.dirs['/company'] = t('companies');
             parent = false;
+            form = false;
         } else {
             const url = api(`files${p}`);
             const res = await fetch(url,{credentials:'include'});
@@ -40,6 +72,7 @@
                 if (json.title) children.title = json.title;
                 parent = p.substring(0, p.lastIndexOf("/"));
                 if (parent == '/user'||p=='/project'||p=='/company') parent = '/';
+                form = !(p=='/company'||p=='/project'||p=='/user');
                 yikes();
             } else {
                 error(res);
@@ -66,7 +99,7 @@
 </script>
 
 <h1>{t('files')} – {children?.title}</h1>
-
+parent: {parent}
 <ul>
 {#if parent}
     <li class="dir parent">
@@ -82,12 +115,12 @@
     </li>
 {/each}
 {/if}
-{#if parent}
+{#if form}
 <li class="action">
-    <form onsubmit={create_dir}>
+    <form onsubmit={create_dir} >
         <span class="symbol">+</span>
         <input type="text" bind:value={new_dir} />
-        <button type="submit" disabled={!new_dir}>{t('create_directory')}</button>
+        <button type="submit" disabled={!available} >{t('create_directory')}</button>
     </form>
 </li>
 {/if}
@@ -99,7 +132,7 @@
     </li>
 {/each}
 {/if}
-{#if parent}
+{#if form}
     <li class="action">
         <form>
             <span class="symbol">+</span>