devops
b093b0c4b5
My rsync --delete based deploy sync overwrote the working tree with a stale local copy and accidentally reverted commit50d95fa(V2 Design-Fundament, task ea7c2063) — new ui/ components deleted, token/color work in dashboard/v2 and nexus-tokens.css rolled back. This restores all 17 files exactly from 50d95fa; no overlap with the modal rework files (TaskBoardView, tasks store, BoardCard), which stay as committed in2ee1fe9. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
117 lines
2.8 KiB
Vue
117 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* SectionHeader — Titelzeile für Sektionen/Spalten im Dashboard V2
|
|
*
|
|
* Kapselt wiederholtes Muster: dot + label + count aus TaskBoard-Spalten
|
|
* und Iris-Panel-Sektionen. Verwendet ausschließlich Token-Farben.
|
|
*/
|
|
|
|
withDefaults(defineProps<{
|
|
label: string
|
|
/** Status-Farbe des Dots: 'work' | 'think' | 'idle' | 'block' | 'queue' | 'review' | 'iris' | 'bao' */
|
|
dotColor?: 'work' | 'think' | 'idle' | 'block' | 'queue' | 'review' | 'iris' | 'bao'
|
|
/** Numerischer Count (rechts) */
|
|
count?: number
|
|
/** Variante: 'column' (Spalten-Header) oder 'section' (Iris-Panel) */
|
|
variant?: 'column' | 'section'
|
|
}>(), {
|
|
variant: 'column',
|
|
})
|
|
|
|
function dotColorVar(color: string): string {
|
|
const map: Record<string, string> = {
|
|
work: 'var(--st-work)',
|
|
think: 'var(--st-think)',
|
|
idle: 'var(--st-idle)',
|
|
block: 'var(--st-block)',
|
|
queue: 'var(--st-queue)',
|
|
review: 'var(--st-queue)', // orange-ähnlich
|
|
iris: 'var(--a-purple)',
|
|
bao: 'var(--a-blue)',
|
|
}
|
|
return map[color] || 'var(--st-idle)'
|
|
}
|
|
|
|
function dotRingVar(color: string): string {
|
|
const map: Record<string, string> = {
|
|
work: 'rgba(61, 220, 151, .25)',
|
|
think: 'rgba(52, 214, 245, .25)',
|
|
idle: 'rgba(107, 103, 150, .25)',
|
|
block: 'rgba(251, 113, 133, .25)',
|
|
queue: 'rgba(251, 191, 36, .25)',
|
|
review: 'rgba(251, 146, 60, .25)',
|
|
iris: 'rgba(181, 87, 246, .25)',
|
|
bao: 'rgba(79, 124, 255, .25)',
|
|
}
|
|
return map[color] || 'rgba(107, 103, 150, .25)'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="section-header" :class="variant">
|
|
<span
|
|
class="section-dot"
|
|
:style="{
|
|
background: dotColorVar(dotColor || 'idle'),
|
|
boxShadow: `0 0 0 2px ${dotRingVar(dotColor || 'idle')}`,
|
|
}"
|
|
></span>
|
|
<span class="section-label">{{ label }}</span>
|
|
<span v-if="count !== undefined" class="section-count">{{ count }}</span>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.section-header.column {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.section-header.section {
|
|
margin-bottom: 10px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.section-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.section-label {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
color: var(--tx-2);
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
}
|
|
|
|
.section-header.section .section-label {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.section-count {
|
|
margin-left: auto;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
background: var(--glass-2);
|
|
color: var(--tx-2);
|
|
border: 1px solid var(--line);
|
|
}
|
|
</style>
|