From 75b6c304b2741cafa8d10e42501e55b1e0958e22 Mon Sep 17 00:00:00 2001
From: Wim Brand <wim@fornaxian.tech>
Date: Tue, 10 Sep 2024 15:22:26 +0200
Subject: [PATCH] Add upload button and create directory button to filesystem
 dashboard

---
 .../upload_widget/UploadWidget.svelte         |  2 +-
 .../src/user_home/dashboard/CardFSHome.svelte | 66 +++++++++++++++++--
 2 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/svelte/src/filesystem/upload_widget/UploadWidget.svelte b/svelte/src/filesystem/upload_widget/UploadWidget.svelte
index 6055240..ad039c3 100644
--- a/svelte/src/filesystem/upload_widget/UploadWidget.svelte
+++ b/svelte/src/filesystem/upload_widget/UploadWidget.svelte
@@ -173,7 +173,7 @@ const leave_confirmation = (e) => {
 	height: 0;
 }
 .upload_widget {
-	position: absolute;
+	position: fixed;
 	display: flex;
 	flex-direction: column;
 	width: 500px;
diff --git a/svelte/src/user_home/dashboard/CardFSHome.svelte b/svelte/src/user_home/dashboard/CardFSHome.svelte
index 59933d3..3d4ec03 100644
--- a/svelte/src/user_home/dashboard/CardFSHome.svelte
+++ b/svelte/src/user_home/dashboard/CardFSHome.svelte
@@ -1,14 +1,55 @@
 <script>
 import { onMount } from "svelte";
-import { FSNavigator } from "../../filesystem/FSNavigator"
-import { fs_encode_path, fs_node_icon } from "../../filesystem/FilesystemAPI";
+import { FSNavigator } from "src/filesystem/FSNavigator.ts"
+import { fs_encode_path, fs_node_icon } from "src/filesystem/FilesystemAPI.ts";
+import Button from "src/layout/Button.svelte";
+import CreateDirectory from "src/filesystem/filemanager/CreateDirectory.svelte";
+import UploadWidget from "src/filesystem/upload_widget/UploadWidget.svelte";
 
 const nav = new FSNavigator(false)
-onMount(() => {
-	nav.navigate("/me", false)
-})
+let upload_widget
+var show_hidden = false
+var creating_dir = false
+
+onMount(() => nav.navigate("/me", false))
 </script>
 
+<div class="toolbar">
+	{#if $nav.permissions.update}
+		<Button
+			click={() => upload_widget.pick_files()}
+			icon="cloud_upload"
+			title="Upload files to this directory"
+			label="Upload files"
+		/>
+		<Button
+			click={() => {creating_dir = !creating_dir}}
+			highlight={creating_dir}
+			icon="create_new_folder"
+			title="Create folder"
+			label="Create folder"
+		/>
+	{/if}
+
+	<div class="toolbar_spacer"></div>
+
+	<Button
+		click={() => {show_hidden = !show_hidden}}
+		highlight={show_hidden}
+		icon={show_hidden ? "visibility_off" : "visibility"}
+		title="Show hidden files and directories"
+	/>
+	<Button
+		click={() => nav.reload()}
+		icon="refresh"
+		title="Refresh directory listing"
+	/>
+</div>
+
+{#if creating_dir}
+	<CreateDirectory nav={nav} />
+{/if}
+
 <div class="directory">
 	{#each $nav.children as child (child.path)}
 		<a
@@ -32,12 +73,27 @@ onMount(() => {
 	{/each}
 </div>
 
+<UploadWidget nav={nav} bind:this={upload_widget} drop_upload />
+
 <style>
+.toolbar {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+}
+.toolbar > * { flex: 0 0 auto; }
+.toolbar_spacer {
+	flex: 1 1 auto;
+	text-align: center;
+}
 .directory {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	gap: 6px;
+	margin-top: 6px;
 }
 .node {
 	display: flex;