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.
142 lines
3.5 KiB
Vue
142 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
withDefaults(defineProps<{ oncall?: boolean }>(), { oncall: true })
|
|
|
|
const { user } = useOidcAuth()
|
|
const { state: tweaks } = useTweaks()
|
|
const { open: openPalette } = useCommandPalette()
|
|
|
|
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
|
|
|
|
const env = computed(() => tweaks.value.env)
|
|
</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>
|
|
|
|
<span class="spacer" />
|
|
|
|
<span class="oncall" :class="{ active: oncall }">
|
|
<StatusDot :color="oncall ? 'var(--accent)' : 'var(--text-mute)'" :size="6" :glow="false" />
|
|
<Mono :dim="!oncall">{{ oncall ? 'on-call · Mikkel' : 'no active page' }}</Mono>
|
|
</span>
|
|
|
|
<button class="icon-btn" title="Notifications">
|
|
<UiIcon name="bell" :size="14" />
|
|
<span class="icon-btn-dot" />
|
|
</button>
|
|
|
|
<Avatar :name="user?.userInfo?.name || user?.userName || '?'" :size="26" />
|
|
</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;
|
|
}
|
|
|
|
.spacer { flex: 0 0 auto; }
|
|
|
|
.oncall {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 4px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 4px;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.oncall.active { background: rgba(212, 255, 58, 0.1); border-color: rgba(212, 255, 58, 0.3); }
|
|
|
|
.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>
|