fix(desktop): add missing CSS classes, fix longest streak to iterate calendar days, fix insight pill padding

This commit is contained in:
iamtoruk 2026-04-29 15:23:44 -07:00
parent 1b6f2f9946
commit af44848af2
3 changed files with 34 additions and 10 deletions

View file

@ -38,10 +38,20 @@ function computeStats(payload: MenubarPayload, currency: CurrencyState) {
let longestStreak = 0
let running = 0
const sorted = [...history].sort((a, b) => a.date.localeCompare(b.date))
for (const d of sorted) {
if (d.cost > 0) { running++; longestStreak = Math.max(longestStreak, running) }
else running = 0
if (history.length > 0) {
const sorted = [...history].sort((a, b) => a.date.localeCompare(b.date))
const first = new Date(sorted[0].date + 'T00:00:00Z')
const last = addDays(today, 0)
const totalDays = Math.round((last.getTime() - first.getTime()) / 86_400_000) + 1
for (let i = 0; i < totalDays; i++) {
const key = formatDateKey(addDays(first, i))
if ((costByDate.get(key) ?? 0) > 0) {
running++
longestStreak = Math.max(longestStreak, running)
} else {
running = 0
}
}
}
const lifetimeTotal = history.length > 0 ? history.reduce((s, d) => s + d.cost, 0) : null

View file

@ -69,10 +69,8 @@ export function TrendInsight({ days, currency }: Props) {
const avgVal = bars.length > 0 ? bars.reduce((s, b) => s + metric(b), 0) / bars.length : 0
const totalCost = bars.reduce((s, b) => s + b.cost, 0)
const peak = bars.filter(b => metric(b) > 0).sort((a, b) => metric(b) - metric(a))[0]
const yesterday = bars.find(b => {
const yd = formatDateKey(addDays(startOfDay(new Date()), -1))
return b.date === yd
})
const yd = formatDateKey(addDays(startOfDay(new Date()), -1))
const yesterday = bars.find(b => b.date === yd)
const delta = computeDelta(bars, days)
const fmtVal = (v: number) => useTokens ? `${formatTokens(v)} tok` : formatCompactCurrency(v, currency)

View file

@ -185,8 +185,8 @@ html, body, #root {
/* ---- collapsible section header ---- */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 6px;
width: 100%;
border: 0;
background: transparent;
@ -198,6 +198,21 @@ html, body, #root {
letter-spacing: 0.2px;
text-transform: uppercase;
}
.section-header-left {
display: flex;
align-items: center;
gap: 6px;
}
.section-header-right {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
color: var(--text-tertiary);
letter-spacing: 0.3px;
}
.section-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--brand-accent);
@ -214,6 +229,8 @@ html, body, #root {
color: var(--text-tertiary);
letter-spacing: 0.3px;
}
.col-header { min-width: 44px; text-align: right; }
.section-body { padding-bottom: 6px; }
.chevron {
font-size: 10px;
color: var(--text-tertiary);
@ -347,7 +364,6 @@ html, body, #root {
.insight-pills {
display: flex;
gap: 4px;
padding: 0 var(--spacing-lg);
margin-bottom: 10px;
}
.insight-pill {