e86acca Handle errors in Browser.svelte — radicle-explorer

modified 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 .)

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

modified 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() ?? "";

modified src/base/projects/Browser.svelte

@@ -1,14 +1,21 @@

 <script lang="ts" context="module">
   import { writable } from "svelte/store";
   export const browserErrorStore = writable<
     { message: string; path: string } | undefined
   >();
 </script>
 <script lang="ts">
   import type { Theme } from "@app/ThemeToggle.svelte";
   import type { ProjectRoute } from "@app/router/definitions";
   import type * as proj from "@app/project";
   import type { ProjectRoute } from "@app/router/definitions";
   import Loading from "@app/Loading.svelte";
   import Placeholder from "@app/Placeholder.svelte";
   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">

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

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

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

modified 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 =
   | {

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

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

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

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

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

modified 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)"),

modified 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",
   );
 });

modified 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",
   );
 });

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

modified tests/fixtures/repos/source-browsing.tar.bz2

modified tests/fixtures/seeds/palm.tar.bz2

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

modified 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" +

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