Skip to content

Feature: Align Intern Search & Added Interns UI with Team UX

🎯 Feature: Align Intern Search & Added Interns UI with Team UX

Description

Refactor the Intern Search and Added Interns sections so they visually and behaviorally match the Create Team and Teams List UI patterns. This is a UI/UX consistency improvement only and must not affect existing logic.

Important Rules

  • ❌ Do NOT change backend or corpus API logic
  • ❌ Do NOT break existing intern search functionality
  • ❌ Do NOT affect team management logic
  • ✅ Focus ONLY on UI structure and interaction
  • ✅ Work ONLY in intern-related components

Current Problems

  • Intern search results render as a long vertical list
  • Added interns are shown as plain bullet points
  • Overall UI is inconsistent with Team-related sections

Desired UI Behavior (Match Team UX)

1. Intern Search Section

  • Compact input styled like “Enter team name”
  • Label: Add Intern
  • Placeholder: Search intern by name…
  • Search results shown as a dropdown below input
  • Each dropdown item shows:
    • Intern name
    • Intern ID
    • Add button (same style as Add Team)

2. Added Interns Section

  • Display interns as structured cards/list (team-style)
  • Each entry shows:
    • Intern name
    • Intern ID
    • Remove (❌ / Delete) button
  • Header with count: Added Interns (N)

3. Interaction Rules

  • Case-insensitive filtering while typing
  • Clicking Add:
    • Adds intern to list
    • Clears input
    • Closes dropdown
  • Prevent duplicate interns
  • If intern already added:
    • Disable Add button or show Added

4. UX Consistency

  • Match spacing, border radius, and button sizing of Team components
  • No scrolling lists for search results
  • Dropdown closes on blur or selection
  • Empty states:
    • No interns found
    • No interns added yet

State Management

searchQuery: string
searchResults: Array<{ id: string; name: string }>
addedInterns: Array<{ id: string; name: string }>
showDropdown: boolean