Handle errors in Browser.svelte

Updates also the seed fixture to fix some minor issues and add a
relative image markdown example

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

scripts/create-seed-fixture

@@ -66,6 +66,8 @@ git checkout orphaned-branch
 git checkout main
 
 RAD_HOME=$ALICE_RAD_HOME rad init --name "source-browsing" --description "Git repository for source browsing tests" --default-branch "main" --no-confirm
+
+sleep 10
 RAD_HOME=$ALICE_RAD_HOME rad push --seed 0.0.0.0:8778 --all --sync
 PROJECT_URN=$(rad .)
 

src/Markdown.svelte

@@ -19,7 +19,7 @@
 
   export let content: string;
   export let doc = matter(content);
-  export let getImage: (path: string) => Promise<proj.Blob>;
+  export let getImage: (path: string) => Promise<proj.MaybeBlob>;
   export let hash: string | null = null;
 
   const frontMatter = Object.entries(doc.data).filter(
@@ -54,7 +54,7 @@
       // Make sure the source isn't a URL before trying to fetch it from the repo
       if (path && !isUrl(path) && !path.startsWith(`${base}twemoji`)) {
         getImage(path).then(blob => {
-          if (blob.content) {
+          if (blob?.content) {
             const mime = getImageMime(path);
             if (mime) {
               i.setAttribute("src", `data:${mime};base64,${blob.content}`);

src/base/projects/Blob.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Blob } from "@app/project";
+  import type { MaybeBlob, Blob } from "@app/project";
   import type { MaybeHighlighted } from "@app/syntax";
   import type { ProjectRoute } from "@app/router/definitions";
 
@@ -14,7 +14,7 @@
 
   export let activeRoute: ProjectRoute;
   export let blob: Blob;
-  export let getImage: (path: string) => Promise<Blob>;
+  export let getImage: (path: string) => Promise<MaybeBlob>;
   export let line: string | undefined = undefined;
 
   const fileExtension = blob.path.split(".").pop() ?? "";

src/base/projects/Browser.svelte

@@ -1,14 +1,21 @@
-<script lang="ts">
-  import type { Theme } from "@app/ThemeToggle.svelte";
-  import type { ProjectRoute } from "@app/router/definitions";
-  import type * as proj from "@app/project";
+<script lang="ts" context="module">
+  import { writable } from "svelte/store";
 
-  import Loading from "@app/Loading.svelte";
-  import Placeholder from "@app/Placeholder.svelte";
+  export const browserErrorStore = writable<
+    { message: string; path: string } | undefined
+  >();
+</script>
+
+<script lang="ts">
+  import type * as proj from "@app/project";
+  import type { ProjectRoute } from "@app/router/definitions";
+
+  import * as router from "@app/router";
   import * as utils from "@app/utils";
   import Button from "@app/Button.svelte";
-  import { theme } from "@app/ThemeToggle.svelte";
-  import * as router from "@app/router";
+  import Loading from "@app/Loading.svelte";
+  import Placeholder from "@app/Placeholder.svelte";
+  import { onMount } from "svelte";
 
   import Tree from "./Tree.svelte";
   import Blob from "./Blob.svelte";
@@ -20,7 +27,7 @@
 
   type State =
     | { status: Status.Loading; path: string }
-    | { status: Status.Loaded; path: string; blob: proj.Blob; theme: Theme };
+    | { status: Status.Loaded; path: string; blob: proj.Blob };
 
   export let project: proj.Project;
   export let tree: proj.Tree;
@@ -35,15 +42,8 @@
   // Whether the mobile file tree is visible.
   let mobileFileTree = false;
 
-  const loadBlob = async (
-    path: string,
-    theme: Theme,
-  ): Promise<proj.Blob | undefined> => {
-    if (
-      state.status === Status.Loaded &&
-      state.path === path &&
-      state.theme === theme
-    ) {
+  const loadBlob = async (path: string) => {
+    if (state.status === Status.Loaded && state.path === path) {
       return state.blob;
     }
 
@@ -51,26 +51,38 @@
       path === "/" ? project.getReadme(commit) : project.getBlob(commit, path);
 
     state = { status: Status.Loading, path };
-    try {
-      state = { status: Status.Loaded, path, blob: await promise, theme };
-      return state.blob;
-    } catch (err) {
-      console.warn("Could not load blob.");
-    }
+    state = { status: Status.Loaded, path, blob: await promise };
+    return state.blob;
   };
 
+  onMount(() => {
+    browserErrorStore.set(undefined);
+  });
+
   // Get an image blob based on a relative path.
-  const getImage = async (imagePath: string): Promise<proj.Blob> => {
+  const getImage = async (imagePath: string) => {
     const finalPath = utils.canonicalize(imagePath, path);
-    return project.getBlob(commit, finalPath);
+    return project.getBlob(commit, finalPath).catch(() => {
+      console.warn("Not able to load image blob:", finalPath);
+      return undefined;
+    });
   };
 
-  const onSelect = async (newPath: string, theme: Theme) => {
+  const onSelect = async (newPath: string) => {
+    browserErrorStore.set(undefined);
     // Ensure we don't spend any time in a "loading" state. This means
     // the loading spinner won't be shown, and instead the blob will be
     // displayed once loaded.
-    const blob = await loadBlob(newPath, theme);
-    getBlob = new Promise(resolve => resolve(blob));
+    const blob = await loadBlob(newPath).catch(() => {
+      browserErrorStore.set({
+        message: "Not able to load selected file",
+        path: newPath,
+      });
+      return undefined;
+    });
+    if (blob) {
+      getBlob = new Promise(resolve => resolve(blob));
+    }
 
     // Close mobile tree if user navigates to other file
     mobileFileTree = false;
@@ -82,15 +94,25 @@
   };
 
   const fetchTree = async (path: string) => {
-    return project.getTree(commit, path);
+    return project.getTree(commit, path).catch(() => {
+      browserErrorStore.set({
+        message: "Not able to expand directory",
+        path,
+      });
+      return undefined;
+    });
   };
 
   const toggleMobileFileTree = () => {
     mobileFileTree = !mobileFileTree;
   };
 
-  $: getBlob = loadBlob(path, $theme);
-  $: loadingPath = state.status === Status.Loading ? state.path : null;
+  $: getBlob = loadBlob(path).catch(() => {
+    browserErrorStore.set({ message: "Not able to load file", path });
+    return undefined;
+  });
+  $: loadingPath =
+    !$browserErrorStore && state.status === Status.Loading ? state.path : null;
 </script>
 
 <style>
@@ -195,33 +217,35 @@
             {fetchTree}
             {loadingPath}
             on:select={e => {
-              onSelect(e.detail, $theme);
+              onSelect(e.detail);
             }} />
         </div>
       </div>
       <div class="column-right">
-        {#await getBlob}
-          <Loading small center />
-        {:then blob}
-          {#if blob}
-            <Blob {line} {blob} {getImage} {activeRoute} />
-          {/if}
-        {:catch}
+        {#if $browserErrorStore}
           <Placeholder emoji="🍂">
             <span slot="title">
-              {#if path !== "/"}
-                <div class="txt-monospace">{path}</div>
-              {/if}
+              <div class="txt-monospace">{$browserErrorStore.path}</div>
             </span>
             <span slot="body">
-              {#if path === "/"}
-                The README could not be loaded.
-              {:else}
-                This path could not be loaded.
-              {/if}
+              <span>
+                {#if $browserErrorStore.path === "/"}
+                  The README could not be loaded.
+                {:else}
+                  {$browserErrorStore.message}
+                {/if}
+              </span>
             </span>
           </Placeholder>
-        {/await}
+        {:else}
+          {#await getBlob}
+            <Loading small center />
+          {:then blob}
+            {#if blob}
+              <Blob {line} {blob} {getImage} {activeRoute} />
+            {/if}
+          {/await}
+        {/if}
       </div>
     {:else}
       <div class="placeholder">

src/base/projects/Readme.svelte

@@ -5,7 +5,7 @@
   import Markdown from "@app/Markdown.svelte";
 
   export let content: string;
-  export let getImage: (path: string) => Promise<proj.Blob>;
+  export let getImage: (path: string) => Promise<proj.MaybeBlob>;
   export let activeRoute: ProjectRoute;
 
   $: hash = activeRoute.params.hash || null;

src/base/projects/Tree.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
 
-  import type { Tree } from "@app/project";
+  import type { MaybeTree, Tree } from "@app/project";
   import { ObjectType } from "@app/project";
 
   import File from "./Tree/File.svelte";
   import Folder from "./Tree/Folder.svelte";
 
-  export let fetchTree: (path: string) => Promise<Tree>;
+  export let fetchTree: (path: string) => Promise<MaybeTree>;
   export let path: string;
   export let tree: Tree;
   export let loadingPath: string | null = null;

src/base/projects/Tree/Folder.svelte

@@ -1,20 +1,22 @@
 <script lang="ts" strictEvents>
-  import { createEventDispatcher } from "svelte";
+  import type { MaybeTree } from "@app/project";
 
   import Loading from "@app/Loading.svelte";
-  import type { Tree } from "@app/project";
   import { ObjectType } from "@app/project";
+  import { createEventDispatcher } from "svelte";
 
   import File from "./File.svelte";
 
-  export let fetchTree: (path: string) => Promise<Tree>;
+  export let fetchTree: (path: string) => Promise<MaybeTree>;
   export let name: string;
   export let prefix: string;
   export let currentPath: string;
   export let loadingPath: string | null = null;
 
   let expanded = currentPath.indexOf(prefix) === 0;
-  let tree: Promise<Tree> | null = expanded ? fetchTree(prefix) : null;
+  let tree: Promise<MaybeTree> = fetchTree(prefix).then(tree => {
+    if (expanded) return tree;
+  });
 
   const dispatch = createEventDispatcher<{ select: string }>();
   const onSelectFile = ({ detail: path }: { detail: string }) =>
@@ -23,9 +25,9 @@
   const onClick = () => {
     expanded = !expanded;
 
-    if (expanded) {
-      tree = fetchTree(prefix);
-    }
+    tree = fetchTree(prefix).then(tree => {
+      if (expanded) return tree;
+    });
   };
 </script>
 

src/project.ts

@@ -8,6 +8,8 @@ import type { Wallet } from "@app/wallet";
 export type Urn = string;
 export type PeerId = string;
 export type Branches = { [key: string]: string };
+export type MaybeBlob = Blob | undefined;
+export type MaybeTree = Tree | undefined;
 
 export type Delegate =
   | {

tests/e2e/clipboard.spec.ts

@@ -2,7 +2,7 @@ import type { Page } from "@playwright/test";
 import { test, expect } from "@tests/support/fixtures.js";
 
 const sourceBrowsingFixture =
-  "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o";
+  "/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy";
 
 async function expectClipboard(content: string, page: Page) {
   const clipboardContent = await page.evaluate<string>(
@@ -34,21 +34,21 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
       "navigator.clipboard.readText()",
     );
     expect(clipboardContent).toBe(
-      "rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o",
+      "rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy",
     );
   }
 
   // `rad clone` URL.
   {
     await page.getByText("Clone").click();
-    await page.locator("text=rad clone rad://0.0.0.0/hnrkgd").hover();
+    await page.locator("text=rad clone rad://0.0.0.0/hnrkdi").hover();
     await page
       .locator(".clone-url-wrapper > span")
       .first()
       .locator(".clipboard")
       .click();
     await expectClipboard(
-      "rad clone rad://0.0.0.0/hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o",
+      "rad clone rad://0.0.0.0/hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy",
       page,
     );
   }
@@ -56,14 +56,14 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
   // `git clone` URL.
   {
     await page.getByText("Clone").click();
-    await page.locator("text=https://0.0.0.0/hnrkgd").hover();
+    await page.locator("text=https://0.0.0.0/hnrkdi").hover();
     await page
       .locator(".clone-url-wrapper > span")
       .last()
       .locator(".clipboard")
       .click();
     await expectClipboard(
-      "https://0.0.0.0/hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o.git",
+      "https://0.0.0.0/hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy.git",
       page,
     );
   }
@@ -76,7 +76,7 @@ test("copy to clipboard", async ({ page, browserName, context }) => {
 
     await page.locator(".clipboard").last().click();
     await expectClipboard(
-      "hyb6i8oggc3mgra9siy8yuohhtz34r98pcybja97c9o789wpsg6nn4",
+      "hybuytx44z9cfsm5739wecia9j4b7expgc15qkazph59szp57m4d3o",
       page,
     );
   }

tests/e2e/hashRouter.spec.ts

@@ -23,7 +23,7 @@ test("navigate between landing and project page", async ({ page }) => {
 
   await page.locator("text=source-browsing").click();
   await expect(page).toHaveURL(
-    `/#${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`,
+    `/#${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`,
   );
 
   await expectBackAndForwardNavigationWorks("/#/", page);
@@ -36,7 +36,7 @@ test("navigation between seed and project pages", async ({ page }) => {
   const project = page.locator(".project");
   await project.click();
   await expect(page).toHaveURL(
-    `/#${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`,
+    `/#${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`,
   );
 
   await expectBackAndForwardNavigationWorks("/#/seeds/radicle.local", page);
@@ -50,12 +50,12 @@ test.describe("project page navigation", () => {
   test("navigation between commit history and single commit", async ({
     page,
   }) => {
-    const projectHistoryURL = `/#${projectFixtureUrl}/history/530aabdcc80397af254bc488b767169b92496e81`;
+    const projectHistoryURL = `/#${projectFixtureUrl}/history/f0b8db68847b01f0964380507a9db6800e5b5342`;
     await page.goto(projectHistoryURL);
 
     await page.locator("text=Add Markdown cheat sheet").click();
     await expect(page).toHaveURL(
-      `/#${projectFixtureUrl}/commits/530aabdcc80397af254bc488b767169b92496e81`,
+      `/#${projectFixtureUrl}/commits/f0b8db68847b01f0964380507a9db6800e5b5342`,
     );
 
     await expectBackAndForwardNavigationWorks(projectHistoryURL, page);
@@ -63,14 +63,14 @@ test.describe("project page navigation", () => {
   });
 
   test("navigate between tree and commit history", async ({ page }) => {
-    const projectTreeURL = `/#${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`;
+    const projectTreeURL = `/#${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`;
 
     await page.goto(projectTreeURL);
     await expect(page).toHaveURL(projectTreeURL);
 
     await page.locator('role=button[name="Commit count"]').click();
     await expect(page).toHaveURL(
-      `/#${projectFixtureUrl}/history/530aabdcc80397af254bc488b767169b92496e81`,
+      `/#${projectFixtureUrl}/history/fcc929424b82984b7cbff9c01d2e20d9b1249842`,
     );
 
     await expectBackAndForwardNavigationWorks(projectTreeURL, page);
@@ -78,7 +78,7 @@ test.describe("project page navigation", () => {
   });
 
   test("navigate project paths", async ({ page }) => {
-    const projectTreeURL = `/#${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`;
+    const projectTreeURL = `/#${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`;
 
     await page.goto(projectTreeURL);
     await expect(page).toHaveURL(projectTreeURL);
@@ -98,7 +98,7 @@ test.describe("project page navigation", () => {
   });
 
   test("navigate project paths with a selected peer", async ({ page }) => {
-    const projectTreeURL = `/#${projectFixtureUrl}/remotes/hyn1mjueopwzrmb18c3zmgg8ei8qunn5wpg76ouymytfqkfxqx7bun/tree`;
+    const projectTreeURL = `/#${projectFixtureUrl}/remotes/hybg18bc4cu8z9xtj44skxperfdpxpp1wp8zygyzti5kfiggdizfxy/tree`;
 
     await page.goto(projectTreeURL);
     await expect(page).toHaveURL(projectTreeURL);

tests/e2e/historyRouter.spec.ts

@@ -17,7 +17,7 @@ test("navigate between landing and project page", async ({ page }) => {
 
   await page.locator("text=source-browsing").click();
   await expect(page).toHaveURL(
-    `${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`,
+    `${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`,
   );
 
   await expectBackAndForwardNavigationWorks("/", page);
@@ -30,7 +30,7 @@ test("navigation between seed and project pages", async ({ page }) => {
   const project = page.locator(".project");
   await project.click();
   await expect(page).toHaveURL(
-    `${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`,
+    `${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`,
   );
 
   await expectBackAndForwardNavigationWorks("/seeds/radicle.local", page);
@@ -44,12 +44,12 @@ test.describe("project page navigation", () => {
   test("navigation between commit history and single commit", async ({
     page,
   }) => {
-    const projectHistoryURL = `${projectFixtureUrl}/history/530aabdcc80397af254bc488b767169b92496e81`;
+    const projectHistoryURL = `${projectFixtureUrl}/history/fcc929424b82984b7cbff9c01d2e20d9b1249842`;
     await page.goto(projectHistoryURL);
 
     await page.locator("text=Add Markdown cheat sheet").click();
     await expect(page).toHaveURL(
-      `${projectFixtureUrl}/commits/530aabdcc80397af254bc488b767169b92496e81`,
+      `${projectFixtureUrl}/commits/f0b8db68847b01f0964380507a9db6800e5b5342`,
     );
 
     await expectBackAndForwardNavigationWorks(projectHistoryURL, page);
@@ -57,14 +57,14 @@ test.describe("project page navigation", () => {
   });
 
   test("navigate between tree and commit history", async ({ page }) => {
-    const projectTreeURL = `${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`;
+    const projectTreeURL = `${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`;
 
     await page.goto(projectTreeURL);
     await expect(page).toHaveURL(projectTreeURL);
 
     await page.locator('role=button[name="Commit count"]').click();
     await expect(page).toHaveURL(
-      `${projectFixtureUrl}/history/530aabdcc80397af254bc488b767169b92496e81`,
+      `${projectFixtureUrl}/history/fcc929424b82984b7cbff9c01d2e20d9b1249842`,
     );
 
     await expectBackAndForwardNavigationWorks(projectTreeURL, page);
@@ -72,7 +72,7 @@ test.describe("project page navigation", () => {
   });
 
   test("navigate project paths", async ({ page }) => {
-    const projectTreeURL = `${projectFixtureUrl}/tree/530aabdcc80397af254bc488b767169b92496e81`;
+    const projectTreeURL = `${projectFixtureUrl}/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842`;
 
     await page.goto(projectTreeURL);
     await expect(page).toHaveURL(projectTreeURL);
@@ -92,7 +92,7 @@ test.describe("project page navigation", () => {
   });
 
   test("navigate project paths with a selected peer", async ({ page }) => {
-    const projectTreeURL = `${projectFixtureUrl}/remotes/hyn1mjueopwzrmb18c3zmgg8ei8qunn5wpg76ouymytfqkfxqx7bun/tree`;
+    const projectTreeURL = `${projectFixtureUrl}/remotes/hybg18bc4cu8z9xtj44skxperfdpxpp1wp8zygyzti5kfiggdizfxy/tree`;
 
     await page.goto(projectTreeURL);
     await expect(page).toHaveURL(projectTreeURL);

tests/e2e/landingPage.spec.ts

@@ -20,5 +20,5 @@ test("show pinned projects", async ({ page }) => {
   ).toBeVisible();
 
   // Shows latest commit.
-  await expect(page.locator("text=530aabd")).toBeVisible();
+  await expect(page.locator("text=fcc9294")).toBeVisible();
 });

tests/e2e/project.spec.ts

@@ -21,7 +21,7 @@ test("navigate to project", async ({ page }) => {
   {
     const name = page.locator("text=source-browsing");
     const urn = page.locator(
-      "text=rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o",
+      "text=rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy",
     );
     const description = page.locator(
       "text=Git repository for source browsing tests",
@@ -35,9 +35,9 @@ test("navigate to project", async ({ page }) => {
   // Project menu shows default selected branch and commit and contributor counts.
   {
     await expect(page.getByTitle("Current branch")).toContainText(
-      "main 530aabd",
+      "main fcc9294",
     );
-    await expectCounts({ commits: 7, contributors: 1 }, page);
+    await expectCounts({ commits: 8, contributors: 1 }, page);
   }
 
   // Navigate to the project README.md by default.
@@ -85,7 +85,7 @@ test("navigate line numbers", async ({ page }) => {
   await page.locator('[href="#L5"]').click();
   await expect(page.locator("#L5")).toHaveClass("line highlight");
   await expect(page).toHaveURL(
-    "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o/tree/main/markdown/cheatsheet.md#L5",
+    "/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/tree/main/markdown/cheatsheet.md#L5",
   );
 
   await expectUrlPersistsReload(page);
@@ -95,12 +95,12 @@ test("navigate line numbers", async ({ page }) => {
   await expect(page.locator("#L5")).not.toHaveClass("line highlight");
   await expect(page.locator("#L30")).toHaveClass("line highlight");
   await expect(page).toHaveURL(
-    "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o/tree/main/markdown/cheatsheet.md#L30",
+    "/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/tree/main/markdown/cheatsheet.md#L30",
   );
 
   await page.getByText(".hidden").click();
   await expect(page).toHaveURL(
-    "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o/tree/main/.hidden",
+    "/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/tree/main/.hidden",
   );
 });
 
@@ -231,7 +231,7 @@ test("markdown files", async ({ page }) => {
   {
     await page.getByRole("link", { name: "YouTube Videos" }).click();
     await expect(page).toHaveURL(
-      "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o/tree/main/markdown/cheatsheet.md#videos",
+      "/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/tree/main/markdown/cheatsheet.md#videos",
     );
   }
 });
@@ -245,15 +245,15 @@ test("peer and branch switching", async ({ page }) => {
     await page.locator("text=alice").click();
     await expect(page.getByTitle("Change peer")).toHaveText("alice delegate");
     await expect(
-      page.locator("text=source-browsing / hyn1mj…qx7bun"),
+      page.locator("text=source-browsing / hybg18…dizfxy"),
     ).toBeVisible();
 
     // Default `main` branch.
     {
       await expect(page.getByTitle("Current branch")).toContainText(
-        "main 530aabd",
+        "main fcc9294",
       );
-      await expectCounts({ commits: 7, contributors: 1 }, page);
+      await expectCounts({ commits: 8, contributors: 1 }, page);
     }
 
     // Feature branch with a slash in the name.
@@ -291,7 +291,7 @@ test("peer and branch switching", async ({ page }) => {
     await expect(page.getByTitle("Change peer")).not.toContainText("bob");
 
     await expect(page.getByTitle("Current branch")).toContainText(
-      "main 530aabd",
+      "main fcc9294",
     );
     await expect(page.locator("text=Git test repository")).toBeVisible();
   }
@@ -307,10 +307,10 @@ test("peer and branch switching", async ({ page }) => {
     // Default `main` branch.
     {
       await expect(page.getByTitle("Current branch")).toContainText(
-        "main 0be0f03",
+        "main 2b32f6f",
       );
-      await expectCounts({ commits: 8, contributors: 2 }, page);
-      await expect(page.locator("text=0be0f03 Update readme")).toBeVisible();
+      await expectCounts({ commits: 9, contributors: 2 }, page);
+      await expect(page.locator("text=2b32f6f Update readme")).toBeVisible();
     }
   }
 });
@@ -321,12 +321,12 @@ test("clone modal", async ({ page }) => {
   await page.getByText("Clone").click();
   await expect(
     page.locator(
-      "text=rad clone rad://0.0.0.0/hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o",
+      "text=rad clone rad://0.0.0.0/hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy",
     ),
   ).toBeVisible();
   await expect(
     page.locator(
-      "text=https://0.0.0.0/hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o.git",
+      "text=https://0.0.0.0/hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy.git",
     ),
   ).toBeVisible();
 });
@@ -335,29 +335,98 @@ test("only one modal can be open at a time", async ({ page }) => {
   await page.goto(projectFixtureUrl);
 
   await page.getByTitle("Change peer").click();
-  await page.locator("text=alice hyn1mj").click();
+  await page.locator("text=alice hybg18").click();
 
   await page.getByText("Clone").click();
   await expect(page.locator("text=Code font")).not.toBeVisible();
   await expect(page.locator("text=Use the Radicle CLI")).toBeVisible();
-  await expect(page.locator("text=bob hyy1k6g")).not.toBeVisible();
+  await expect(page.locator("text=bob hyyzz9")).not.toBeVisible();
   await expect(page.locator("text=feature/branch")).not.toBeVisible();
 
   await page.getByTitle("Change branch").click();
   await expect(page.locator("text=Code font")).not.toBeVisible();
   await expect(page.locator("text=Use the Radicle CLI")).not.toBeVisible();
-  await expect(page.locator("text=bob hyy1k6g")).not.toBeVisible();
+  await expect(page.locator("text=bob hyyzz9")).not.toBeVisible();
   await expect(page.locator("text=feature/branch")).toBeVisible();
 
   await page.getByTitle("Change peer").click();
   await expect(page.locator("text=Code font")).not.toBeVisible();
   await expect(page.locator("text=Use the Radicle CLI")).not.toBeVisible();
-  await expect(page.locator("text=bob hyy1k6g")).toBeVisible();
+  await expect(page.locator("text=bob hyyzz9")).toBeVisible();
   await expect(page.locator("text=feature/branch")).not.toBeVisible();
 
   page.locator('button[name="Settings"]').click();
   await expect(page.locator("text=Code font")).toBeVisible();
   await expect(page.locator("text=Use the Radicle CLI")).not.toBeVisible();
-  await expect(page.locator("text=bob hyy1k6g")).not.toBeVisible();
+  await expect(page.locator("text=bob hyyzz9")).not.toBeVisible();
   await expect(page.locator("text=feature/branch")).not.toBeVisible();
 });
+
+test.describe("browser error handling", () => {
+  test("error appears when folder can't be loaded", async ({ page }) => {
+    await page.route(
+      "**/v1/projects/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/tree/fcc929424b82984b7cbff9c01d2e20d9b1249842/markdown/",
+      route => route.fulfill({ status: 500 }),
+    );
+
+    await page.goto(projectFixtureUrl);
+
+    const sourceTree = page.locator(".source-tree");
+    await sourceTree.locator("text=markdown/").click();
+
+    await expect(
+      page.locator("text=Not able to expand directory"),
+    ).toBeVisible();
+  });
+  test("error appears when file can't be loaded", async ({ page }) => {
+    await page.route(
+      "**/v1/projects/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/blob/fcc929424b82984b7cbff9c01d2e20d9b1249842/.hidden",
+      route => route.fulfill({ status: 500 }),
+    );
+
+    await page.goto(projectFixtureUrl);
+    await page.locator("text=.hidden").click();
+
+    await expect(page.locator("text=Not able to load file")).toBeVisible();
+  });
+  test("error appears when README can't be loaded", async ({ page }) => {
+    await page.route(
+      "**/v1/projects/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/readme/fcc929424b82984b7cbff9c01d2e20d9b1249842",
+      route => route.fulfill({ status: 500 }),
+    );
+
+    await page.goto(projectFixtureUrl);
+    await expect(
+      page.locator("text=The README could not be loaded."),
+    ).toBeVisible();
+  });
+  test("error appears when navigating to missing file", async ({ page }) => {
+    await page.route(
+      "**/v1/projects/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/blob/fcc929424b82984b7cbff9c01d2e20d9b1249842/.hidden",
+      route => route.fulfill({ status: 500 }),
+    );
+
+    await page.goto(`${projectFixtureUrl}/tree/master/.hidden`);
+
+    await expect(page.locator("text=Not able to load file")).toBeVisible();
+  });
+  test("error appears when a image with a relative path can't be loaded", async ({
+    page,
+  }) => {
+    await page.route(
+      "**/v1/projects/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/blob/fcc929424b82984b7cbff9c01d2e20d9b1249842/src/black-square.png",
+      route => route.fulfill({ status: 404 }),
+    );
+
+    await page.goto(projectFixtureUrl);
+    const sourceTree = page.locator(".source-tree");
+    await sourceTree.locator("text=markdown/").click();
+    await sourceTree.locator("text=loading-image.md").click();
+
+    // By having a relative path, this gives away that the image has not loaded
+    // else it would have been converted into a data base64 string
+    await expect(
+      page.locator("img[src='../src/black-square.png']"),
+    ).toBeVisible();
+  });
+});

tests/e2e/project/commit.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect, projectFixtureUrl } from "@tests/support/fixtures.js";
 
-const modifiedFileFixture = `${projectFixtureUrl}/remotes/hyy1k6ggg45pi7ip7ksyn1wt1ob4w5zh1awtg4qu3cxmbh5mws8pj1/commits/0be0f0302269b362be0bfe72aa4843eceaac5e3f`;
+const modifiedFileFixture = `${projectFixtureUrl}/remotes/hyyzz9w4ffg16zftjki3enajm4mkqkayb5ch1p6ns3f83np1hqkrp6/commits/2b32f6fe50090ebdb4cd7441e943330da3e6ff04`;
 
 test("navigation from commit list", async ({ page }) => {
   await page.goto(projectFixtureUrl);
   await page.getByTitle("Change peer").click();
-  await page.locator("text=bob hyy1k6").click();
+  await page.locator("text=bob hyyzz9").click();
   await page.locator('role=button[name="Commit count"]').click();
 
   await page.locator("text=Update readme").click();
@@ -16,7 +16,7 @@ test("relative timestamps", async ({ page }) => {
   await page.addInitScript(() => {
     window.initializeTestStubs = () => {
       window.e2eTestStubs.FakeTimers.install({
-        now: new Date("November 24 2022 12:00:00").valueOf(),
+        now: new Date("December 21 2022 12:00:00").valueOf(),
         shouldClearNativeTimers: true,
         shouldAdvanceTime: false,
       });
@@ -24,7 +24,7 @@ test("relative timestamps", async ({ page }) => {
   });
   await page.goto(modifiedFileFixture);
   await expect(
-    page.locator(".commit header >> text=bob committed 3 days ago"),
+    page.locator(".commit header >> text=bob committed 22 hours ago"),
   ).toBeVisible();
 });
 
@@ -37,7 +37,7 @@ test("modified file", async ({ page }) => {
     await expect(header.locator("text=Update readme")).toBeVisible();
     await expect(header.locator("text=Verified")).toBeVisible();
     await expect(
-      header.locator("text=0be0f0302269b362be0bfe72aa4843eceaac5e3f"),
+      header.locator("text=2b32f6fe50090ebdb4cd7441e943330da3e6ff04"),
     ).toBeVisible();
   }
 
@@ -53,7 +53,7 @@ test("modified file", async ({ page }) => {
 
 test("created file", async ({ page }) => {
   await page.goto(
-    `${projectFixtureUrl}/remotes/hyn1mjueopwzrmb18c3zmgg8ei8qunn5wpg76ouymytfqkfxqx7bun/commits/d6318f7f3d9c15b8ac6dd52267c53220d00f0982`,
+    `${projectFixtureUrl}/remotes/hybg18bc4cu8z9xtj44skxperfdpxpp1wp8zygyzti5kfiggdizfxy/commits/d6318f7f3d9c15b8ac6dd52267c53220d00f0982`,
   );
   await expect(
     page.locator("text=1 file(s) created with 9 addition(s) and 0 deletion(s)"),
@@ -63,7 +63,7 @@ test("created file", async ({ page }) => {
 
 test("deleted file", async ({ page }) => {
   await page.goto(
-    `${projectFixtureUrl}/remotes/hyn1mjueopwzrmb18c3zmgg8ei8qunn5wpg76ouymytfqkfxqx7bun/commits/cd13c2d9a8a930d64a82b6134b44d1b872e33662`,
+    `${projectFixtureUrl}/remotes/hybg18bc4cu8z9xtj44skxperfdpxpp1wp8zygyzti5kfiggdizfxy/commits/cd13c2d9a8a930d64a82b6134b44d1b872e33662`,
   );
   await expect(
     page.locator("text=1 file(s) deleted with 0 addition(s) and 1 deletion(s)"),

tests/e2e/project/commits.spec.ts

@@ -7,17 +7,19 @@ test("peer and branch switching", async ({ page }) => {
   // Alice's peer.
   {
     await page.getByTitle("Change peer").click();
-    await page.locator("text=alice hyn1mj").click();
+    await page.locator("text=alice hybg18").click();
     await expect(page.getByTitle("Change peer")).toHaveText("alice delegate");
 
     await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible();
     await expect(
       page.locator(".commit-group-headers .commit-teaser"),
-    ).toHaveCount(7);
+    ).toHaveCount(8);
 
     const latestCommit = page.locator(".commit-teaser").first();
-    await expect(latestCommit).toContainText("Add Markdown cheat sheet");
-    await expect(latestCommit).toContainText("530aabd");
+    await expect(latestCommit).toContainText(
+      "Adds a new markdown file with an image with a relative path",
+    );
+    await expect(latestCommit).toContainText("fcc9294");
 
     const earliestCommit = page.locator(".commit-teaser").last();
     await expect(earliestCommit).toContainText(
@@ -49,23 +51,23 @@ test("peer and branch switching", async ({ page }) => {
   // Bob's peer.
   {
     await page.getByTitle("Change peer").click();
-    await page.locator("text=bob hyy1k6").click();
+    await page.locator("text=bob hyyzz9").click();
     await expect(page.getByTitle("Change peer")).toHaveText("bob");
 
-    await expect(page.getByText("Monday, November 21, 2022")).toBeVisible();
+    await expect(page.getByText("Tuesday, December 20, 2022")).toBeVisible();
     await expect(
       page.locator(".commit-group-headers").first().locator(".commit-teaser"),
-    ).toHaveCount(1);
+    ).toHaveCount(3);
 
     await expect(page.getByText("Thursday, November 17, 2022")).toBeVisible();
     await expect(
       page.locator(".commit-group-headers").last().locator(".commit-teaser"),
-    ).toHaveCount(7);
+    ).toHaveCount(6);
 
     await page.pause();
     const latestCommit = page.locator(".commit-teaser").first();
     await expect(latestCommit).toContainText("Update readme");
-    await expect(latestCommit).toContainText("0be0f03");
+    await expect(latestCommit).toContainText("2b32f6f");
 
     const earliestCommit = page.locator(".commit-teaser").last();
     await expect(earliestCommit).toContainText(
@@ -80,7 +82,7 @@ test("verified badge", async ({ page }) => {
   await page.locator('role=button[name="Commit count"]').click();
 
   await page.getByTitle("Change peer").click();
-  await page.locator("text=bob hyy1k6").click();
+  await page.locator("text=bob hyyzz9").click();
   await expect(page.getByTitle("Change peer")).toHaveText("bob");
 
   await page.locator("text=Verified").hover();
@@ -92,7 +94,7 @@ test("verified badge", async ({ page }) => {
   ).toBeVisible();
   await expect(
     page.locator(
-      "text=bob committed hyy1k6ggg45pi7ip7ksyn1wt1ob4w5zh1awtg4qu3cxmbh5mws8pj1",
+      "text=bob committed hyyzz9w4ffg16zftjki3enajm4mkqkayb5ch1p6ns3f83np1hqkrp6",
     ),
   ).toBeVisible();
 });
@@ -101,7 +103,7 @@ test("relative timestamps", async ({ page }) => {
   await page.addInitScript(() => {
     window.initializeTestStubs = () => {
       window.e2eTestStubs.FakeTimers.install({
-        now: new Date("November 24 2022 12:00:00").valueOf(),
+        now: new Date("December 21 2022 12:00:00").valueOf(),
         shouldClearNativeTimers: true,
         shouldAdvanceTime: false,
       });
@@ -112,15 +114,15 @@ test("relative timestamps", async ({ page }) => {
   await page.locator('role=button[name="Commit count"]').click();
 
   await page.getByTitle("Change peer").click();
-  await page.locator("text=bob hyy1k6").click();
+  await page.locator("text=bob hyyzz9").click();
   await expect(page.getByTitle("Change peer")).toHaveText("bob");
 
   const latestCommit = page.locator(".commit-teaser").first();
-  await expect(latestCommit).toContainText("bob committed 3 days ago");
-  await expect(latestCommit).toContainText("0be0f03");
+  await expect(latestCommit).toContainText("bob committed 22 hours ago");
+  await expect(latestCommit).toContainText("2b32f6f");
 
   const earliestCommit = page.locator(".commit").last();
   await expect(earliestCommit).toContainText(
-    "Alice Liddell committed 7 days ago",
+    "Alice Liddell committed last month",
   );
 });

tests/e2e/search.spec.ts

@@ -4,14 +4,14 @@ test("navigate to existing project", async ({ page }) => {
   await page.goto("/");
   const searchInput = page.getByPlaceholder("Search a name or address…");
   await searchInput.click();
-  await searchInput.fill("rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o");
+  await searchInput.fill("rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy");
   await searchInput.press("Enter");
 
   await expect(page).toHaveURL(
-    "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o/tree",
+    "/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy/tree",
   );
   await expect(searchInput).not.toHaveValue(
-    "rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o",
+    "rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy",
   );
 });
 

tests/e2e/seed.spec.ts

@@ -13,7 +13,7 @@ test("seed metadata", async ({ page }) => {
     "alt",
     "🚀",
   );
-  await expect(page.locator("text=hyb6i8…sg6nn4")).toBeVisible();
+  await expect(page.locator("text=hybuyt…7m4d3o")).toBeVisible();
   await expect(page.locator("text=8777")).toBeVisible();
   await expect(page.locator("text=0.2.0")).toBeVisible();
 });
@@ -29,18 +29,18 @@ test("seed projects", async ({ page }) => {
       project.locator("text=Git repository for source browsing tests"),
     ).toBeVisible();
     await expect(
-      project.locator("text=530aabdcc80397af254bc488b767169b92496e81"),
+      project.locator("text=fcc929424b82984b7cbff9c01d2e20d9b1249842"),
     ).toBeVisible();
   }
 
   // Show project URN on hover.
   {
     await expect(
-      project.locator("text=rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o"),
+      project.locator("text=rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy"),
     ).not.toBeVisible();
     await project.hover();
     await expect(
-      project.locator("text=rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o"),
+      project.locator("text=rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy"),
     ).toBeVisible();
   }
 });

tests/support/fixtures.ts

@@ -173,7 +173,7 @@ export function appConfigWithFixture() {
       pinned: [
         {
           name: "source-browsing",
-          urn: "rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o",
+          urn: "rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy",
           seed: "0.0.0.0",
         },
       ],
@@ -181,5 +181,4 @@ export function appConfigWithFixture() {
   };
 }
 
-export const projectFixtureUrl =
-  "/seeds/0.0.0.0/rad:git:hnrkgd7sjt79k4j59ddh11ooxg18rk7soej8o";
+export const projectFixtureUrl = `/seeds/0.0.0.0/rad:git:hnrkdi8be7n4hhqoz9rpzrgd68u9dr3zsxgmy`;

tests/support/globalSetup.ts

@@ -8,7 +8,7 @@ export default async function globalSetup(_config: FullConfig): Promise<void> {
 // error that explains how to run it.
 async function assertHttpApiRunning(): Promise<void> {
   const palmTestFixtureSeedId =
-    "hyb6i8oggc3mgra9siy8yuohhtz34r98pcybja97c9o789wpsg6nn4";
+    "hybuytx44z9cfsm5739wecia9j4b7expgc15qkazph59szp57m4d3o";
 
   const notRunningMessage =
     "The http-api server with test fixtures needs to be running.\n" +

tests/visual/project.spec.ts

@@ -17,7 +17,7 @@ test("commits page", async ({ page }) => {
   });
 
   await page.goto(
-    `${projectFixtureUrl}/remotes/hyn1mjueopwzrmb18c3zmgg8ei8qunn5wpg76ouymytfqkfxqx7bun/history`,
+    `${projectFixtureUrl}/remotes/hybg18bc4cu8z9xtj44skxperfdpxpp1wp8zygyzti5kfiggdizfxy/history`,
     { waitUntil: "networkidle" },
   );
 
@@ -36,7 +36,7 @@ test("commit page", async ({ page }) => {
   });
 
   await page.goto(
-    `${projectFixtureUrl}/remotes/hyn1mjueopwzrmb18c3zmgg8ei8qunn5wpg76ouymytfqkfxqx7bun/commits/d6318f7f3d9c15b8ac6dd52267c53220d00f0982`,
+    `${projectFixtureUrl}/remotes/hybg18bc4cu8z9xtj44skxperfdpxpp1wp8zygyzti5kfiggdizfxy/commits/d6318f7f3d9c15b8ac6dd52267c53220d00f0982`,
   );
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
@@ -47,3 +47,10 @@ test("markdown rendering", async ({ page }) => {
   });
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
+
+test("relative image not able to being loaded", async ({ page }) => {
+  await page.goto(`${projectFixtureUrl}/tree/main/markdown/loading-image.md`, {
+    waitUntil: "networkidle",
+  });
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});