From 9b83d35b404654db2aeb472d6d6ceadbfef7aee5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Wed, 1 Apr 2026 15:36:29 +0400
Subject: [PATCH] User menu: Move connection status to respective account type

---
 app/components/user-menu.gjs | 78 ++++++++++++++++++++----------------
 app/styles/app.css           | 32 ++++++++++-----
 2 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/app/components/user-menu.gjs b/app/components/user-menu.gjs
index 3bc94c0..4847d17 100644
--- a/app/components/user-menu.gjs
+++ b/app/components/user-menu.gjs
@@ -17,47 +17,57 @@ export default class UserMenuComponent extends Component {
 
   <template>
     <div class="user-menu-popover">
-      <div class="user-status">
-        {{#if @storage.connected}}
-          Connected as
-          <strong>{{@storage.userAddress}}</strong>
-        {{else}}
-          Not connected
-        {{/if}}
-      </div>
-
       <ul class="account-list">
         <li class="account-item">
-          <div class="account-info">
-            <Icon @name="server" @size={{18}} />
-            <span>RemoteStorage</span>
+          <div class="account-header">
+            <div class="account-info">
+              <Icon @name="server" @size={{18}} />
+              <span>RemoteStorage</span>
+            </div>
+            {{#if @storage.connected}}
+              <button
+                class="btn-text text-danger"
+                type="button"
+                {{on "click" this.disconnectRS}}
+              >Disconnect</button>
+            {{else}}
+              <button
+                class="btn-text text-primary"
+                type="button"
+                {{on "click" this.connectRS}}
+              >Connect</button>
+            {{/if}}
           </div>
-          {{#if @storage.connected}}
-            <button
-              class="btn-text text-danger"
-              type="button"
-              {{on "click" this.disconnectRS}}
-            >Disconnect</button>
-          {{else}}
-            <button
-              class="btn-text text-primary"
-              type="button"
-              {{on "click" this.connectRS}}
-            >Connect</button>
-          {{/if}}
-        </li>
-
-        <li class="account-item disabled">
-          <div class="account-info">
-            <Icon @name="globe" @size={{18}} />
-            <span>OpenStreetMap</span>
+          <div class="account-status">
+            {{#if @storage.connected}}
+              <strong>{{@storage.userAddress}}</strong>
+            {{else}}
+              Not connected
+            {{/if}}
           </div>
         </li>
 
         <li class="account-item disabled">
-          <div class="account-info">
-            <Icon @name="zap" @size={{18}} />
-            <span>Nostr</span>
+          <div class="account-header">
+            <div class="account-info">
+              <Icon @name="globe" @size={{18}} />
+              <span>OpenStreetMap</span>
+            </div>
+          </div>
+          <div class="account-status">
+            Coming soon
+          </div>
+        </li>
+
+        <li class="account-item disabled">
+          <div class="account-header">
+            <div class="account-info">
+              <Icon @name="zap" @size={{18}} />
+              <span>Nostr</span>
+            </div>
+          </div>
+          <div class="account-status">
+            Coming soon
           </div>
         </li>
       </ul>
diff --git a/app/styles/app.css b/app/styles/app.css
index f27c8e5..efa06f9 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -216,14 +216,6 @@ body {
   /* background: rgb(0 0 0 / 10%); Optional dimming */
 }
 
-.user-status {
-  padding-bottom: 1rem;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid #eee;
-  color: #666;
-  font-size: 0.9rem;
-}
-
 .account-list {
   list-style: none;
   padding: 0;
@@ -231,10 +223,32 @@ body {
 }
 
 .account-item {
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+  border-bottom: 1px solid #eee;
+}
+
+.account-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.account-item:first-child {
+  padding-top: 0;
+}
+
+.account-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 0;
+}
+
+.account-status {
+  font-size: 0.85rem;
+  color: #898989;
+  margin-top: 0.35rem;
+  margin-left: calc(18px + 0.75rem);
 }
 
 .account-item.disabled {