Improve project failed state

public/index.css

@@ -98,6 +98,10 @@ html {
 	color: var(--color-background);
 }
 
+.error::selection, .error ::selection {
+	background: var(--color-negative);
+}
+
 code {
 	font-family: monospace;
 	font-size: 0.95rem;
@@ -247,6 +251,10 @@ input.wide {
 	border-color: var(--color-negative) !important;
 	--box-shadow-color: var(--color-negative-2) !important;
 }
+.error-message {
+	background-color: var(--color-negative-background);
+	padding: 1rem;
+}
 .highlight {
 	color: var(--color-secondary);
 }
@@ -290,7 +298,7 @@ input.wide {
 	justify-content: center;
 }
 
-span.small {
+span.small, .text-small {
 	font-size: 0.75rem;
 }
 

src/api.ts

@@ -3,15 +3,36 @@ import type { Config } from '@app/config';
 export async function get(path: string, config: Config): Promise<any | null> {
   if (! config.seed.api) return null;
 
-  const response = await fetch(`${config.seed.api}/v1/${path}`, {
-    method: 'GET',
-    headers: {
-      'Accept': 'application/json',
-    }
-  });
+  const url = `${config.seed.api}/v1/${path}`;
 
-  if (! response.ok) {
-    return null;
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      }
+    });
+
+    if (! response.ok) {
+      return null;
+    }
+    return response.json();
+  } catch {
+    throw new ApiError(url, "API request failed");
+  }
+}
+
+class ApiError extends Error {
+  url: string;
+
+  constructor(url: string, message: string) {
+    super(message);
+
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, ApiError);
+    }
+
+    this.name = "ApiError";
+    this.url = url;
   }
-  return response.json();
 }

src/base/orgs/View.svelte

@@ -118,10 +118,6 @@
     height: 2rem;
     margin-right: 1rem;
   }
-  .error {
-    background-color: var(--color-negative-background);
-    padding: 1rem;
-  }
 </style>
 
 {#await Org.get(address, config)}
@@ -223,7 +219,7 @@
             </div>
           {/each}
         {:catch err}
-          <div class="error">
+          <div class="error error-message">
             Error loading projects: {err}.
           </div>
         {/await}

src/base/projects/Browser.svelte

@@ -29,6 +29,20 @@
 </script>
 
 <style>
+  main > header {
+    padding: 0 8rem;
+    margin-bottom: 2rem;
+  }
+  .anchor {
+    display: inline-block;
+    font-size: 0.75rem;
+    font-family: var(--font-family-monospace);
+    color: var(--color-secondary);
+    background-color: var(--color-secondary-background);
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+  }
+
   .center-content {
     margin: 0 auto;
     max-width: var(--content-max-width);
@@ -61,31 +75,42 @@
   }
 </style>
 
-<div class="container center-content">
-  {#if commit}
-    <div class="column-left">
-      <div class="source-tree">
-        {#await proj.getTree(urn, commit, "/", config)}
-          Loading..
-        {:then tree}
-          <Tree {tree} {path} {fetchTree} on:select={onSelect} />
-        {:catch err}
-          {err}
-        {/await}
+<main>
+  {#await proj.getTree(urn, commit, "/", config)}
+    Loading..
+  {:then tree}
+    <header>
+      <div class="anchor">
+        commit {commit}
+      </div>
+    </header>
+    <div class="container center-content">
+      {#if commit}
+        <div class="column-left">
+          <div class="source-tree">
+            <Tree {tree} {path} {fetchTree} on:select={onSelect} />
+          </div>
+        </div>
+        <div class="column-right">
+          {#await blob}
+            <Loading small center />
+          {:then blob}
+            {#if blob}
+              <Blob {blob} />
+            {:else}
+              <!-- Project has no README -->
+            {/if}
+          {:catch}
+            <!-- TODO: Handle error -->
+          {/await}
+        </div>
+      {/if}
+    </div>
+  {:catch err}
+    <div class="container center-content">
+      <div class="error error-message text-small">
+        API request to <code class="text-small">{err.url}</code> failed
       </div>
     </div>
-    <div class="column-right">
-      {#await blob}
-        <Loading small center />
-      {:then blob}
-        {#if blob}
-          <Blob {blob} />
-        {:else}
-          <!-- Project has no README -->
-        {/if}
-      {:catch}
-        <!-- TODO: Handle error -->
-      {/await}
-    </div>
-  {/if}
-</div>
+  {/await}
+</main>

src/base/projects/View.svelte

@@ -38,24 +38,12 @@
     padding: 4rem 0;
   }
   main > header {
-    margin-bottom: 4rem;
     padding: 0 8rem;
   }
   .title {
     font-size: 2.25rem;
     margin-bottom: 0.5rem;
   }
-
-  .anchor {
-    display: inline-block;
-    font-size: 0.75rem;
-    font-family: var(--font-family-monospace);
-    color: var(--color-secondary);
-    background-color: var(--color-secondary-background);
-    padding: 0.75rem;
-    border-radius: 0.25rem;
-  }
-
   .urn {
     font-family: var(--font-family-monospace);
     font-size: 0.75rem;
@@ -76,9 +64,6 @@
       <div class="title bold">{project.meta.name}</div>
       <div class="urn">{urn}</div>
       <div class="description">{project.meta.description}</div>
-      <div class="anchor">
-        commit {commit || project.head}
-      </div>
     </header>
     <Browser {urn} commit={commit || project.head} {path} {onSelect} {config} />
   {:else}