Overhauled post creation

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

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}