Saved Search Card Figma: flight card-saved & recent searches domain control

Updated: 2026-07-14 12:20 ET

Audited: 2026-07-14 12:20 ET

Live CSS Preview

Row 1 (Recent Searches): unsaved item — outline heart toggles to filled/red on save, search-history re-runs the query. Row 2 (Saved Searches): a saved item — always filled/red, tap removes it from the list (no unsave/toggle state). Both compose the shared Action Column atom (D53/D54) — icons are real exported vectors, not text glyphs. The optional Status Badge ("Round-trip" here) composes the shared atom, but no current consumer page actually sets it — illustrative only.

Design Tokens

Layer Tree

ViewModel

Tier: domain control (standalone — does not derive from a card base). Implemented (D55) in both ALPAMobile/Components/ViewModels/ComponentViewModels.cs (live) and ALPAMobile.Presentation/ViewModels/SavedSearchCardViewModel.cs (staged copy).

No IsSaved/OnToggleSave/OnReSearch parameters — those were the original spec-only draft's guess at a fixed 2-action shape. The real atom (D53) is a generic ActionColumnViewModel composed as Actions; the card renders whatever items the caller puts there and raises a single OnActionClicked, keyed by ActionKey.

Blazor Component API

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

Razor Usage (actual — JumpseatRecentSearchesPage.razor)

@foreach (var (search, i) in _searches.Select((s, i) => (s, i)))
{
    <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 },
                ],
            },
        };
    }

    private void OnActionClicked(ActionColumnItemViewModel item, SavedSearch search, int index)
    {
        switch (item.ActionKey)
        {
            case "toggle-save": ToggleSave(index); break;
            case "search-again": SearchAgain(search); break;
        }
    }
}

CSS Class Reference (actual)

Classes live in ALPAMobile/wwwroot/css/alpa-components.css under the alpa-saved-card BEM block. The action buttons are the shared Action Column vocabulary (.alpa-action-column*), not bespoke to this control.

Related — Saved Flight Card

ViewModel

Blazor Component API

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

.alpa-saved-flight-card-body is a link (<a>) to DetailsRoute; the trailing Action Column sits outside it. The former duplicate .alpa-saved-flight-card-actions CSS rule (byte-identical to .alpa-action-column) was removed — the page composes <ActionColumn> directly, no wrapper class needed.

Developer Notes

• Standalone, not a card subclass: neither SavedSearchCardViewModel nor SavedFlightCardViewModel derives from CardViewModel — a saved query/flight has its own shape (D40).
• Composes Action Column, not named toggle parameters (D53/D55): the original spec-only draft guessed a fixed IsSaved/OnToggleSave/OnReSearch shape. The real atom is generic — each page builds its own ActionColumnItemViewModel items and routes on ActionKey.
• Composes the Status Badge atom — see Status Badge; never colour a trip-type tag by hand. No current consumer sets it.
• Per-item toggle state: the save heart's Icon/Variant are recomputed by the page per render from a C# backing field (_savedIndices/_alertedIndices), per the project's interactive-control rule.
• One control, two lists: Saved Searches and Recent Searches share SavedSearchCard (Figma: flight card-saved & recent searches); the list source and action behavior differ, not the row.
• Saved Flights is standalone, not a Flight Segment Card composition — see Related — Saved Flight Card above; documented deviation from D40's literal text (D55).
• Not registered in ComponentView.razor's dispatcher — unlike the shared atoms, these are page-composed domain controls with no ItemComponentFactory-driven dynamic-feed path; all 3 Jumpseat lists are local hardcoded mock records.
• Implemented 2026-07-14 (D55) — Epic AB#2087 (Presentation Extraction) resolved 2026-07-01.