Ronni Baslund
c71e782dc0
- 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.
87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
// Persistent red banner at the very top of the operator chrome. Renders
|
|
// whenever useImpersonation().active is set. Sits OUTSIDE the sidebar/topbar
|
|
// so it spans the full window width.
|
|
|
|
const { active, asUser, exit } = useImpersonation()
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="active" class="banner" role="alert">
|
|
<span class="pill">
|
|
<span class="dot" />
|
|
Operator impersonation
|
|
</span>
|
|
<div class="body">
|
|
Viewing <strong>{{ active.name }}</strong> as <strong>{{ asUser }}</strong>.
|
|
Every action you take is logged with your operator identity.
|
|
</div>
|
|
<button class="log-note" type="button">Log note</button>
|
|
<button class="exit" type="button" @click="exit">
|
|
<UiIcon name="x" :size="12" />
|
|
Exit impersonation
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.banner {
|
|
background: #9F1D1D;
|
|
color: #FEEEEE;
|
|
padding: 8px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
|
flex-shrink: 0;
|
|
animation: impersonationGlow 1.4s ease-in-out infinite alternate;
|
|
}
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 10px;
|
|
background: rgba(255, 255, 255, 0.14);
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
}
|
|
.dot { width: 6px; height: 6px; border-radius: 999px; background: #fff; }
|
|
.body { flex: 1; min-width: 0; font-size: 13px; }
|
|
.body strong { font-weight: 700; }
|
|
|
|
.log-note, .exit {
|
|
border: 0;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
border-radius: 4px;
|
|
}
|
|
.log-note {
|
|
background: transparent;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: #FEEEEE;
|
|
font-size: 12px;
|
|
padding: 5px 12px;
|
|
}
|
|
.exit {
|
|
background: #FEEEEE;
|
|
color: #9F1D1D;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 6px 14px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
@keyframes impersonationGlow {
|
|
from { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1); }
|
|
to { box-shadow: inset 0 -1px 0 rgba(255, 200, 200, 0.3); }
|
|
}
|
|
</style>
|