implement directory navigator in svelte

2020-11-11 00:00:54 +01:00
parent eb94d4190c
commit 253315a9b7
26 changed files with 6406 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,6 @@
 main
 pdwebconf.toml
 go.sum
+svelte/node_modules
+*.js.map
+*.css.map
--- a/res/include/script/form.vue
+++ b/res/include/script/form.vue
@@ -1,45 +0,0 @@
-Vue.component("vform", {
-	template: `
-		<h2>TEST FORM</h2>
-		<form class="highlight_dark" method="POST">
-			<table class="form">
-				<tbody>
-					<tr class="form">
-						<td>Old Password</td>
-						<td>
-							<input id="input_old_password" name="old_password" value="" type="password" autocomplete="current-password" class="form_input">
-						</td>
-					</tr>
-					<tr class="form"></tr>
-						<td>New Password</td>
-						<td>
-							<input id="input_new_password1" name="new_password1" value="" type="password" autocomplete="new-password" class="form_input">
-						</td>
-					</tr>
-					<tr class="form">
-						<td>New Password again</td>
-						<td>
-							<input id="input_new_password2" name="new_password2" value="" type="password" autocomplete="new-password" class="form_input">
-						</td>
-						</tr>
-					<tr class="form">
-						<td colspan="2">
-							we need you to repeat your password so you won't be locked out of your account if you make a typing error
-						</td>
-					</tr>
-					<tr class="form">
-						<td colspan="2" style="text-align: right;">
-							<input type="submit" value="Submit" class="button_highlight" style="float: right;">
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</form>
-	`
-})
-
-Vue.component("form_field", {
-	template: `
-
-	`
-})
--- a/res/include/script/user_settings.vue
+++ b/res/include/script/user_settings.vue
@@ -1,3 +0,0 @@
-const appTestForm = new Vue({
-	el: "#test_form"
-})
--- a/res/include/style/layout.css
+++ b/res/include/style/layout.css
@@ -401,7 +401,7 @@ select {
 	border: none;
 	margin: 3px;
 	background: linear-gradient(var(--input_color), var(--input_color_dark));
-	padding: .3em .4em .3em .4em;
+	padding: 4px 5px 4px 5px;
 	box-shadow: 2px 2px 6px -3px var(--shadow_color);
 	line-height: 1em;
 	overflow: hidden;
@@ -412,7 +412,7 @@ select {
 	outline: 0;
 	vertical-align: middle;
 	cursor: pointer;
-	transition: padding 0.25s, box-shadow 0.25s;
+	transition: padding 0.2s, box-shadow 0.2s;
 }
 button:hover,
 .button:hover,
@@ -439,7 +439,8 @@ input[type="color"]:active,
 select:active{
 	background: linear-gradient(var(--input_color_dark), var(--input_color));
 	box-shadow: inset 4px 4px 8px var(--shadow_color);
-	padding: .5em .2em .1em .6em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
+	/* Exactly 4px offset compared to the inactive padding to give a depth effect */
+	padding: 8px 1px 0px 9px;
 }
 .button_full_width      {width: calc(100% - 6px);}
 .button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
--- a/res/include/style/modal.css
+++ b/res/include/style/modal.css
@@ -31,7 +31,7 @@
 	flex-shrink: 0;
 	display: flex;
 	flex-direction: row;
-	padding: 4px;
+	padding: 1px;
 }

 .modal_title {
--- a/res/static/svelte/filesystem.css
+++ b/res/static/svelte/filesystem.css
@@ -0,0 +1,7 @@
+.file_viewer.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;display:flex;flex-direction:column;top:0;right:0;bottom:0;left:0;overflow:hidden}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;text-align:left;z-index:10;box-shadow:none}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;margin-left:6px;margin-right:6px;display:inline}.file_viewer.svelte-1vxdz33>.file_viewer_headerbar.svelte-1vxdz33>.file_viewer_headerbar_title.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;display:flex;flex-direction:column;overflow:hidden;line-height:1.2em;white-space:nowrap;text-overflow:ellipsis;justify-content:center}.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pixeldrain"}@media(max-width: 600px){.button_home.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33::after{content:"pd"}}.file_viewer.svelte-1vxdz33>.list_navigator.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:0;flex-shrink:0;position:relative;display:none;width:100%;background-color:var(--layer_1_color);text-align:center;line-height:1em;overflow-x:auto;overflow-y:hidden;z-index:50;white-space:nowrap}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{flex-grow:1;flex-shrink:1;position:relative;display:inline-block;width:auto;height:auto;margin:0;z-index:9}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;right:0;top:0;bottom:0;display:inline-block;min-height:100px;min-width:100px;text-align:center;vertical-align:middle;transition:left 0.5s;overflow:hidden;box-shadow:inset 2px 2px 8px var(--shadow_color)}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.svelte-1vxdz33>.center.svelte-1vxdz33{position:relative;display:block;margin:auto;max-width:100%;max-height:100%;top:50%;transform:translateY(-50%)}.toolbar.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;width:8em;z-index:49;overflow:hidden;float:left;background-color:var(--layer_1_color);left:-8em;bottom:0;top:0;padding:0;text-align:left;transition:left 0.5s}.toolbar.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{left:0}.file_viewer.svelte-1vxdz33>.file_viewer_window.svelte-1vxdz33>.file_viewer_file_preview.toolbar_visible.svelte-1vxdz33.svelte-1vxdz33{left:8em}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;bottom:0;right:-30px;overflow-y:scroll;overflow-x:hidden}.toolbar.svelte-1vxdz33>div.svelte-1vxdz33>div.svelte-1vxdz33.svelte-1vxdz33{position:absolute;left:0;top:0;width:8em;height:auto;text-align:center}.toolbar_button.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left}.toolbar_label.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:left;padding-left:10px;font-size:0.8em;line-height:0.7em;margin-top:0.5em}.toolbar_statistic.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33.svelte-1vxdz33{text-align:center}
+.sharebar.svelte-gnq1s2{position:absolute;width:7em;left:-8em;bottom:0;top:0;overflow-y:scroll;overflow-x:hidden;float:left;background-color:var(--layer_1_color);box-shadow:inset 1px 1px var(--layer_1_shadow) var(--shadow_color);text-align:center;z-index:48;overflow:hidden;transition:left 0.5s}.visible.svelte-gnq1s2{left:8em}
+.container.svelte-1afjvoj.svelte-1afjvoj{height:100%;width:100%;padding:0;overflow-y:auto;text-align:center}.toolbar.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 0 0;box-sizing:border-box}.directory.svelte-1afjvoj.svelte-1afjvoj{position:relative;display:inline-block;max-width:800px;width:100%;margin:20px 0 40px 0;text-align:left;background-color:var(--layer_2_color);box-shadow:1px 1px var(--layer_2_shadow) var(--shadow_color);box-sizing:border-box}.node.svelte-1afjvoj.svelte-1afjvoj{position:relative;height:40px;overflow:hidden;margin:4px;padding:4px;box-sizing:border-box;cursor:pointer}.node.svelte-1afjvoj.svelte-1afjvoj:hover:not(.node_selected){background-color:var(--input_color_dark);color:var(--input_text_color);text-decoration:none}.node.svelte-1afjvoj>div.svelte-1afjvoj{height:100%;overflow:hidden;padding:0;line-height:32px;box-sizing:border-box;display:inline-block;text-overflow:ellipsis;white-space:nowrap}.node.svelte-1afjvoj>img.svelte-1afjvoj{max-height:100%;margin-right:6px;width:auto;min-width:auto;float:left;display:block}
+.background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px}
+svg.svelte-1pco739{color:var(--highlight_color);fill:currentColor}
+
+/*# sourceMappingURL=filesystem.css.map */
--- a/res/static/svelte/filesystem.js
+++ b/res/static/svelte/filesystem.js
--- a/res/static/svelte/modal.css
+++ b/res/static/svelte/modal.css
@@ -0,0 +1,3 @@
+.background.svelte-tirhyp{position:fixed;text-align:center;top:0;right:0;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5)}.window.svelte-tirhyp{position:absolute;z-index:inherit;display:flex;flex-direction:column;background-color:var(--layer_2_color);max-height:100%;max-width:100%;margin:0 auto;top:20%;left:50%;transform:translate(-50%, -20%);padding:0;box-sizing:border-box;text-align:left;box-shadow:var(--shadow_color) 0px 0px 50px}.header.svelte-tirhyp{flex-grow:0;flex-shrink:0;display:flex;flex-direction:row;padding:1px}.title.svelte-tirhyp{flex-grow:1;flex-shrink:1;display:flex;flex-direction:row;align-items:center;justify-content:center;font-size:1.2em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.button_close.svelte-tirhyp{flex-grow:0;flex-shrink:0}.body.svelte-tirhyp{flex-grow:1;flex-shrink:1;overflow:auto;padding:10px}
+
+/*# sourceMappingURL=modal.css.map */
--- a/res/static/svelte/modal.js
+++ b/res/static/svelte/modal.js
--- a/res/template/filesystem.html
+++ b/res/template/filesystem.html
@@ -19,6 +19,9 @@
 					{{ range $node := .Other.Path }}
 						/ <a href="{{ $node.HREF }}">{{ $node.Name }}</a>
 					{{ end }}
+					{{ if ne .Other.Base.Name "" }}
+						/ {{ .Other.Base.Name }}
+					{{ end }}
 				</h2>

 				{{ range $node := .Other.Children }}
--- a/res/template/filesystem_svelte.html
+++ b/res/template/filesystem_svelte.html
@@ -0,0 +1,33 @@
+{{define "filesystem_svelte"}}
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>{{.Title}}</title>
+		<meta charset="UTF-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+		{{template "user_style" .}}
+
+		<link rel="icon" sizes="32x32" href="/res/img/pixeldrain_32.png" />
+		<link rel="icon" sizes="128x128" href="/res/img/pixeldrain_128.png" />
+		<link rel="icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
+		<link rel="icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
+		<link rel="icon" sizes="192x192" href="/res/img/pixeldrain_192.png" />
+		<link rel="icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
+		<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_256.png" />
+		<link rel="apple-touch-icon" sizes="152x152" href="/res/img/pixeldrain_152.png" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/res/img/pixeldrain_180.png" />
+		<link rel="shortcut icon" sizes="196x196" href="/res/img/pixeldrain_196.png" />
+		<meta name="theme-color" content="#75AD38"/>
+
+		{{.OGData}}
+		<script>
+			const initialNode = {{.Other}};
+			const apiEndpoint = '{{.APIEndpoint}}';
+		</script>
+
+		<link rel='stylesheet' href='/res/svelte/filesystem.css'>
+		<script defer src='/res/svelte/filesystem.js'></script>
+	</head>
+	<body></body>
+</html>
+{{end}}
--- a/svelte/package-lock.json
+++ b/svelte/package-lock.json
@@ -0,0 +1,769 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+      "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+      "dev": true,
+      "requires": {
+        "@babel/highlight": "^7.10.4"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
+      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
+      "dev": true
+    },
+    "@babel/highlight": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+      "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.10.4",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@polka/url": {
+      "version": "1.0.0-next.11",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.11.tgz",
+      "integrity": "sha512-3NsZsJIA/22P3QUyrEDNA2D133H4j224twJrdipXN38dpnIOzAbUDtOwkcJ5pXmn75w7LSQDjA4tO9dm1XlqlA=="
+    },
+    "@rollup/plugin-commonjs": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-14.0.0.tgz",
+      "integrity": "sha512-+PSmD9ePwTAeU106i9FRdc+Zb3XUWyW26mo5Atr2mk82hor8+nPwkztEjFo8/B1fJKfaQDg9aM2bzQkjhi7zOw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8",
+        "commondir": "^1.0.1",
+        "estree-walker": "^1.0.1",
+        "glob": "^7.1.2",
+        "is-reference": "^1.1.2",
+        "magic-string": "^0.25.2",
+        "resolve": "^1.11.0"
+      }
+    },
+    "@rollup/plugin-node-resolve": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-8.4.0.tgz",
+      "integrity": "sha512-LFqKdRLn0ShtQyf6SBYO69bGE1upV6wUhBX0vFOUnLAyzx5cwp8svA0eHUnu8+YU57XOkrMtfG63QOpQx25pHQ==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.1.0",
+        "@types/resolve": "1.17.1",
+        "builtin-modules": "^3.1.0",
+        "deep-freeze": "^0.0.1",
+        "deepmerge": "^4.2.2",
+        "is-module": "^1.0.0",
+        "resolve": "^1.17.0"
+      }
+    },
+    "@rollup/pluginutils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "0.0.39",
+        "estree-walker": "^1.0.1",
+        "picomatch": "^2.2.2"
+      }
+    },
+    "@types/estree": {
+      "version": "0.0.39",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
+      "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
+      "dev": true
+    },
+    "@types/node": {
+      "version": "14.14.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.7.tgz",
+      "integrity": "sha512-Zw1vhUSQZYw+7u5dAwNbIA9TuTotpzY/OF7sJM9FqPOF3SPjKnxrjoTktXDZgUjybf4cWVBP7O8wvKdSaGHweg==",
+      "dev": true
+    },
+    "@types/resolve": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
+      "integrity": "sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
+      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "dev": true,
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
+      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==",
+      "dev": true
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
+      "requires": {
+        "fill-range": "^7.0.1"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "dev": true
+    },
+    "builtin-modules": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz",
+      "integrity": "sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==",
+      "dev": true
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
+      "integrity": "sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==",
+      "dev": true,
+      "requires": {
+        "anymatch": "~3.1.1",
+        "braces": "~3.0.2",
+        "fsevents": "~2.1.2",
+        "glob-parent": "~5.1.0",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.5.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
+      "dev": true
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "console-clear": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/console-clear/-/console-clear-1.1.1.tgz",
+      "integrity": "sha512-pMD+MVR538ipqkG5JXeOEbKWS5um1H4LUUccUQG68qpeqBYbzYy79Gh55jkd2TtPdRfUaLWdv6LPP//5Zt0aPQ=="
+    },
+    "deep-freeze": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/deep-freeze/-/deep-freeze-0.0.1.tgz",
+      "integrity": "sha1-OgsABd4YZygZ39OM0x+RF5yJPoQ=",
+      "dev": true
+    },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "estree-walker": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz",
+      "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
+      "requires": {
+        "to-regex-range": "^5.0.1"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
+      "dev": true,
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "get-port": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
+      "integrity": "sha1-3Xzn3hh8Bsi/NTeWrHHgmfCYDrw="
+    },
+    "glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dev": true,
+      "requires": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "dev": true,
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz",
+      "integrity": "sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
+      "integrity": "sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=",
+      "dev": true
+    },
+    "is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
+    },
+    "is-reference": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
+      "integrity": "sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
+    "jest-worker": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-26.6.2.tgz",
+      "integrity": "sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^7.0.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "kleur": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
+      "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="
+    },
+    "livereload": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/livereload/-/livereload-0.9.1.tgz",
+      "integrity": "sha512-9g7sua11kkyZNo2hLRCG3LuZZwqexoyEyecSlV8cAsfAVVCZqLzVir6XDqmH0r+Vzgnd5LrdHDMyjtFnJQLAYw==",
+      "dev": true,
+      "requires": {
+        "chokidar": "^3.3.0",
+        "livereload-js": "^3.1.0",
+        "opts": ">= 1.2.0",
+        "ws": "^6.2.1"
+      }
+    },
+    "livereload-js": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/livereload-js/-/livereload-js-3.3.1.tgz",
+      "integrity": "sha512-CBu1gTEfzVhlOK1WASKAAJ9Qx1fHECTq0SUB67sfxwQssopTyvzqTlgl+c0h9pZ6V+Fzd2rc510ppuNusg9teQ==",
+      "dev": true
+    },
+    "local-access": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz",
+      "integrity": "sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA=="
+    },
+    "magic-string": {
+      "version": "0.25.7",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
+      "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
+      "requires": {
+        "sourcemap-codec": "^1.4.4"
+      }
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "mime": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
+      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "mri": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
+      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ=="
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "opts": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opts/-/opts-2.0.2.tgz",
+      "integrity": "sha512-k41FwbcLnlgnFh69f4qdUfvDQ+5vaSDnVPFI/y5XuhKRq97EnVVneO9F1ESVCdiVu4fCS2L8usX3mU331hB7pg==",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
+    },
+    "picomatch": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
+      "dev": true
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "readdirp": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
+      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "dev": true,
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "require-relative": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
+      "integrity": "sha1-eZlTn8ngR6N5KPoZb44VY9q9Nt4=",
+      "dev": true
+    },
+    "resolve": {
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
+      "integrity": "sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==",
+      "dev": true,
+      "requires": {
+        "is-core-module": "^2.0.0",
+        "path-parse": "^1.0.6"
+      }
+    },
+    "rollup": {
+      "version": "2.33.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.33.1.tgz",
+      "integrity": "sha512-uY4O/IoL9oNW8MMcbA5hcOaz6tZTMIh7qJHx/tzIJm+n1wLoY38BLn6fuy7DhR57oNFLMbDQtDeJoFURt5933w==",
+      "dev": true,
+      "requires": {
+        "fsevents": "~2.1.2"
+      }
+    },
+    "rollup-plugin-livereload": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-livereload/-/rollup-plugin-livereload-2.0.0.tgz",
+      "integrity": "sha512-oC/8NqumGYuphkqrfszOHUUIwzKsaHBICw6QRwT5uD07gvePTS+HW+GFwu6f9K8W02CUuTvtIM9AWJrbj4wE1A==",
+      "dev": true,
+      "requires": {
+        "livereload": "^0.9.1"
+      }
+    },
+    "rollup-plugin-svelte": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-6.1.1.tgz",
+      "integrity": "sha512-ijnm0pH1ScrY4uxwaNXBpNVejVzpL2769hIEbAlnqNUWZrffLspu5/k9/l/Wsj3NrEHLQ6wCKGagVJonyfN7ow==",
+      "dev": true,
+      "requires": {
+        "require-relative": "^0.8.7",
+        "rollup-pluginutils": "^2.8.2",
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "rollup-plugin-terser": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz",
+      "integrity": "sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "jest-worker": "^26.2.1",
+        "serialize-javascript": "^4.0.0",
+        "terser": "^5.0.0"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz",
+      "integrity": "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==",
+      "dev": true,
+      "requires": {
+        "estree-walker": "^0.6.1"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        }
+      }
+    },
+    "sade": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sade/-/sade-1.7.4.tgz",
+      "integrity": "sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==",
+      "requires": {
+        "mri": "^1.1.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true
+    },
+    "semiver": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/semiver/-/semiver-1.1.0.tgz",
+      "integrity": "sha512-QNI2ChmuioGC1/xjyYwyZYADILWyW6AmS1UH6gDj/SFUUUS4MBAWs/7mxnkRPc/F4iHezDP+O8t0dO8WHiEOdg=="
+    },
+    "serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dev": true,
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "sirv": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.7.tgz",
+      "integrity": "sha512-QMT2OTD3CTr8de9VByPmvSEeyt6k8/Cxg0J2kQJ5HNhIWfhFg9ypcIWWzez9rPWnGj+WtJ7AZD/MdT/vdilV/A==",
+      "requires": {
+        "@polka/url": "^1.0.0-next.9",
+        "mime": "^2.3.1",
+        "totalist": "^1.0.0"
+      }
+    },
+    "sirv-cli": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/sirv-cli/-/sirv-cli-1.0.8.tgz",
+      "integrity": "sha512-bJI+kkzQvMKfAOfgLzv09kWsdymLm39LgKmGjacB19GHIAQLCvXXg8e8HzcofTjDZlA8zVv4dQjU9SWkNzkJhw==",
+      "requires": {
+        "console-clear": "^1.1.0",
+        "get-port": "^3.2.0",
+        "kleur": "^3.0.0",
+        "local-access": "^1.0.1",
+        "sade": "^1.6.0",
+        "semiver": "^1.0.0",
+        "sirv": "^1.0.7",
+        "tinydate": "^1.0.0"
+      }
+    },
+    "source-map": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "dev": true
+    },
+    "source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dev": true,
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "svelte": {
+      "version": "3.29.6",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.29.6.tgz",
+      "integrity": "sha512-VIQMHPPEg/d4BQTy+WX1hHi/0EzjwjgjBK+DF0kLFy5hBsDKHQemd7xrCO1Spz57sT0xUb/YgRwFoozQrK0cmQ==",
+      "dev": true
+    },
+    "terser": {
+      "version": "5.3.8",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.3.8.tgz",
+      "integrity": "sha512-zVotuHoIfnYjtlurOouTazciEfL7V38QMAOhGqpXDEg6yT13cF4+fEP9b0rrCEQTn+tT46uxgFsTZzhygk+CzQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.7.2",
+        "source-map-support": "~0.5.19"
+      }
+    },
+    "tinydate": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
+      "integrity": "sha512-7cR8rLy2QhYHpsBDBVYnnWXm8uRTr38RoZakFSW7Bs7PzfMPNZthuMLkwqZv7MTu8lhQ91cOFYS5a7iFj2oR3w=="
+    },
+    "to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "requires": {
+        "is-number": "^7.0.0"
+      }
+    },
+    "totalist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
+      "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "ws": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
+      "integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
+      "dev": true,
+      "requires": {
+        "async-limiter": "~1.0.0"
+      }
+    }
+  }
+}
--- a/svelte/package.json
+++ b/svelte/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "svelte-app",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^14.0.0",
+    "@rollup/plugin-node-resolve": "^8.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^6.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "svelte": "^3.0.0"
+  },
+  "dependencies": {
+    "sirv-cli": "^1.0.0"
+  }
+}
--- a/svelte/rollup.config.js
+++ b/svelte/rollup.config.js
@@ -0,0 +1,83 @@
+import svelte from 'rollup-plugin-svelte';
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+	let server;
+
+	function toExit() {
+		if (server) server.kill(0);
+	}
+
+	return {
+		writeBundle() {
+			if (server) return;
+			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+				stdio: ['ignore', 'inherit', 'inherit'],
+				shell: true
+			});
+
+			process.on('SIGTERM', toExit);
+			process.on('exit', toExit);
+		}
+	};
+}
+
+const builddir = "../res/static/svelte"
+export default [
+	"filesystem",
+	"modal",
+].map((name, index) => ({
+	input: `src/${name}.js`,
+	output: {
+		sourcemap: true,
+		format: 'iife',
+		name: 'app',
+		// file: `public/build/${name}.js`
+		file: `${builddir}/${name}.js`
+	},
+	plugins: [
+		svelte({
+			// enable run-time checks when not in production
+			dev: !production,
+			// we'll extract any component CSS out into
+			// a separate file - better for performance
+			css: css => {
+				css.write(`${name}.css`);
+			}
+		}),
+
+		// If you have external dependencies installed from
+		// npm, you'll most likely need these plugins. In
+		// some cases you'll need additional configuration -
+		// consult the documentation for details:
+		// https://github.com/rollup/plugins/tree/master/packages/commonjs
+		resolve({
+			browser: true,
+			dedupe: ['svelte']
+		}),
+		commonjs(),
+
+		// In dev mode, call `npm run start` once
+		// the bundle has been generated
+		// !production && serve(),
+
+		// Watch the `public` directory and refresh the
+		// browser on changes when not in production
+		!production && livereload({
+			watch: `${builddir}/${name}.*`,
+			port: 5000 + index,
+		}),
+
+		// If we're building for production (npm run build
+		// instead of npm run dev), minify
+		production && terser()
+	],
+	watch: {
+		clearScreen: false
+	}
+}));
--- a/svelte/src/filesystem.js
+++ b/svelte/src/filesystem.js
@@ -0,0 +1,8 @@
+import App from './filesystem/Filesystem.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {}
+});
+
+export default app;
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -0,0 +1,322 @@
+<script>
+import { onMount } from 'svelte';
+import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
+import Sharebar from './Sharebar.svelte'
+import Spinner from '../util/Spinner.svelte'
+import Modal from '../util/Modal.svelte'
+import Directory from './viewers/Directory.svelte';
+
+let file = {
+	views: 6,
+	downloads: 12,
+	size: 24,
+}
+
+// Elements
+let file_viewer
+let header_bar
+
+let toolbar_visible = (window.innerWidth > 800)
+let toolbar_toggle = () => {
+	toolbar_visible = !toolbar_visible
+	if (!toolbar_visible) {
+		sharebar.setVisible(false)
+	}
+}
+
+let sharebar
+let sharebar_visible = false
+let details;
+let details_visible = false
+let preview
+
+// State
+let currentNode = initialNode
+let loading = true
+let viewer_type = ""
+
+const download = () => {
+	file.downloads++
+}
+
+const navigate = (path) => {
+	fetch(
+		apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
+	).then(resp => resp.json()).then(resp => {
+		window.history.pushState(
+			"page2",
+			resp.base.name+" in "+resp.bucket.name+" ~ pixeldrain",
+			"/d/"+resp.bucket.id+resp.base.path,
+		)
+		currentNode = resp
+		openPath()
+	}).catch(err => {
+		loading = false
+		alert(err)
+	})
+}
+
+const openPath = () => {
+	console.log(currentNode.base.type)
+	if (currentNode.base.type === "bucket" || currentNode.base.type === "dir") {
+		viewer_type = "dir"
+	}
+	loading = false
+}
+
+const keydown = e => {
+	switch (e.key) {
+		case 'Escape':
+			hide();
+			return;
+		case 'i':
+			details_window.toggle()
+	}
+	console.log(e.key)
+};
+
+onMount(openPath)
+</script>
+
+<svelte:window on:keydown={keydown}/>
+
+<div bind:this={file_viewer} class="file_viewer">
+	<div bind:this={header_bar} class="file_viewer_headerbar highlight_1">
+		<button on:click={toolbar_toggle} class="button_toggle_toolbar" class:button_highlight={toolbar_visible}>
+			<i class="icon">menu</i>
+		</button>
+		<a href="/" id="button_home" class="button button_home"><i class="icon">home</i></a>
+		<div class="file_viewer_headerbar_title">
+			<div>
+				{#if currentNode.parents.length > 0}
+					{currentNode.parents[currentNode.parents.length-1].path}
+				{/if}
+				/{currentNode.base.name}
+			</div>
+		</div>
+	</div>
+	<div class="list_navigator"></div>
+	<div class="file_viewer_window">
+		<div class="toolbar" class:toolbar_visible><div><div>
+			<div class="toolbar_label">Views</div>
+			<div class="toolbar_statistic">{formatThousands(file.views)}</div>
+			<div class="toolbar_label">Downloads</div>
+			<div class="toolbar_statistic">{formatThousands(file.downloads)}</div>
+			<div class="toolbar_label">Size</div>
+			<div class="toolbar_statistic">{formatDataVolume(file.size)}</div>
+
+			<button on:click={download} class="toolbar_button button_full_width">
+				<i class="icon">save</i> Download
+			</button>
+			<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
+				<i class="icon">save</i> DL all files
+			</button>
+			<button id="btn_copy" class="toolbar_button button_full_width">
+				<i class="icon">content_copy</i> <u>C</u>opy Link
+			</button>
+			<button on:click={sharebar.toggle} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
+				<i class="icon">share</i> Share
+			</button>
+			<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
+				<i class="icon">help</i> Deta<u>i</u>ls
+			</button>
+			<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
+				<i class="icon">edit</i> <u>E</u>dit
+			</button>
+		</div></div></div>
+		<Sharebar bind:this={sharebar}></Sharebar>
+
+		<div bind:this={preview} class="file_viewer_file_preview" class:toolbar_visible>
+			{#if loading}
+			<div class="center" style="width: 128px; height: 128px;">
+				<Spinner></Spinner>
+			</div>
+			{:else if viewer_type === "dir"}
+			<Directory bind:this={preview} node={currentNode} on:navigate={e => {navigate(e.detail)}}></Directory>
+			{/if}
+		</div>
+	</div>
+
+	<!-- This frame will load the download URL when a download button is pressed -->
+	<iframe title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"></iframe>
+
+	<Modal bind:this={details} title="Details" width="600px">
+		<table style="min-width: 100%;">
+			<tr><td colspan="2"><h3>Node details</h3></td></tr>
+			<tr><td>Name</td><td>{currentNode.base.name}</td></tr>
+			<tr><td>Path</td><td>{currentNode.base.path}</td></tr>
+			<tr><td>Type</td><td>{currentNode.base.type}</td></tr>
+			<tr><td>Date created</td><td>{formatDate(currentNode.base.date_created, true, true, true)}</td></tr>
+			<tr><td>Date modified</td><td>{formatDate(currentNode.base.date_modified, true, true, true)}</td></tr>
+			{#if currentNode.base.type === "file"}
+			<tr><td>File type</td><td>{currentNode.base.file_type}</td></tr>
+			<tr><td>File size</td><td>{formatDataVolume(currentNode.base.file_size)}</td></tr>
+			{/if}
+			<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
+			<tr><td>ID</td><td>{currentNode.bucket.id}</td></tr>
+			<tr><td>Name</td><td>{currentNode.bucket.name}</td></tr>
+			<tr><td>Date created</td><td>{formatDate(currentNode.bucket.date_created, true, true, true)}</td></tr>
+			<tr><td>Date modified</td><td>{formatDate(currentNode.bucket.date_modified, true, true, true)}</td></tr>
+		</table>
+	</Modal>
+</div>
+
+<style>
+/* Viewer container */
+.file_viewer {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+}
+
+/* Headerbar (row 1) */
+.file_viewer > .file_viewer_headerbar {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+	text-align: left;
+	z-index: 10;
+	box-shadow: none;
+}
+
+/* Headerbar components */
+.file_viewer > .file_viewer_headerbar > * {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-left: 6px;
+	margin-right: 6px;
+	display: inline;
+}
+.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
+	flex-grow: 1;
+	flex-shrink: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	justify-content: center;
+}
+.button_home::after {
+	content: "pixeldrain";
+}
+@media (max-width: 600px) {
+	.button_home::after {
+		content: "pd";
+	}
+}
+/* List Navigator (row 2) */
+.file_viewer > .list_navigator {
+	flex-grow: 0;
+	flex-shrink: 0;
+	position: relative;
+	display: none; /* Becomes visible if the page is a list */
+	width: 100%;
+	background-color: var(--layer_1_color);
+	text-align: center;
+	line-height: 1em;
+	overflow-x: auto;
+	overflow-y: hidden;
+	z-index: 50;
+	white-space: nowrap;
+}
+/* .file_viewer > .list_navigator > .list_item{
+	height: 2.6em !important;
+	width: 220px !important;
+} */
+
+/* File preview area (row 3) */
+.file_viewer > .file_viewer_window {
+	flex-grow: 1;
+	flex-shrink: 1;
+	position: relative;
+	display: inline-block;
+	width: auto;
+	height: auto;
+	margin: 0;
+	z-index: 9;
+}
+.file_viewer > .file_viewer_window > .file_viewer_file_preview {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: inline-block;
+	min-height: 100px;
+	min-width: 100px;
+	text-align: center;
+	vertical-align: middle;
+	transition: left 0.5s;
+	overflow: hidden;
+	box-shadow: inset 2px 2px 8px var(--shadow_color);
+}
+
+.file_viewer > .file_viewer_window > .file_viewer_file_preview > .center{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+}
+
+/* Toolbar */
+.toolbar {
+	position: absolute;
+	width: 8em;
+	z-index: 49;
+	overflow: hidden;
+	float: left;
+	background-color: var(--layer_1_color);
+	left: -8em;
+	bottom: 0;
+	top: 0;
+	padding: 0;
+	text-align: left;
+	transition: left 0.5s;
+}
+.toolbar.toolbar_visible { left: 0; }
+.file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }
+
+/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
+.toolbar > div {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: -30px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+.toolbar > div > div {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 8em;
+	height: auto;
+	text-align: center;
+}
+.toolbar_button{
+	text-align: left;
+}
+.toolbar_label {
+	text-align: left;
+	padding-left: 10px;
+	font-size: 0.8em;
+	line-height: 0.7em;
+	margin-top: 0.5em;
+}
+.toolbar_statistic {
+	text-align: center;
+}
+
+</style>
--- a/svelte/src/filesystem/Sharebar.svelte
+++ b/svelte/src/filesystem/Sharebar.svelte
@@ -0,0 +1,45 @@
+<script>
+let sharebar
+export let visible = false
+export const setVisible = (v) => { visible = v }
+export const toggle = () => { setVisible(!visible) }
+</script>
+
+<div bind:this={sharebar} class="sharebar" class:visible>
+	Share on:<br/>
+	<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
+		E-Mail
+	</button>
+	<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
+		Reddit
+	</button>
+	<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
+		Twitter
+	</button>
+	<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
+		Facebook
+	</button>
+	<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
+		Tumblr
+	</button>
+</div>
+
+<style>
+.sharebar{
+	position: absolute;
+	width: 7em;
+	left: -8em;
+	bottom: 0;
+	top: 0;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	float: left;
+	background-color: var(--layer_1_color);
+	box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
+	text-align: center;
+	z-index: 48;
+	overflow: hidden;
+	transition: left 0.5s;
+}
+.visible { left: 8em; }
+</style>
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -0,0 +1,112 @@
+<script>
+import { createEventDispatcher } from 'svelte'
+import { formatDataVolume, formatThousands } from '../util/Formatting.svelte'
+let dispatch = createEventDispatcher()
+
+let toolbar
+export let file
+export let sharebar
+export let visible = false
+
+
+export const setVisible = (v) => {
+	visible = v
+	if (!visible) {
+		sharebar.setVisible(false)
+	}
+}
+export const toggle = () => { setVisible(!visible) }
+</script>
+
+<div bind:this={toolbar} class="toolbar" class:visible><div><div>
+	<div class="label">Views</div>
+	<div class="statistic">{formatThousands(file.views)}</div>
+	<div class="label">Downloads</div>
+	<div class="statistic">{formatThousands(file.downloads)}</div>
+	<div class="label">Size</div>
+	<div class="statistic">{formatDataVolume(file.size)}</div>
+
+	<button on:click={()=>{dispatch("download")}} class="toolbar_button button_full_width">
+		<i class="icon">save</i>
+		<span>Download</span>
+	</button>
+	<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
+		<i class="icon">save</i>
+		<span>DL all files</span>
+	</button>
+	<button id="btn_copy" class="toolbar_button button_full_width">
+		<i class="icon">content_copy</i>
+		<span><u>C</u>opy Link</span>
+	</button>
+	<button on:click={sharebar.toggle} class="toolbar_button button_full_width">
+		<i class="icon">share</i>
+		<span>Share</span>
+	</button>
+	<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;">
+		<i class="icon">shuffle</i>
+		<span>Shuffle &#x2610;</span>
+	</button>
+	<button on:click={()=>{dispatch("details")}} class="toolbar_button button_full_width">
+		<i class="icon">help</i>
+		<span>Deta<u>i</u>ls</span>
+	</button>
+	<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
+		<i class="icon">edit</i>
+		<span><u>E</u>dit</span>
+	</button>
+</div></div></div>
+
+<style>
+	.toolbar {
+		position: absolute;
+		width: 8em;
+		z-index: 49;
+		overflow: hidden;
+		float: left;
+		background-color: var(--layer_1_color);
+		left: -9em;
+		bottom: 0;
+		top: 0;
+		padding: 0;
+		text-align: left;
+		transition: left 0.5s;
+	}
+	.visible { left: 0; }
+
+	/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
+	.toolbar > div {
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		right: -30px;
+		overflow-y: scroll;
+		overflow-x: hidden;
+	}
+	.toolbar > div > div {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 8em;
+		height: auto;
+		text-align: center;
+	}
+
+	.toolbar_button{
+		text-align: left;
+	}
+	.toolbar_button > span {
+		vertical-align: middle;
+	}
+
+	.label {
+		text-align: left;
+		padding-left: 10px;
+		font-size: 0.8em;
+		line-height: 0.7em;
+		margin-top: 0.5em;
+	}
+	.statistic {
+		text-align: center;
+	}
+</style>
--- a/svelte/src/filesystem/viewers/Directory.svelte
+++ b/svelte/src/filesystem/viewers/Directory.svelte
@@ -0,0 +1,127 @@
+<script>
+import { createEventDispatcher } from 'svelte'
+let dispatch = createEventDispatcher()
+
+export let node;
+
+const navigate_to = (path) => {
+	dispatch("navigate", path)
+}
+const navigate_up = () => {
+	if (node.parents.length !== 0) {
+		navigate_to(node.parents[node.parents.length-1].path)
+	}
+}
+
+const node_icon = node => {
+	if (node.type === "dir") {
+		return "/res/img/mime/folder.png"
+	}
+
+	switch (node.file_type) {
+		case "image/gif":
+			return "/res/img/mime/image-gif.png"
+		case "image/png", "image/apng":
+			return "/res/img/mime/image-png.png"
+		case "image/jpeg":
+			return "/res/img/mime/image-jpeg.png"
+		case "application/pdf":
+			return "/res/img/mime/pdf.png"
+	}
+
+	if (node.file_type.startsWith("audio/")) {
+		return "/res/img/mime/audio.png"
+	} else if (node.file_type.startsWith("video/")) {
+		return "/res/img/mime/video.png"
+	} else if (node.file_type.startsWith("text/")) {
+		return "/res/img/mime/text.png"
+	} else if (node.file_type.startsWith("image/")) {
+		return "/res/img/mime/image-png.png"
+	} else if (node.file_type.startsWith("application/")) {
+		return "/res/img/mime/archive.png"
+	}
+	return "/res/img/mime/empty.png"
+}
+</script>
+
+<div class="container">
+	<div class="toolbar">
+		<button on:click={navigate_up}><i class="icon">arrow_upward</i> up</button>
+	</div>
+	<br/>
+	<div class="directory">
+		{#if Array.isArray(node.base.children)}
+			{#each node.base.children as child}
+			<div on:click={navigate_to(child.path)} class="node">
+				<img src={node_icon(child)} alt="icon"/>
+				<div>{child.name}</div>
+			</div>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+.container {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	overflow-y: auto;
+	text-align: center;
+}
+.toolbar {
+	position: relative;
+	display: inline-block;
+	max-width: 800px;
+	width: 100%;
+	margin: 20px 0 0 0;
+	box-sizing: border-box;
+}
+.directory {
+	position: relative;
+	display: inline-block;
+	max-width: 800px;
+	width: 100%;
+	margin: 20px 0 40px 0;
+	text-align: left;
+	background-color: var(--layer_2_color);
+	box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
+	box-sizing: border-box;
+}
+.node {
+	position: relative;
+	height: 40px;
+	overflow: hidden;
+	margin: 4px;
+	padding: 4px;
+	box-sizing: border-box;
+	cursor: pointer;
+}
+.node:hover:not(.node_selected) {
+	background-color: var(--input_color_dark);
+	color: var(--input_text_color);
+	text-decoration: none;
+}
+/* .node_selected {
+	background-color: var(--highlight_color);
+	color: var(--highlight_text_color);
+} */
+.node > div {
+	height: 100%;
+	overflow: hidden;
+	padding: 0;
+	line-height: 32px;
+	box-sizing: border-box;
+	display: inline-block;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.node > img {
+	max-height: 100%;
+	margin-right: 6px;
+	width: auto;
+	min-width: auto;
+	float: left;
+	display: block;
+}
+</style>
--- a/svelte/src/modal.js
+++ b/svelte/src/modal.js
@@ -0,0 +1,10 @@
+import App from './modal/App.svelte';
+
+const app = new App({
+	target: document.body,
+	props: {
+		name: 'world'
+	}
+});
+
+export default app;
--- a/svelte/src/modal/App.svelte
+++ b/svelte/src/modal/App.svelte
@@ -0,0 +1,45 @@
+<script>
+	import Modal from '../util/Modal.svelte';
+	let modal1;
+	let modal2;
+	let modal3;
+</script>
+
+<button on:click={modal1.show}>
+	show modal
+</button>
+
+<br/>
+
+<Modal bind:this={modal3} title="Third modal" width="700px">
+	<img src="https://pixeldrain.com/res/img/header_orbitron_wide.png" alt="logo" style="max-width: 100%;"/>
+</Modal>
+<Modal bind:this={modal2} title="Wat!" width="1000px">
+	<ol class="definition-list">
+		<li>of or relating to modality in logic</li>
+		<li>containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy</li>
+		<li>of or relating to a musical mode</li>
+		<li>of or relating to structure as opposed to substance</li>
+		<li><button on:click={modal3.show}>third modal</button></li>
+		<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
+		<li>of or relating to a statistical mode</li>
+	</ol>
+
+	<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+</Modal>
+
+<Modal bind:this={modal1} title="Hello!">
+	<ol class="definition-list">
+		<li>of or relating to modality in logic</li>
+		<li>containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy</li>
+		<li>of or relating to a musical mode</li>
+		<li>of or relating to structure as opposed to substance</li>
+		<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
+		<li>of or relating to a statistical mode</li>
+	</ol>
+
+	<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+	<br/>
+
+	<button on:click={modal2.show}>show modal</button>
+</Modal>
--- a/svelte/src/util/Formatting.svelte
+++ b/svelte/src/util/Formatting.svelte
@@ -0,0 +1,61 @@
+<script context="module">
+export const formatNumber = (amt, precision) => {
+	if (precision < 3) { precision = 3; }
+	if (amt >= 1e6) {
+		return (amt/1e6).toPrecision(precision) + "M";
+	} else if (amt >= 1e3) {
+		return (amt/1e3).toPrecision(precision) + "k";
+	}
+	return amt
+}
+
+export const formatThousands = (x) => {
+	return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
+}
+
+export const formatDataVolume = (amt, precision) => {
+	if (precision < 3) { precision = 3; }
+	if (amt >= 1e18) {
+		return (amt/1e18).toPrecision(precision) + " EB";
+	}else if (amt >= 1e15) {
+		return (amt/1e15).toPrecision(precision) + " PB";
+	}else if (amt >= 1e12) {
+		return (amt/1e12).toPrecision(precision) + " TB";
+	} else if (amt >= 1e9) {
+		return (amt/1e9).toPrecision(precision) + " GB";
+	} else if (amt >= 1e6) {
+		return (amt/1e6).toPrecision(precision) + " MB";
+	} else if (amt >= 1e3) {
+		return (amt/1e3).toPrecision(precision) + " kB";
+	}
+	return amt + " B"
+}
+
+const second = 1000
+const minute = second*60
+const hour = minute*60
+const day = hour*24
+
+export const formatDuration = (ms) => {
+	let res = ""
+	if (ms >= day)    { res += Math.floor(ms/day) + "d " }
+	if (ms >= hour)   { res += Math.floor((ms%day)/hour) + "h " }
+	if (ms >= minute) { res += Math.floor((ms%hour)/minute) + "m " }
+	return res + ((ms%minute)/second).toFixed(3) + "s"
+}
+
+export const formatDate = (date, hours, minutes, seconds) => {
+	if (!(date instanceof Date)) {
+		date = new Date(date)
+	}
+
+	let dateStr = date.getFullYear()
+		+"-"+("00"+(date.getMonth()+1)).slice(-2)
+		+"-"+("00"+date.getDate()).slice(-2)
+
+	if (hours)   { dateStr += " "+("00"+date.getHours()).slice(-2) }
+	if (minutes) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
+	if (seconds) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
+	return dateStr
+}
+</script>
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -0,0 +1,117 @@
+<script context="module">
+// This makes sure new modals always show up on top of older modals. It is
+// incremented every time a modal is shown
+let global_index = 10000;
+</script>
+<script>
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+
+export let title = "";
+export let width = "800px";
+export let height = "auto";
+let visible = false;
+
+const load_bg = background => {
+	background.style.zIndex = global_index.valueOf();
+	global_index++;
+}
+const load_modal = modal => {
+	modal.style.width = width;
+	modal.style.height = height;
+}
+
+const dispatch = createEventDispatcher();
+export const show = () => { visible = true;  dispatch("shown"); }
+export const hide = () => { visible = false; dispatch("hidden"); }
+export const toggle = () => {
+	if (visible) {
+		hide()
+	} else {
+		show()
+	}
+}
+
+const keydown = e => {
+	if (e.key === 'Escape') {
+		hide();
+		return;
+	}
+};
+</script>
+
+<svelte:window on:keydown={keydown}/>
+
+{#if visible}
+<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
+	<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
+		<div class="header highlight_1">
+			<div class="title">{title}</div>
+			<button class="button_close button_red" on:click={hide}>
+				<i class="icon">close</i>
+			</button>
+		</div>
+		<div class="body">
+			<slot></slot>
+		</div>
+	</div>
+</div>
+{/if}
+
+<style>
+.background {
+	position: fixed;
+	text-align: center;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.5);
+}
+.window {
+	position: absolute;
+	z-index: inherit;
+	display: flex;
+	flex-direction: column;
+	background-color: var(--layer_2_color);
+	max-height: 100%;
+	max-width: 100%;
+	margin: 0 auto;
+	top: 20%;
+	left: 50%;
+	transform: translate(-50%, -20%);
+	padding: 0;
+	box-sizing: border-box;
+	text-align: left;
+	box-shadow: var(--shadow_color) 0px 0px 50px;
+}
+.header {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+	padding: 1px;
+}
+.title {
+	flex-grow: 1;
+	flex-shrink: 1;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.2em;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+.button_close {
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+.body {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow: auto;
+	padding: 10px;
+}
+</style>
--- a/svelte/src/util/Spinner.svelte
+++ b/svelte/src/util/Spinner.svelte
@@ -0,0 +1,39 @@
+<svg version="1.1"
+	class="svg_spinner"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	viewBox="0 0 80 80"
+	xml:space="preserve">
+	<path
+		d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
+		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
+		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
+		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
+		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
+		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
+		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
+		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
+		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
+		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
+		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
+		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
+		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
+		<animateTransform
+			attributeType="xml"
+			attributeName="transform"
+			type="rotate"
+			from="0 40 40"
+			to="360 40 40"
+			dur="0.6s"
+			repeatCount="indefinite"/>
+	</path>
+</svg>
+
+<style>
+svg {
+	color: var(--highlight_color);
+	fill: currentColor;
+}
+</style>
--- a/webcontroller/filesystem.go
+++ b/webcontroller/filesystem.go
@@ -1,6 +1,7 @@
 package webcontroller

 import (
+	"fmt"
 	"net/http"
 	"sort"
 	"strings"
@@ -12,6 +13,7 @@ import (

 type filesystemPath struct {
 	Path     []filesystemNode
+	Base     filesystemNode
 	Children []filesystemNode
 }

@@ -84,15 +86,18 @@ func (wc *WebController) serveFilesystem(w http.ResponseWriter, r *http.Request,
 			return
 		}

-		if node.Path[node.NodeIndex].Type == "file" {
+		if node.Base.Type == "file" {
 			http.Redirect(w, r, "/api/filesystem/"+path, http.StatusSeeOther)
 			return
 		}

-		for _, v := range node.Path {
+		for _, v := range node.Parents {
 			fsPath.Path = append(fsPath.Path, convFilesystemNode(node.Bucket.ID, v))
 		}
-		for _, v := range node.Children {
+
+		fsPath.Base = convFilesystemNode(node.Bucket.ID, node.Base)
+
+		for _, v := range node.Base.Children {
 			fsPath.Children = append(fsPath.Children, convFilesystemNode(node.Bucket.ID, v))
 		}
 	}
@@ -114,3 +119,31 @@ func (wc *WebController) serveFilesystem(w http.ResponseWriter, r *http.Request,
 		log.Error("Error executing template filesystem: %s", err)
 	}
 }
+
+func (wc *WebController) serveDirectory(w http.ResponseWriter, r *http.Request, p httprouter.Params) {
+	var err error
+	var td = wc.newTemplateData(w, r)
+	var path = strings.TrimPrefix(p.ByName("path"), "/")
+
+	node, err := td.PixelAPI.GetFilesystemPath(path)
+	if err != nil {
+		if err.Error() == "not_found" || err.Error() == "path_not_found" {
+			wc.templates.Get().ExecuteTemplate(w, "404", td)
+		} else {
+			log.Error("Failed to get path: %s", err)
+			wc.templates.Get().ExecuteTemplate(w, "500", td)
+		}
+		return
+	}
+
+	if node.Base.Type == "bucket" {
+		td.Title = fmt.Sprintf("%s ~ pixeldrain", node.Base.Name)
+	} else {
+		td.Title = fmt.Sprintf("%s in %s ~ pixeldrain", node.Base.Name, node.Bucket.Name)
+	}
+	td.Other = node
+	err = wc.templates.Get().ExecuteTemplate(w, "filesystem_svelte", td)
+	if err != nil && !strings.Contains(err.Error(), "broken pipe") {
+		log.Error("Error executing template filesystem: %s", err)
+	}
+}
--- a/webcontroller/web_controller.go
+++ b/webcontroller/web_controller.go
@@ -141,6 +141,7 @@ func New(

 		// Filesystem
 		{GET, "fs/*path", wc.serveFilesystem},
+		{GET, "d/*path", wc.serveDirectory},

 		{GET, "patreon_activate" /*  */, wc.serveForm(wc.patreonLinkForm, true)},
 		{PST, "patreon_activate" /*  */, wc.serveForm(wc.patreonLinkForm, true)},