fnx_web/svelte/src/wrap/App.svelte

<script lang="ts">
import { highlight_current_page } from "lib/HighlightCurrentPage";
import { user } from "lib/UserStore";
import Euro from "util/Euro.svelte";
import { formatDataVolume } from "util/Formatting";
import Router from "wrap/Router.svelte";
import Bookmarks from "./Bookmarks.svelte";
import { onMount } from "svelte";
import { fs_get_node } from "lib/FilesystemAPI.svelte";
import { css_from_path } from "filesystem/edit_window/Branding";
import { loading_run, loading_store } from "lib/Loading";
import Spinner from "util/Spinner.svelte";
import { get_user } from "lib/NovaAPI";
import Tree from "./Tree.svelte";
import MenuEntry from "./MenuEntry.svelte";
import { breadcrumbs_store, toolbar_store } from "./HeaderStore";
import ProgressBar from "util/ProgressBar.svelte";
import NovaLogo, { update_favicon } from "util/NovaLogo.svelte";
import SearchBar from "filesystem/SearchBar.svelte";

// The menu swipe will be detected if it was less than this much pixels from the
// screen edge
const screen_edge_offset = 40

// Dead zone before the swipe action gets detected
const swipe_dead_zone = screen_edge_offset/4

// If the screen is less wide than this, the menu will appear full screen
const min_screen_size_fullscreen_menu = 500

// If the screen is smaller than this the menu will be closed by default
const min_screen_size_menu_open = 800

// The two background glows get a random position on each page load, in percent
// of the viewport. The second one is rerolled until it's at least 40% away from
// the first
const glow = [Math.random() * 100, Math.random() * 100, 0, 0]
do {
	glow[2] = Math.random() * 100
	glow[3] = Math.random() * 100
} while (Math.hypot(glow[0] - glow[2], glow[1] - glow[3]) < 40)

onMount(async () => {
	if (document.documentElement.clientWidth < min_screen_size_menu_open) {
		menu_close()
	}

	// The page template already applied the branding saved on the previous
	// visit, the favicon follows it
	update_favicon()

	await loading_run(async () => {
		const user = await get_user()
		if (!user?.username) {
			// Forget the branding of a user who logged out
			localStorage.removeItem("branding")
			document.documentElement.style = ""
			update_favicon()
			return
		}
		const root = await fs_get_node("/me")
		const branding = css_from_path(root.path)
		document.documentElement.style = branding
		localStorage.setItem("branding", branding)
		update_favicon()
	})
})

let menu: HTMLDivElement
let nav: HTMLElement
let dragging: boolean = false
let start_x: number
let start_y: number
let render_offset: number
let initial_offset: number
const touchstart = (e: TouchEvent) => {
	start_x = e.touches[0].clientX
	start_y = e.touches[0].clientY
	const rect = menu.getBoundingClientRect()
	if (start_x < Math.max(screen_edge_offset, (rect.width+rect.left))) {
		dragging = true
		e.stopPropagation()
	}

	render_offset = rect.left
	initial_offset = rect.left
}

const touchmove = (e: TouchEvent) => {
	if (!dragging) {
		return
	}

	const x = e.touches[0].clientX - start_x
	const y = e.touches[0].clientY - start_y
	const abs_x = Math.abs(x)
	const abs_y = Math.abs(y)

	// The cursor must have moved at least swipe_dead_zone pixels and twice as
	// much on the x axis than the y axis for it to count as a swipe
	if (abs_x > swipe_dead_zone) {
		if (abs_x > abs_y) {
			e.preventDefault()
			e.stopPropagation()
			set_offset(initial_offset+(x*2))
		} else {
			touchend(e)
		}
	}
}

const touchend = (e: TouchEvent) => {
	if (!dragging) {
		return
	}
	dragging = false

	const menu_width = menu.getBoundingClientRect().width
	if (render_offset > -(menu_width/2)) {
		menu_open()
	} else {
		menu_close()
	}
}

