fix(topbar): restore full right cluster per user preference
User explicitly: "Руководство · dev · 19a3731b · ☀️🌙🖥 · RU EN · zimin.an · ↩
это оставь". Revert MR !81 cluster-minimization — diagnostic info нужна
для prod debugging.
Restored:
- Docs link (/docs/) — opens admin docs portal
- VersionBadge (channel + commit short SHA) — shows local/dev/v1.x.x · hash
- LanguageSwitch (dual RU | EN radio) — keeps both visible vs single-toggle
- (ThemeSwitch + AuthBadge остаются как были)
This commit is contained in:
@@ -1,12 +1,19 @@
|
|||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { Link, useLocation, useNavigate } from '@tanstack/react-router'
|
import { Link, useLocation, useNavigate } from '@tanstack/react-router'
|
||||||
import { useDictionaryDetail } from '@/api/queries'
|
import { useDictionaryDetail } from '@/api/queries'
|
||||||
|
import { LanguageSwitch } from '@/ui'
|
||||||
import { AuthBadge } from '@/auth/AuthBadge'
|
import { AuthBadge } from '@/auth/AuthBadge'
|
||||||
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
|
import { ThemeSwitch } from '@/components/layout/ThemeSwitch'
|
||||||
|
import { VersionBadge } from '@/components/version/VersionBadge'
|
||||||
import { SearchInput } from '@/ui/components/search-input'
|
import { SearchInput } from '@/ui/components/search-input'
|
||||||
import { Menu } from 'lucide-react'
|
import { Menu } from 'lucide-react'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
|
||||||
|
const LANG_OPTIONS = [
|
||||||
|
{ id: 'ru-RU', label: 'RU' },
|
||||||
|
{ id: 'en-US', label: 'EN' },
|
||||||
|
]
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* TopBar — sticky header (h=56) per handoff design.
|
* TopBar — sticky header (h=56) per handoff design.
|
||||||
*
|
*
|
||||||
@@ -17,7 +24,7 @@ import { useEffect, useRef, useState } from 'react'
|
|||||||
* - Right: VersionBadge · ThemeSwitch · LanguageSwitch · Docs · AuthBadge
|
* - Right: VersionBadge · ThemeSwitch · LanguageSwitch · Docs · AuthBadge
|
||||||
*/
|
*/
|
||||||
export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
|
export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
|
||||||
const { t } = useTranslation()
|
const { t, i18n } = useTranslation()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [searchValue, setSearchValue] = useState('')
|
const [searchValue, setSearchValue] = useState('')
|
||||||
const inputRef = useRef<HTMLInputElement>(null)
|
const inputRef = useRef<HTMLInputElement>(null)
|
||||||
@@ -115,42 +122,34 @@ export function TopBar({ onMenuClick }: { onMenuClick?: () => void }) {
|
|||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{/* Right cluster — minimal per redesign prototype:
|
{/* Right cluster — user prefers full set: Docs link + VersionBadge +
|
||||||
* - Lang toggle (single label, click flips)
|
* ThemeSwitch + LanguageSwitch + AuthBadge (logged-in avatar/sign-in).
|
||||||
* - Theme switch (Earth / Dark)
|
* User explicitly: "Руководство · dev · {commit} · theme · RU EN ·
|
||||||
* - AuthBadge (sign-in / user avatar)
|
* zimin.an · logout это оставь". */}
|
||||||
* Docs link и VersionBadge перенесены в sidebar footer — diagnostic info,
|
|
||||||
* не critical UX. */}
|
|
||||||
<div className="md:ml-0 ml-auto flex items-center gap-2 shrink-0">
|
<div className="md:ml-0 ml-auto flex items-center gap-2 shrink-0">
|
||||||
<LanguageToggle />
|
<a
|
||||||
|
href="/docs/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer noopener"
|
||||||
|
className="hidden sm:inline text-cell text-ink-2 hover:text-ink transition-colors"
|
||||||
|
>
|
||||||
|
{t('nav.docs')}
|
||||||
|
</a>
|
||||||
|
<span className="hidden md:inline-flex">
|
||||||
|
<VersionBadge />
|
||||||
|
</span>
|
||||||
<ThemeSwitch />
|
<ThemeSwitch />
|
||||||
|
<LanguageSwitch
|
||||||
|
value={i18n.language}
|
||||||
|
options={LANG_OPTIONS}
|
||||||
|
onChange={(id) => i18n.changeLanguage(id)}
|
||||||
|
/>
|
||||||
<AuthBadge />
|
<AuthBadge />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* LanguageToggle — single-button toggle per redesign prototype (показывает
|
|
||||||
* текущий язык как label, click переключает на следующий). Замена tri/dual
|
|
||||||
* radio LanguageSwitch который занимал ~80px горизонтально.
|
|
||||||
*/
|
|
||||||
function LanguageToggle() {
|
|
||||||
const { i18n } = useTranslation()
|
|
||||||
const cur = i18n.language?.toLowerCase().startsWith('en') ? 'en' : 'ru'
|
|
||||||
const next = cur === 'ru' ? 'en-US' : 'ru-RU'
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => i18n.changeLanguage(next)}
|
|
||||||
aria-label={`Language: ${cur.toUpperCase()}, click to switch`}
|
|
||||||
className="h-8 px-3 rounded-md border border-line bg-surface text-cap font-semibold tracking-[0.14em] text-ink-2 hover:bg-surface-2 hover:text-ink transition-colors"
|
|
||||||
>
|
|
||||||
{cur.toUpperCase()}
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
type Crumb = { label: string; to?: string; subtitle?: string }
|
type Crumb = { label: string; to?: string; subtitle?: string }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user