b6f401e7f6
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>
313 lines
11 KiB
Vue
313 lines
11 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Transition name="identity-picker">
|
|
<div
|
|
v-if="show"
|
|
class="fixed inset-0 z-[3100] flex items-center justify-center p-4"
|
|
@click="$emit('cancel')"
|
|
>
|
|
<!-- Backdrop -->
|
|
<div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
|
|
|
|
<!-- Main panel -->
|
|
<div
|
|
ref="modalRef"
|
|
@click.stop
|
|
class="relative z-10 w-full max-w-lg"
|
|
>
|
|
<!-- Header with animated key icon -->
|
|
<div class="relative mb-6 flex flex-col items-center">
|
|
<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.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" />
|
|
<line x1="0" y1="2" x2="0" y2="22" 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" />
|
|
</g>
|
|
<!-- 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-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="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">Loading identities...</span>
|
|
</div>
|
|
|
|
<!-- No identities -->
|
|
<div v-else-if="identities.length === 0" class="text-center py-8">
|
|
<p class="text-white/50 text-sm">No identities found.</p>
|
|
<p class="text-white/30 text-xs mt-1">Create one in Settings → Credentials</p>
|
|
</div>
|
|
|
|
<!-- Identity cards -->
|
|
<button
|
|
v-for="identity in identities"
|
|
:key="identity.id"
|
|
type="button"
|
|
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">
|
|
<!-- 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">default</span>
|
|
</div>
|
|
<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">No Nostr key</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
<div v-else class="w-5 h-5 rounded-full border border-white/20"></div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-3 mt-4">
|
|
<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="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
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-3 text-center text-[10px] text-white/25 tracking-wider">
|
|
NIP-07 · SECP256K1 · Signed locally
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch, onMounted } from 'vue'
|
|
import { useModalKeyboard } from '@/composables/useModalKeyboard'
|
|
import { rpcClient } from '@/api/rpc-client'
|
|
|
|
interface Identity {
|
|
id: string
|
|
name: string
|
|
purpose: string
|
|
pubkey: string
|
|
did: string
|
|
is_default: boolean
|
|
nostr_pubkey?: string
|
|
nostr_npub?: string
|
|
}
|
|
|
|
const props = defineProps<{
|
|
show: boolean
|
|
appName: string
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: [identity: Identity]
|
|
cancel: []
|
|
}>()
|
|
|
|
const modalRef = ref<HTMLElement | null>(null)
|
|
const identities = ref<Identity[]>([])
|
|
const selectedId = ref<string | null>(null)
|
|
const loading = ref(false)
|
|
|
|
useModalKeyboard(modalRef, computed(() => props.show), () => emit('cancel'))
|
|
|
|
const hasNostrKey = computed(() => {
|
|
const selected = identities.value.find(i => i.id === selectedId.value)
|
|
return selected?.nostr_pubkey != null
|
|
})
|
|
|
|
watch(() => props.show, async (open) => {
|
|
if (open) {
|
|
await loadIdentities()
|
|
}
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (props.show) loadIdentities()
|
|
})
|
|
|
|
async function loadIdentities() {
|
|
loading.value = true
|
|
try {
|
|
const res = await rpcClient.call<{ identities: Identity[] }>({ method: 'identity.list' })
|
|
identities.value = res.identities || []
|
|
const defaultId = identities.value.find(i => i.is_default && i.nostr_pubkey)
|
|
|| identities.value.find(i => i.nostr_pubkey)
|
|
if (defaultId) {
|
|
selectedId.value = defaultId.id
|
|
}
|
|
} catch {
|
|
identities.value = []
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
function confirm() {
|
|
const selected = identities.value.find(i => i.id === selectedId.value)
|
|
if (selected) {
|
|
emit('select', selected)
|
|
}
|
|
}
|
|
|
|
function truncateNpub(npub: string): string {
|
|
if (npub.length <= 20) return npub
|
|
return npub.slice(0, 12) + '...' + npub.slice(-6)
|
|
}
|
|
|
|
function avatarClasses(purpose: string): string {
|
|
switch (purpose) {
|
|
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'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Glow ring around key icon */
|
|
.key-glow-ring {
|
|
position: relative;
|
|
padding: 8px;
|
|
}
|
|
.key-glow-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 50%;
|
|
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.4; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.15); }
|
|
}
|
|
|
|
/* Rotating rings */
|
|
.ring-spin {
|
|
animation: ring-rotate 20s linear infinite;
|
|
transform-origin: 60px 60px;
|
|
}
|
|
.ring-spin-reverse {
|
|
animation: ring-rotate 15s linear infinite reverse;
|
|
transform-origin: 60px 60px;
|
|
}
|
|
|
|
@keyframes ring-rotate {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Key breathing animation */
|
|
.key-breathe {
|
|
animation: breathe 4s ease-in-out infinite;
|
|
transform-origin: 0 6px;
|
|
}
|
|
|
|
@keyframes breathe {
|
|
0%, 100% { opacity: 0.8; transform: scale(1); }
|
|
50% { opacity: 1; transform: scale(1.05); }
|
|
}
|
|
|
|
/* Network node pulse */
|
|
.node-pulse {
|
|
animation: node-blink 3s ease-in-out infinite;
|
|
animation-delay: var(--pulse-delay, 0s);
|
|
}
|
|
|
|
@keyframes node-blink {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 0.8; r: 3; }
|
|
}
|
|
|
|
/* Transition */
|
|
.identity-picker-enter-active,
|
|
.identity-picker-leave-active {
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
.identity-picker-enter-active > .relative {
|
|
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
|
|
}
|
|
.identity-picker-leave-active > .relative {
|
|
transition: transform 0.25s ease, opacity 0.2s ease;
|
|
}
|
|
|
|
.identity-picker-enter-from {
|
|
opacity: 0;
|
|
}
|
|
.identity-picker-enter-from > .relative {
|
|
transform: translateY(20px) scale(0.96);
|
|
opacity: 0;
|
|
}
|
|
.identity-picker-leave-to {
|
|
opacity: 0;
|
|
}
|
|
.identity-picker-leave-to > .relative {
|
|
transform: translateY(10px) scale(0.98);
|
|
opacity: 0;
|
|
}
|
|
</style>
|