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

<template>
  <div
    v-if="relayConnected"
    class="companion-indicator"
    :title="companionActive ? 'Companion app sending input' : 'Relay ready — waiting for companion'"
  >
    <!-- Wire going down off-screen -->
    <div class="companion-wire" :class="{ active: companionActive }" />

    <!-- Gamepad body -->
    <div class="companion-pad" :class="{ connected: companionActive, 'input-flash': companionInputActive }">
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <!-- Controller body -->
        <rect x="3" y="7" width="18" height="11" rx="3" stroke="currentColor" stroke-width="1.5" />
        <!-- D-pad vertical -->
        <rect x="7.5" y="10" width="2" height="5" rx="0.5" fill="currentColor" />
        <!-- D-pad horizontal -->
        <rect x="6" y="11.5" width="5" height="2" rx="0.5" fill="currentColor" />
        <!-- A button -->
        <circle cx="16" cy="11" r="1.2" fill="currentColor" />
        <!-- B button -->
        <circle cx="14" cy="13.5" r="1.2" fill="currentColor" />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
import { relayConnected, companionActive, companionInputActive } from '@/api/remote-relay'
</script>

<style scoped>
.companion-indicator {
  position: fixed;
  bottom: 0;
  right: 24px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Idle state — subtle, muted */
.companion-pad {
  color: rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 6px 10px 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.3s, border-color 0.3s, box-shadow 0.3s, background 0.3s;
  order: 0;
}

/* Companion actively sending */
.companion-pad.connected {
  color: rgba(247, 147, 26, 0.7);
  background: rgba(0, 0, 0, 0.6);
  border-color: rgba(247, 147, 26, 0.3);
}

/* Input flash — brightens on each event */
.companion-pad.input-flash {
  color: rgba(247, 147, 26, 1);
  border-color: rgba(247, 147, 26, 0.6);
  box-shadow: 0 0 12px rgba(247, 147, 26, 0.25);
}

/* Wire */
.companion-wire {
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  border-radius: 1px;
  order: 1;
  transition: background 0.3s;
}

.companion-wire.active {
  background: linear-gradient(to bottom, rgba(247, 147, 26, 0.5), rgba(247, 147, 26, 0.15));
}
</style>