archy/neode-ui/src/components/NostrIdentityPicker.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 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>

        <!-- Main panel -->
        <div
          ref="modalRef"
          @click.stop
          class="relative z-10 w-full max-w-lg"
        >
          <!-- Cypherpunk header graphic -->
          <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" />
                <!-- 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="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" />
              </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>
          </div>

          <!-- Identity list -->
          <div class="cyber-panel p-4 space-y-3 max-h-[50vh] overflow-y-auto">
            <!-- Loading state -->
            <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>
            </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 &rarr; Credentials</p>
            </div>

            <!-- Identity cards -->
            <button
              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 }"
              @click="selectedId = identity.id"
            >
              <div class="flex items-center gap-3">
                <!-- Identity avatar -->
                <div class="cyber-avatar" :class="purposeColor(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>
                  </div>
                  <div class="flex items-center gap-2 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>
                  </div>
                </div>

                <!-- Selection 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>

          <!-- Action buttons -->
          <div class="flex gap-3 mt-4">
            <button @click="$emit('cancel')" class="cyber-btn flex-1 py-3 text-sm font-medium">
              CANCEL
            </button>
            <button
              @click="confirm"
              :disabled="!selectedId || !hasNostrKey"
              class="cyber-btn-primary flex-1 py-3 text-sm font-bold"
            >
              <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>

          <!-- 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>
        </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 || []
    // 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) {
      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 purposeColor(purpose: string): string {
  switch (purpose) {
    case 'business': return 'cyber-avatar-blue'
    case 'anonymous': return 'cyber-avatar-purple'
    default: return 'cyber-avatar-orange'
  }
}

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 {
  position: relative;
  padding: 8px;
}
.cyber-glow-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.1) 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); }
}

/* SVG ring animations */
.cyber-ring-spin {
  animation: ring-rotate 20s linear infinite;
  transform-origin: 60px 60px;
}
.cyber-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); }
}

/* 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);
}

/* 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);
}

/* 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);
}

/* 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;
}

/* 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>