Action Column Code-first, WI-2257 atom

Updated: 2026-09-07 09:40 ET

Audited: 2026-07-14 12:12 ET

Live CSS Preview

Design Tokens

Layer Tree

ViewModel

Blazor Component API

Two inputs since AB#2679. Vm (ActionColumnViewModel, feed-produced, dispatched through OnItemClicked by ActionKey) is now optional; the preferred input is Actions — an IReadOnlyList<SwipeAction> whose records carry icon, title, variant and their own handler. The same list a SwipeRevealRow renders as a swipe tray renders here as a persistent button row, so the two are two renderings of one model. Actions wins when both are set; its buttons stop propagation and prevent default because every caller sits the row inside a navigating card or anchor. Presets (SwipeAction.Remove / ToggleSave / ToggleAlert / Unfavorite) are the catalogue — see docs/SWIPE-REVEAL-LIST-PLAN.md § 4 for the Favorites onboarding example.

Home: ALPAMobile.Presentation/Components/Library/ActionColumn.razor (migrated 2026-07-15, WI-2254/D61).

Razor Usage (actual — JumpseatRecentSearchesPage.razor)

<SavedSearchCard Vm="@BuildVm(search, i)"
                 OnActionClicked="@(item => OnActionClicked(item, search, i))" />

@code {
    private SavedSearchCardViewModel BuildVm(SavedSearch search, int index)
    {
        var saved = _savedIndices.Contains(index);
        return new SavedSearchCardViewModel
        {
            Origin = search.Origin, Destination = search.Destination,
            TripType = search.TripType, Date = search.Date,
            Actions = new ActionColumnViewModel
            {
                Items = [
                    new ActionColumnItemViewModel
                    {
                        ActionKey = "toggle-save",
                        Icon = saved ? ActionColumnIconAsset.HeartSelected : ActionColumnIconAsset.Heart,
                        Title = saved ? "Saved" : "Save search",
                        Variant = saved ? ActionColumnItemVariant.Accent : ActionColumnItemVariant.Neutral,
                    },
                    new ActionColumnItemViewModel
                    {
                        ActionKey = "search-again",
                        Icon = ActionColumnIconAsset.SearchHistory,
                        Title = "Search again",
                        Variant = ActionColumnItemVariant.Highlight,
                    },
                ],
            },
        };
    }
}

In practice ActionColumn is always composed inside a domain control (Saved Search Card / Saved Flight Card, D55) rather than used bare — the example above shows the real call site.

CSS Class Reference (actual)

Classes live in ALPAMobile/wwwroot/css/alpa-components.css, renamed from .alpa-saved-card-action-btn* (previously duplicated verbatim as .alpa-saved-flight-card-actions, removed by D55 once the page composed <ActionColumn> directly).

Developer Notes

• Wired to all 3 consumer pages (D55, WI-2256) — Recent Searches, Saved Searches, and Saved Flights all compose this atom via Saved Search Card / Saved Flight Card.
• Registered in ComponentView.razor's dispatcher for consistency, but that path is display-only — OnItemClicked isn't wired through the dispatcher's generic switch. Compose this atom directly in a parent component when click behavior is needed.
• Compact is orthogonal to Variant — the scaffold coupled "red + small" into one --delete class; this atom lets any variant be compact independently.
• Icon is a closed asset enum, not free text (D54) — matches how every other icon in the app works (a governed set of exported Figma vectors), not an arbitrary glyph/emoji string. Notifications has no dedicated "off" asset; the off state is colour-only.
• Implemented 2026-07-14 — Epic AB#2087 (Presentation Extraction) resolved 2026-07-01.