Add local node switch and disclaimer

radicle-dev · Jan 8, 2024 · d213069 · d213069
1 parent a7bf920
commit d213069
Showing 1 changed file with 52 additions and 18 deletions.
diff --git a/src/views/projects/Sidebar.svelte b/src/views/projects/Sidebar.svelte
@@ -13,9 +13,13 @@
   import Link from "@app/components/Link.svelte";
   import Popover from "@app/components/Popover.svelte";
 
+  import ExternalLink from "@app/components/ExternalLink.svelte";
   import Help from "@app/App/Help.svelte";
   import Settings from "@app/App/Settings.svelte";
 
+  import { api } from "@app/lib/httpd";
+  import { isLocal } from "@app/lib/utils";
+
   const SIDEBAR_STATE_KEY = "sidebarState";
 
   export let activeTab: ActiveTab | undefined = undefined;
@@ -99,11 +103,17 @@
     width: 100%;
     gap: 0.25rem;
   }
+  .remote-disclaimer {
+    padding: 1rem;
+    background-color: var(--color-background-float);
+    border: 1px solid var(--color-border-hint);
+    border-radius: var(--border-radius-small);
+  }
 </style>
 
 <div class="sidebar">
   {#if expanded}
-    <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <div>
       <div class="id" style:padding="0.5rem 0.75rem">
         <CopyableId id={project.id} />
       </div>
@@ -179,28 +189,52 @@
       </div>
     </div>
 
-    <div class="sidebar-footer" style:flex-direction="row">
-      <IconButton title={"Collapse"} on:click={toggleSidebar}>
-        <IconSmall name="chevron-left" /> Collapse
-      </IconButton>
+    <div style="display: flex; flex-direction:column; gap: 1rem;">
+      {#if !isLocal(baseUrl.hostname)}
+        <div class="remote-disclaimer">
+          <div class="txt-bold" style:padding-bottom="0.75rem">Read Only</div>
+          <div>This is a read only preview hosted on</div>
+          <ExternalLink href={baseUrl.hostname} />
+        </div>
+        <Link
+          route={{
+            resource: "project.source",
+            node: api.baseUrl,
+            project: project.id,
+          }}>
+          <Button size="large" styleWidth="100%">
+            <IconSmall name="device" />Make changes on your local node
+          </Button>
+        </Link>
+      {/if}
 
-      <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
-        <IconButton title="Settings" slot="toggle" let:toggle on:click={toggle}>
-          <IconSmall name="settings" />
-          Settings
+      <div class="sidebar-footer" style:flex-direction="row">
+        <IconButton title={"Collapse"} on:click={toggleSidebar}>
+          <IconSmall name="chevron-left" /> Collapse
         </IconButton>
 
-        <Settings slot="popover" />
-      </Popover>
+        <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
+          <IconButton
+            title="Settings"
+            slot="toggle"
+            let:toggle
+            on:click={toggle}>
+            <IconSmall name="settings" />
+            Settings
+          </IconButton>
 
-      <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
-        <IconButton title="Help" slot="toggle" let:toggle on:click={toggle}>
-          <IconSmall name="help" />
-          Help
-        </IconButton>
+          <Settings slot="popover" />
+        </Popover>
 
-        <Help slot="popover" />
-      </Popover>
+        <Popover popoverPositionBottom="2rem" popoverPositionLeft="0">
+          <IconButton title="Help" slot="toggle" let:toggle on:click={toggle}>
+            <IconSmall name="help" />
+            Help
+          </IconButton>
+
+          <Help slot="popover" />
+        </Popover>
+      </div>
     </div>
   {:else}
     <div style="display: flex; flex-direction: column; gap: 1rem;">