k
d01adc4790
for Performance accent
User flagged the macro index box on the overview page as feeling
disjointed. Reshaped it from three stacked elements (band → track →
scale) into a single bordered card so it reads as ONE component.
- JSX: wrap the three pieces in <div className="overview-macro-card">
- CSS: new .overview-macro-card with tone-coloured rim (bull/bear/neutral)
- Solid neutral-gray filled needle (was a hollow ring — looked like a
placeholder); tone-coloured background + white inner ring + double
shadow so it stands out on any gradient position
- Removed the .overview-score-fill overlay — the gradient already
encodes the spectrum; layering an opaque fill obscured it near 0
- Thinner track (14px vs 22px), tighter scale labels, smaller pill
- Added "TODAY · 8 INDICATORS" stamp next to the title — gives users
a quick anchor of what they're looking at + freshness
Plus: dark-mode override for .overview-stat-card.accent (the Performance
card). It was using a cream gradient that floated as a glaring
out-of-theme block on dark mode. Mirrored the existing .kpi.accent dark
treatment so it stays visually grouped with the rest of the dashboard.
Also includes the in-flight overview rewrite from the other AI tool
(legacy /btc redirect to /macro, middleware.ts replacing proxy.ts for
Next.js routing, refactored several dashboard panels). TypeScript clean,
production build passes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
79 lines
2.2 KiB
TypeScript
79 lines
2.2 KiB
TypeScript
'use client'
|
|
|
|
import { useMemo } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname, useSearchParams } from 'next/navigation'
|
|
import { defaultLocale, locales, type Locale } from '@/i18n'
|
|
|
|
function replaceLocale(pathname: string, nextLocale: Locale) {
|
|
const segments = pathname.split('/').filter(Boolean)
|
|
const current = segments[0]
|
|
if (locales.includes(current as Locale)) {
|
|
segments[0] = nextLocale
|
|
} else {
|
|
segments.unshift(nextLocale)
|
|
}
|
|
return '/' + segments.join('/')
|
|
}
|
|
|
|
export default function LanguageSwitch() {
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
const options: Array<{ locale: Locale; label: string }> = [
|
|
{ locale: 'en', label: 'EN' },
|
|
]
|
|
|
|
const activeLocale = useMemo<Locale>(() => {
|
|
const seg = pathname.split('/').filter(Boolean)[0]
|
|
return locales.includes(seg as Locale) ? (seg as Locale) : defaultLocale
|
|
}, [pathname])
|
|
|
|
return (
|
|
<div
|
|
aria-label="Language switch"
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
padding: 4,
|
|
borderRadius: 999,
|
|
background: 'var(--bg-sunk)',
|
|
border: '1px solid var(--line)',
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{options.map(({ locale, label }) => {
|
|
const active = activeLocale === locale
|
|
const nextPath = replaceLocale(pathname || `/${defaultLocale}`, locale)
|
|
const qs = searchParams.toString()
|
|
const href = qs ? `${nextPath}?${qs}` : nextPath
|
|
return (
|
|
<Link
|
|
key={locale}
|
|
href={href}
|
|
aria-pressed={active}
|
|
style={{
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minWidth: 40,
|
|
padding: '6px 10px',
|
|
borderRadius: 999,
|
|
border: 'none',
|
|
background: active ? 'var(--ink)' : 'transparent',
|
|
color: active ? 'var(--bg)' : 'var(--ink-3)',
|
|
fontSize: 12,
|
|
fontWeight: 700,
|
|
lineHeight: 1,
|
|
cursor: 'pointer',
|
|
textDecoration: 'none',
|
|
}}
|
|
>
|
|
{label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|