UI Training
User
User cell and the UserSearch compound for member pickers and filters.
Import from @workspace/ui-training/user/*.
UserViewModel
Prop
Type
UserCell
Avatar with initials fallback, display name, optional email and a "You" badge for the current user. Renders a dash for a missing user.
import { UserCell } from '@workspace/ui-training/user/user-cell';
<UserCell user={user} />UserSearch
Compound component around a controlled search. The app owns the term, the results and the loading flag; the parts only render them.
| Part | Role |
|---|---|
UserSearch.Root | Provides searchTerm, onSearchTermChange, results, isSearching |
UserSearch.Input | Search input with spinner, clears on Escape |
UserSearch.PopoverResults | Command popover anchored on its children, opens from minLength characters, onSelect picks a user |
UserSearch.CheckboxResults | Checkbox list for sidebar filters, keeps selected items visible when the search is empty; list and item markup come from ListSlot and ItemSlot |
import { UserSearch } from '@workspace/ui-training/user/user-search';
<UserSearch.Root
searchTerm={term}
onSearchTermChange={setTerm}
results={results}
isSearching={isFetching}
>
<UserSearch.PopoverResults onSelect={addMember}>
<UserSearch.Input id="member" />
</UserSearch.PopoverResults>
</UserSearch.Root>Strings
Two providers live in user/strings: UserCellStringsProvider (youLabel) and UserSearchStringsProvider (placeholder, empty state, results heading, searching label).