Александр Зимин
49 lines
1.7 KiB
TypeScript
49 lines
1.7 KiB
TypeScript
import { useAppVersion } from './useAppVersion'
|
||
|
||
/**
|
||
* Subtle version indicator в header. Показывает client version + short commit.
|
||
*
|
||
* <p>Hover/title attribute exposes полную идентификацию (server tag, build time).
|
||
* Используется как secondary affordance для эксплуатационной диагностики
|
||
* (юзер скриншотит badge в bug report → ops знает точную сборку).
|
||
*
|
||
* <p>Если update available — badge подсвечивается dot indicator. Banner делает
|
||
* primary CTA, badge — passive signal.
|
||
*/
|
||
export function VersionBadge() {
|
||
const {
|
||
clientVersion,
|
||
clientCommit,
|
||
clientBuiltAt,
|
||
serverVersion,
|
||
serverCommit,
|
||
serverTag,
|
||
updateAvailable,
|
||
} = useAppVersion()
|
||
|
||
const tooltip = [
|
||
`client: ${clientVersion} (${clientCommit})`,
|
||
`server: ${serverTag || serverVersion} (${serverCommit ?? '...'})`,
|
||
`built: ${clientBuiltAt}`,
|
||
].join('\n')
|
||
|
||
return (
|
||
<span
|
||
className="inline-flex items-center gap-1.5 text-xs text-mute font-mono select-none"
|
||
title={tooltip}
|
||
>
|
||
{updateAvailable && (
|
||
<span
|
||
aria-label="Доступна новая версия"
|
||
className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"
|
||
/>
|
||
)}
|
||
{/* Prefer server tag (v1.2.0 etc.) над package.json clientVersion (0.1.0).
|
||
serverTag только при tag build'е — на branch builds показываем clientVersion. */}
|
||
<span>{serverTag && serverTag !== 'none' ? serverTag : `v${clientVersion}`}</span>
|
||
<span className="text-mute/70">·</span>
|
||
<span>{(serverCommit || clientCommit).substring(0, 7)}</span>
|
||
</span>
|
||
)
|
||
}
|