Radish alpha
r
radicle-desktop
rad:z4D5UCArafTzTQpDZNQRuqswh3ury
Radicle desktop app
Radicle
Git
Patches › 1fd829c4
Add a little explainer to the Online/Offline button
Open rudolfs opened 1 year ago

Also move the avatar and alias into the popover, and replace the home icon.

check check-e2e

👉 Workflow runs 👉 Branch on GitHub

Activity Changes +61 -31
9 files changed +61 -31 deb46efa → b706d117
modified src/components/Header.svelte
@@ -1,21 +1,25 @@
<script lang="ts">
+ 
  import type { Config } from "@bindings/config/Config";

  import type { Snippet } from "svelte";



  import * as router from "@app/lib/router";
+ 
  import { authorForNodeId } from "@app/lib/utils";

  import { nodeRunning } from "@app/lib/events";
- 
  import Avatar from "./Avatar.svelte";
+ 
  import Border from "./Border.svelte";

  import Icon from "./Icon.svelte";

  import NakedButton from "./NakedButton.svelte";
+ 
  import NodeId from "./NodeId.svelte";
+ 
  import Popover from "./Popover.svelte";



  const activeRouteStore = router.activeRouteStore;



  interface Props {
- 
    publicKey: string;
+ 
    config: Config;

    center?: Snippet;

  }
- 
  const { center, publicKey }: Props = $props();
+ 
  const { center, config }: Props = $props();

</script>



<style>
@@ -59,7 +63,7 @@
            void router.push({ resource: "home" });

          }}

          stylePadding="0 4px">
- 
          <Avatar {publicKey} />
+ 
          <Icon name="home" />

        </NakedButton>

        <NakedButton

          variant="ghost"
@@ -82,17 +86,48 @@
      {@render center?.()}



      <div class="global-flex">
- 
        <div
- 
          class="global-flex txt-semibold txt-small"
- 
          style:margin-right="0.25rem">
- 
          {#if $nodeRunning}
- 
            <Icon name="online" />
- 
            Online
- 
          {:else}
- 
            <Icon name="offline" />
- 
            Offline
- 
          {/if}
- 
        </div>
+ 
        <Popover
+ 
          popoverPadding="0"
+ 
          popoverPositionTop="2.5rem"
+ 
          popoverPositionRight="0">
+ 
          {#snippet toggle(onclick)}
+ 
            <NakedButton variant="ghost" {onclick}>
+ 
              {#if $nodeRunning}
+ 
                <Icon name="online" />
+ 
                Online
+ 
              {:else}
+ 
                <Icon name="offline" />
+ 
                Offline
+ 
              {/if}
+ 
            </NakedButton>
+ 
          {/snippet}
+ 
          {#snippet popover()}
+ 
            <Border
+ 
              variant="ghost"
+ 
              stylePadding="1rem"
+ 
              styleMinWidth="20rem"
+ 
              styleAlignItems="flex-start"
+ 
              styleFlexDirection="column">
+ 
              <div class="txt-small global-flex">
+ 
                Authenticated as:
+ 
                <NodeId
+ 
                  {...authorForNodeId({
+ 
                    did: config.publicKey,
+ 
                    alias: config.alias,
+ 
                  })} />
+ 
              </div>
+ 
              <div class="txt-small txt-missing">
+ 
                {#if $nodeRunning}
+ 
                  Your node is up and running, your changes will be synced
+ 
                  automatically.
+ 
                {:else}
+ 
                  Your node is stopped, to sync changes with the network start
+ 
                  your node.
+ 
                {/if}
+ 
              </div>
+ 
            </Border>
+ 
          {/snippet}
+ 
        </Popover>

        <NakedButton

          variant="ghost"

          stylePadding="0 4px"
modified src/views/home/Inbox.svelte
@@ -172,7 +172,7 @@
  }}

  hideSidebar

  styleSecondColumnOverflow="visible"
- 
  publicKey={config.publicKey}>
+ 
  {config}>

  {#snippet headerCenter()}

    <CopyableId id={config.publicKey} />

  {/snippet}
modified src/views/home/Repos.svelte
@@ -106,10 +106,7 @@
  }

</style>
- 
<Layout
- 
  hideSidebar
- 
  styleSecondColumnOverflow="visible"
- 
  publicKey={config.publicKey}>
+ 
<Layout hideSidebar styleSecondColumnOverflow="visible" {config}>

  {#snippet headerCenter()}

    <CopyableId id={config.publicKey} />

  {/snippet}
modified src/views/repo/CreateIssue.svelte
@@ -115,7 +115,7 @@
  }

</style>
- 
<Layout publicKey={config.publicKey}>
+ 
<Layout {config}>

  {#snippet sidebar()}

    <Sidebar activeTab="issues" rid={repo.rid} />

  {/snippet}
modified src/views/repo/Issue.svelte
@@ -314,7 +314,7 @@
  }

</style>
- 
<Layout publicKey={config.publicKey}>
+ 
<Layout {config}>

  {#snippet headerCenter()}

    <CopyableId id={issue.id} />

  {/snippet}
modified src/views/repo/Issues.svelte
@@ -84,10 +84,7 @@
  }

</style>
- 
<Layout
- 
  hideSidebar
- 
  styleSecondColumnOverflow="visible"
- 
  publicKey={config.publicKey}>
+ 
<Layout hideSidebar styleSecondColumnOverflow="visible" {config}>

  {#snippet headerCenter()}

    <CopyableId id={repo.rid} />

  {/snippet}
modified src/views/repo/Layout.svelte
@@ -24,6 +24,7 @@
</script>



<script lang="ts">
+ 
  import type { Config } from "@bindings/config/Config";

  import type { Snippet } from "svelte";



  import { onMount } from "svelte";
@@ -32,7 +33,7 @@


  interface Props {

    children: Snippet;
- 
    publicKey: string;
+ 
    config: Config;

    headerCenter?: Snippet;

    secondColumn: Snippet;

    sidebar?: Snippet;
@@ -44,7 +45,7 @@


  const {

    children,
- 
    publicKey,
+ 
    config,

    headerCenter = undefined,

    secondColumn,

    sidebar = undefined,
@@ -132,7 +133,7 @@


<div class="layout">

  <div class="header">
- 
    <Header {publicKey} center={headerCenter}></Header>
+ 
    <Header {config} center={headerCenter}></Header>

  </div>



  {#if sidebar}
modified src/views/repo/Patch.svelte
@@ -356,7 +356,7 @@
  </div>

{/snippet}
- 
<Layout loadMoreSecondColumn={loadMoreTeasers} publicKey={config.publicKey}>
+ 
<Layout loadMoreSecondColumn={loadMoreTeasers} {config}>

  {#snippet headerCenter()}

    <CopyableId id={patch.id} />

  {/snippet}
modified src/views/repo/Patches.svelte
@@ -120,7 +120,7 @@
  {loadMoreContent}

  hideSidebar

  styleSecondColumnOverflow="visible"
- 
  publicKey={config.publicKey}>
+ 
  {config}>

  {#snippet headerCenter()}

    <CopyableId id={repo.rid} />

  {/snippet}