Improve error message when local project is unavailable

src/components/ErrorMessage.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
-  import type {
-    ResponseError,
-    ResponseParseError,
-  } from "@httpd-client/lib/fetcher";
   import type { ComponentProps } from "svelte";
+  import type { ErrorParam } from "@app/lib/router/definitions";
 
   import { config } from "@app/lib/config";
   import Command from "./Command.svelte";
@@ -12,8 +9,7 @@
 
   export let title: string;
   export let description: string;
-  export let error: Error | ResponseParseError | ResponseError | undefined =
-    undefined;
+  export let error: ErrorParam = undefined;
   export let icon: ComponentProps<Icon>["name"] = "alert";
 </script>
 

src/lib/router/definitions.ts

@@ -1,8 +1,8 @@
-import type { HomeRoute, HomeLoadedRoute } from "@app/views/home/router";
 import type {
-  ResponseParseError,
   ResponseError,
+  ResponseParseError,
 } from "@httpd-client/lib/fetcher";
+import type { HomeRoute, HomeLoadedRoute } from "@app/views/home/router";
 import type {
   ProjectLoadedRoute,
   ProjectRoute,
@@ -33,12 +33,14 @@ interface SessionRoute {
   };
 }
 
+export type ErrorParam = Error | ResponseParseError | ResponseError | undefined;
+
 export interface ErrorRoute {
   resource: "error";
   params: {
     title: string;
     description: string;
-    error: Error | ResponseError | ResponseParseError;
+    error: ErrorParam;
   };
 }
 

src/views/error/View.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import type { ComponentProps } from "svelte";
+  import type { ErrorParam } from "@app/lib/router/definitions";
 
   import AppLayout from "@app/App/AppLayout.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
 
   export let title: string;
   export let description: string;
-  export let error: ComponentProps<ErrorMessage>["error"];
+  export let error: ErrorParam = undefined;
 </script>
 
 <style>

src/views/projects/error.ts

@@ -1,8 +1,10 @@
 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 import type { ProjectRoute } from "@app/views/projects/router";
 
-import { baseUrlToUrl } from "@app/lib/utils";
+import { baseUrlToUrl, isLocal } from "@app/lib/utils";
 import { ResponseParseError, ResponseError } from "@httpd-client/lib/fetcher";
+import { httpdStore } from "@app/lib/httpd";
+import { get } from "svelte/store";
 
 export function handleError(
   error: Error | ResponseParseError | ResponseError,
@@ -45,6 +47,21 @@ export function handleError(
           "The response received from the seed does not match the expected schema, this is usually due to a version mismatch between the seed and the web interface.",
       },
     };
+  } else if (
+    error instanceof TypeError &&
+    error.message === "Failed to fetch" &&
+    isLocal(route.node.hostname) &&
+    get(httpdStore).state === "stopped"
+  ) {
+    return {
+      resource: "error",
+      params: {
+        title: "Could not load this project",
+        description:
+          "You're trying to access a project on your local node but the app is not connected to it. Click the Connect button in the top right corner to connect.",
+        error: undefined,
+      },
+    };
   } else {
     return {
       resource: "error",