UI overhaul, import fixes, fix user store

svelte/src/filesystem/viewers/File.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import IconBlock from "layout/IconBlock.svelte";
-import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
+import { fs_thumbnail_url, FSNode } from "lib/FilesystemAPI";
 import TextBlock from "layout/TextBlock.svelte"
 import { formatDataVolume, formatDate } from "util/Formatting";
 
@@ -17,12 +17,24 @@ let {
 
 {@render children?.()}
 
-<h1>{node.name}</h1>
-
 <IconBlock icon_href={fs_thumbnail_url(node.path, 256, 256)}>
-	Type: {node.file_type}<br/>
-	Size: {formatDataVolume(node.file_size, 3)}<br/>
-	Upload date: {formatDate(node.created, true, true, false)}
+	{node.name}<br/>
+	<table>
+		<tbody>
+			<tr>
+				<td>Type</td>
+				<td>{node.file_type}</td>
+			</tr>
+			<tr>
+				<td>Size</td>
+				<td>{formatDataVolume(node.file_size, 3)}</td>
+			</tr>
+			<tr>
+				<td>Upload date</td>
+				<td>{formatDate(node.created, true, true, false)}</td>
+			</tr>
+		</tbody>
+	</table>
 	<hr/>
 	<button class="button_highlight" onclick={() => node.download()}>
 		<i class="icon">download</i>
@@ -79,9 +91,12 @@ let {
 {/if}
 
 <style>
-h1 {
-	text-shadow: 1px 1px 3px var(--shadow_color);
-	line-break: anywhere;
+table {
+	width: auto;
+}
+td {
+	padding: 0;
+	padding-right: 1em;
 }
 .icon {
 	display: inline-block;