Add more help box states to the Sidebar

radicle-dev · Jan 9, 2024 · 4f308d4 · 4f308d4
1 parent 70ea7fb
commit 4f308d4
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 15 deletions.
diff --git a/src/views/projects/Layout.svelte b/src/views/projects/Layout.svelte
@@ -8,11 +8,12 @@
   import IconSmall from "@app/components/IconSmall.svelte";
   import Link from "@app/components/Link.svelte";
   import MobileFooter from "@app/App/MobileFooter.svelte";
-  import Sidebar from "./Sidebar.svelte";
+  import Sidebar from "@app/views/projects/Sidebar.svelte";
 
   export let activeTab: ActiveTab | undefined = undefined;
   export let baseUrl: BaseUrl;
   export let project: Project;
+  export let local: boolean;
 </script>
 
 <style>
@@ -67,7 +68,7 @@
   </div>
 
   <div class="sidebar">
-    <Sidebar {activeTab} {baseUrl} {project} />
+    <Sidebar {activeTab} {baseUrl} {project} {local} />
   </div>
 
   <div class="content">

diff --git a/src/views/projects/Sidebar.svelte b/src/views/projects/Sidebar.svelte
@@ -25,6 +25,7 @@
   export let activeTab: ActiveTab | undefined = undefined;
   export let baseUrl: BaseUrl;
   export let project: Project;
+  export let local: boolean;
 
   let expanded = true;
 
@@ -50,6 +51,8 @@
     storeSidebarState(expanded);
   }
 
+  $: disableLocalButton = $httpdStore.state === "stopped" || !local;
+
   onMount(() => {
     expanded = loadSidebarState();
   });
@@ -104,12 +107,16 @@
     width: 100%;
     gap: 0.25rem;
   }
-  .remote-disclaimer {
+  .help-box {
     padding: 1rem;
     background-color: var(--color-background-float);
     border: 1px solid var(--color-border-hint);
+    font-size: var(--font-size-small);
     border-radius: var(--border-radius-small);
   }
+  .help-box .title {
+    padding-bottom: 0.75rem;
+  }
 </style>
 
 <div class="sidebar">
@@ -193,32 +200,35 @@
     <div style="display: flex; flex-direction:column; gap: 1rem;">
       {#if !isLocal(baseUrl.hostname)}
         {#if $httpdStore.state === "stopped"}
-          <div class="remote-disclaimer">
-            <div class="txt-bold" style:padding-bottom="0.75rem">
-              Device not connected
-            </div>
+          <div class="help-box">
+            <div class="title txt-bold">Device not connected</div>
             <div>
               Click the Connect button in the top right corner to get started.
             </div>
           </div>
+        {:else if !local}
+          <div class="help-box">
+            <div class="title txt-bold">Project not available locally</div>
+            <div>
+              This project hasn't been found on your local node. Click the Clone
+              button in the top right corner to get a local copy.
+            </div>
+          </div>
         {:else}
-          <div class="remote-disclaimer">
-            <div class="txt-bold" style:padding-bottom="0.75rem">Read Only</div>
+          <div class="help-box">
+            <div class="title txt-bold">Read Only</div>
             <div>This is a read only preview hosted on</div>
             <ExternalLink href={baseUrl.hostname} />
           </div>
         {/if}
         <Link
-          disabled={$httpdStore.state === "stopped"}
+          disabled={disableLocalButton}
           route={{
             resource: "project.source",
             node: api.baseUrl,
             project: project.id,
           }}>
-          <Button
-            size="large"
-            styleWidth="100%"
-            disabled={$httpdStore.state === "stopped"}>
+          <Button size="large" styleWidth="100%" disabled={disableLocalButton}>
             <IconSmall name="device" />Make changes on your local node
           </Button>
         </Link>

diff --git a/src/views/projects/Source.svelte b/src/views/projects/Source.svelte
@@ -25,6 +25,7 @@
   export let revision: string | undefined;
   export let tree: Tree;
   export let seeding: boolean;
+  export let local: boolean;
 
   let mobileFileTree = false;
 
@@ -108,7 +109,7 @@
   }
 </style>
 
-<Layout {baseUrl} {project} activeTab="source">
+<Layout {baseUrl} {project} {local} activeTab="source">
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
 
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">

diff --git a/src/views/projects/router.ts b/src/views/projects/router.ts
@@ -114,6 +114,7 @@ export type ProjectLoadedRoute =
         revision: string | undefined;
         tree: Tree;
         path: string;
+        local: boolean;
         rawPath: (commit?: string) => string;
         blobResult: BlobResult;
         seeding: boolean;
@@ -418,6 +419,11 @@ async function loadTreeView(
     isLocalNodeSeeding(route),
   ]);
 
+  const local = await httpd.api.project
+    .getById(route.project)
+    .then(() => true)
+    .catch(() => false);
+
   if (route.route) {
     const { revision, path } = detectRevision(
       route.route,
@@ -451,6 +457,7 @@ async function loadTreeView(
       revision: route.revision,
       tree,
       path,
+      local,
       blobResult,
       seeding,
     },