Improving error handling

packages/src/lib/components/nav-bar.svelte

@@ -24,7 +24,6 @@
     border-bottom: solid thin var(--border-color);
     position: sticky;
     top: 0;
-    z-index: 10;
   }
 
   ul {

packages/src/routes/+layout.svelte

@@ -14,6 +14,7 @@
     --button-color: #f6f6f6;
     --font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
     --navbar-height: 3em;
+    --shade-background: rgba(0, 0, 0, 0.2);
     --shade-color: #eee;
     --theme-background: white;
     --theme-color: #444;

packages/src/routes/api/[slug]/+server.js

@@ -13,9 +13,9 @@ export const POST = async ({ params, request }) => {
         const capKey = await response.json()
 
         return json({ success: true, capKey })
-      } catch (err) {
-        console.log({ err })
-        return json({ success: false, code: 500, error: err })
+      } catch (error) {
+        console.log({ error })
+        return json({ success: false, code: 500, error })
       }
     }
 
@@ -25,12 +25,11 @@ export const POST = async ({ params, request }) => {
         const url = `${env.TAHOE_API}/uri/${encodedCapKey}?t=json`
         const response = await fetch(url, { method: 'GET' })
         const list = await response.json()
-        console.log({ url, list })
 
         return json({ success: true, list })
-      } catch (err) {
-        console.log({ err })
-        return json({ success: false, code: 500, error: err })
+      } catch (error) {
+        console.log({ error })
+        return json({ success: false, code: 500, error, message: error.cause.message })
       }
     }
 

packages/src/routes/dashboard/+page.server.js

@@ -25,7 +25,14 @@ export const actions = {
         body: JSON.stringify({ capKey: encoded })
       })
       const jsonResponse = await response.json()
-      if (!jsonResponse.success) throw new Error(jsonResponse.error)
+
+      if (!jsonResponse.success) {
+        if (jsonResponse.message.includes('ECONNREFUSED')) {
+          return { error: 'Tahoe server may be offline.' }
+        } else {
+          throw new Error(jsonResponse.error)
+        }
+      }
 
       return { endpoint: 'listDirectories', list: jsonResponse.list, capKey }
     } catch (err) {

packages/src/routes/dashboard/+page.svelte

@@ -7,6 +7,8 @@
   let capKey = $state()
   let capKeyInput = $state()
   let newCapKey = $state()
+  let modalTitle = $state()
+  let modalText = $state()
   let checked = $state(false)
   let showModal = $state(false)
 
@@ -39,7 +41,9 @@
   beforeNavigate(({ cancel }) => {
     if (newCapKey && !capKey) {
       cancel()
-      alert('Please confirm you copied and saved the cap key.')
+      modalTitle = 'Warning'
+      modalText = 'Please confirm you copied and saved the cap key.'
+      showModal = true
     }
   })
 
@@ -48,6 +52,14 @@
   })
 
   $effect(() => console.log({ form }))
+
+  $effect(() => {
+    if (form?.error) {
+      modalTitle = 'Error'
+      modalText = form.error
+      showModal = true
+    }
+  })
 </script>
 
 <svelte:head>
@@ -56,8 +68,6 @@
 </svelte:head>
 <h1>Dashboard</h1>
 
-<button onclick={() => showModal = true}>Modal</button>
-
 {#if !capKey && !newCapKey}
   <div class='cap-key-div add'>
     <form action='?/listDirectories' method='post' enctype='form-data' use:enhance={enhanceForm}>
@@ -112,7 +122,8 @@
 {/if}
 
 <Modal {showModal} escape={() => showModal = false}>
-  <h1>Modal</h1>
+  <h2>{modalTitle}</h2>
+  <p>{modalText}</p>
   <button onclick={() => showModal = false}>Ok</button>
 </Modal>
 
@@ -131,25 +142,6 @@
     margin: 1em 0;
   }
 
-  .cap-key {
-    display: flex;
-    margin: auto 0 2em 0;
-  }
-
-  .cap-key label {
-    min-width: 5em;
-    margin: auto 0;
-  }
-
-  .cap-key input {
-    width: 100%;
-  }
-
-  .cap-key button {
-    min-width: 10em;
-    margin: auto 0 auto 1em;
-  }
-
   .cap-key-div {
     max-width: 45em;
     margin: 0 auto;