5cd0981 Rename "project.tree" to "project.source" — radicle-explorer

modified src/App.svelte

@@ -10,7 +10,6 @@

   import LoadingBar from "./App/LoadingBar.svelte";
   import ModalPortal from "./App/ModalPortal.svelte";
   import Browser from "@app/views/projects/Browser.svelte";
   import Commit from "@app/views/projects/Commit.svelte";
   import History from "@app/views/projects/History.svelte";
   import Home from "@app/views/home/Index.svelte";

@@ -21,6 +20,7 @@

   import Patch from "@app/views/projects/Patch.svelte";
   import Patches from "@app/views/projects/Patches.svelte";
   import Session from "@app/views/session/Index.svelte";
   import Source from "@app/views/projects/Source.svelte";
   import LoadError from "@app/components/LoadError.svelte";
   import Loading from "@app/components/Loading.svelte";

@@ -76,8 +76,8 @@

       <Nodes {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "session"}
       <Session activeRoute={$activeRouteStore} />
     {:else if $activeRouteStore.resource === "project.tree"}
       <Browser {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "project.source"}
       <Source {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "project.history"}
       <History {...$activeRouteStore.params} />
     {:else if $activeRouteStore.resource === "project.commit"}

modified src/App/Header/Search.svelte

@@ -49,7 +49,7 @@

       if (searchResult.results.length === 1) {
         const { project, baseUrl } = searchResult.results[0];
         void router.push({
           resource: "project.tree",
           resource: "project.source",
           project: project.id,
           node: baseUrl,
         });

modified src/App/Header/SearchResultsModal.svelte

@@ -37,7 +37,7 @@

             <Link
               on:afterNavigate={modal.hide}
               route={{
                 resource: "project.tree",
                 resource: "project.source",
                 node: result.baseUrl,
                 project: result.project.id,
               }}>

modified src/lib/router.ts

@@ -127,7 +127,7 @@ function setTitle(loadedRoute: LoadedRoute) {

     title.push("Page not found");
     title.push("Radicle");
   } else if (
     loadedRoute.resource === "project.tree" ||
     loadedRoute.resource === "project.source" ||
     loadedRoute.resource === "project.history" ||
     loadedRoute.resource === "project.commit" ||
     loadedRoute.resource === "project.issue" ||

@@ -244,7 +244,7 @@ export function routeToPath(route: Route): string {

   } else if (route.resource === "loadError") {
     return "";
   } else if (
     route.resource === "project.tree" ||
     route.resource === "project.source" ||
     route.resource === "project.history" ||
     route.resource === "project.commit" ||
     route.resource === "project.issues" ||

modified src/lib/router/definitions.ts

@@ -56,7 +56,7 @@ export async function loadRoute(route: Route): Promise<LoadedRoute> {

   } else if (route.resource === "home") {
     return await loadHomeRoute();
   } else if (
     route.resource === "project.tree" ||
     route.resource === "project.source" ||
     route.resource === "project.history" ||
     route.resource === "project.commit" ||
     route.resource === "project.issues" ||

modified src/views/home/Index.svelte

@@ -70,7 +70,7 @@

         <div class="project">
           <Link
             route={{
               resource: "project.tree",
               resource: "project.source",
               project: project.id,
               node: baseUrl,
             }}>

modified src/views/nodes/View.svelte

@@ -120,7 +120,7 @@

         <div style:margin-bottom="0.5rem">
           <Link
             route={{
               resource: "project.tree",
               resource: "project.source",
               project: project.id,
               node: baseUrl,
             }}>

deleted src/views/projects/Browser.svelte

@@ -1,230 +0,0 @@

 <script lang="ts">
   import type { BaseUrl, Project, Remote, Tree } from "@httpd-client";
   import type { BlobResult } from "./router";
   import type { Route } from "@app/lib/router";
   import * as utils from "@app/lib/utils";
   import { HttpdClient } from "@httpd-client";
   import Button from "@app/components/Button.svelte";
   import Layout from "./Layout.svelte";
   import Placeholder from "@app/components/Placeholder.svelte";
   import SourceBrowsingHeader from "./SourceBrowsingHeader.svelte";
   import BlobComponent from "./Blob.svelte";
   import TreeComponent from "./Tree.svelte";
   export let baseUrl: BaseUrl;
   export let blobResult: BlobResult;
   export let branches: string[];
   export let path: string;
   export let peer: string | undefined;
   export let peers: Remote[];
   export let project: Project;
   export let revision: string | undefined;
   export let tree: Tree;
   // Whether the mobile file tree is visible.
   let mobileFileTree = false;
   const api = new HttpdClient(baseUrl);
   const fetchTree = async (path: string) => {
     return api.project
       .getTree(project.id, tree.lastCommit.id, path)
       .catch(() => {
         blobResult = {
           ok: false,
           error: {
             message: "Not able to expand directory",
             path,
           },
         };
         return undefined;
       });
   };
   $: peersWithRoute = peers.map(remote => ({
     remote,
     selected: remote.id === peer,
     route: {
       resource: "project.tree",
       node: baseUrl,
       project: project.id,
       peer: remote.id,
     } as Route,
   }));
   $: branchesWithRoute = branches.map(name => ({
     name,
     route: {
       resource: "project.tree",
       node: baseUrl,
       project: project.id,
       peer,
       revision: name,
     } as Route,
   }));
 </script>
 <style>
   .center-content {
     margin: 0 auto;
   }
   .container {
     display: flex;
     width: inherit;
     margin-bottom: 4rem;
     padding: 0 2rem 0 8rem;
   }
   .column-left {
     display: flex;
     flex-direction: column;
     padding-right: 1rem;
   }
   .column-right {
     display: flex;
     flex-direction: column;
     padding-left: 1rem;
     min-width: var(--content-min-width);
     width: 100%;
   }
   .placeholder {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
   .source-tree {
     overflow-x: hidden;
   }
   nav {
     padding: 0 2rem;
   }
   .sticky {
     position: sticky;
     top: 2rem;
     max-height: 100vh;
   }
   @media (max-width: 960px) {
     .container {
       padding-left: 2rem;
     }
   }
   @media (max-width: 720px) {
     .column-right {
       padding: 1.5rem 0;
       min-width: 0;
     }
     .placeholder {
       padding: 1.5rem;
     }
     .source-tree {
       padding: 0 2rem;
       margin: 1rem 0;
     }
     .container {
       padding: 0;
       flex-direction: column;
     }
     .column-left {
       display: none;
       padding-right: 0;
     }
     .column-left-visible {
       display: block;
     }
     .sticky {
       max-height: initial;
     }
   }
 </style>
 <Layout {baseUrl} {project} {peer} activeTab="source">
   <SourceBrowsingHeader
     node={baseUrl}
     {project}
     peers={peersWithRoute}
     branches={branchesWithRoute}
     {revision}
     {tree}
     historyLinkActive={false} />
   <main>
     <!-- Mobile navigation -->
     {#if tree.entries.length > 0}
       <nav class="layout-mobile">
         <Button
           style="width: 100%;"
           variant="secondary"
           on:click={() => {
             mobileFileTree = !mobileFileTree;
           }}>
           Browse
         </Button>
       </nav>
     {/if}
     <div class="container center-content">
       {#if tree.entries.length > 0}
         <div class="column-left" class:column-left-visible={mobileFileTree}>
           <div class="source-tree sticky">
             <TreeComponent
               projectId={project.id}
               {revision}
               {baseUrl}
               {fetchTree}
               {path}
               {peer}
               {tree}
               on:select={() => {
                 // Close mobile tree if user navigates to other file.
                 mobileFileTree = false;
               }} />
           </div>
         </div>
         <div class="column-right">
           {#if blobResult.ok}
             <BlobComponent
               {baseUrl}
               projectId={project.id}
               {peer}
               {revision}
               {path}
               blob={blobResult.blob}
               highlighted={blobResult.highlighted}
               rawPath={utils.getRawBasePath(
                 project.id,
                 baseUrl,
                 tree.lastCommit.id,
               )} />
           {:else}
             <Placeholder emoji="🍂">
               <span slot="title">
                 <div class="txt-monospace">{blobResult.error.path}</div>
               </span>
               <span slot="body">
                 {blobResult.error.message}
               </span>
             </Placeholder>
           {/if}
         </div>
       {:else}
         <div class="placeholder">
           <Placeholder emoji="👀">
             <span slot="title">Nothing to show</span>
             <span slot="body">
               We couldn't find any files at this revision.
             </span>
           </Placeholder>
         </div>
       {/if}
     </div>
   </main>
 </Layout>

modified src/views/projects/Commit/CommitTeaser.svelte

@@ -132,7 +132,7 @@

       title="Browse the repository at this point in the history">
       <Link
         route={{
           resource: "project.tree",
           resource: "project.source",
           project: projectId,
           node: baseUrl,
           revision: commit.id,

modified src/views/projects/Header.svelte

@@ -46,7 +46,7 @@

 <div class="header">
   <Link
     route={{
       resource: "project.tree",
       resource: "project.source",
       project: projectId,
       node: baseUrl,
       path: "/",

modified src/views/projects/ProjectMeta.svelte

@@ -87,7 +87,7 @@

     <span class="truncate">
       <Link
         route={{
           resource: "project.tree",
           resource: "project.source",
           project: projectId,
           node: baseUrl,
         }}>

modified src/views/projects/Readme.svelte

@@ -23,7 +23,7 @@

       // Markdown.
       linkBaseUrl = new URL(
         routeToPath({
           resource: "project.tree",
           resource: "project.source",
           project: projectId,
           node: baseUrl,
           peer,

added src/views/projects/Source.svelte

@@ -0,0 +1,230 @@

 <script lang="ts">
   import type { BaseUrl, Project, Remote, Tree } from "@httpd-client";
   import type { BlobResult } from "./router";
   import type { Route } from "@app/lib/router";
   import * as utils from "@app/lib/utils";
   import { HttpdClient } from "@httpd-client";
   import Button from "@app/components/Button.svelte";
   import Layout from "./Layout.svelte";
   import Placeholder from "@app/components/Placeholder.svelte";
   import SourceBrowsingHeader from "./SourceBrowsingHeader.svelte";
   import BlobComponent from "./Blob.svelte";
   import TreeComponent from "./Tree.svelte";
   export let baseUrl: BaseUrl;
   export let blobResult: BlobResult;
   export let branches: string[];
   export let path: string;
   export let peer: string | undefined;
   export let peers: Remote[];
   export let project: Project;
   export let revision: string | undefined;
   export let tree: Tree;
   // Whether the mobile file tree is visible.
   let mobileFileTree = false;
   const api = new HttpdClient(baseUrl);
   const fetchTree = async (path: string) => {
     return api.project
       .getTree(project.id, tree.lastCommit.id, path)
       .catch(() => {
         blobResult = {
           ok: false,
           error: {
             message: "Not able to expand directory",
             path,
           },
         };
         return undefined;
       });
   };
   $: peersWithRoute = peers.map(remote => ({
     remote,
     selected: remote.id === peer,
     route: {
       resource: "project.source",
       node: baseUrl,
       project: project.id,
       peer: remote.id,
     } as Route,
   }));
   $: branchesWithRoute = branches.map(name => ({
     name,
     route: {
       resource: "project.source",
       node: baseUrl,
       project: project.id,
       peer,
       revision: name,
     } as Route,
   }));
 </script>
 <style>
   .center-content {
     margin: 0 auto;
   }
   .container {
     display: flex;
     width: inherit;
     margin-bottom: 4rem;
     padding: 0 2rem 0 8rem;
   }
   .column-left {
     display: flex;
     flex-direction: column;
     padding-right: 1rem;
   }
   .column-right {
     display: flex;
     flex-direction: column;
     padding-left: 1rem;
     min-width: var(--content-min-width);
     width: 100%;
   }
   .placeholder {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
   .source-tree {
     overflow-x: hidden;
   }
   nav {
     padding: 0 2rem;
   }
   .sticky {
     position: sticky;
     top: 2rem;
     max-height: 100vh;
   }
   @media (max-width: 960px) {
     .container {
       padding-left: 2rem;
     }
   }
   @media (max-width: 720px) {
     .column-right {
       padding: 1.5rem 0;
       min-width: 0;
     }
     .placeholder {
       padding: 1.5rem;
     }
     .source-tree {
       padding: 0 2rem;
       margin: 1rem 0;
     }
     .container {
       padding: 0;
       flex-direction: column;
     }
     .column-left {
       display: none;
       padding-right: 0;
     }
     .column-left-visible {
       display: block;
     }
     .sticky {
       max-height: initial;
     }
   }
 </style>
 <Layout {baseUrl} {project} {peer} activeTab="source">
   <SourceBrowsingHeader
     node={baseUrl}
     {project}
     peers={peersWithRoute}
     branches={branchesWithRoute}
     {revision}
     {tree}
     historyLinkActive={false} />
   <main>
     <!-- Mobile navigation -->
     {#if tree.entries.length > 0}
       <nav class="layout-mobile">
         <Button
           style="width: 100%;"
           variant="secondary"
           on:click={() => {
             mobileFileTree = !mobileFileTree;
           }}>
           Browse
         </Button>
       </nav>
     {/if}
     <div class="container center-content">
       {#if tree.entries.length > 0}
         <div class="column-left" class:column-left-visible={mobileFileTree}>
           <div class="source-tree sticky">
             <TreeComponent
               projectId={project.id}
               {revision}
               {baseUrl}
               {fetchTree}
               {path}
               {peer}
               {tree}
               on:select={() => {
                 // Close mobile tree if user navigates to other file.
                 mobileFileTree = false;
               }} />
           </div>
         </div>
         <div class="column-right">
           {#if blobResult.ok}
             <BlobComponent
               {baseUrl}
               projectId={project.id}
               {peer}
               {revision}
               {path}
               blob={blobResult.blob}
               highlighted={blobResult.highlighted}
               rawPath={utils.getRawBasePath(
                 project.id,
                 baseUrl,
                 tree.lastCommit.id,
               )} />
           {:else}
             <Placeholder emoji="🍂">
               <span slot="title">
                 <div class="txt-monospace">{blobResult.error.path}</div>
               </span>
               <span slot="body">
                 {blobResult.error.message}
               </span>
             </Placeholder>
           {/if}
         </div>
       {:else}
         <div class="placeholder">
           <Placeholder emoji="👀">
             <span slot="title">Nothing to show</span>
             <span slot="body">
               We couldn't find any files at this revision.
             </span>
           </Placeholder>
         </div>
       {/if}
     </div>
   </main>
 </Layout>

modified src/views/projects/SourceBrowser/FileDiff.svelte

@@ -339,7 +339,7 @@

     <div class="browse" title="View file">
       <Link
         route={{
           resource: "project.tree",
           resource: "project.source",
           project: projectId,
           node: baseUrl,
           path: file.path,

modified src/views/projects/SourceBrowser/FileLocationChange.svelte

@@ -53,7 +53,7 @@

     <div class="browse" title="View file">
       <Link
         route={{
           resource: "project.tree",
           resource: "project.source",
           project: projectId,
           node: baseUrl,
           path: file.newPath,

modified src/views/projects/Tree.svelte

@@ -36,7 +36,7 @@

   {:else}
     <Link
       route={{
         resource: "project.tree",
         resource: "project.source",
         project: projectId,
         node: baseUrl,
         path: entry.path,

modified src/views/projects/Tree/Folder.svelte

@@ -98,7 +98,7 @@

           {:else}
             <Link
               route={{
                 resource: "project.tree",
                 resource: "project.source",
                 project: projectId,
                 node: baseUrl,
                 path: entry.path,

modified src/views/projects/router.ts

@@ -51,7 +51,7 @@ interface ProjectIssuesRoute {

 }
 interface ProjectTreeRoute {
   resource: "project.tree";
   resource: "project.source";
   node: BaseUrl;
   project: string;
   path?: string;

@@ -97,7 +97,7 @@ interface ProjectPatchesRoute {

 export type ProjectLoadedRoute =
   | {
       resource: "project.tree";
       resource: "project.source";
       params: {
         baseUrl: BaseUrl;
         project: Project;

@@ -233,7 +233,7 @@ export async function loadProjectRoute(

 ): Promise<ProjectLoadedRoute | LoadError> {
   const api = new HttpdClient(route.node);
   try {
     if (route.resource === "project.tree") {
     if (route.resource === "project.source") {
       return loadTreeView(route);
     } else if (route.resource === "project.history") {
       return loadHistoryView(route);

@@ -391,7 +391,7 @@ async function loadTreeView(

     loadBlob(api, project.id, commit, path),
   ]);
   return {
     resource: "project.tree",
     resource: "project.source",
     params: {
       baseUrl: route.node,
       project,

@@ -620,7 +620,7 @@ export function resolveProjectRoute(

   if (!content || content === "tree") {
     return {
       resource: "project.tree",
       resource: "project.source",
       node,
       project,
       peer,

@@ -736,7 +736,7 @@ export function projectRouteToPath(route: ProjectRoute): string {

   const pathSegments = [node, route.project];
   if (route.resource === "project.tree") {
   if (route.resource === "project.source") {
     if (route.peer) {
       pathSegments.push("remotes", route.peer);
     }

@@ -837,7 +837,7 @@ function patchRouteToPath(route: ProjectPatchRoute): string {

 export function projectTitle(loadedRoute: ProjectLoadedRoute) {
   const title: string[] = [];
   if (loadedRoute.resource === "project.tree") {
   if (loadedRoute.resource === "project.source") {
     title.push(loadedRoute.params.project.name);
     title.push(loadedRoute.params.project.description);
   } else if (loadedRoute.resource === "project.commit") {

modified tests/unit/router.test.ts

@@ -29,7 +29,7 @@ describe("route invariant when parsed", () => {

   });
   test("projects.tree", () => {
     expectParsingInvariant({
       resource: "project.tree",
       resource: "project.source",
       node,
       project: "rad:zKtT7DmF9H34KkvcKj9PHW19WzjT",
       route: "",

@@ -38,7 +38,7 @@ describe("route invariant when parsed", () => {

   test("projects.tree with peer", () => {
     expectParsingInvariant({
       resource: "project.tree",
       resource: "project.source",
       node,
       project: "PROJECT",
       peer: "PEER",

@@ -48,7 +48,7 @@ describe("route invariant when parsed", () => {

   test("projects.tree with peer and revision", () => {
     const route: Route = {
       resource: "project.tree",
       resource: "project.source",
       node,
       project: "PROJECT",
       peer: "PEER",

@@ -63,7 +63,7 @@ describe("route invariant when parsed", () => {

   test("projects.tree with peer and revision and path", () => {
     const route: Route = {
       resource: "project.tree",
       resource: "project.source",
       node,
       project: "PROJECT",
       peer: "PEER",

@@ -264,7 +264,7 @@ describe("pathToRoute", () => {

     expectPathToRoute(
       "/nodes/willow.radicle.garden/rad:zKtT7DmF9H34KkvcKj9PHW19WzjT/",
       {
         resource: "project.tree",
         resource: "project.source",
         node: {
           hostname: "willow.radicle.garden",
           scheme: "http",

@@ -280,7 +280,7 @@ describe("pathToRoute", () => {

     expectPathToRoute(
       "/nodes/willow.radicle.garden/rad:zKtT7DmF9H34KkvcKj9PHW19WzjT",
       {
         resource: "project.tree",
         resource: "project.source",
         node: {
           hostname: "willow.radicle.garden",
           scheme: "http",