archy/neode-ui/src/components/CompanionIntroOverlay.vue

<template>
  <Teleport to="body">
    <Transition name="overlay-fade">
      <div
        v-if="visible"
        class="fixed inset-0 flex items-end sm:items-center justify-center p-4 z-[3000]"
        @click.self="dismiss"
      >
        <div class="absolute inset-0 bg-black/40 backdrop-blur-sm" />
        <div
          class="glass-card p-5 w-full max-w-sm relative z-10 mb-20 sm:mb-0"
          @click.stop
        >
          <!-- Icon -->
          <div class="flex justify-center mb-3">
            <div class="w-12 h-12 rounded-xl bg-orange-500/15 border border-orange-500/30 flex items-center justify-center">
              <svg class="w-7 h-7 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <rect x="3" y="7" width="18" height="11" rx="3" stroke-width="1.5" />
                <rect x="7.5" y="10" width="2" height="5" rx="0.5" fill="currentColor" />
                <rect x="6" y="11.5" width="5" height="2" rx="0.5" fill="currentColor" />
                <circle cx="16" cy="11" r="1.2" fill="currentColor" />
                <circle cx="14" cy="13.5" r="1.2" fill="currentColor" />
              </svg>
            </div>
          </div>

          <h3 class="text-lg font-semibold text-white text-center mb-2">Remote Companion</h3>
          <p class="text-sm text-white/60 text-center mb-4 leading-relaxed">
            Control your node from another device. Install the
            <span class="text-orange-400 font-medium">Archipelago</span>
            companion app on your phone, connect to the same network, and use it as a
            gamepad or keyboard.
          </p>

          <div class="flex flex-col gap-2 text-xs text-white/40">
            <div class="flex items-center gap-2">
              <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/50 text-[10px] font-bold">1</span>
              <span>Install the APK on your phone</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/50 text-[10px] font-bold">2</span>
              <span>Enter your node address and password</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-white/50 text-[10px] font-bold">3</span>
              <span>Use D-pad &amp; buttons or keyboard to control apps</span>
            </div>
          </div>

          <button
            class="mt-4 w-full py-2.5 rounded-lg bg-orange-500/20 border border-orange-500/30
                   text-orange-400 text-sm font-medium hover:bg-orange-500/30 transition-colors"
            @click="dismiss"
          >
            Got it
          </button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const STORAGE_KEY = 'neode_companion_intro_seen'

const visible = ref(false)

onMounted(() => {
  try {
    if (localStorage.getItem(STORAGE_KEY) !== '1') {
      // Delay slightly so it doesn't compete with login animation
      setTimeout(() => { visible.value = true }, 5000)
    }
  } catch {
    // localStorage unavailable
  }
})

function dismiss() {
  visible.value = false
  try {
    localStorage.setItem(STORAGE_KEY, '1')
  } catch {
    // ignore
  }
}
</script>

<style scoped>
.overlay-fade-enter-active { transition: opacity 0.3s ease; }
.overlay-fade-leave-active { transition: opacity 0.2s ease; }
.overlay-fade-enter-from,
.overlay-fade-leave-to { opacity: 0; }
.overlay-fade-enter-active .glass-card { transition: transform 0.3s ease; }
.overlay-fade-enter-from .glass-card { transform: translateY(20px); }
</style>