Styling and usability fixes

svelte/src/wrap/Bookmarks.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
 import { bookmarks_save, bookmarks_store } from "lib/Bookmarks";
-import { fs_encode_path } from "lib/FilesystemAPI.svelte";
+import { fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
 import { highlight_current_page } from "lib/HighlightCurrentPage";
 import MenuEntry from "./MenuEntry.svelte";
 import { flip } from "svelte/animate";
 
-let { menu_collapsed }: { menu_collapsed: boolean } = $props();
-
 let editing = $state(false)
 
 const toggle_edit = async () => {
@@ -76,7 +74,7 @@ const drop = (e: DragEvent, drop_idx: number) => {
 </script>
 
 {#if $bookmarks_store.length !== 0}
-	<MenuEntry id="bookmarks" collapsed={menu_collapsed}>
+	<MenuEntry id="bookmarks">
 		{#snippet title()}
 			<div class="title">Bookmarks</div>
 			<button onclick={toggle_edit} class:button_highlight={editing} class="button flat">
@@ -116,8 +114,8 @@ const drop = (e: DragEvent, drop_idx: number) => {
 						</button>
 					{:else}
 						<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
-							<i class="icon">{bookmark.icon}</i>
-							<span class:hide={menu_collapsed}>{bookmark.label}</span>
+							<img src={fs_thumbnail_url(bookmark.path, 32, 32)} class="thumbnail" alt="Bookmark icon" />
+							<span>{bookmark.label}</span>
 						</a>
 					{/if}
 				</div>
@@ -145,11 +143,13 @@ const drop = (e: DragEvent, drop_idx: number) => {
 	background: none;
 	box-shadow: none;
 }
-.hide {
-	display: none;
-}
 .highlight {
 	box-shadow: 0 0 0px 1px var(--highlight_color);
 	text-decoration: none;
 }
+.thumbnail {
+	height: 1.5em;
+	width: 1.5em;
+	border-radius: 2px;
+}
 </style>

svelte/src/wrap/MainMenu.svelte

@@ -21,7 +21,7 @@ import { breadcrumbs_store } from "./BreadcrumbStore";
 
 // The menu swipe will be detected if it was less than this much pixels from the
 // screen edge
-const screen_edge_offset = 50
+const screen_edge_offset = 40
 
 // Dead zone before the swipe action gets detected
 const swipe_dead_zone = screen_edge_offset/4
@@ -77,12 +77,12 @@ const touchmove = (e: TouchEvent) => {
 	const abs_x = Math.abs(x)
 	const abs_y = Math.abs(y)
 
-	// The cursor must have moved at least swipe_dead_zone pixels and three
-	// times as much on the x axis than the y axis for it to count as a swipe
-	if (abs_x > swipe_dead_zone && abs_x / 3 > 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 && abs_x / 2 > abs_y) {
 		set_offset(initial_offset+(x*2))
 	} else {
-		set_offset(initial_offset)
+		touchend(e)
 	}
 }
 
@@ -158,10 +158,25 @@ const set_offset = (off: number) => {
 						Menu
 					</button>
 				{/if}
-				<a class="button" href="/" use:highlight_current_page>
-					<i class="icon">home</i>
-					<span>Home</span>
-				</a>
+
+				<MenuEntry id="home" collapsed={false} no_border>
+					{#snippet title()}
+						<a class="button" style="flex: 1 1 auto;" href="/" use:highlight_current_page>
+							<span style="flex: 1 1 auto;">Nova.storage</span>
+							<img src="/res/img/nova_64.png" style="width: 1.5em; height: 1.5em; flex: 0 0 auto;" alt="Nova.storage logo">
+						</a>
+					{/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="/appearance" use:highlight_current_page>
+							<i class="icon">palette</i>
+							<span>Themes</span>
+						</a>
+					{/snippet}
+				</MenuEntry>
 
 				{#if $user.username !== undefined && $user.username !== ""}
 					<MenuEntry id="subscription_info" collapsed={false}>
@@ -212,19 +227,8 @@ const set_offset = (off: number) => {
 					</a>
 				{/if}
 
-				<div class="separator"></div>
-
-				<a class="button" href="/speedtest" use:highlight_current_page>
-					<i class="icon">speed</i>
-					<span>Speedtest</span>
-				</a>
-				<a class="button" href="/appearance" use:highlight_current_page>
-					<i class="icon">palette</i>
-					<span>Themes</span>
-				</a>
-
-				<Bookmarks menu_collapsed={false}/>
-				<Tree menu_collapsed={false}/>
+				<Bookmarks/>
+				<Tree/>
 			</nav>
 		</div>
 	</div>
@@ -273,6 +277,7 @@ const set_offset = (off: number) => {
 	flex: 0 0 auto;
 	border-right: 1px solid var(--separator);
 	background: var(--body_background);
+	backdrop-filter: blur(3px);
 	z-index: 9;
 }
 .scroll_container {
@@ -288,7 +293,7 @@ const set_offset = (off: number) => {
 	flex-direction: column;
 	width: 15em;
 }
-.nav > .button {
+.button {
 	background: none;
 	box-shadow: none;
 }
@@ -304,11 +309,6 @@ const set_offset = (off: number) => {
 	margin: 3px;
 }
 
-.separator {
-	height: 1px;
-	width: 100%;
-	background-color: var(--separator);
-}
 .stats_table {
 	display: grid;
 	grid-template-columns: auto auto;
@@ -324,6 +324,7 @@ const set_offset = (off: number) => {
 	justify-content: left;
 	background: var(--body_background);
 	border-bottom: 1px solid var(--separator);
+	backdrop-filter: blur(3px);
 	position: sticky;
 	top: 0;
 	z-index: 8; /* below navigation, on top of most other things */

svelte/src/wrap/MenuEntry.svelte

@@ -7,11 +7,13 @@ type Expandable = {[key: string]: boolean}
 let {
 	id,
 	collapsed = false,
+	no_border,
 	title,
 	body,
 }: {
 	id: string
-	collapsed: boolean
+	collapsed?: boolean
+	no_border?: boolean
 	title: import('svelte').Snippet
 	body: import('svelte').Snippet
 } = $props();
@@ -43,8 +45,8 @@ const toggle = (e: MouseEvent) => {
 }
 </script>
 
-<div class="title">
-	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_drop_up" highlight={false} flat/>
+<div class="title" class:no_border>
+	<ToggleButton bind:on={expanded} action={toggle} icon_on="arrow_drop_down" icon_off="arrow_right" highlight={false} flat/>
 
 	{#if !collapsed}
 		{@render title()}
@@ -63,4 +65,7 @@ const toggle = (e: MouseEvent) => {
 	align-items: center;
 	border-top: 1px solid var(--separator);
 }
+.no_border {
+	border-top: none;
+}
 </style>

svelte/src/wrap/Tree.svelte

@@ -5,7 +5,6 @@ import { highlight_current_page } from "lib/HighlightCurrentPage";
 import { onMount } from "svelte";
 import MenuEntry from "./MenuEntry.svelte";
 
-let { menu_collapsed }: { menu_collapsed: boolean } = $props();
 let siblings: FSNode[] = $state([])
 
 onMount(() => {
@@ -29,7 +28,7 @@ onMount(() => {
 })
 </script>
 
-<MenuEntry id="tree_parents" collapsed={menu_collapsed}>
+<MenuEntry id="tree_parents">
 	{#snippet title()}
 		<div class="title">Parent directories</div>
 		<button title="Navigate up" onclick={() => global_navigator.navigate_up()} class="button flat">
@@ -43,7 +42,7 @@ onMount(() => {
 				<div class="row">
 					<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}">
 						<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
-						<span class:hide={menu_collapsed}>{node.name}</span>
+						<span>{node.name}</span>
 					</a>
 				</div>
 			{/if}
@@ -51,7 +50,7 @@ onMount(() => {
 	{/snippet}
 </MenuEntry>
 
-<MenuEntry id="tree_siblings" collapsed={menu_collapsed}>
+<MenuEntry id="tree_siblings">
 	{#snippet title()}
 		<div class="title">Siblings</div>
 	<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)} class="button flat">
@@ -68,7 +67,7 @@ onMount(() => {
 				<div class="row">
 					<a class="button" href="/d{fs_encode_path(node.path)}" title="{node.name}" use:highlight_current_page>
 						<img class="thumbnail" src="{fs_node_icon(node, 32, 32)}" alt="{node.name}"/>
-						<span class:hide={menu_collapsed}>{node.name}</span>
+						<span>{node.name}</span>
 					</a>
 				</div>
 			{/if}
@@ -102,7 +101,4 @@ onMount(() => {
 	width: 1.5em;
 	border-radius: 2px;
 }
-.hide {
-	display: none;
-}
 </style>