Deal

Import from @workspace/ui-training/deal/*. Everything here reads a DealRowViewModel or one of its slices; the app builds it from the deal DTO.

DealRowViewModel

Themes are grouped by type; each entry is a DealRowTheme (title, type). Status diagnostics carry a ruleId and a severity; the label comes from statusLabel in the strings.

Level

Classified level (1 to 4), unset, or all for the animated every-level glyph.

import { Level } from '@workspace/ui-training/deal/level';

<Level level={2} />
<Level level="unset" variant="inline" />
<Level level="all" variant="icon" />

levelColorVariants is exported for labels that must match the level hue: it sets --level-color on the element.

ThemeTag

Badge for one theme; the variant follows the theme type (amber for auction, blue for card play, outline otherwise).

import { ThemeTag } from '@workspace/ui-training/deal/theme-tag';

<ThemeTag type="auction" title="Stayman" />
<ThemeTag type="userDefined" title="Week 3" size="default" />

Visibility

getVisibilityIcon(sharing) and getVisibilityBadgeVariant(sharing) map a sharing value (private, shared, public) to its icon and badge variant, falling back to private for anything else.

Table cells

One component per column, each taking the matching slice of the row ViewModel. Compose them in TanStack Table column factories in the app (see the Data Tables pattern).

import { NameCell } from '@workspace/ui-training/deal/cells/name-cell';
import { VisibilityCell } from '@workspace/ui-training/deal/cells/visibility-cell';

ThemeFilterSubmenu

Dropdown submenu with a searchable, multi-select theme list for sidebar filters. Selection state stays in the app.

import { ThemeFilterSubmenu } from '@workspace/ui-training/deal/filters/theme-filter-submenu';

<ThemeFilterSubmenu
  label="Auction themes"
  icon={<Gavel />}
  themes={themeOptions}
  selectedThemeIds={selected}
  onToggle={toggleTheme}
/>

Preview sections

Sections of the deal preview panel that are not bridge game data. Each renders nothing when its slice is empty.

The whole slice is described by DealPreviewMetadataViewModel:

Actions

Import from @workspace/ui-training/deal/actions/*. The list of actions on a batch of deals, their availability and their execution live in the app (see Deal batch actions); this module renders them.

DealBatchActionItems

Dropdown items for the batch actions a screen offers. Place them inside any DropdownMenuContent, next to the screen's own items. Each item takes its label, icon and tone from the action id; an action the batch cannot run stays listed, disabled, with its reason under the label. delete asks for confirmation in an alert dialog before calling onRun. Clicks never bubble to a clickable row behind the menu.

import { DealBatchActionItems } from '@workspace/ui-training/deal/actions/deal-batch-action-items';

<ActionsMenu.Content>
  <DealBatchActionItems actions={actions} onRun={run} />
</ActionsMenu.Content>

opensDialog keeps the menu open while the app's dialog is up (session or collection picker). dealBatchActionItemVariants carries the tone (default, destructive).

DealBatchActionDialog and DealCollectionPicker

DealBatchActionDialog is the shell of the dialogs the actions open (dialog on desktop, sheet on mobile): a title, a screen-reader description and the picker as children. DealCollectionPicker is the searchable list of the "add to a collection" action, fed DealCollectionPickerItemViewModel[]; the app decides which collections are offered (the active ones) and runs the add on onSelect(collectionId). DealCollectionPickerFallback is its loading placeholder.

import { DealBatchActionDialog } from '@workspace/ui-training/deal/actions/deal-batch-action-dialog';
import { DealCollectionPicker } from '@workspace/ui-training/deal/actions/deal-collection-picker';

<DealBatchActionDialog open={open} onOpenChange={setOpen} title={title} description={description}>
  <DealCollectionPicker className="border-none" collections={collections} disabled={isPending} onSelect={add} />
</DealBatchActionDialog>

DealRowActions

Row menu of a deals table: Dropdown (outline ellipsis trigger), PreviewButton, and the single-deal items ViewItem, EditItem, PlayItem, CloneItem, CopyUrlItem, CopyCodeItem. The batch actions of the row go in the same dropdown through DealBatchActionItems.

import { DealRowActions } from '@workspace/ui-training/deal/actions/deal-row-actions';

<DealRowActions.Dropdown>
  <DealRowActions.ViewItem onClick={view} />
  <DealRowActions.PlayItem onClick={play} />
  <DealBatchActionItems actions={actions} onRun={run} />
</DealRowActions.Dropdown>

Strings

Row menu and batch actions share DealActionsStringsProvider (deal/actions/strings):

Strings

Filters, preview sections and actions have their own providers: DealFilterStringsProvider (deal/filters/strings), DealPreviewStringsProvider (deal/preview/strings) and DealActionsStringsProvider (deal/actions/strings).