const toggle_menu = (e: MouseEvent) => {
	if (menu.style.transform === "") {
		menu_close()
	} else {
		menu_open()
	}
}
const menu_open = () => {
	set_offset(0)
	if (document.documentElement.clientWidth < min_screen_size_fullscreen_menu) {
		menu.style.position = "fixed"
		menu.style.width = "100%"
		nav.style.width = "100%"
		nav.style.maxWidth = "100%"
	} else {
		menu.style.position = "relative"
		menu.style.width = ""
		nav.style.width = ""
		nav.style.maxWidth = ""
	}
}
const menu_close = () => {
	set_offset(-menu.getBoundingClientRect().width)
	// A closed menu is only moved off-screen, hiding it makes sure the browser
	// doesn't render its backdrop blur and keeps its links out of the tab order
	menu.style.visibility = "hidden"
	menu.style.position = "fixed"

	if (document.documentElement.clientWidth >= min_screen_size_fullscreen_menu) {
		menu.style.width = ""
		nav.style.width = ""
		nav.style.maxWidth = ""
	}
}

const set_offset = (off: number) => {
	render_offset = off
	menu.style.visibility = ""

	if (off > -swipe_dead_zone) {
		// Clear the transformation if the offset is zero
		menu.style.transform = ""
	} else {
		menu.style.transform = "translateX(" + off + "px)"
	}
}
</script>

<svelte:window ontouchstart={touchstart} ontouchmove={touchmove} ontouchend={touchend}/>

<div
	class="wrap"
	style:--glow1_x="{glow[0]}%"
	style:--glow1_y="{glow[1]}%"
	style:--glow2_x="{glow[2]}%"
	style:--glow2_y="{glow[3]}%"
