lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 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 ee15fbc457
commit b6f401e7f6
9 changed files with 155 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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"
@click="$emit('cancel')"
>
<!-- Backdrop with animated scan lines -->
<div class="absolute inset-0 bg-black/80 backdrop-blur-md identity-picker-backdrop"></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>
<!-- Backdrop -->
<div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
<!-- Main panel -->
<div
@@ -22,56 +15,52 @@
@click.stop
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">
<!-- SVG keyhole / identity node graphic -->
<div class="cyber-glow-ring">
<svg viewBox="0 0 120 120" class="w-24 h-24" xmlns="http://www.w3.org/2000/svg">
<!-- Outer ring with dash animation -->
<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="2"
stroke-dasharray="8 4" class="cyber-ring-spin" />
<div class="key-glow-ring">
<svg viewBox="0 0 120 120" class="w-20 h-20" xmlns="http://www.w3.org/2000/svg">
<!-- Outer ring -->
<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="#fb923c" stroke-width="1.5"
stroke-dasharray="8 6" class="ring-spin" />
<!-- 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="#fb923c" stroke-width="1.5"
stroke-dasharray="4 8" class="cyber-ring-spin-reverse" />
<!-- Key icon center -->
<g transform="translate(60,60)">
<!-- Key head (circle) -->
<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"
stroke-dasharray="4 8" class="ring-spin-reverse" />
<!-- Key icon -->
<g transform="translate(60,60)" class="key-breathe">
<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" />
<!-- Key shaft -->
<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="19" x2="4" y2="19" stroke="#fb923c" stroke-width="2" />
</g>
<!-- Network nodes -->
<circle cx="16" cy="28" r="2" fill="#fb923c" opacity="0.6" />
<circle cx="104" cy="32" r="2" fill="#fb923c" opacity="0.6" />
<circle cx="20" cy="92" r="2" fill="#fb923c" opacity="0.6" />
<circle cx="100" cy="88" r="2" fill="#fb923c" opacity="0.6" />
<!-- Connection lines to center -->
<line x1="16" y1="28" x2="40" 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.3" />
<line x1="20" y1="92" x2="40" 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.3" />
<!-- Network dots -->
<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.5" class="node-pulse" style="--pulse-delay: 0.5s" />
<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.5" class="node-pulse" style="--pulse-delay: 1.5s" />
<!-- Connection lines -->
<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.2" />
<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.2" />
</svg>
</div>
<h2 class="mt-4 text-xl font-bold text-white tracking-wide">SELECT IDENTITY</h2>
<p class="mt-1 text-xs text-orange-400/70 font-mono tracking-widest uppercase">Nostr Authentication Protocol</p>
<h2 class="mt-4 text-lg font-semibold text-white">Select Identity</h2>
<p class="mt-1 text-xs text-white/50">Nostr authentication protocol</p>
</div>
<!-- Identity list -->
<div class="cyber-panel p-4 space-y-3 max-h-[50vh] overflow-y-auto">
<!-- Loading state -->
<div class="glass-card p-4 space-y-3 max-h-[50vh] overflow-y-auto">
<!-- Loading -->
<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">
<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" />
</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>
<!-- No identities -->
@@ -85,28 +74,33 @@
v-for="identity in identities"
:key="identity.id"
type="button"
class="cyber-identity-card w-full text-left"
:class="{ 'cyber-identity-selected': selectedId === identity.id }"
class="w-full text-left p-3 rounded-lg border transition-all duration-200"
: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"
>
<div class="flex items-center gap-3">
<!-- Identity avatar -->
<div class="cyber-avatar" :class="purposeColor(identity.purpose)">
<!-- Avatar -->
<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>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<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 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-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>
<!-- Selection indicator -->
<!-- Radio indicator -->
<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 class="w-2.5 h-2.5 rounded-full bg-orange-400"></div>
@@ -117,26 +111,28 @@
</button>
</div>
<!-- Action buttons -->
<!-- Actions -->
<div class="flex gap-3 mt-4">
<button @click="$emit('cancel')" class="cyber-btn flex-1 py-3 text-sm font-medium">
CANCEL
<button @click="$emit('cancel')" class="glass-button flex-1 py-3 rounded-lg text-sm font-medium text-white/80">
Cancel
</button>
<button
@click="confirm"
: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">
<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>
AUTHENTICATE
Authenticate
</button>
</div>
<!-- Footer info line -->
<p class="mt-3 text-center text-[10px] text-white/25 font-mono tracking-wider">
NIP-07 &middot; SECP256K1 &middot; SIGNED LOCALLY
<p class="mt-3 text-center text-[10px] text-white/25 tracking-wider">
NIP-07 · SECP256K1 · Signed locally
</p>
</div>
</div>
@@ -197,7 +193,6 @@ async function loadIdentities() {
try {
const res = await rpcClient.call<{ identities: Identity[] }>({ method: 'identity.list' })
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)
|| identities.value.find(i => i.nostr_pubkey)
if (defaultId) {
@@ -222,97 +217,41 @@ function truncateNpub(npub: string): string {
return npub.slice(0, 12) + '...' + npub.slice(-6)
}
function purposeColor(purpose: string): string {
function avatarClasses(purpose: string): string {
switch (purpose) {
case 'business': return 'cyber-avatar-blue'
case 'anonymous': return 'cyber-avatar-purple'
default: return 'cyber-avatar-orange'
case 'business': return 'bg-blue-500/15 text-blue-400 border-blue-500/25'
case 'anonymous': return 'bg-purple-500/15 text-purple-400 border-purple-500/25'
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>
<style scoped>
/* Animated scan line on backdrop */
.identity-picker-backdrop::after {
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 {
/* Glow ring around key icon */
.key-glow-ring {
position: relative;
padding: 8px;
}
.cyber-glow-ring::before {
.key-glow-ring::before {
content: '';
position: absolute;
inset: 0;
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;
}
@keyframes glow-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
0%, 100% { opacity: 0.4; transform: scale(1); }
50% { opacity: 1; transform: scale(1.15); }
}
/* SVG ring animations */
.cyber-ring-spin {
/* Rotating rings */
.ring-spin {
animation: ring-rotate 20s linear infinite;
transform-origin: 60px 60px;
}
.cyber-ring-spin-reverse {
.ring-spin-reverse {
animation: ring-rotate 15s linear infinite reverse;
transform-origin: 60px 60px;
}
@@ -322,97 +261,26 @@ function particleChar(i: number): string {
to { transform: rotate(360deg); }
}
/* Main panel */
.cyber-panel {
background: rgba(0, 0, 0, 0.7);
border: 1px solid rgba(251, 146, 60, 0.15);
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);
/* Key breathing animation */
.key-breathe {
animation: breathe 4s ease-in-out infinite;
transform-origin: 0 6px;
}
/* Identity cards */
.cyber-identity-card {
display: block;
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);
@keyframes breathe {
0%, 100% { opacity: 0.8; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
/* Avatar badges */
.cyber-avatar {
width: 36px;
height: 36px;
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);
/* Network node pulse */
.node-pulse {
animation: node-blink 3s ease-in-out infinite;
animation-delay: var(--pulse-delay, 0s);
}
/* Buttons */
.cyber-btn {
background: rgba(255, 255, 255, 0.04);
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;
@keyframes node-blink {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; r: 3; }
}
/* Transition */