Files
auth-portal/docs/ui-design-contract.md
T
Denozordec ed1699503a
Build and Push Auth Portal Docker Image / build-and-push (push) Successful in 1m54s
Build and Push Auth Portal Docker Image / create-release (push) Skipped
feat(sidebar): integrate NavUser component into SidebarFooter and clean up SiteHeader
- Added NavUser component to the SidebarFooter for user information display.
- Refactored SiteHeader by removing unused imports and components related to user account management.
- Updated breadcrumbs logic to include a new path for admin apps.
- Adjusted SidebarMenuItem formatting for improved readability.
2026-07-19 02:13:08 +07:00

2.5 KiB

UI Design Contract — Auth Portal

Surface lock: frame (ReUI Frame). Не смешивать shadcn Card и Frame на ops-экранах.

Эталоны: app-shell-12 · solution-users-1 · solution-users-2 · data-grid-filtering-2 · empty-state-12

Shared App Shell chrome

Эталон: CFDM / EvoBGP + ReUI app-shell-12.

При переключении между portal / CFDM / EvoBGP / vps-tracker меняются только sidebar nav labels/hrefs и main content. Разметка, ширина, фон и hover chrome идентичны.

Токен / зона Значение
--sidebar-width 240px
Sidebar / hover colors theme --sidebar / --sidebar-accentбез AppShell color-mix override
Header h-12, sticky, border-b, px-4 md:px-6
Header left SidebarTrigger + Separator + Breadcrumb
Header right AppsMenu (аккаунт — в sidebar footer NavUser)
Sidebar footer NavUser — аватар, имя, email, тема, выход · app-shell-12
Sidebar AppSwitcher → groups → icons size-4пустой SidebarFooter
main gap-4 md:gap-6, px-4 py-4 md:px-6 md:py-5

Запрещено в chrome: SidebarRail, NavUser footer, Search pill в header.

Nav groups Auth Portal:

  • Портал: Приложения (/apps)
  • Админ (только is_admin): Пользователи (/admin), Ссылки приложений (/admin/apps)

App Switcher (source of truth): portal_settings.app_switcher_json → public GET /api/v1/app-switcher, admin GET/PUT /api/v1/admin/app-switcher. UI: /admin/apps (settings-16). Ids: cfdm · vps · bgp. Consumers (CFDM, vps-tracker) только читают public API.

Spacing

  • AppShell main / PageShell: gap-4 md:gap-6
  • No space-y-* / space-x-* — use flex + gap-*
  • Max 1 primary CTA per screen
  • Semantic tokens only (Badge / Alert variants) — no raw bg-emerald-*

Forbidden

  • Card as ops list/dashboard shell
  • Hand-rolled data tables when ReUI DataGrid exists
  • Mixing Card and Frame on the same ops screen