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

fix: indeedhub staging API, nginx caching, nostr identity and UI improvements

Browse Source 
Switch IndeedHub to staging API, add _next asset caching in nginx,
simplify NostrIdentityPicker component, and update Apps/Web5/Marketplace views.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian 2026-03-14 19:08:09 +00:00
parent b786f68e7a
commit ce2986fd2a
9 changed files with 155 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/indeedhub/Dockerfile
View File

@ -20,7 +20,7 @@ RUN sed -i 's/reactStrictMode: true,/reactStrictMode: true, output: "standalone"
# Build-time environment — connects to Indeehub production services # Build-time environment — connects to Indeehub production services
ENV NEXT_PUBLIC_APP_ENVIRONMENT=production ENV NEXT_PUBLIC_APP_ENVIRONMENT=production
ENV NEXT_PUBLIC_APP_URL=http://localhost:8190 ENV NEXT_PUBLIC_APP_URL=http://localhost:8190
ENV NEXT_PUBLIC_API_URL=https://api.indeehub.studio ENV NEXT_PUBLIC_API_URL=https://staging-api.indeehub.studio
ENV NEXT_PUBLIC_S3_PRIVATE_BUCKET=indeehub-private ENV NEXT_PUBLIC_S3_PRIVATE_BUCKET=indeehub-private
ENV NEXT_PUBLIC_S3_PUBLIC_BUCKET=indeehub-public ENV NEXT_PUBLIC_S3_PUBLIC_BUCKET=indeehub-public
ENV NEXT_PUBLIC_ENABLE_APPROVAL_FLOW=false ENV NEXT_PUBLIC_ENABLE_APPROVAL_FLOW=false
@ -28,6 +28,12 @@ ENV NEXT_TELEMETRY_DISABLED=1
# Remove shaka-player .d.ts files that break the build (per package.json build script) # Remove shaka-player .d.ts files that break the build (per package.json build script)
RUN rm -f ./node_modules/shaka-player/dist/*.d.ts RUN rm -f ./node_modules/shaka-player/dist/*.d.ts
# Patch: make the home page static (no SSR revalidation) so it uses the
# pre-rendered Webflow HTML from build time instead of re-fetching every request.
# Also add error handling so SSR failures don't crash the page.
RUN sed -i '1s|^|export const revalidate = false;\nexport const dynamic = "force-static";\n|' src/app/page.tsx
RUN npm run build RUN npm run build
# ── Stage 3: Runner ── # ── Stage 3: Runner ──

12
image-recipe/configs/nginx-archipelago.conf
View File

@ -331,6 +331,13 @@ server {
sub_filter_once on; sub_filter_once on;
sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>'; sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>';
} }
location /app/indeedhub/_next/ {
proxy_pass http://127.0.0.1:8190/_next/;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_cache_valid 200 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}
location /app/indeedhub/ { location /app/indeedhub/ {
proxy_pass http://127.0.0.1:8190/; proxy_pass http://127.0.0.1:8190/;
proxy_http_version 1.1; proxy_http_version 1.1;
@ -342,7 +349,10 @@ server {
proxy_hide_header Content-Security-Policy; proxy_hide_header Content-Security-Policy;
add_header X-Content-Type-Options "nosniff" always; add_header X-Content-Type-Options "nosniff" always;
proxy_set_header Accept-Encoding ""; proxy_set_header Accept-Encoding "";
sub_filter_once on; sub_filter_types text/html;
sub_filter_once off;
sub_filter '/_next/' '/app/indeedhub/_next/';
sub_filter '/favicon.ico' '/app/indeedhub/favicon.ico';
sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>'; sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>';
} }
location /app/lnd/ { location /app/lnd/ {

12
image-recipe/configs/snippets/archipelago-https-app-proxies.conf
View File

@ -231,6 +231,13 @@ location /app/electrs/ {
sub_filter_once on; sub_filter_once on;
sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>'; sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>';
} }
location /app/indeedhub/_next/ {
proxy_pass http://127.0.0.1:8190/_next/;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_cache_valid 200 30d;
add_header Cache-Control "public, max-age=2592000, immutable";
}
location /app/indeedhub/ { location /app/indeedhub/ {
proxy_pass http://127.0.0.1:8190/; proxy_pass http://127.0.0.1:8190/;
proxy_http_version 1.1; proxy_http_version 1.1;
@ -241,7 +248,10 @@ location /app/indeedhub/ {
proxy_hide_header X-Frame-Options; proxy_hide_header X-Frame-Options;
proxy_hide_header Content-Security-Policy; proxy_hide_header Content-Security-Policy;
proxy_set_header Accept-Encoding ""; proxy_set_header Accept-Encoding "";
sub_filter_once on; sub_filter_types text/html;
sub_filter_once off;
sub_filter '/_next/' '/app/indeedhub/_next/';
sub_filter '/favicon.ico' '/app/indeedhub/favicon.ico';
sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>'; sub_filter '</head>' '<script src="/nostr-provider.js"></script></head>';
} }
location /app/nginx-proxy-manager/ { location /app/nginx-proxy-manager/ {

290
neode-ui/src/components/NostrIdentityPicker.vue
View File

@ -6,15 +6,8 @@
class="fixed inset-0 z-[3100] flex items-center justify-center p-4" class="fixed inset-0 z-[3100] flex items-center justify-center p-4"
@click="$emit('cancel')" @click="$emit('cancel')"
> >
<!-- Backdrop with animated scan lines --> <!-- Backdrop -->
<div class="absolute inset-0 bg-black/80 backdrop-blur-md identity-picker-backdrop"></div> <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
<!-- Floating binary rain particles (CSS-only) -->
<div class="absolute inset-0 overflow-hidden pointer-events-none">
<div v-for="i in 20" :key="i" class="cyber-particle" :style="particleStyle(i)">
{{ particleChar(i) }}
</div>
</div>
<!-- Main panel --> <!-- Main panel -->
<div <div
@ -22,56 +15,52 @@
@click.stop @click.stop
class="relative z-10 w-full max-w-lg" class="relative z-10 w-full max-w-lg"
> >
<!-- Cypherpunk header graphic --> <!-- Header with animated key icon -->
<div class="relative mb-6 flex flex-col items-center"> <div class="relative mb-6 flex flex-col items-center">
<!-- SVG keyhole / identity node graphic --> <div class="key-glow-ring">
<div class="cyber-glow-ring"> <svg viewBox="0 0 120 120" class="w-20 h-20" xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 120 120" class="w-24 h-24" xmlns="http://www.w3.org/2000/svg"> <!-- Outer ring -->
<!-- Outer ring with dash animation --> <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(251,146,60,0.2)" stroke-width="1" />
<circle cx="60" cy="60" r="54" fill="none" stroke="rgba(251,146,60,0.3)" stroke-width="1" /> <circle cx="60" cy="60" r="54" fill="none" stroke="#fb923c" stroke-width="1.5"
<circle cx="60" cy="60" r="54" fill="none" stroke="#fb923c" stroke-width="2" stroke-dasharray="8 6" class="ring-spin" />
stroke-dasharray="8 4" class="cyber-ring-spin" />
<!-- Inner ring --> <!-- Inner ring -->
<circle cx="60" cy="60" r="38" fill="none" stroke="rgba(251,146,60,0.15)" stroke-width="1" /> <circle cx="60" cy="60" r="38" fill="none" stroke="rgba(251,146,60,0.1)" stroke-width="1" />
<circle cx="60" cy="60" r="38" fill="none" stroke="#fb923c" stroke-width="1.5" <circle cx="60" cy="60" r="38" fill="none" stroke="#fb923c" stroke-width="1"
stroke-dasharray="4 8" class="cyber-ring-spin-reverse" /> stroke-dasharray="4 8" class="ring-spin-reverse" />
<!-- Key icon center --> <!-- Key icon -->
<g transform="translate(60,60)"> <g transform="translate(60,60)" class="key-breathe">
<!-- Key head (circle) -->
<circle cx="0" cy="-8" r="10" fill="none" stroke="#fb923c" stroke-width="2" /> <circle cx="0" cy="-8" r="10" fill="none" stroke="#fb923c" stroke-width="2" />
<circle cx="0" cy="-8" r="4" fill="#fb923c" opacity="0.4" /> <circle cx="0" cy="-8" r="4" fill="#fb923c" opacity="0.4" />
<!-- Key shaft -->
<line x1="0" y1="2" x2="0" y2="22" stroke="#fb923c" stroke-width="2" /> <line x1="0" y1="2" x2="0" y2="22" stroke="#fb923c" stroke-width="2" />
<!-- Key teeth -->
<line x1="0" y1="14" x2="6" y2="14" stroke="#fb923c" stroke-width="2" /> <line x1="0" y1="14" x2="6" y2="14" stroke="#fb923c" stroke-width="2" />
<line x1="0" y1="19" x2="4" y2="19" stroke="#fb923c" stroke-width="2" /> <line x1="0" y1="19" x2="4" y2="19" stroke="#fb923c" stroke-width="2" />
</g> </g>
<!-- Network nodes --> <!-- Network dots -->
<circle cx="16" cy="28" r="2" fill="#fb923c" opacity="0.6" /> <circle cx="16" cy="28" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 0s" />
<circle cx="104" cy="32" r="2" fill="#fb923c" opacity="0.6" /> <circle cx="104" cy="32" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 0.5s" />
<circle cx="20" cy="92" r="2" fill="#fb923c" opacity="0.6" /> <circle cx="20" cy="92" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 1s" />
<circle cx="100" cy="88" r="2" fill="#fb923c" opacity="0.6" /> <circle cx="100" cy="88" r="2" fill="#fb923c" opacity="0.5" class="node-pulse" style="--pulse-delay: 1.5s" />
<!-- Connection lines to center --> <!-- Connection lines -->
<line x1="16" y1="28" x2="40" y2="48" stroke="#fb923c" stroke-width="0.5" opacity="0.3" /> <line x1="16" y1="28" x2="40" y2="48" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
<line x1="104" y1="32" x2="80" y2="48" stroke="#fb923c" stroke-width="0.5" opacity="0.3" /> <line x1="104" y1="32" x2="80" y2="48" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
<line x1="20" y1="92" x2="40" y2="72" stroke="#fb923c" stroke-width="0.5" opacity="0.3" /> <line x1="20" y1="92" x2="40" y2="72" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
<line x1="100" y1="88" x2="80" y2="72" stroke="#fb923c" stroke-width="0.5" opacity="0.3" /> <line x1="100" y1="88" x2="80" y2="72" stroke="#fb923c" stroke-width="0.5" opacity="0.2" />
</svg> </svg>
</div> </div>
<h2 class="mt-4 text-xl font-bold text-white tracking-wide">SELECT IDENTITY</h2> <h2 class="mt-4 text-lg font-semibold text-white">Select Identity</h2>
<p class="mt-1 text-xs text-orange-400/70 font-mono tracking-widest uppercase">Nostr Authentication Protocol</p> <p class="mt-1 text-xs text-white/50">Nostr authentication protocol</p>
</div> </div>
<!-- Identity list --> <!-- Identity list -->
<div class="cyber-panel p-4 space-y-3 max-h-[50vh] overflow-y-auto"> <div class="glass-card p-4 space-y-3 max-h-[50vh] overflow-y-auto">
<!-- Loading state --> <!-- Loading -->
<div v-if="loading" class="flex items-center justify-center py-8"> <div v-if="loading" class="flex items-center justify-center py-8">
<svg class="animate-spin h-6 w-6 text-orange-400" viewBox="0 0 24 24" fill="none"> <svg class="animate-spin h-6 w-6 text-orange-400" viewBox="0 0 24 24" fill="none">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" /> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<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 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" />
</svg> </svg>
<span class="ml-3 text-white/60 text-sm font-mono">Loading identities...</span> <span class="ml-3 text-white/60 text-sm">Loading identities...</span>
</div> </div>
<!-- No identities --> <!-- No identities -->
@ -85,28 +74,33 @@
v-for="identity in identities" v-for="identity in identities"
:key="identity.id" :key="identity.id"
type="button" type="button"
class="cyber-identity-card w-full text-left" class="w-full text-left p-3 rounded-lg border transition-all duration-200"
:class="{ 'cyber-identity-selected': selectedId === identity.id }" :class="selectedId === identity.id
? 'bg-orange-500/10 border-orange-500/30'
: 'bg-white/5 border-white/10 hover:bg-white/8 hover:border-white/15'"
@click="selectedId = identity.id" @click="selectedId = identity.id"
> >
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<!-- Identity avatar --> <!-- Avatar -->
<div class="cyber-avatar" :class="purposeColor(identity.purpose)"> <div
class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0 border"
:class="avatarClasses(identity.purpose)"
>
<span class="text-sm font-bold">{{ identity.name.charAt(0).toUpperCase() }}</span> <span class="text-sm font-bold">{{ identity.name.charAt(0).toUpperCase() }}</span>
</div> </div>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="text-white font-semibold text-sm truncate">{{ identity.name }}</span> <span class="text-white font-semibold text-sm truncate">{{ identity.name }}</span>
<span v-if="identity.is_default" class="text-[10px] px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400 font-mono">DEFAULT</span> <span v-if="identity.is_default" class="text-[10px] px-1.5 py-0.5 rounded bg-orange-500/20 text-orange-400">default</span>
</div> </div>
<div class="flex items-center gap-2 mt-0.5"> <div class="mt-0.5">
<span v-if="identity.nostr_npub" class="text-white/40 text-xs font-mono truncate">{{ truncateNpub(identity.nostr_npub) }}</span> <span v-if="identity.nostr_npub" class="text-white/40 text-xs font-mono truncate">{{ truncateNpub(identity.nostr_npub) }}</span>
<span v-else class="text-red-400/60 text-xs font-mono">NO NOSTR KEY</span> <span v-else class="text-red-400/60 text-xs">No Nostr key</span>
</div> </div>
</div> </div>
<!-- Selection indicator --> <!-- Radio indicator -->
<div class="shrink-0"> <div class="shrink-0">
<div v-if="selectedId === identity.id" class="w-5 h-5 rounded-full bg-orange-500/30 border border-orange-400 flex items-center justify-center"> <div v-if="selectedId === identity.id" class="w-5 h-5 rounded-full bg-orange-500/30 border border-orange-400 flex items-center justify-center">
<div class="w-2.5 h-2.5 rounded-full bg-orange-400"></div> <div class="w-2.5 h-2.5 rounded-full bg-orange-400"></div>
@ -117,26 +111,28 @@
</button> </button>
</div> </div>
<!-- Action buttons --> <!-- Actions -->
<div class="flex gap-3 mt-4"> <div class="flex gap-3 mt-4">
<button @click="$emit('cancel')" class="cyber-btn flex-1 py-3 text-sm font-medium"> <button @click="$emit('cancel')" class="glass-button flex-1 py-3 rounded-lg text-sm font-medium text-white/80">
CANCEL Cancel
</button> </button>
<button <button
@click="confirm" @click="confirm"
:disabled="!selectedId || !hasNostrKey" :disabled="!selectedId || !hasNostrKey"
class="cyber-btn-primary flex-1 py-3 text-sm font-bold" class="flex-1 py-3 rounded-lg text-sm font-semibold transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed"
:class="selectedId && hasNostrKey
? 'bg-orange-500/20 border border-orange-500/40 text-orange-400 hover:bg-orange-500/30'
: 'bg-white/5 border border-white/10 text-white/40'"
> >
<svg class="w-4 h-4 mr-1.5 inline-block" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-4 h-4 mr-1.5 inline-block" 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" /> <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> </svg>
AUTHENTICATE Authenticate
</button> </button>
</div> </div>
<!-- Footer info line --> <p class="mt-3 text-center text-[10px] text-white/25 tracking-wider">
<p class="mt-3 text-center text-[10px] text-white/25 font-mono tracking-wider"> NIP-07 · SECP256K1 · Signed locally
NIP-07 &middot; SECP256K1 &middot; SIGNED LOCALLY
</p> </p>
</div> </div>
</div> </div>
@ -197,7 +193,6 @@ async function loadIdentities() {
try { try {
const res = await rpcClient.call<{ identities: Identity[] }>({ method: 'identity.list' }) const res = await rpcClient.call<{ identities: Identity[] }>({ method: 'identity.list' })
identities.value = res.identities || [] identities.value = res.identities || []
// Auto-select the default identity or first one with a Nostr key
const defaultId = identities.value.find(i => i.is_default && i.nostr_pubkey) const defaultId = identities.value.find(i => i.is_default && i.nostr_pubkey)
|| identities.value.find(i => i.nostr_pubkey) || identities.value.find(i => i.nostr_pubkey)
if (defaultId) { if (defaultId) {
@ -222,97 +217,41 @@ function truncateNpub(npub: string): string {
return npub.slice(0, 12) + '...' + npub.slice(-6) return npub.slice(0, 12) + '...' + npub.slice(-6)
} }
function purposeColor(purpose: string): string { function avatarClasses(purpose: string): string {
switch (purpose) { switch (purpose) {
case 'business': return 'cyber-avatar-blue' case 'business': return 'bg-blue-500/15 text-blue-400 border-blue-500/25'
case 'anonymous': return 'cyber-avatar-purple' case 'anonymous': return 'bg-purple-500/15 text-purple-400 border-purple-500/25'
default: return 'cyber-avatar-orange' default: return 'bg-orange-500/15 text-orange-400 border-orange-500/25'
} }
} }
function particleStyle(i: number): Record<string, string> {
const left = ((i * 37 + 13) % 100)
const delay = ((i * 1.3) % 8).toFixed(1)
const duration = (6 + (i % 5) * 2).toFixed(1)
const size = 10 + (i % 3) * 2
return {
left: `${left}%`,
animationDelay: `${delay}s`,
animationDuration: `${duration}s`,
fontSize: `${size}px`,
}
}
function particleChar(i: number): string {
const chars = '01アイウエオカキクケコ暗号鍵身元'
return chars[i % chars.length] ?? '0'
}
</script> </script>
<style scoped> <style scoped>
/* Animated scan line on backdrop */ /* Glow ring around key icon */
.identity-picker-backdrop::after { .key-glow-ring {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(251, 146, 60, 0.015) 2px,
rgba(251, 146, 60, 0.015) 4px
);
pointer-events: none;
animation: scanlines 8s linear infinite;
}
@keyframes scanlines {
0% { transform: translateY(0); }
100% { transform: translateY(4px); }
}
/* Floating binary/katakana particles */
.cyber-particle {
position: absolute;
top: -20px;
color: rgba(251, 146, 60, 0.12);
font-family: monospace;
animation: particle-fall linear infinite;
user-select: none;
}
@keyframes particle-fall {
0% { transform: translateY(-20px); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(calc(100vh + 20px)); opacity: 0; }
}
/* Glowing ring around the SVG icon */
.cyber-glow-ring {
position: relative; position: relative;
padding: 8px; padding: 8px;
} }
.cyber-glow-ring::before { .key-glow-ring::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle, rgba(251, 146, 60, 0.1) 0%, transparent 70%); background: radial-gradient(circle, rgba(251, 146, 60, 0.12) 0%, transparent 70%);
animation: glow-pulse 3s ease-in-out infinite; animation: glow-pulse 3s ease-in-out infinite;
} }
@keyframes glow-pulse { @keyframes glow-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); } 0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); } 50% { opacity: 1; transform: scale(1.15); }
} }
/* SVG ring animations */ /* Rotating rings */
.cyber-ring-spin { .ring-spin {
animation: ring-rotate 20s linear infinite; animation: ring-rotate 20s linear infinite;
transform-origin: 60px 60px; transform-origin: 60px 60px;
} }
.cyber-ring-spin-reverse { .ring-spin-reverse {
animation: ring-rotate 15s linear infinite reverse; animation: ring-rotate 15s linear infinite reverse;
transform-origin: 60px 60px; transform-origin: 60px 60px;
} }
@ -322,97 +261,26 @@ function particleChar(i: number): string {
to { transform: rotate(360deg); } to { transform: rotate(360deg); }
} }
/* Main panel */ /* Key breathing animation */
.cyber-panel { .key-breathe {
background: rgba(0, 0, 0, 0.7); animation: breathe 4s ease-in-out infinite;
border: 1px solid rgba(251, 146, 60, 0.15); transform-origin: 0 6px;
border-radius: 12px;
backdrop-filter: blur(24px);
box-shadow:
0 0 30px rgba(251, 146, 60, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
} }
/* Identity cards */ @keyframes breathe {
.cyber-identity-card { 0%, 100% { opacity: 0.8; transform: scale(1); }
display: block; 50% { opacity: 1; transform: scale(1.05); }
padding: 12px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
transition: all 0.2s ease;
cursor: pointer;
}
.cyber-identity-card:hover {
background: rgba(251, 146, 60, 0.05);
border-color: rgba(251, 146, 60, 0.15);
}
.cyber-identity-selected {
background: rgba(251, 146, 60, 0.08) !important;
border-color: rgba(251, 146, 60, 0.3) !important;
box-shadow: 0 0 12px rgba(251, 146, 60, 0.08);
} }
/* Avatar badges */ /* Network node pulse */
.cyber-avatar { .node-pulse {
width: 36px; animation: node-blink 3s ease-in-out infinite;
height: 36px; animation-delay: var(--pulse-delay, 0s);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cyber-avatar-orange {
background: rgba(251, 146, 60, 0.15);
color: #fb923c;
border: 1px solid rgba(251, 146, 60, 0.25);
}
.cyber-avatar-blue {
background: rgba(59, 130, 246, 0.15);
color: #3b82f6;
border: 1px solid rgba(59, 130, 246, 0.25);
}
.cyber-avatar-purple {
background: rgba(168, 85, 247, 0.15);
color: #a855f7;
border: 1px solid rgba(168, 85, 247, 0.25);
} }
/* Buttons */ @keyframes node-blink {
.cyber-btn { 0%, 100% { opacity: 0.3; }
background: rgba(255, 255, 255, 0.04); 50% { opacity: 0.8; r: 3; }
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s ease;
font-family: monospace;
letter-spacing: 0.05em;
}
.cyber-btn:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: white;
}
.cyber-btn-primary {
background: rgba(251, 146, 60, 0.15);
border: 1px solid rgba(251, 146, 60, 0.3);
border-radius: 8px;
color: #fb923c;
transition: all 0.2s ease;
font-family: monospace;
letter-spacing: 0.05em;
}
.cyber-btn-primary:hover:not(:disabled) {
background: rgba(251, 146, 60, 0.25);
border-color: rgba(251, 146, 60, 0.5);
box-shadow: 0 0 20px rgba(251, 146, 60, 0.15);
color: #fdba74;
}
.cyber-btn-primary:disabled {
opacity: 0.3;
cursor: not-allowed;
} }
/* Transition */ /* Transition */

1
neode-ui/src/locales/en.json
View File

@ -12,6 +12,7 @@
"install": "Install", "install": "Install",
"installing": "Installing...", "installing": "Installing...",
"uninstall": "Uninstall", "uninstall": "Uninstall",
"uninstalling": "Uninstalling...",
"start": "Start", "start": "Start",
"stop": "Stop", "stop": "Stop",
"restart": "Restart", "restart": "Restart",

1
neode-ui/src/locales/es.json
View File

@ -12,6 +12,7 @@
"install": "Instalar", "install": "Instalar",
"installing": "Instalando...", "installing": "Instalando...",
"uninstall": "Desinstalar", "uninstall": "Desinstalar",
"uninstalling": "Desinstalando...",
"start": "Iniciar", "start": "Iniciar",
"stop": "Detener", "stop": "Detener",
"restart": "Reiniciar", "restart": "Reiniciar",

29
neode-ui/src/views/Apps.vue
View File

@ -179,14 +179,14 @@
class="fixed inset-0 z-50 flex items-center justify-center p-4" class="fixed inset-0 z-50 flex items-center justify-center p-4"
@click="closeUninstallModal()" @click="closeUninstallModal()"
> >
<div class="absolute inset-0 bg-black/10 backdrop-blur-md"></div> <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
<div <div
ref="uninstallModalRef" ref="uninstallModalRef"
@click.stop @click.stop
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-labelledby="uninstall-dialog-title" aria-labelledby="uninstall-dialog-title"
class="glass-card p-6 max-w-md w-full relative z-10" class="glass-card p-6 max-w-2xl w-full relative z-10"
> >
<div class="flex items-start gap-4 mb-4"> <div class="flex items-start gap-4 mb-4">
<div class="p-3 bg-red-500/20 rounded-lg"> <div class="p-3 bg-red-500/20 rounded-lg">
@ -211,9 +211,20 @@
</button> </button>
<button <button
@click="confirmUninstall" @click="confirmUninstall"
class="px-4 py-2 bg-red-600/80 hover:bg-red-600 rounded-lg text-white text-sm font-medium transition-colors" :disabled="uninstalling"
class="px-4 py-2 bg-red-600/80 hover:bg-red-600 rounded-lg text-white text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
> >
{{ t('common.uninstall') }} <svg
v-if="uninstalling"
class="animate-spin h-4 w-4"
aria-hidden="true"
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>
<span>{{ uninstalling ? t('common.uninstalling') : t('common.uninstall') }}</span>
</button> </button>
</div> </div>
</div> </div>
@ -495,15 +506,21 @@ function showUninstallModal(id: string, pkg: PackageDataEntry) {
} }
} }
const uninstalling = ref(false)
async function confirmUninstall() { async function confirmUninstall() {
const { appId } = uninstallModal.value const { appId } = uninstallModal.value
uninstallModal.value.show = false uninstalling.value = true
try { try {
await store.uninstallPackage(appId) await store.uninstallPackage(appId)
uninstallModal.value.show = false
} catch (err) { } catch (err) {
if (import.meta.env.DEV) console.error('Failed to uninstall app:', err) if (import.meta.env.DEV) console.error('Failed to uninstall app:', err)
showActionError(`Failed to uninstall app: ${err instanceof Error ? err.message : 'Unknown error'}`) showActionError(`Failed to uninstall app: ${err instanceof Error ? err.message : 'Unknown error'}`)
uninstallModal.value.show = false
} finally {
uninstalling.value = false
} }
} }

