Top Bar Integration

Purpose

TopBar renders app-shell search, campus/role badges, notifications, and the profile menu (which delegates sign-out to the auth session) through the three-layer frontend architecture.

View -> Business Logic -> API/Data Access -> Backend

TopBar does not own product content records. It owns shell UI state and delegates auth actions to the auth session.

Frontend Layers

View:

frontend/src/components/frameworks/TopBar.tsx
frontend/src/components/top-bar/TopBarView.tsx
frontend/src/components/top-bar/TopBarSearch.tsx
frontend/src/components/top-bar/TopBarBadges.tsx
frontend/src/components/top-bar/TopBarNotifications.tsx
frontend/src/components/top-bar/TopBarProfileMenu.tsx

Business logic:

frontend/src/business/top-bar/hooks.ts
frontend/src/business/top-bar/selectors.ts
frontend/src/business/top-bar/search.ts
frontend/src/business/top-bar/types.ts

Shared config:

frontend/src/shared/constants/topBar.ts

Behavior

TopBar.tsx is a thin wrapper that reads auth session state and passes it into useTopBarPage.
useTopBarPage owns profile menu state, notifications menu state, search query state, and sign-out error state.
Selectors handle initials, campus label fallback, shared role labels, and unread notification count.
Header search (TopBarSearch) is a combobox over the user's accessible modules (local, role-filtered via getAccessibleModules) plus their product content from the content catalog (classroom strategies, sign-language signs, regulation zones). Content is fetched lazily (only once the user types, and only for accessible modules) via useContentCatalogPayload({ enabled }); results are combined by buildTopBarSearchResults (modules first, then content, capped). Selecting a result navigates to its module (setCurrentModule) and clears the query. Keyboard: ↑/↓ to move, Enter to open, Esc to close; the dropdown closes on outside click (useOnClickOutside). The backend /api/search is a separate admin SIS-record search and is intentionally not used here.
View components receive a prepared page model and do not call API/data access modules.
Profile and settings menu items are explicitly disabled until product workflows exist, instead of rendering silent no-op buttons.

Tests

business/top-bar/selectors.test.ts (notification builder + zones href), business/top-bar/search.test.ts (module role-filtering + content matching + combine/cap), hooks/useOnClickOutside.test.tsx (dropdown dismissal).

Data Ownership Rules

Do not add notification seed data to frontend constants.
Keep TopBar constants limited to role badge classes and static menu labels.
Future persisted notifications should use a backend API and a dedicated business hook.

2.8 KiB Raw Blame History