Use plain text viewer for plain text files

Fixes #29

svelte/src/user_buckets/UserBuckets.svelte

@@ -3,10 +3,14 @@ import { onMount } from "svelte";
 import Bucket from "./Bucket.svelte";
 import Spinner from "../util/Spinner.svelte";
 import { fs_get_buckets } from "../filesystem/FilesystemAPI.svelte";
+import NewBucket from "./NewBucket.svelte";
 
 let loading = true;
 let buckets = [];
 
+let new_bucket;
+let creating_bucket = false;
+
 const get_buckets = async () => {
 	try {
 		let resp = await fs_get_buckets();
@@ -29,10 +33,18 @@ onMount(get_buckets);
 	{/if}
 
 	<div class="limit_width">
-		<button style="float: right;">
-			<i class="icon">create_new_folder</i> New bucket
-		</button>
-		<br/>
+		<div class="toolbar" style="text-align: right;">
+			<button
+				class:button_highlight={creating_bucket}
+				on:click={() => {creating_bucket = !creating_bucket}}
+			>
+				<i class="icon">create_new_folder</i> New bucket
+			</button>
+		</div>
+		{#if creating_bucket}
+			<NewBucket bind:this={new_bucket}></NewBucket>
+		{/if}
+
 		<h2>Persistent buckets</h2>
 		<p>
 			These buckets don't expire, but have limited storage space and
@@ -47,6 +59,7 @@ onMount(get_buckets);
 
 		</p>
 	</div>
+
 </div>
 
 <style>