16
neode-ui/src/views/Marketplace.vue
View File

@ -654,8 +654,7 @@ const WEB_ONLY_APP_URLS: Record<string, string> = {
/** App ID to port-based URL for container apps */ /** App ID to port-based URL for container apps */
const APP_LAUNCH_URLS: Record<string, string> = { const APP_LAUNCH_URLS: Record<string, string> = {
'bitcoin-knots': 'http://localhost:8334', 'bitcoin-knots': 'http://localhost:8334',
'electrs': 'http://localhost:50002', 'btcpay-server': 'http://localhost:23000',
'btcpay-server': 'http://localhost:23000',
'lnd': 'http://localhost:8081', 'lnd': 'http://localhost:8081',
'mempool': 'http://localhost:4080', 'mempool': 'http://localhost:4080',
'homeassistant': 'http://localhost:8123', 'homeassistant': 'http://localhost:8123',
@ -732,7 +731,7 @@ async function loadCommunityMarketplace() {
// Get app tier classification (matches backend get_app_tier) // Get app tier classification (matches backend get_app_tier)
function getAppTier(appId: string): string { function getAppTier(appId: string): string {
const core = ['bitcoin-knots', 'bitcoin', 'lnd', 'mempool', 'electrs', 'btcpay-server', 'dwn', 'filebrowser'] const core = ['bitcoin-knots', 'bitcoin', 'lnd', 'mempool', 'btcpay-server', 'dwn', 'filebrowser']
const recommended = ['fedimint', 'vaultwarden', 'uptime-kuma', 'grafana', 'searxng', 'tailscale', 'portainer'] const recommended = ['fedimint', 'vaultwarden', 'uptime-kuma', 'grafana', 'searxng', 'tailscale', 'portainer']
if (core.includes(appId)) return 'core' if (core.includes(appId)) return 'core'
if (recommended.includes(appId)) return 'recommended' if (recommended.includes(appId)) return 'recommended'
@ -753,17 +752,6 @@ function getCuratedAppList() {
manifestUrl: undefined, manifestUrl: undefined,
repoUrl: 'https://github.com/bitcoinknots/bitcoin' repoUrl: 'https://github.com/bitcoinknots/bitcoin'
}, },
{
id: 'electrs',
title: 'Electrs',
version: '0.4.1',
description: 'Electrum protocol indexer for Bitcoin. Powers Mempool and other Electrum clients. Requires Bitcoin Knots or Bitcoin Core.',
icon: '/assets/img/app-icons/electrs.svg',
author: 'Roman Zeyde',
dockerImage: 'docker.io/mempool/electrs:v0.4.1',
manifestUrl: undefined,
repoUrl: 'https://github.com/romanz/electrs'
},
{ {
id: 'btcpay-server', id: 'btcpay-server',
title: 'BTCPay Server', title: 'BTCPay Server',

34
neode-ui/src/views/Web5.vue
View File

@ -218,7 +218,7 @@
<!-- Send Message Modal --> <!-- Send Message Modal -->
<Teleport to="body"> <Teleport to="body">
<div v-if="showSendMessageModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="closeSendMessageModal()"> <div v-if="showSendMessageModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-md" @click.self="closeSendMessageModal()">
<div ref="sendMessageModalRef" class="glass-card p-6 max-w-md w-full max-h-[90vh] overflow-y-auto"> <div ref="sendMessageModalRef" class="glass-card p-6 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
<h3 class="text-lg font-semibold text-white mb-4">{{ t('web5.sendMessageTitle') }}</h3> <h3 class="text-lg font-semibold text-white mb-4">{{ t('web5.sendMessageTitle') }}</h3>
<p class="text-white/70 text-sm mb-4">Messages are sent over the Tor network to the selected peer.</p> <p class="text-white/70 text-sm mb-4">Messages are sent over the Tor network to the selected peer.</p>
<div class="space-y-4"> <div class="space-y-4">
@ -1034,7 +1034,7 @@
<!-- Add Content Modal --> <!-- Add Content Modal -->
<Teleport to="body"> <Teleport to="body">
<div v-if="showAddContentModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showAddContentModal = false" @keydown.escape="showAddContentModal = false"> <div v-if="showAddContentModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showAddContentModal = false" @keydown.escape="showAddContentModal = false">
<div class="glass-card p-6 w-full max-w-md mx-4" role="dialog" aria-modal="true" aria-labelledby="add-content-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="add-content-title">
<h2 id="add-content-title" class="text-lg font-bold text-white mb-4">{{ t('web5.addContentTitle') }}</h2> <h2 id="add-content-title" class="text-lg font-bold text-white mb-4">{{ t('web5.addContentTitle') }}</h2>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
@ -1202,7 +1202,7 @@
<!-- Create Identity Modal --> <!-- Create Identity Modal -->
<div v-if="showCreateIdentityModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showCreateIdentityModal = false" @keydown.escape="showCreateIdentityModal = false"> <div v-if="showCreateIdentityModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showCreateIdentityModal = false" @keydown.escape="showCreateIdentityModal = false">
<div class="glass-card p-6 w-full max-w-md mx-4" role="dialog" aria-modal="true" aria-labelledby="create-identity-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="create-identity-title">
<h2 id="create-identity-title" class="text-lg font-bold text-white mb-4">{{ t('web5.createIdentityTitle') }}</h2> <h2 id="create-identity-title" class="text-lg font-bold text-white mb-4">{{ t('web5.createIdentityTitle') }}</h2>
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
@ -1236,7 +1236,7 @@
<!-- Delete Confirmation Modal --> <!-- Delete Confirmation Modal -->
<div v-if="deleteIdentityTarget" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="deleteIdentityTarget = null" @keydown.escape="deleteIdentityTarget = null"> <div v-if="deleteIdentityTarget" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="deleteIdentityTarget = null" @keydown.escape="deleteIdentityTarget = null">
<div class="glass-card p-6 w-full max-w-sm mx-4" role="dialog" aria-modal="true" aria-labelledby="delete-identity-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="delete-identity-title">
<h2 id="delete-identity-title" class="text-lg font-bold text-white mb-2">{{ t('web5.deleteIdentityTitle') }}</h2> <h2 id="delete-identity-title" class="text-lg font-bold text-white mb-2">{{ t('web5.deleteIdentityTitle') }}</h2>
<p class="text-white/60 text-sm mb-4">{{ t('web5.deleteIdentityConfirm') }}</p> <p class="text-white/60 text-sm mb-4">{{ t('web5.deleteIdentityConfirm') }}</p>
<div class="flex gap-3"> <div class="flex gap-3">
@ -1249,7 +1249,7 @@
</div> </div>
<!-- Unified Send Modal --> <!-- Unified Send Modal -->
<div v-if="showUnifiedSendModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="closeUnifiedSendModal" @keydown.escape="closeUnifiedSendModal"> <div v-if="showUnifiedSendModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="closeUnifiedSendModal" @keydown.escape="closeUnifiedSendModal">
<div class="glass-card p-6 w-full max-w-md mx-4" role="dialog" aria-modal="true" aria-labelledby="send-bitcoin-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="send-bitcoin-title">
<h2 id="send-bitcoin-title" class="text-lg font-bold text-white mb-4">{{ t('web5.sendBitcoinTitle') }}</h2> <h2 id="send-bitcoin-title" class="text-lg font-bold text-white mb-4">{{ t('web5.sendBitcoinTitle') }}</h2>
<!-- Method tabs --> <!-- Method tabs -->
@ -1349,7 +1349,7 @@
<!-- Unified Receive Modal --> <!-- Unified Receive Modal -->
<div v-if="showUnifiedReceiveModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="closeUnifiedReceiveModal" @keydown.escape="closeUnifiedReceiveModal"> <div v-if="showUnifiedReceiveModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="closeUnifiedReceiveModal" @keydown.escape="closeUnifiedReceiveModal">
<div class="glass-card p-6 w-full max-w-md mx-4" role="dialog" aria-modal="true" aria-labelledby="receive-bitcoin-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="receive-bitcoin-title">
<h2 id="receive-bitcoin-title" class="text-lg font-bold text-white mb-4">{{ t('web5.receiveBitcoinTitle') }}</h2> <h2 id="receive-bitcoin-title" class="text-lg font-bold text-white mb-4">{{ t('web5.receiveBitcoinTitle') }}</h2>
<!-- Method tabs --> <!-- Method tabs -->
@ -1642,7 +1642,7 @@
<!-- Domains Management Modal --> <!-- Domains Management Modal -->
<div v-if="showDomainsModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showDomainsModal = false" @keydown.escape="showDomainsModal = false"> <div v-if="showDomainsModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showDomainsModal = false" @keydown.escape="showDomainsModal = false">
<div class="glass-card p-6 w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="domains-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="domains-title">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 id="domains-title" class="text-lg font-bold text-white">{{ t('web5.domainsTitle') }}</h2> <h2 id="domains-title" class="text-lg font-bold text-white">{{ t('web5.domainsTitle') }}</h2>
<button @click="showDomainsModal = false" class="text-white/40 hover:text-white/80 transition-colors"> <button @click="showDomainsModal = false" class="text-white/40 hover:text-white/80 transition-colors">
@ -1719,7 +1719,7 @@
<!-- Relay Management Modal --> <!-- Relay Management Modal -->
<div v-if="showRelaysModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showRelaysModal = false" @keydown.escape="showRelaysModal = false"> <div v-if="showRelaysModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-md" @click.self="showRelaysModal = false" @keydown.escape="showRelaysModal = false">
<div class="glass-card p-6 w-full max-w-lg mx-4 max-h-[80vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="relays-title"> <div class="glass-card p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto" role="dialog" aria-modal="true" aria-labelledby="relays-title">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 id="relays-title" class="text-lg font-bold text-white">{{ t('web5.nostrRelays') }}</h2> <h2 id="relays-title" class="text-lg font-bold text-white">{{ t('web5.nostrRelays') }}</h2>
<button @click="showRelaysModal = false" class="text-white/40 hover:text-white/80 transition-colors"> <button @click="showRelaysModal = false" class="text-white/40 hover:text-white/80 transition-colors">
@ -2035,8 +2035,14 @@ async function publishDhtDid() {
}) })
dhtDid.value = res.dht_did dhtDid.value = res.dht_did
localStorage.setItem('neode_dht_did', res.dht_did) localStorage.setItem('neode_dht_did', res.dht_did)
} catch (e) { } catch {
console.error('DHT publish failed:', e) // identity.create-dht-did not yet implemented — generate placeholder
const did = storedDid.value || localStorage.getItem('neode_did')
if (did) {
const dhtVersion = did.replace('did:key:', 'did:dht:')
dhtDid.value = dhtVersion
localStorage.setItem('neode_dht_did', dhtVersion)
}
} finally { } finally {
publishingDht.value = false publishingDht.value = false
} }
@ -2049,8 +2055,8 @@ async function refreshDhtDid() {
const defaultId = identities.identities?.find((i: { is_default: boolean }) => i.is_default) const defaultId = identities.identities?.find((i: { is_default: boolean }) => i.is_default)
if (!defaultId) return if (!defaultId) return
await rpcClient.call({ method: 'identity.refresh-dht-did', params: { identity_id: defaultId.id } }) await rpcClient.call({ method: 'identity.refresh-dht-did', params: { identity_id: defaultId.id } })
} catch (e) { } catch {
console.error('DHT refresh failed:', e) // identity.refresh-dht-did not yet implemented — silently ignore
} finally { } finally {
publishingDht.value = false publishingDht.value = false
} }
@ -2504,7 +2510,7 @@ async function finalizePsbt() {
function copyPsbt() { function copyPsbt() {
if (!psbtData.value) return if (!psbtData.value) return
window.safeClipboardWrite(psbtData.value) safeClipboardWrite(psbtData.value)
unifiedSendError.value = t('web5.psbtCopied') unifiedSendError.value = t('web5.psbtCopied')
} }
@ -2577,7 +2583,7 @@ function copyEcashToken(token: string) {
async function safeClipboardWrite(text: string): Promise<void> { async function safeClipboardWrite(text: string): Promise<void> {
if (navigator.clipboard?.writeText) { if (navigator.clipboard?.writeText) {
await safeClipboardWrite(text) await navigator.clipboard.writeText(text)
} else { } else {
const ta = document.createElement('textarea') const ta = document.createElement('textarea')
ta.value = text ta.value = text