Add menu button to filesystem

svelte/src/filesystem/Filesystem.svelte

@@ -9,9 +9,9 @@ import Navigator from './Navigator.svelte';
 import FilePreview from './viewers/FilePreview.svelte';
 import SearchView from './SearchView.svelte';
 import UploadWidget from './upload_widget/UploadWidget.svelte';
-import HomeButton from '../file_viewer/HomeButton.svelte';
 import { fs_path_url } from './FilesystemUtil.js';
 import { branding_from_path } from './edit_window/Branding.js'
+import Menu from './Menu.svelte';
 
 let loading = true
 let toolbar
@@ -44,6 +44,7 @@ const keydown = e => {
 		return // Prevent shortcuts from interfering with input fields
 	}
 
+	let action_performed = true
 	switch (e.key) {
 		case "c":
 			toolbar.copy_link()
@@ -76,9 +77,13 @@ const keydown = e => {
 		case "ArrowRight":
 			fs_navigator.open_sibling(1)
 			break;
+		default:
+			action_performed = false
 	}
 
-	e.preventDefault()
+	if (action_performed) {
+		e.preventDefault()
+	}
 };
 
 const download = () => {
@@ -116,10 +121,7 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 
 <div class="file_viewer">
 	<div class="headerbar">
-		<div>
-			<HomeButton nobg/>
-		</div>
-
+		<Menu/>
 		<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
 	</div>
 
@@ -158,10 +160,6 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 		</div>
 	</div>
 
-	<div class="highlight_yellow">
-		The filesystem is experimental! <a href="/filesystem">Please read the guide</a>
-	</div>
-
 	<!-- This frame will load the download URL when a download button is pressed -->
 	<iframe
 		bind:this={download_frame}
@@ -228,13 +226,6 @@ const update_css = path => document.documentElement.style = branding_from_path(p
 	padding: 4px;
 }
 
-/* Headerbar components */
-.headerbar > * {
-	flex-grow: 0;
-	flex-shrink: 0;
-	display: inline;
-	align-self: center;
-}
 /* File preview area (row 2) */
 .viewer_area {
 	flex: 1 1 0;

svelte/src/filesystem/Menu.svelte

@@ -0,0 +1,103 @@
+<script>
+import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
+import Button from "../layout/Button.svelte";
+import Euro from "../util/Euro.svelte";
+import { formatDataVolume } from "../util/Formatting.svelte";
+
+let button
+let dialog
+
+const open = () => {
+	dialog.showModal()
+
+	let rect = button.getBoundingClientRect()
+	dialog.style.top = Math.round(rect.bottom) + "px"
+	dialog.style.left = Math.round(rect.left) + "px"
+}
+
+// Close the dialog when the user clicks the background
+const click = e => {
+	if (e.target === dialog) {
+		dialog.close()
+	}
+}
+</script>
+
+<div class="wrapper">
+	<button bind:this={button} on:click={open} href="/user" class="button round" title="Menu">
+		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
+		<span>
+			{window.user.username === "" ? "Pixeldrain" : window.user.username}
+		</span>
+	</button>
+</div>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<dialog bind:this={dialog} on:click={click}>
+	<div class="menu">
+		{#if window.user.username !== ""}
+			<div class="stats_table">
+				<div>Subscription</div>
+				<div>{window.user.subscription.name}</div>
+
+				{#if window.user.subscription.type === "prepaid"}
+					<div>Credit</div>
+					<div><Euro amount={window.user.balance_micro_eur}/></div>
+				{/if}
+
+				<div>Storage used</div>
+				<div>{formatDataVolume(window.user.filesystem_storage_used, 3)}</div>
+				<div>Transfer used</div>
+				<div>{formatDataVolume(window.user.monthly_transfer_used, 3)}</div>
+			</div>
+			<Button link_href="/d/me" icon="folder" label="My Filesystem"/>
+			<Button link_href="/user" icon="person" label="Profile"/>
+			<Button link_href="/user/settings" icon="settings" label="Settings"/>
+			<Button link_href="/user/subscription" icon="shopping_cart" label="Subscription"/>
+			<Button link_href="/user/prepaid/transactions" icon="receipt" label="Transactions"/>
+		{:else}
+			<Button link_href="/" icon="home" label="Home"/>
+			<Button link_href="/#pro" icon="star" label="Get Premium"/>
+			<Button link_href="/login" icon="person" label="Log in"/>
+			<Button link_href="/register" icon="person" label="Register"/>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+.wrapper {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: inline;
+	align-self: center;
+}
+
+.button {
+	flex: 0 0 content;
+	background: none;
+	margin: 0;
+	color: var(--body_text_color);
+	box-shadow: none;
+}
+
+dialog {
+	background-color: var(--card_color);
+	color: var(--body_text_color);
+	border-radius: 8px;
+	border: none;
+	padding: 4px;
+	margin: 0;
+	box-shadow: 2px 2px 10px var(--shadow_color);
+}
+.menu {
+	display: flex;
+	flex-direction: column;
+}
+.stats_table {
+	display: grid;
+	grid-template-columns: auto auto;
+	gap: 0.2em 1em;
+	margin: 3px;
+}
+</style>

svelte/src/filesystem/filemanager/FileManager.svelte

@@ -350,6 +350,13 @@ onMount(() => {
 				on:loading
 			/>
 		{/if}
+
+		{#if state.base.path === "/me"}
+			<div class="highlight_shaded" style="background-color: rgba(255, 255, 0, 0.05); border-radius: 0;">
+				The filesystem is experimental!
+				<a href="/filesystem">Please read the guide</a>
+			</div>
+		{/if}
 	</div>
 
 	<slot></slot>