From bdfcb997817f98418d8eb4042497cab481ee8596 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Mon, 22 Sep 2025 15:09:41 -0700
Subject: [PATCH] Show more information about signer type

---
 src/app/components/SignerStatus.svelte  | 64 ++++++++++++++++---------
 src/routes/settings/relays/+page.svelte |  6 +--
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/src/app/components/SignerStatus.svelte b/src/app/components/SignerStatus.svelte
index b3ecfb6b..391b2bb6 100644
--- a/src/app/components/SignerStatus.svelte
+++ b/src/app/components/SignerStatus.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import {spec, prop, avg} from "@welshman/lib"
-  import {signerLog, SignerLogEntryStatus} from "@welshman/app"
+  import {session, SessionMethod, signerLog, SignerLogEntryStatus} from "@welshman/app"
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
@@ -26,27 +26,45 @@
   const logout = () => pushModal(LogOut)
 </script>
 
-<div class="card2 bg-alt flex flex-col gap-4">
-  <div class="flex flex-col gap-2">
-    <div class="flex items-center justify-between">
-      <span class="text-xl font-bold">Signer Status</span>
-      <span class="flex items-center gap-2">
-        {#if isDisconnected}
-          <Icon icon={CloseCircle} class="text-error" size={4} /> Disconnected
-        {:else if recentFailure > 3}
-          <Icon icon={Danger} class="text-warning" size={4} /> Partial Failure
-        {:else if recentAvg > 1000 || recentPending > 3}
-          <Icon icon={ClockCircle} class="text-warning" size={4} /> Slow connection
-        {:else if recentSuccess === 0 && recentFailure > 0}{:else}
-          <Icon icon={CheckCircle} class="text-success" size={4} /> Ok
-        {/if}
-      </span>
+{#if $session && $session.method !== SessionMethod.Anonymous}
+  <div class="card2 bg-alt flex flex-col gap-4">
+    <div class="flex flex-col gap-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-bold">Signer Status</span>
+        <span class="flex items-center gap-2">
+          {#if isDisconnected}
+            <Icon icon={CloseCircle} class="text-error" size={4} /> Disconnected
+          {:else if recentFailure > 3}
+            <Icon icon={Danger} class="text-warning" size={4} /> Partial Failure
+          {:else if recentAvg > 1000 || recentPending > 3}
+            <Icon icon={ClockCircle} class="text-warning" size={4} /> Slow connection
+          {:else if recentSuccess === 0 && recentFailure > 0}{:else}
+            <Icon icon={CheckCircle} class="text-success" size={4} /> Ok
+          {/if}
+        </span>
+      </div>
+      <div class="flex justify-between text-sm opacity-75">
+        <p>
+          Logged in with
+          {#if $session.method === SessionMethod.Nip01}
+            private key
+          {:else if $session.method === SessionMethod.Nip07}
+            browser extension
+          {:else if $session.method === SessionMethod.Nip46}
+            remote signer
+          {:else if $session.method === SessionMethod.Nip55}
+            {$session.signer}
+          {:else if $session.method === SessionMethod.Pubkey}
+            public key (readonly)
+          {/if}
+        </p>
+        <p>
+          {success} requests succeeded, {failure} failed, {pending} pending
+        </p>
+      </div>
     </div>
-    <p class="text-sm opacity-75">
-      {success} requests succeeded, {failure} failed, {pending} pending
-    </p>
+    {#if isDisconnected}
+      <Button class="btn btn-outline btn-error" onclick={logout}>Logout to Reconnect</Button>
+    {/if}
   </div>
-  {#if isDisconnected}
-    <Button class="btn btn-outline btn-error" onclick={logout}>Logout to Reconnect</Button>
-  {/if}
-</div>
+{/if}
diff --git a/src/routes/settings/relays/+page.svelte b/src/routes/settings/relays/+page.svelte
index f80d9f1f..8a41b1f6 100644
--- a/src/routes/settings/relays/+page.svelte
+++ b/src/routes/settings/relays/+page.svelte
@@ -50,7 +50,7 @@
 </script>
 
 <div class="content column gap-4">
-  <Collapse class="card2 bg-alt column gap-4">
+  <Collapse class="card2 bg-alt column gap-4 shadow-xl">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
         <Icon icon={Globus} />
@@ -83,7 +83,7 @@
       </Button>
     </div>
   </Collapse>
-  <Collapse class="card2 bg-alt column gap-4">
+  <Collapse class="card2 bg-alt column gap-4 shadow-xl">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
         <Icon icon={Inbox} />
@@ -115,7 +115,7 @@
       </Button>
     </div>
   </Collapse>
-  <Collapse class="card2 bg-alt column gap-4">
+  <Collapse class="card2 bg-alt column gap-4 shadow-xl">
     {#snippet title()}
       <h2 class="flex items-center gap-3 text-xl">
         <Icon icon={Mailbox} />