raucao/marco
1
0
Fork 0
Code Issues 14 Pull Requests Actions Releases 4 Activity

User menu: Move connection status to respective account type

Browse Source
This commit is contained in:
Râu Cao
2026-04-01 15:36:29 +04:00
parent beda03c2ac
commit 9b83d35b40
2 changed files with 67 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/components/user-menu.gjs
View File

@@ -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>

32
app/styles/app.css
View File

@@ -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 {