Ronni Baslund
455717ac67
The "on-call · Mikkel" pill named a person who doesn't exist and a paging system we haven't built. The IncidentModal still says "will notify on-call" but nothing actually does, and no schema for rotations / pages exists in platform-api. Showing this in the chrome was claiming an operational fact that isn't true. Drop the prop, span, and CSS from OpTopbar. The right cluster becomes just [bell] [profile]. Mock audit + incident-timeline fixtures still carry historical "on-call paged" entries — those are records of past events in the mock, not live state, so they stay. Paging gets a real indicator when the incident backend lands (tracked as "Real on-call indicator" in NEXT-STEPS.md).
126 lines
2.9 KiB
Vue
126 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
const { open: openPalette } = useCommandPalette()
|
|
const { env } = useEnv()
|
|
|
|
const ENVS = {
|
|
prod: { label: 'PROD', fg: 'var(--text)', bg: 'rgba(244,243,238,0.08)', border: 'rgba(244,243,238,0.15)' },
|
|
staging: { label: 'STAGING', fg: '#FFC872', bg: 'rgba(232,154,31,0.16)', border: 'rgba(232,154,31,0.36)' },
|
|
dev: { label: 'DEV', fg: '#D4AAFF', bg: 'rgba(159,98,212,0.18)', border: 'rgba(159,98,212,0.36)' },
|
|
} as const
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<span class="env" :style="{ color: ENVS[env].fg, background: ENVS[env].bg, borderColor: ENVS[env].border }">
|
|
<span class="env-dot" />
|
|
{{ ENVS[env].label }}
|
|
</span>
|
|
|
|
<button class="palette" @click="openPalette">
|
|
<UiIcon name="search" :size="13" stroke="var(--text-mute)" />
|
|
<span class="palette-hint">Search tenants, users, tickets… or execute action</span>
|
|
<span class="kbd">⌘K</span>
|
|
</button>
|
|
|
|
<div class="right">
|
|
<button class="icon-btn" title="Notifications">
|
|
<UiIcon name="bell" :size="14" />
|
|
<span class="icon-btn-dot" />
|
|
</button>
|
|
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
header {
|
|
height: 52px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 0 16px;
|
|
background: var(--bg);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.env {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border: 1px solid;
|
|
border-radius: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.16em;
|
|
}
|
|
.env-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: 0.7; }
|
|
|
|
.palette {
|
|
flex: 1;
|
|
min-width: 0;
|
|
max-width: 540px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
cursor: text;
|
|
color: var(--text-mute);
|
|
font-family: inherit;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
.palette-hint { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
.kbd {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 3px;
|
|
color: var(--text-mute);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.right {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.icon-btn {
|
|
position: relative;
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 5px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text);
|
|
cursor: pointer;
|
|
}
|
|
.icon-btn-dot {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 7px;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 999px;
|
|
background: var(--bad);
|
|
border: 1.5px solid var(--bg);
|
|
}
|
|
</style>
|