Ronni Baslund
8e6f73a921
Operator portal now wears its real chrome instead of placeholder spans.
Sidebar + topbar + page header all rendered against the carbon palette
from tokens.css.
Components ported from the source design (operator-app.jsx,
platform-ui.jsx, operator-screens.jsx) as Vue 3 SFCs in
apps/operator/components/:
Foundation: NodeMark (copied from portal), UiIcon (expanded to 31 icons
covering sidebar/topbar/sort/arrows)
Primitives: Card (3 surface variants), UiButton (primary / secondary /
ghost / dark / danger × sm / md / lg), DataTable (header + rows),
Badge (7 tones), Avatar (deterministic palette by name hash), Mono,
Eyebrow, StatusDot, PageHeader (with actions slot)
Shell: OpSidebar (collapsible 232<->56px, 12 nav items in 4 sections,
active-row highlight from route, badge slot, brand + user footer);
OpTopbar (env badge with prod/staging/dev variants, palette trigger
stub for the ⌘K work in O.8, on-call pill, bell, avatar)
Layouts: layouts/default.vue wires sidebar + topbar + slot; layouts/blank.vue
is used by the login page (definePageMeta layout:'blank'). app.vue now
wraps NuxtPage in NuxtLayout (the missing piece — without it Nuxt warns
"Your project has layouts but the <NuxtLayout /> component has not been
used" and renders nothing chrome-wise).
Composable composables/useSidebar.ts holds the collapsed state shared
between OpSidebar's toggle button and layouts/default.vue's ⌘[ keyboard
shortcut.
Verified in the browser:
- Sidebar renders all 12 nav links with section dividers, env badge shows
PROD, PageHeader resolves to the user's display name from
useOidcAuth().user
- Collapse toggle flips sidebar width 232↔56; nav rows become icon-only
- Smoke test on the placeholder home still returns 409 for the seeded
test-partner (token forwarding survives the layout refactor)
Gotcha documented in the plan: Vite 7.3 added a strict
server.allowedHosts check that returns plaintext 403 for any host header
that isn't the dev origin. The customer portal pre-dates this Vite
version; operator needs allowedHosts: ['operator.dezky.local'] in
nuxt.config.ts under vite.server.
Pages/index.vue replaces the bare HTML placeholder from O.3 with the
new PageHeader + Card primitives — same smoke-test functionality, much
better visual fidelity.
Real screen content (Tenants, Partners, Infrastructure, etc.) lands in
O.5+. This commit is the chrome, the smoke test, and the verification
that the design system primitives compose correctly.
94 lines
2.5 KiB
Vue
94 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
// Brand mark — a stylized "d" inside a squircle. Ported from project/logos.jsx.
|
|
// The geometry is computed so the letterform sits ~16u inside the 100x100 viewBox.
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
size?: number
|
|
fg?: string
|
|
accent?: string
|
|
bowlR?: number
|
|
stemW?: number
|
|
contR?: number
|
|
dStyle?: 'donut' | 'solid' | 'outline'
|
|
dotPos?: 'corner' | 'tittle' | 'orbit' | 'none'
|
|
dotR?: number
|
|
}>(),
|
|
{
|
|
size: 22,
|
|
fg: '#0a0a0a',
|
|
accent: '#d4ff3a',
|
|
bowlR: 14,
|
|
stemW: 7,
|
|
contR: 22,
|
|
dStyle: 'donut',
|
|
dotPos: 'corner',
|
|
dotR: 4,
|
|
},
|
|
)
|
|
|
|
const geometry = computed(() => {
|
|
const overlap = props.stemW * 0.55
|
|
const cy = 52
|
|
const cx = 50 - props.stemW / 2 + overlap / 2
|
|
const stemX = cx + props.bowlR - overlap
|
|
const stemRight = stemX + props.stemW
|
|
const capR = props.stemW / 2
|
|
const stemTop = 26
|
|
const stemBottom = cy + props.bowlR
|
|
const holeR = Math.max(2.5, props.bowlR - props.stemW - 0.5)
|
|
|
|
const bowlPath =
|
|
`M ${cx - props.bowlR} ${cy} ` +
|
|
`a ${props.bowlR} ${props.bowlR} 0 1 0 ${props.bowlR * 2} 0 ` +
|
|
`a ${props.bowlR} ${props.bowlR} 0 1 0 ${-props.bowlR * 2} 0 Z`
|
|
|
|
const counterPath =
|
|
`M ${cx - holeR} ${cy} ` +
|
|
`a ${holeR} ${holeR} 0 1 0 ${holeR * 2} 0 ` +
|
|
`a ${holeR} ${holeR} 0 1 0 ${-holeR * 2} 0 Z`
|
|
|
|
const stemPath =
|
|
`M ${stemX} ${stemTop + capR} ` +
|
|
`a ${capR} ${capR} 0 0 1 ${props.stemW} 0 ` +
|
|
`L ${stemRight} ${stemBottom} ` +
|
|
`L ${stemX} ${stemBottom} Z`
|
|
|
|
const dotByPos = {
|
|
corner: { x: 74, y: 26 },
|
|
tittle: { x: stemX + props.stemW / 2, y: stemTop - props.dotR - 3 },
|
|
orbit: { x: cx - props.bowlR - props.dotR - 2, y: cy - props.bowlR - props.dotR - 2 },
|
|
none: null,
|
|
} as const
|
|
|
|
return { bowlPath, counterPath, stemPath, dot: dotByPos[props.dotPos] }
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<svg
|
|
:width="size"
|
|
:height="size"
|
|
viewBox="0 0 100 100"
|
|
aria-label="Dezky"
|
|
role="img"
|
|
>
|
|
<rect x="8" y="8" width="84" height="84" :rx="contR" :fill="fg" />
|
|
<g v-if="dStyle === 'donut'" fill="#0a0a0a">
|
|
<path :d="geometry.bowlPath + ' ' + geometry.counterPath" fill-rule="evenodd" />
|
|
<path :d="geometry.stemPath" />
|
|
</g>
|
|
<g v-else-if="dStyle === 'solid'" fill="#0a0a0a">
|
|
<path :d="geometry.bowlPath" />
|
|
<path :d="geometry.stemPath" />
|
|
</g>
|
|
<circle
|
|
v-if="geometry.dot"
|
|
:cx="geometry.dot.x"
|
|
:cy="geometry.dot.y"
|
|
:r="dotR"
|
|
:fill="accent"
|
|
/>
|
|
</svg>
|
|
</template>
|