Tara — teacher directory

Purpose#

Directory of Tara teachers. Lets the user browse, search, and filter teachers by specialty before opening a specific teacher profile.

Entry points#

• Tara hub — verify the link from /tara (the polished surface lists teachers and links here for the full directory)
• Teacher profile back-link — /domains/tara/teachers/<id> returns here via router.back() (also exposes onSelectTeacher for direct teacher switching)
• Direct URL / bookmark — yes
• Domain back-stack — router.back() wired into onBack

Layout regions#

page.tsx is a 'use client' thin wrapper that renders <TaraTeacherDirectoryPage> with two callbacks:

• onSelectTeacher={(id) => router.push('/domains/tara/teachers/' + id)}
• onBack={() => router.back()}

Inside TaraTeacherDirectoryPage (TaraTeacherProfile.tsx):

• Root contract — data-tara-teacher-directory, data-source="simulated", data-total-teachers="12", data-featured-teachers="7".
• Header — icon back button (data-tara-teacher-directory-back) when onBack is provided, "Teachers" heading, and support copy.
• Featured teachers carousel — data-tara-teacher-featured-carousel, body metadata (data-featured-count, data-current-teacher-id, data-scroll-step), left/right scroll buttons, and keyboard/clickable featured cards.
• Search input — data-tara-teacher-directory-search-input; filters by teacher name, bio, and specialty labels.
• Clear search — data-tara-teacher-directory-search-clear; present only while a query is active.
• Specialty filter chips — data-tara-teacher-specialty-filter, exact selected state via aria-pressed and data-selected; first 12 alphabetized specialties render.
• Results contract — data-tara-teacher-directory-listing carries data-search-active, data-search-query, data-selected-specialty, data-selected-specialty-label, data-result-count, data-total-count, data-featured-count, and data-specialty-count.
• Teacher grid — data-tara-teacher-directory-list cards with data-tara-teacher-card, status, featured flag, specialties, rating, and session count.
• Empty state — data-tara-teacher-directory-empty with role status.
• Status badges — STATUS_CONFIG: active / inactive / featured / guest.

States#

• Populated — 12 SIMULATED_TEACHERS cards verified from direct route and from the Tara hub secondary tool entry.
• Filtered (specialty) — Anxiety chip selects data-selected-specialty="anxiety" and narrows the grid to exactly 2 cards with data-specialties~="anxiety".
• Searching — query Sarah sets data-search-active="true", data-search-query="Sarah", and narrows to the Sarah Chen card.
• Clear search — clear button resets query, search-active state, and returns the grid to 12 cards.
• Empty result — query No such guide sets data-result-count="0", removes teacher cards, and shows the in-grid data-tara-teacher-directory-empty status copy.
• Featured carousel scroll — right/left buttons update data-scroll-step from 0 → 1 → 0; carousel body exposes the current featured count.
• Status branches currently produced by V1 data — 7 featured cards and 5 active cards are verified. inactive and guest status styles exist in STATUS_CONFIG but current fixture data does not produce them.
• Reduced motion — under Playwright's reduced-motion media emulation, directory card animation duration collapses to ≤0.01ms.

Interactions#

Header#

• Back (button) — router.back() via onBack; stable hook data-tara-teacher-directory-back exists when rendered.

Search input#

• Search (text) — filters teacher list by name, bio, and specialty label.
• Clear (×) — clears the search and restores the populated grid.

Specialty chips#

• Specialty chip (button) — toggles active specialty state; Anxiety and All states are covered with exact DOM metadata.

Featured carousel#

• Carousel arrows (ChevronLeft / ChevronRight) — scroll one step and expose data-scroll-step.
• Featured teacher card — click and keyboard handlers call onSelectTeacher(id) → router.push('/domains/tara/teachers/<id>').

Teacher grid#

• Teacher card click — Sarah Chen card opens /domains/tara/teachers/tara-teacher-001.
• Teacher card keyboard — Space on Alex Rivera's card opens /domains/tara/teachers/tara-teacher-004.

Data & contracts#

• Reads:
  • SIMULATED_TEACHERS from @/lib/tara/tara-simulation-data
  • Content types: TaraTeacher, MeditationCategory from @/lib/tara/content-types
• Writes: None.
• Realtime: None.
• Caching: client-only
• Auth/role check: shell middleware
• Featured selection: current contract is the local teacher.featured boolean; 7 of 12 teachers are featured.
• Status selection: getTeacherStatus returns featured for featured teachers, active for all current non-featured teachers with >30 sessions, and guest only for future data with ≤30 sessions. inactive remains a style-only config value in this component.
• Accessibility: route-level axe coverage is in tara-teacher-pages-accessibility.spec.ts; the main interaction spec also uses the shared auto-axe fixture.

Cross-references#

• Sibling Tara routes:
  • tara.md, domains-tara-analytics.md, domains-tara-collections.md, domains-tara-courses-id.md, domains-tara-programs.md, domains-tara-search.md, domains-tara-sounds.md, domains-tara-teachers-id.md
• Component sources:
  • apps/oshun/web/src/components/domains/tara/TaraTeacherProfile.tsx (TaraTeacherDirectoryPage line 1516)
• Feature spec: V1/features.md#tara

Open questions / known gaps#

• Confirm the BFF endpoint for the real teacher directory; today SIMULATED_TEACHERS is local fixture data and is surfaced honestly via data-source="simulated".
• Product decision needed for whether inactive and guest teachers are expected V1 customer states. The styles exist, but the current fixture data does not render either branch.
• Verify whether /domains/tara/teachers ships in V1 or is gated behind the polished /tara surface. The current web route is directly reachable and linked from Tara hub secondary tools.