Reduce icon size in menu

svelte/src/lib/HighlightCurrentPage.ts

@@ -1,5 +1,5 @@
 import { global_navigator } from "filesystem/FSNavigator"
-import { current_page_store, type Tab } from "wrap/RouterStore"
+import { current_page_store } from "wrap/RouterStore"
 
 export const highlight_current_page = (node: HTMLAnchorElement) => {
 	const set_highlight = () => {
@@ -19,7 +19,7 @@ export const highlight_current_page = (node: HTMLAnchorElement) => {
 	set_highlight()
 
 	// Set up a listener with the page router to catch navigation events
-	const unsub = current_page_store.subscribe((page: Tab) => { set_highlight() })
+	const unsub = current_page_store.subscribe(() => { set_highlight() })
 	const unsub2 = global_navigator.subscribe(() => { set_highlight() })
 	return {
 		destroy() {

svelte/src/wrap/Bookmarks.svelte

@@ -16,19 +16,19 @@ const toggle_edit = () => {
 	<div class="title">
 		<div class:hide={menu_collapsed}>Bookmarks</div>
 		<button onclick={() => toggle_edit()} class:button_highlight={editing}>
-			<i class="icon">edit</i>
+			<i class="icon small">edit</i>
 		</button>
 	</div>
 
 	{#each $bookmarks_store as bookmark}
 		<div class="row">
 			<a class="button" href="/d{fs_encode_path(bookmark.path)}" use:highlight_current_page>
-				<i class="icon">{bookmark.icon}</i>
+				<i class="icon small">{bookmark.icon}</i>
 				<span class:hide={menu_collapsed}>{bookmark.label}</span>
 			</a>
 			{#if editing}
 				<button onclick={() => bookmark_del(bookmark.id)}>
-					<i class="icon">delete</i>
+					<i class="icon small">delete</i>
 				</button>
 			{/if}
 		</div>

svelte/src/wrap/MainMenu.svelte

@@ -37,12 +37,12 @@ onMount(async () => {
 	<div class="scroll_container">
 		<nav class="nav" class:collapse={menu_collapsed}>
 			<button class="button" onclick={toggle_menu}>
-				<i class="icon">menu</i>
+				<i class="icon small">menu</i>
 				<span class:hide={menu_collapsed}>Collapse menu</span>
 			</button>
 
 			<a class="button" href="/" use:highlight_current_page>
-				<i class="icon">home</i>
+				<i class="icon small">home</i>
 				<span class:hide={menu_collapsed}>Home</span>
 			</a>
 
@@ -73,26 +73,26 @@ onMount(async () => {
 				<div class="separator" class:hide={menu_collapsed}></div>
 
 				<a class="button" href="/d/me" use:highlight_current_page>
-					<i class="icon">folder</i>
+					<i class="icon small">folder</i>
 					<span class:hide={menu_collapsed}>Filesystem</span>
 				</a>
 				<a class="button" href="/user" use:highlight_current_page>
-					<i class="icon">dashboard</i>
+					<i class="icon small">dashboard</i>
 					<span class:hide={menu_collapsed}>Dashboard</span>
 				</a>
 				{#if $user.is_admin}
 					<a class="button" href="/admin" use:highlight_current_page>
-						<i class="icon">admin_panel_settings</i>
+						<i class="icon small">admin_panel_settings</i>
 						<span class:hide={menu_collapsed}>Admin Panel</span>
 					</a>
 				{/if}
 			{:else}
 				<a class="button" href="/login" use:highlight_current_page>
-					<i class="icon">login</i>
+					<i class="icon small">login</i>
 					<span class:hide={menu_collapsed}>Login</span>
 				</a>
 				<a class="button" href="/register" use:highlight_current_page>
-					<i class="icon">how_to_reg</i>
+					<i class="icon small">how_to_reg</i>
 					<span class:hide={menu_collapsed}>Register</span>
 				</a>
 			{/if}
@@ -100,11 +100,11 @@ onMount(async () => {
 			<div class="separator"></div>
 
 			<a class="button" href="/speedtest" use:highlight_current_page>
-				<i class="icon">speed</i>
+				<i class="icon small">speed</i>
 				<span class:hide={menu_collapsed}>Speedtest</span>
 			</a>
 			<a class="button" href="/appearance" use:highlight_current_page>
-				<i class="icon">palette</i>
+				<i class="icon small">palette</i>
 				<span class:hide={menu_collapsed}>Themes</span>
 			</a>
 

svelte/src/wrap/Tree.svelte

@@ -17,11 +17,11 @@ onMount(() => {
 	<div class="title">
 		<div>Parent directories</div>
 		<button title="Navigate up" onclick={() => global_navigator.navigate_up()}>
-			<i class="icon">north</i>
+			<i class="icon small">north</i>
 		</button>
 	</div>
 
-	{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node}
+	{#each $global_navigator.path.slice(0, $global_navigator.path.length-1) as node (node.id)}
 		{#if node.type === "dir"}
 			<div class="row">
 				<a class="button" href="/d{fs_encode_path(node.path)}">
@@ -42,15 +42,15 @@ onMount(() => {
 {#if siblings.length !== 0}
 	<div class="title">
 		<button title="Open previous sibling" onclick={() => global_navigator.open_sibling(-1)}>
-			<i class="icon">west</i>
+			<i class="icon small">west</i>
 		</button>
 		<div>Siblings</div>
 		<button title="Open next sibling" onclick={() => global_navigator.open_sibling(1)}>
-			<i class="icon">east</i>
+			<i class="icon small">east</i>
 		</button>
 	</div>
 
-	{#each siblings as node}
+	{#each siblings as node (node.id)}
 		{#if !node.is_hidden()}
 			<div class="row">
 				<a class="button" href="/d{fs_encode_path(node.path)}" use:highlight_current_page>