dezky/apps/portal/components/enduser/EnduserPresenceSelector.vue

<script setup lang="ts">
// Presence selector for the dashboard greeting strip. Drop-down trigger styled
// as a pill with a status dot, label, and short hint. Visual only — no API call.

type Presence = 'available' | 'meeting' | 'focus' | 'away'

interface PresenceOption {
  value: Presence
  label: string
  hint: string
  color: string
}

const opts: PresenceOption[] = [
  { value: 'available', label: 'Available',     hint: 'visible to teammates',  color: 'var(--ok)' },
  { value: 'meeting',   label: 'In a meeting',  hint: 'silenced · auto-clears', color: 'var(--warn)' },
  { value: 'focus',     label: 'Focus',         hint: 'no notifications',       color: 'var(--info)' },
  { value: 'away',      label: 'Away',          hint: 'be right back',          color: 'var(--text-mute)' },
]

const props = defineProps<{ modelValue: Presence }>()
const emit = defineEmits<{ 'update:modelValue': [Presence] }>()

const open = ref(false)
const rootRef = ref<HTMLElement | null>(null)

const current = computed(() => opts.find((o) => o.value === props.modelValue) ?? opts[0])

function pick(v: Presence) {
  emit('update:modelValue', v)
  open.value = false
}

function onDocClick(e: MouseEvent) {
  if (!rootRef.value) return
  if (!rootRef.value.contains(e.target as Node)) open.value = false
}

onMounted(() => document.addEventListener('mousedown', onDocClick))
onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick))
</script>

<template>
  <div ref="rootRef" class="presence">
    <button class="trigger" @click="open = !open" :aria-expanded="open">
      <StatusDot :color="current.color" :size="8" />
      <div class="trigger-text">
        <span class="trigger-label">{{ current.label }}</span>
        <span class="trigger-hint">{{ current.hint }}</span>
      </div>
      <UiIcon name="chevDown" :size="12" />
    </button>
    <Transition name="pop">
      <div v-if="open" class="menu">
        <button
          v-for="o in opts"
          :key="o.value"
          class="opt"
          :class="{ active: o.value === modelValue }"
          @click="pick(o.value)"
        >
          <StatusDot :color="o.color" :size="8" />
          <div class="opt-text">
            <span class="opt-label">{{ o.label }}</span>
            <span class="opt-hint">{{ o.hint }}</span>
          </div>
          <UiIcon v-if="o.value === modelValue" name="check" :size="13" />
        </button>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.presence { position: relative; }

.trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
}
.trigger:hover { border-color: var(--border-hi); }

.trigger-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.trigger-label { font-size: 13px; font-weight: 500; }
.trigger-hint  { font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); }

.menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 4px;
  z-index: 50;
}

.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text);
  text-align: left;
}
.opt:hover, .opt.active { background: var(--row-hover); }
.opt-text { display: flex; flex-direction: column; flex: 1; gap: 1px; }
.opt-label { font-size: 13px; font-weight: 500; }
.opt-hint { font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); }

.pop-enter-active, .pop-leave-active { transition: opacity 0.12s, transform 0.12s; }
.pop-enter-from, .pop-leave-to { opacity: 0; transform: translateY(-4px); }
</style>