Overhauled post creation

Made the menu significantly better and made it possible to upload files directly from the post page

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
     :global(:root) {
         --dark-1: #1a1b1d;
         --dark-2: #22242b;
+        --dark-3: #5d606b;
 
         --light-1: #ffffff;
         
@@ -83,9 +84,6 @@
             <a href='/new_post'>
                 Create
             </a>
-            <a href='/new_file'>
-                Create file
-            </a>
         {:else}
             <a href='/account'>
                 Log in / Register

src/routes/new_file/+page.svelte

@@ -1,75 +0,0 @@
-<script>
-    import Area from '$lib/components/Area.svelte';
-
-    /** @type {import('./$types').ActionData} */
-    export let form;
-
-    let fileInput;
-    let files;
-    let preview;
-
-    function getBase64(image) {
-        const reader = new FileReader();
-        reader.readAsDataURL(image);
-        reader.onload = e => {
-            preview = e.target.result;
-            uploadFunction(e.target.result);
-        };
-    };
-
-    async function uploadFunction(imgBase64) {
-        const imgData = imgBase64.split(',').pop();
-
-        var fData = (new FormData());
-
-        fData.append('img',imgData);
-        fData.append('extension',fileInput.value.split('.').pop());
-
-        form = await fetch(`/api/fileCreate`, {
-            method: 'POST',
-            body: fData
-        }).then(x => x.json());
-    };
-</script>
-
-<style>
-    textarea {
-        width: 10rem;
-        height: 10rem;
-    }
-
-    .hidden {
-        display: none;
-    }
-
-    img {
-        max-width: 250px;
-    }
-</style>
-
-<Area>
-    <p slot="header">
-        Upload File
-    </p>
-    <form slot="main" action='/api/postCreate' method='POST' >
-        {#if preview}
-            <img src={preview} alt="Image preview"/>
-        {:else}
-            <img src='/icon_sanifae.svg' alt="Image preview"/>
-        {/if}
-        <input class="hidden" id="file-to-upload" type="file" bind:files bind:this={fileInput} on:change={() => getBase64(files[0])}/>
-        <p> 
-            <a href='#' class="upload-btn" on:click={ () => fileInput.click() }>Upload</a>
-        </p>
-    </form>
-    <p slot="footer">
-        {#if form?.success}
-            {#if form?.href}
-                <a href='{form?.href}'>{form?.success}</a>
-            {:else}
-                {form?.success}
-            {/if}
-        {/if}
-        Create an image for the world to see.
-    </p>
-</Area>

src/routes/new_post/+page.svelte

@@ -1,10 +1,30 @@
 <script>
     import Area from '$lib/components/Area.svelte';
+    import FileUpload from '$lib/components/FileUpload.svelte';
+    import PostBody from '$lib/components/PostBody.svelte';
+    import Button from '$lib/components/Button.svelte';
 
-    import { handleSubmit } from '$lib/util.js';
+    import { handleSubmit, formatPost } from '$lib/util.js';;
 
     /** @type {import('./$types').ActionData} */
     export let form;
+
+    let uploadForm = {};
+
+    let formContent = '';
+    let formBody;
+
+    let currentState = 'editor';
+
+    function setState(editor) {
+        currentState = editor;
+    }
+
+    $: if (uploadForm.href) {
+        currentState = 'editor';
+        formContent += `\nimg||${uploadForm.href.split('/').pop()}`;
+        uploadForm.href = false;
+    }
 </script>
 
 <style>
@@ -12,21 +32,42 @@
         width: 10rem;
         height: 10rem;
     }
+
+    .wrapper {
+        display: flex;
+        flex-direction: row;
+    }
 </style>
 
 <Area>
     <p slot="header">
         Create Post
     </p>
-    <form slot="main" action='/api/postCreate' method='POST' on:submit|preventDefault={async e => form = JSON.parse(await handleSubmit(e)) }>
-        <p>
-            <textarea name='content'></textarea>
-        </p>
-        <p>
-            <input formaction="?/create" type='submit' value='Post'>
-        </p>
-    </form>
+    <div class='main' slot='main'>
+        <form action='/api/postCreate' 
+            method='POST' 
+            on:submit|preventDefault={async e => form = JSON.parse(await handleSubmit(e)) }
+        >
+            <textarea name='content' style='display: none;' value={formContent}></textarea
+        </form>
+            <input formaction="?/create" type='submit' value='Post'  bind:this={formBody} style='display: none;'>
+            {#if currentState == 'editor'}
+                <p>
+                    <textarea name='content' bind:value={formContent}></textarea>
+                </p>
+            {:else if currentState == 'visual'}
+                <PostBody content={formContent} />
+            {:else}
+                <FileUpload bind:form={uploadForm} />
+            {/if}
+    </div>
     <span slot="footer">
+        <div class='wrapper'>
+            <Button clickFunc={() => { setState('editor')}}>Edit</Button>
+            <Button clickFunc={() => { setState('visual')}}>View</Button>
+            <Button clickFunc={() => { setState('upload')}}>Upload file</Button>
+            <Button clickFunc={() => formBody.click()}>Create</Button>
+        </div>
         <p>
             {#if form?.success}
                 {#if form?.href}

src/routes/post/[post]/+page.svelte

@@ -11,4 +11,5 @@
     content={data.content}
     upvotes={data.upvotes}
     downvotes={data.downvotes}
+    id={data.id}
 ></Post>