b856676 Improve project failed state — radicle-explorer

modified 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;
 }

modified 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}`;
   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);
     }
   });
   if (! response.ok) {
     return null;
     this.name = "ApiError";
     this.url = url;
   }
   return response.json();
 }

modified 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}

modified 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>
     <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}
   {: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>
   {/if}
 </div>
   {/await}
 </main>

modified 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}