dezky/apps/operator/components/IncidentModal.vue

<script setup lang="ts">
import { INCIDENT } from '~/data/fixtures'

const { isOpen, close } = useIncidentModal()
const draft = ref('')

onMounted(() => {
  const onKey = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && isOpen.value) close()
  }
  document.addEventListener('keydown', onKey)
  onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
})
</script>

<template>
  <Teleport to="body">
    <div v-if="isOpen" class="backdrop" @click="close">
      <div class="modal" role="dialog" :aria-label="INCIDENT.title" @click.stop>
        <header>
          <div>
            <Eyebrow>{{ INCIDENT.id }} · {{ INCIDENT.severity }}</Eyebrow>
            <h2>{{ INCIDENT.title }}</h2>
          </div>
          <button class="x" type="button" aria-label="Close" @click="close">
            <UiIcon name="x" :size="12" />
          </button>
        </header>

        <div class="body">
          <div class="metrics">
            <MetricCell label="status" :value="INCIDENT.state" tone="warn" />
            <MetricCell label="started" :value="INCIDENT.started" />
            <MetricCell label="duration" :value="INCIDENT.duration" />
            <MetricCell label="affected" value="12 tenants" />
            <MetricCell label="incident lead" :value="INCIDENT.ic" />
            <MetricCell label="severity" :value="INCIDENT.severity" tone="bad" />
          </div>

          <Eyebrow>Updates</Eyebrow>
          <div class="timeline">
            <div v-for="(u, i) in INCIDENT.updates" :key="i" class="upd">
              <span class="bullet" :class="{ first: i === 0 }" />
              <div>
                <div class="upd-head">
                  <Mono>{{ u.t }}</Mono>
                  <span class="who">{{ u.who }}</span>
                </div>
                <p>{{ u.msg }}</p>
              </div>
            </div>
          </div>

          <div class="compose">
            <input v-model="draft" type="text" placeholder="Add update… (markdown supported)" />
            <div class="compose-foot">
              <Mono dim>// will notify on-call + post to #incidents</Mono>
              <UiButton variant="primary" :disabled="!draft.trim()">Post update</UiButton>
            </div>
          </div>
        </div>

        <footer>
          <UiButton variant="ghost" @click="close">Close</UiButton>
          <UiButton variant="secondary">
            <template #leading><UiIcon name="bell" :size="13" /></template>
            Notify customers
          </UiButton>
          <UiButton variant="primary">Mark resolved</UiButton>
        </footer>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 180;
}
.modal {
  width: 100%;
  max-width: 680px;
  max-height: 86vh;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--border);
}
h2 { margin: 4px 0 0 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; }
.x {
  width: 26px; height: 26px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--text-mute); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.x:hover { background: var(--surface); color: var(--text); }

.body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.timeline { display: flex; flex-direction: column; gap: 14px; padding-left: 14px; border-left: 1px solid var(--border); margin-left: 6px; }
.upd { position: relative; }
.bullet {
  position: absolute;
  left: -19px; top: 5px;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--text-mute);
}
.bullet.first { background: var(--accent); }
.upd-head { display: flex; align-items: baseline; gap: 8px; }
.who { font-size: 12px; font-weight: 500; }
.upd p { margin: 4px 0 0 0; font-size: 13px; color: var(--text-dim); }

.compose {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compose input {
  height: 32px;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.compose-foot { display: flex; justify-content: space-between; align-items: center; }

footer {
  padding: 12px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
</style>