>
	<div class="nav_container" bind:this={menu}>
		<div class="scroll_container">
			<nav class="nav bubble" bind:this={nav}>
				{#if document.documentElement.clientWidth < min_screen_size_menu_open}
					<button class="button" onclick={toggle_menu}>
						<i class="icon">menu</i>
						Menu
					</button>
				{/if}

				<a class="button" style="flex: 1 1 auto;" href="/" use:highlight_current_page>
					<span style="flex: 1 1 auto;">Nova.storage</span>
					<NovaLogo style="width: 1.5em; height: 1.5em; flex: 0 0 auto;"/>
				</a>

				{#if $user !== null}
					<MenuEntry id="subscription_info" collapsed={false}>
						{#snippet title()}
							<div class="username">{$user.username}</div>
						{/snippet}

						{#snippet body()}
							<div class="stats_table">
								<div>Sub</div>
								<div>
									{$user.subscription.name}
									{#if $user.subscription_months === 1}
										(monthly)
									{:else if $user.subscription_months === 6}
										(bi-yearly)
									{:else if $user.subscription_months === 12}
										(yearly)
									{/if}
								</div>

								<div>Credit</div>
								<div><Euro amount={$user.balance_micro_eur}/></div>

								<div>Storage</div>
								<div>
									{formatDataVolume($user.filesystem_storage_used, 3)} /
									{formatDataVolume($user.subscription.storage_limit, 3)}
								</div>
								<div style="grid-column: span 2">
									<ProgressBar used={$user.storage_space_used} total={$user.subscription.storage_limit} warn/>
								</div>
								<div>Transfer</div>
								<div>
									{formatDataVolume($user.monthly_transfer_used, 3)} /
									{formatDataVolume($user.subscription.monthly_transfer_cap, 3)}
								</div>
								<div style="grid-column: span 2">
									<ProgressBar used={$user.monthly_transfer_used} total={$user.subscription.monthly_transfer_cap} warn/>
								</div>
							</div>
						{/snippet}
					</MenuEntry>

					<a class="button" href="/user" use:highlight_current_page>
						<i class="icon">person</i>
						<span>Account</span>
					</a>
					<a class="button" href="/d/me" use:highlight_current_page>
						<i class="icon">folder</i>
						<span>Filesystem</span>
					</a>
					<a class="button" href="/d/me/.Trash" use:highlight_current_page>
						<i class="icon">delete</i>
						<span>Trash</span>
					</a>
					{#if $user.is_admin}
						<a class="button" href="/admin" use:highlight_current_page>
							<i class="icon">admin_panel_settings</i>
							<span>Admin Panel</span>
						</a>
					{/if}
				{:else}
					<a class="button" href="/login" use:highlight_current_page>
						<i class="icon">login</i>
						<span>Login</span>
					</a>
					<a class="button" href="/register" use:highlight_current_page>
						<i class="icon">how_to_reg</i>
						<span>Register</span>
					</a>
				{/if}

				<MenuEntry id="other_pages" collapsed={false}>
					{#snippet title()}
						<span style="flex: 1 1 auto;">
							<span style="flex: 1 1 auto;">Other pages</span>
						</span>
					{/snippet}
					{#snippet body()}
						<a class="button" href="/speedtest" use:highlight_current_page>
							<i class="icon">speed</i>
							<span>Speedtest</span>
						</a>
						<a class="button" href="https://docs.nova.storage" use:highlight_current_page>
							<i class="icon">text_snippet</i>
							<span>Documentation</span>
						</a>
					{/snippet}
				</MenuEntry>

				<Bookmarks/>
				<Tree/>
			</nav>
		</div>
	</div>

	<div class="page">
		<div class="header bubble">
			<div class="breadcrumbs">
				<button class="menu_button" onclick={toggle_menu}>
					<i class="icon">menu</i>
				</button>

				{#if $breadcrumbs_store !== null}
					{@render $breadcrumbs_store()}
				{/if}
			</div>

			{#if $toolbar_store !== null}
				{@render $toolbar_store()}
			{/if}
		</div>

		<Router/>
	</div>

	{#if $loading_store !== 0}
		<div class="spinner">
			<Spinner/>
		</div>
	{/if}

</div>

<SearchBar/>

<style>
.wrap {
	display: flex;
	flex-direction: row;

	color: var(--body_text_color);
	width: 100%;
	min-height: 100vh;
}
/* The page background is a layer of its own which stays in place while the page
   scrolls. Mobile browsers repaint a background-attachment: fixed background on
   every scroll frame, and iOS doesn't support it at all */
.wrap::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	/* Without a branding image there are two faint glows in the accent colour,
	   at positions which are randomized on each page load */
	--glow: color-mix(in srgb, var(--accent_color) 7%, transparent);
	/* Browsers don't dither gradients, so the glows show up as bands of a
	   single colour step each. A tile of black and white noise on top, at an
	   opacity of two colour steps, hides the edges of the bands */
	--noise: url("data:image/svg+xml,\
		<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'>\
		<filter id='n' color-interpolation-filters='sRGB'>\
		<feTurbulence type='fractalNoise' baseFrequency='.9' stitchTiles='stitch'/>\
		<feColorMatrix values='4 0 0 0 -1.5 4 0 0 0 -1.5 4 0 0 0 -1.5 0 0 0 0 1'/>\
		</filter>\
		<rect width='128' height='128' filter='url(%23n)' opacity='.008'/>\
		</svg>");
	background-image: var(
		--background_image,
		var(--noise),
		radial-gradient(
			ellipse 70% 60% at var(--glow1_x) var(--glow1_y),
			var(--glow),
			transparent
		),
		radial-gradient(
			ellipse 70% 60% at var(--glow2_x) var(--glow2_y),
			var(--glow),
			transparent
		)
	);
	background-color: var(--background_color);
	background-size: var(--background_image_size, initial);
	background-position: var(--background_image_position, initial);
	background-repeat: var(--background_image_repeat, repeat);
}
.nav_container {
	flex: 0 0 auto;
	z-index: 9;
}
.scroll_container {
	position: sticky;
	top: 0;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 100vh;
	height: 100vh;
	padding: 4px;
	scrollbar-gutter: stable;
}
.nav {
	display: flex;
	flex-direction: column;
	width: 16em;
	margin: 0;
	padding: 4px;
	backdrop-filter: blur(3px);
}
.button {
	background: none;
	box-shadow: none;
}
.page {
	flex: 1 1 auto;
	max-width: 100vw;
	min-width: 0; /* prevents overflow */
	display: flex;
	flex-direction: column;
}
.username {
	flex: 1 1 auto;
	margin: 3px;
}

.stats_table {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.2em 1em;
	margin: 5px;
}

.header {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 4px;
	z-index: 8; /* below navigation, on top of most other things */
}
.menu_button {
	flex: 0 0 auto;
	background: none;
	box-shadow: none;
}
.breadcrumbs {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	overflow-x: hidden;
}

.spinner {
	position: fixed;
	top: 10px;
	right: 10px;
	height: 120px;
	width: 120px;
	z-index: 11; /* One above the menu */
}
</style>