Convert multiple pages into SPA

svelte/src/filesystem/Breadcrumbs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fs_encode_path, node_is_shared } from "./FilesystemAPI";
+import { fs_encode_path, node_is_shared } from "lib/FilesystemAPI";
 import type { FSNavigator } from "./FSNavigator";
 
 export let nav: FSNavigator
@@ -9,8 +9,7 @@ export let nav: FSNavigator
 	{#each $nav.path as node, i (node.path)}
 		<a
 			href={"/d"+fs_encode_path(node.path)}
-			class="breadcrumb button"
-			class:button_highlight={$nav.base_index === i}
+			class="breadcrumb button flat"
 			on:click|preventDefault={() => {nav.navigate(node.path, true)}}
 		>
 			{#if node.abuse_type !== undefined}
@@ -22,19 +21,24 @@ export let nav: FSNavigator
 				{node.name}
 			</div>
 		</a>
+		{#if $nav.base_index !== i}
+			<i class="icon">chevron_right</i>
+		{/if}
 	{/each}
 </div>
 
 <style>
 .breadcrumbs {
-	flex-grow: 1;
-	flex-shrink: 1;
+	flex: 0 0 auto;
 	display: flex;
 	align-items: center;
-	justify-content: center;
+	justify-content: left;
 	flex-wrap: wrap;
 	flex-direction: row;
 	overflow: hidden;
+	background: var(--shaded_background);
+	backdrop-filter: blur(4px);
+	border-bottom: 1px solid var(--separator);
 }
 .breadcrumb {
 	min-width: 1em;
@@ -42,6 +46,8 @@ export let nav: FSNavigator
 	word-break: break-all;
 	display: inline-flex;
 	flex-direction: row;
+	background-color: unset;
+	box-shadow: none;
 }
 .node_name {
 	max-width: 20vw;