feat(operator): command palette, impersonation, incident, tweaks (O.8)
- CommandPalette + useCommandPalette: ⌘K opens a search-and-jump panel over real tenants/partners + fixture flags + nav + actions. Arrow keys + Enter navigate, Escape/backdrop close. Recents are intentionally omitted for now; add when there's something to recent over. - Impersonation stub: useImpersonation + ImpersonationModal + ImpersonationBanner. Modal opens from tenant detail and from the palette. Banner stays at the top of the shell until exited. No real OBO token is minted — wiring OAuth Token Exchange is tracked as a follow-up. - IncidentModal + useIncidentModal: opened from the Overview and Infrastructure incident banners, renders the mock INCIDENT data with metrics, timeline and draft composer. - TweaksPanel + useTweaks: floating bottom-right panel for theme (dark/light), density (comfy/compact), env badge (prod/staging/dev). Saved to localStorage. - Theme/density apply via [data-theme] + [data-density] overrides in tokens.css. Topbar env badge now reads from useTweaks instead of a prop. - Layout wires ⌘K + ⌘[ at the document level and mounts the palette + modals + banner + tweaks panel once for all pages.
This commit is contained in:
Ronni Baslund
@@ -0,0 +1,167 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user