Move error handling for filesystem to frontend

svelte/src/filesystem/ErrorPage.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import TextBlock from "layout/TextBlock.svelte";
+import { type FSNavigator } from "./FSNavigator";
+import { onMount } from "svelte";
+import { breadcrumbs_store } from "wrap/BreadcrumbStore";
+
+let {
+	nav
+}: {
+	nav: FSNavigator;
+} = $props();
+
+onMount(() => {
+	return nav.subscribe(nav => {
+		breadcrumbs_store.set(breadcrumbs)
+	})
+
+
+})
+</script>
+
+{#snippet breadcrumbs()}
+	{$nav.navigation_error}
+{/snippet}
+
+<TextBlock>
+	{#if $nav.navigation_error === "not_found" || $nav.navigation_error === "path_not_found"}
+		<h1>Page not found</h1>
+		<p>
+			This page could not be found.
+		</p>
+	{:else if $nav.navigation_error === "permission_denied" || $nav.navigation_error === "forbidden"}
+		<h1>Permission denied</h1>
+		<p>
+			You are not allowed to access this resource.
+		</p>
+	{:else if $nav.navigation_error === "unavailable_for_legal_reasons"}
+		<h1>Unavailable for legal reasons</h1>
+		<p>
+			This content has been removed for breaking the law.
+		</p>
+	{:else}
+		<h1>Unknown error code</h1>
+		<p>
+			{$nav.navigation_error}
+		</p>
+	{/if}
+</TextBlock>

svelte/src/filesystem/FSNavigator.ts

@@ -54,6 +54,7 @@ export class FSNavigator {
 	}
 
 	last_requested_path: string = ""
+	navigation_error: string = ""
 	navigate = async (path: string, push_history: boolean) => {
 		if (path === this.last_requested_path) {
 			console.debug("FSNavigator: Requested path ", path, " is equal to current path. Debouncing")
@@ -72,14 +73,14 @@ export class FSNavigator {
 			const resp = await fs_get_node(path)
 			this.open_node(resp, push_history)
 		} catch (err: any) {
-			if (err.value && err.value === "path_not_found") {
+			if (err.value !== undefined && err.value === "path_not_found") {
 				if (path !== this.path[0].path && path !== "/" && path !== "") {
 					console.debug("Path", path, "was not found, trying to navigate to parent")
 					this.navigate(fs_split_path(path).parent, push_history)
 				}
-			} else if (err.message) {
-				console.error(err)
-				alert("Error: " + err.message)
+			} else if (err.value !== undefined) {
+				this.navigation_error = err.value
+				this.notify_subscribers()
 			} else {
 				console.error(err)
 				alert("Error: " + err)
@@ -133,6 +134,7 @@ export class FSNavigator {
 		this.children = node.children
 		this.permissions = node.permissions
 		this.context = node.context
+		this.navigation_error = "" // Clear the error value
 		this.initialized = true
 
 		console.debug("Opened node", node)

svelte/src/filesystem/Filesystem.svelte

@@ -11,6 +11,7 @@ import { css_from_path } from "filesystem/edit_window/Branding";
 import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
 import { current_page_store } from "wrap/RouterStore";
 import SearchBar from "./SearchBar.svelte";
+import ErrorPage from "./ErrorPage.svelte";
 
 let file_preview: FilePreview = $state()
 let toolbar: Toolbar = $state()
@@ -141,6 +142,7 @@ const keydown = (e: KeyboardEvent) => {
 
 <svelte:window onkeydown={keydown} />
 
+{#if $nav.navigation_error === ""}
 <div class="filesystem">
 	<Breadcrumbs nav={nav} edit_window={edit_window}/>
 
@@ -164,6 +166,10 @@ const keydown = (e: KeyboardEvent) => {
 	/>
 </div>
 
+{:else}
+	<ErrorPage nav={nav} />
+{/if}
+
 <SearchBar bind:this={search_bar} nav={nav}/>
 
 <DetailsWindow nav={nav} bind:this={details_window} bind:visible={details_visible} />