lfg2025/archy
1
0
Fork 0
Code Issues 20 Pull Requests Actions Packages Projects Releases 61 Wiki Activity

Merge pull request 'fix(ui): web5 mobile polish — identity profile cards, visibility card, demo avatars, title alignment' (#94) from identities-mobile-polish into main
All checks were successful
Demo images / Build & push demo images (push) Successful in 2m32s
Details

Browse Source
This commit is contained in:
lfg2025 2026-07-17 01:13:56 +00:00
commit 45c9def94a
7 changed files with 215 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
neode-ui/mock-backend.js
View File

@ -2032,6 +2032,7 @@ app.post('/rpc/v1', (req, res) => {
about: 'Self-sovereign Bitcoin node',
nip05: 'satoshi@archipelago.local',
lud16: 'satoshi@getalby.com',
picture: '/demo-avatars/satoshi.svg',
},
},
{
@ -2044,7 +2045,7 @@ app.post('/rpc/v1', (req, res) => {
is_default: false,
nostr_pubkey: 'f6e5d4c3b2a19876543210fedcba9876543210fedcba9876543210fedcba98',
nostr_npub: 'npub1mockanonidentitypubkeyvalue000000000000000000000000000xyz',
profile: { display_name: 'Anon' },
profile: { display_name: 'Anon', picture: '/demo-avatars/anon.svg' },
},
{
id: 'id-merchant',
@ -2056,7 +2057,7 @@ app.post('/rpc/v1', (req, res) => {
is_default: false,
nostr_pubkey: '1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
nostr_npub: 'npub1mockmerchantidentitypubkeyvalue000000000000000000000000def',
profile: { display_name: 'My Shop', website: 'https://myshop.onion' },
profile: { display_name: 'My Shop', website: 'https://myshop.onion', picture: '/demo-avatars/business.svg' },
},
],
},
@ -2079,6 +2080,7 @@ app.post('/rpc/v1', (req, res) => {
profile: {
display_name: 'Archipelago Node',
about: 'Self-sovereign Bitcoin node',
picture: '/demo-avatars/satoshi.svg',
},
},
})
@ -2121,6 +2123,7 @@ app.post('/rpc/v1', (req, res) => {
about: 'Running a sovereign Bitcoin node',
nip05: 'satoshi@archipelago.local',
lud16: 'satoshi@getalby.com',
picture: '/demo-avatars/satoshi.svg',
},
},
{
@ -2136,6 +2139,7 @@ app.post('/rpc/v1', (req, res) => {
profile: {
display_name: 'Archy Consulting',
about: 'Bitcoin infrastructure services',
picture: '/demo-avatars/business.svg',
},
},
{
@ -2146,7 +2150,7 @@ app.post('/rpc/v1', (req, res) => {
did: 'did:key:z6MknGc3ocHs3zdPiJbnaaqDi5hjrZo4HzmQnwzaxWhAbWAs',
created_at: '2026-03-01T18:00:00Z',
is_default: false,
profile: {},
profile: { picture: '/demo-avatars/anon.svg' },
},
],
},
@ -2163,7 +2167,7 @@ app.post('/rpc/v1', (req, res) => {
nostr_pubkey: 'a1b2c3d4e5f6789012345678901234567890abcdef1234567890abcdef123456',
nostr_npub: 'npub1598eg0y7m08htfzjfmzv6zjvf5u7p00dr9w0yfamaxqhkwlryckq5dh9ee',
is_default: true, created_at: '2026-01-10T08:00:00Z',
profile: { display_name: 'Satoshi', about: 'Running a sovereign Bitcoin node' },
profile: { display_name: 'Satoshi', about: 'Running a sovereign Bitcoin node', picture: '/demo-avatars/satoshi.svg' },
},
}
return res.json({ result: identities[id] || identities['id-primary'] })
@ -2238,9 +2242,10 @@ app.post('/rpc/v1', (req, res) => {
// Node visibility — interactive (persisted per demo session)
case 'network.get-visibility': {
// No onion_address in the demo: the public showcase shouldn't display
// a Tor address (even a fake one) on the Node Visibility card.
return res.json({ result: {
visibility: mockState.nodeVisibility,
onion_address: mockData['server-info']['tor-address'],
} })
}
case 'network.set-visibility': {
@ -2248,7 +2253,6 @@ app.post('/rpc/v1', (req, res) => {
if (['hidden', 'discoverable', 'public'].includes(v)) mockState.nodeVisibility = v
return res.json({ result: {
visibility: mockState.nodeVisibility,
onion_address: mockData['server-info']['tor-address'],
} })
}

18
neode-ui/public/demo-avatars/anon.svg Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#7e22ce;stop-opacity:1" />
<stop offset="100%" style="stop-color:#231133;stop-opacity:1" />
</linearGradient>
<linearGradient id="fig" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.8" />
<stop offset="100%" style="stop-color:#d8b4fe;stop-opacity:0.5" />
</linearGradient>
</defs>
<rect width="240" height="240" fill="url(#bg)"/>
<circle cx="120" cy="78" r="70" fill="rgba(255,255,255,0.06)"/>
<!-- hooded figure, face in shadow -->
<path d="M120 44 C86 44 72 76 72 106 L72 132 L168 132 L168 106 C168 76 154 44 120 44 Z" fill="url(#fig)"/>
<ellipse cx="120" cy="104" rx="30" ry="34" fill="rgba(35,17,51,0.9)"/>
<path d="M45 240 C45 182 78 150 120 150 C162 150 195 182 195 240 Z" fill="url(#fig)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1000 B

20
neode-ui/public/demo-avatars/business.svg Normal file
View File

@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#c2540a;stop-opacity:1" />
<stop offset="100%" style="stop-color:#3b1c0a;stop-opacity:1" />
</linearGradient>
<linearGradient id="fig" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.85" />
<stop offset="100%" style="stop-color:#fdba74;stop-opacity:0.55" />
</linearGradient>
</defs>
<rect width="240" height="240" fill="url(#bg)"/>
<circle cx="120" cy="78" r="70" fill="rgba(255,255,255,0.06)"/>
<!-- head + suited shoulders -->
<circle cx="120" cy="92" r="38" fill="url(#fig)"/>
<path d="M45 240 C45 178 78 152 120 152 C162 152 195 178 195 240 Z" fill="url(#fig)"/>
<!-- collar + tie -->
<path d="M104 156 L120 176 L136 156 L120 148 Z" fill="rgba(59,28,10,0.85)"/>
<path d="M115 176 L125 176 L123 214 L120 220 L117 214 Z" fill="rgba(59,28,10,0.85)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

17
neode-ui/public/demo-avatars/satoshi.svg Normal file
View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1d4ed8;stop-opacity:1" />
<stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
</linearGradient>
<linearGradient id="fig" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:0.85" />
<stop offset="100%" style="stop-color:#93c5fd;stop-opacity:0.55" />
</linearGradient>
</defs>
<rect width="240" height="240" fill="url(#bg)"/>
<circle cx="120" cy="78" r="70" fill="rgba(255,255,255,0.06)"/>
<!-- head + shoulders -->
<circle cx="120" cy="92" r="38" fill="url(#fig)"/>
<path d="M45 240 C45 178 78 152 120 152 C162 152 195 178 195 240 Z" fill="url(#fig)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 860 B

4
neode-ui/src/views/server/OpenWrtGateway.vue
View File

@ -368,8 +368,10 @@ onMounted(() => load())
<template>
<div class="pb-6">
<!-- mb-0 overrides the pill's default mb-4, which pushed it above the
title's centerline in this inline header row. -->
<div class="flex items-center gap-3 mb-6">
<BackButton @click="goBack" />
<BackButton desktop-margin="mb-0" @click="goBack" />
<h1 class="text-lg font-semibold text-white">OpenWrt Gateway</h1>
</div>

110
neode-ui/src/views/web5/Web5Identities.vue
View File

@ -61,9 +61,91 @@
<div
v-for="(identity, idx) in managedIdentities"
:key="identity.id"
:class="{ 'card-stagger': showStagger }" class="identity-row flex flex-col gap-3 p-4 bg-white/[0.08] rounded-lg"
:class="{ 'card-stagger': showStagger }"
:style="{ '--stagger-index': idx }"
>
<!-- Narrow containers (phones): profile-card layout with banner +
overlapping avatar. Hidden on wide containers where the classic
row below renders instead. -->
<div class="identity-card-m rounded-xl overflow-hidden bg-white/[0.08]">
<div class="relative h-16" :class="bannerFallback(identity)">
<img
v-if="identity.profile?.banner"
:src="displayableUrl(identity.profile.banner)"
class="absolute inset-0 w-full h-full object-cover"
/>
</div>
<div class="px-4 pb-4">
<div class="flex items-end justify-between -mt-7">
<button @click="openProfileEditor(identity)" class="relative w-14 h-14 rounded-full overflow-hidden ring-4 ring-black/60 group shrink-0" title="Edit profile">
<img
v-if="identity.profile?.picture && !listPictureFailed[identity.id]"
:src="displayableUrl(identity.profile.picture)"
class="w-full h-full object-cover"
@error="() => { listPictureFailed[identity.id] = true }"
/>
<div v-if="!identity.profile?.picture || listPictureFailed[identity.id]" class="w-full h-full flex items-center justify-center" :class="{
'bg-blue-500/20': identity.purpose === 'personal',
'bg-orange-500/20': identity.purpose === 'business',
'bg-purple-500/20': identity.purpose === 'anonymous',
}">
<span class="text-lg font-bold" :class="{
'text-blue-400': identity.purpose === 'personal',
'text-orange-400': identity.purpose === 'business',
'text-purple-400': identity.purpose === 'anonymous',
}">{{ identity.name.charAt(0).toUpperCase() }}</span>
</div>
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
</div>
</button>
<div class="flex items-center gap-1 pt-8">
<button @click="openKeyViewer(identity)" class="p-2 rounded-lg text-white/50 hover:text-white hover:bg-white/10 transition-colors" title="View keys">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
</svg>
</button>
<button v-if="!identity.is_default" @click="setDefaultIdentity(identity.id)" class="p-2 rounded-lg text-white/50 hover:text-yellow-400 hover:bg-white/10 transition-colors" title="Set as default">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
</svg>
</button>
<button @click="confirmDeleteIdentity(identity)" class="p-2 rounded-lg text-white/50 hover:text-red-400 hover:bg-white/10 transition-colors" title="Delete">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
<div class="mt-2 flex items-center gap-2 flex-wrap min-w-0">
<span class="text-white font-semibold text-sm truncate">{{ identity.profile?.display_name || identity.name }}</span>
<span v-if="identity.is_default" class="text-yellow-400 text-xs" title="Default identity">&#9733;</span>
<span class="text-xs px-2 py-0.5 rounded-full capitalize" :class="{
'bg-blue-500/20 text-blue-300': identity.purpose === 'personal',
'bg-orange-500/20 text-orange-300': identity.purpose === 'business',
'bg-purple-500/20 text-purple-300': identity.purpose === 'anonymous',
}">{{ identity.purpose }}</span>
</div>
<p v-if="identity.profile?.about" class="text-white/60 text-xs mt-1 leading-relaxed">{{ identity.profile.about }}</p>
<div class="mt-2 space-y-0.5">
<div class="flex items-center gap-1 min-w-0">
<p class="text-white/50 text-xs font-mono truncate" :title="identity.did">{{ identity.did }}</p>
<button @click="copyIdentityDid(identity.did)" class="shrink-0 p-0.5 rounded text-white/30 hover:text-white/70 transition-colors" title="Copy DID">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
</button>
</div>
<div v-if="identity.nostr_npub" class="flex items-center gap-1 min-w-0">
<p class="text-white/40 text-xs font-mono truncate" :title="identity.nostr_npub">{{ identity.nostr_npub }}</p>
<button @click="copyIdentityDid(identity.nostr_npub || '')" class="shrink-0 p-0.5 rounded text-white/30 hover:text-white/70 transition-colors" title="Copy npub">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Wide containers: the original row — desktop appearance unchanged -->
<div class="identity-row flex flex-col gap-3 p-4 bg-white/[0.08] rounded-lg">
<div class="identity-row-main flex items-center gap-4 min-w-0">
<!-- Avatar -->
<button @click="openProfileEditor(identity)" class="relative flex-shrink-0 w-10 h-10 rounded-full overflow-hidden group" title="Edit profile">
@ -134,6 +216,7 @@
</svg>
</button>
</div>
</div>
</div>
</div>
@ -465,6 +548,16 @@ watch(() => profileForm.value.picture, () => { editorPictureFailed.value = false
// Rewrite onion-rooted `/blob/<cid>` URLs (with or without capability
// query) to same-origin `/blob/<cid>` so they render in this UI. Data
// URLs and plain external URLs pass through untouched.
// Gradient banner backdrop for the narrow profile card when the identity has
// no banner image, tinted by purpose to match the avatar/chip colors.
function bannerFallback(identity: ManagedIdentity): string {
switch (identity.purpose) {
case 'business': return 'bg-gradient-to-br from-orange-500/40 to-amber-500/15'
case 'anonymous': return 'bg-gradient-to-br from-purple-500/40 to-fuchsia-500/15'
default: return 'bg-gradient-to-br from-blue-500/40 to-indigo-500/15'
}
}
function displayableUrl(url: string | null | undefined): string {
if (!url) return ''
if (url.startsWith('data:') || url.startsWith('/')) return url
@ -710,8 +803,21 @@ defineExpose({ loadIdentities, managedIdentities })
container-name: identities-card;
}
/* Narrow containers (default): the profile card renders and the classic row
is hidden. Wide containers: the original desktop row — untouched — and the
profile card hides. Doubled selectors out-rank the Tailwind utilities on
the same elements regardless of stylesheet order. */
.identities-card .identity-row {
display: none;
}
@container identities-card (min-width: 560px) {
.identity-row {
.identities-card .identity-card-m {
display: none;
}
.identities-card .identity-row {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;

73
neode-ui/src/views/web5/Web5NodeVisibility.vue
View File

@ -1,27 +1,36 @@
<template>
<!-- Node Visibility -->
<div data-controller-container tabindex="0" :class="{ 'card-stagger': showStagger }" class="glass-card p-6 flex flex-col" style="--stagger-index: 3">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<h2 class="text-xl font-semibold text-white mb-2">{{ t('web5.nodeVisibility') }}</h2>
<p class="text-white/70 text-sm">
Make your node publicly discoverable. When enabled, anyone on the Nostr
network can find your node and request a connection — requests always
wait for your approval and join as a Peer, never trusted.
</p>
</div>
<div v-if="visibilityLoading" class="shrink-0">
<svg class="animate-spin h-5 w-5 text-white/40" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<div class="mb-4 shrink-0">
<div class="flex items-center sm:items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</div>
<div class="flex-1 min-w-0">
<h2 class="text-xl font-semibold text-white sm:mb-2">{{ t('web5.nodeVisibility') }}</h2>
<!-- Desktop: description beside the icon, as before -->
<p class="hidden sm:block text-white/70 text-sm">
Make your node publicly discoverable. When enabled, anyone on the Nostr
network can find your node and request a connection — requests always
wait for your approval and join as a Peer, never trusted.
</p>
</div>
<div v-if="visibilityLoading" class="shrink-0">
<svg class="animate-spin h-5 w-5 text-white/40" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
</div>
<!-- Mobile: description stacked under the icon + title -->
<p class="sm:hidden mt-3 text-white/70 text-sm">
Make your node publicly discoverable. When enabled, anyone on the Nostr
network can find your node and request a connection — requests always
wait for your approval and join as a Peer, never trusted.
</p>
</div>
<!-- Enable switch -->
@ -57,16 +66,7 @@
<!-- Discoverable nodes -->
<div v-if="discoverEnabled" class="mt-4 flex-1 min-h-0">
<div class="flex items-center justify-between mb-2">
<p class="text-sm font-medium text-white">Discoverable nodes</p>
<button
class="px-2.5 py-1 glass-button glass-button-sm rounded text-xs text-white/90 hover:text-white disabled:opacity-50"
:disabled="discovering"
@click="discoverNodes"
>
{{ discovering ? 'Searching…' : 'Refresh' }}
</button>
</div>
<p class="text-sm font-medium text-white mb-2">Discoverable nodes</p>
<div v-if="discovering && discoveredNodes.length === 0" class="py-4 text-center text-white/45 text-xs">
Searching relays…
</div>
@ -95,10 +95,15 @@
</div>
</div>
<!-- Warning -->
<p v-if="discoverEnabled" class="mt-3 text-xs text-amber-400/80">
{{ t('web5.discoverableWarning') }}
</p>
<!-- Refresh — full-width card action on every screen size -->
<button
v-if="discoverEnabled"
class="mt-4 w-full glass-button rounded-lg py-2.5 text-sm font-medium text-white/90 hover:text-white disabled:opacity-50"
:disabled="discovering"
@click="discoverNodes"
>
{{ discovering ? 'Searching…' : 'Refresh' }}
</button>
<PeerRequestModal
:show="requestModalTarget !== null"