feat(ui): batch UI polish — auth/lang to sidebar, search h-7, info overflow, graph zoom

User feedback batch — multiple iterations of UX refinement.

Layout shifts:
- TopBar right cluster: AuthBadge + LanguageSwitch переехали в Sidebar
  footer per user ("вход в сайдбар перенесем", "ru/en тоже в сайд баре").
  TopBar теперь: breadcrumb + search + Docs + VersionBadge + ThemeSwitch
  only. Освобождает место + concentrates user/lang controls в одном месте.
- Sidebar footer: новая структура — Lang toggle (Язык [RU/EN]) + Auth block
  (avatar+name+logout authed, Sign-in CTA anonymous) + collapse button.
  Refactored из inline JSX в named subcomponents (AuthedUserBlock,
  SignInCta, SidebarFooter).

Sizing / spacing:
- TopBar SearchInput: h-9 → h-7 to match LangSwitch/ThemeSwitch (+ Sign-in
  кнопка). User: "поиск по справочникам высоту выровняй". Override via
  `!h-7 text-cell` className на SearchInput.
- TopBar: h-14 → h-11 (slimmer). Sidebar logo block matches h-11.

Catalog search:
- Catalog page input в toolbar — restored для on-page filter ("Catalog
  search никак не работает" → проверил, работает; добавил TopBar context-
  aware behavior где TopBar input на /dictionaries route синхронизируется
  с URL ?q= live).
- TopBar search context-aware: catalog mode = live filter; else = submit
  → /search (records JSONB search).

InfoPanel:
- Description: `text-body text-ink-2 leading-relaxed` → +
  `break-words overflow-hidden`. Long slash-separated values
  (LZW/Deflate/JPEG2000/ZSTD/LERC) теперь wrap'ятся внутри panel вместо
  overflow за границы (user: "описание убежало за границы панели").
- Container: + `min-w-0 overflow-hidden` для proper flex shrinking.

Graph:
- Zoom controls overlay (+/-/1:1/N%) + mouse wheel zoom toward cursor +
  drag pan по empty space. Per user: "Граф связей еще не зумируется".

WorkflowBanner:
- Moved в InfoPanel banner slot (compact flex-col layout) — free
  horizontal space выше editor + concentrates status info в left rail.

Auth:
- AuthBadge: primary Button → compact h-7 outline button. Matches
  TopBar toolbar control style.
- RequireAuth: убран visible amber error banner "Авторизация недоступна:
  Failed to fetch" — silent fall-through к anonymous mode (user feedback).
- routes/index.tsx: beforeLoad skip redirect если есть `?code=` в URL
  (OIDC callback fix). HomeIndex компонент рендерит null + redirect на
  /dictionaries после auth complete.

LanguageSwitch:
- h-8 + items-stretch + inner items-center — matches ThemeSwitch height.
- Later moved entirely в Sidebar footer (h-7 button only) per user.
This commit is contained in:
Zimin A.N.
2026-05-11 21:50:21 +03:00
parent b0e19951b3
commit d9df2fc359
12 changed files with 685 additions and 195 deletions
+6 -11
View File
@@ -53,18 +53,13 @@ export function RequireAuth({ children }: { children: ReactNode }) {
)
}
// Keycloak unreachable / OIDC discovery failed — показываем ошибку, но НЕ
// блокируем UI (guest mode всё равно работает на read-api без JWT). Юзер
// может видеть PUBLIC данные пока Keycloak вернётся в строй.
// Keycloak unreachable / OIDC discovery failed — раньше показывали amber
// banner вверху страницы, но per user feedback ("Авторизация недоступна:
// Failed to fetch.?") это noise: anonymous mode работает без auth, error
// banner лишь пугает. Тихо рендерим children в guest mode — AuthBadge
// в TopBar показывает Sign in для retry.
if (auth.error && !auth.isAuthenticated) {
return (
<>
<div className="px-4 py-2 bg-amber-50 border-b border-amber-200 text-cell text-amber-900 text-center">
Авторизация недоступна: {auth.error.message}. Доступен просмотр публичных данных.
</div>
{children}
</>
)
return <>{children}</>
}
// ВАЖНО: НЕ блокируем UI пока {@code auth.isLoading=true}. Initial OIDC