From 301d8a6b7c8042dbe77d84159ffaa289f134a794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 22 Apr 2025 13:35:06 +0200
Subject: [PATCH] Add a little explainer to the Online/Offline button

Also move the avatar and alias into the popover, and replace the home
icon.
---
 src/components/Header.svelte      | 65 ++++++++++++++++++++++++-------
 src/views/home/Inbox.svelte       |  2 +-
 src/views/home/Repos.svelte       |  5 +--
 src/views/repo/CreateIssue.svelte |  2 +-
 src/views/repo/Issue.svelte       |  2 +-
 src/views/repo/Issues.svelte      |  5 +--
 src/views/repo/Layout.svelte      |  7 ++--
 src/views/repo/Patch.svelte       |  2 +-
 src/views/repo/Patches.svelte     |  2 +-
 9 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 279e4fdcd..60a40a211 100644
--- a/src/components/Header.svelte
+++ b/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"
diff --git a/src/views/home/Inbox.svelte b/src/views/home/Inbox.svelte
index e848e4721..af4a98780 100644
--- a/src/views/home/Inbox.svelte
+++ b/src/views/home/Inbox.svelte
@@ -172,7 +172,7 @@
   }}
   hideSidebar
   styleSecondColumnOverflow="visible"
-  publicKey={config.publicKey}>
+  {config}>
   {#snippet headerCenter()}
     <CopyableId id={config.publicKey} />
   {/snippet}
diff --git a/src/views/home/Repos.svelte b/src/views/home/Repos.svelte
index 06e3667d5..a01bc8e0f 100644
--- a/src/views/home/Repos.svelte
+++ b/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}
diff --git a/src/views/repo/CreateIssue.svelte b/src/views/repo/CreateIssue.svelte
index fc2ea23e7..6a5e29d11 100644
--- a/src/views/repo/CreateIssue.svelte
+++ b/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}
diff --git a/src/views/repo/Issue.svelte b/src/views/repo/Issue.svelte
index bf92db67d..fcef44e08 100644
--- a/src/views/repo/Issue.svelte
+++ b/src/views/repo/Issue.svelte
@@ -314,7 +314,7 @@
   }
 </style>
 
-<Layout publicKey={config.publicKey}>
+<Layout {config}>
   {#snippet headerCenter()}
     <CopyableId id={issue.id} />
   {/snippet}
diff --git a/src/views/repo/Issues.svelte b/src/views/repo/Issues.svelte
index 8d5d7df46..b44bcb8a0 100644
--- a/src/views/repo/Issues.svelte
+++ b/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}
diff --git a/src/views/repo/Layout.svelte b/src/views/repo/Layout.svelte
index f3a942c8f..1aec0c13d 100644
--- a/src/views/repo/Layout.svelte
+++ b/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}
diff --git a/src/views/repo/Patch.svelte b/src/views/repo/Patch.svelte
index 319b81b78..826125d5f 100644
--- a/src/views/repo/Patch.svelte
+++ b/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}
diff --git a/src/views/repo/Patches.svelte b/src/views/repo/Patches.svelte
index cb549b9c6..957e7504f 100644
--- a/src/views/repo/Patches.svelte
+++ b/src/views/repo/Patches.svelte
@@ -120,7 +120,7 @@
   {loadMoreContent}
   hideSidebar
   styleSecondColumnOverflow="visible"
-  publicKey={config.publicKey}>
+  {config}>
   {#snippet headerCenter()}
     <CopyableId id={repo.rid} />
   {/snippet}