← Back to Index

Flight Finder Filter Sort Figma: flight finder filter and sort domain control

Updated: 2026-07-02 13:37 ET

Audited: 2026-07-02 13:37 ET

Full-screen modal panel over Flight Finder results — Sort/Filter tab pills, filter fields or sort options, and Apply/Clear actions.
Figma: Components section, node 4450:11374 (canonical) · live file owEYzHf7FrHRvWC2u82UOl ("ALPA mobile app") · captured 2026-07-02 · decision D41
Duplicate node resolved (D41). This name appears twice in the live Components section — 4450:11374 (this spec, canonical) and 4705:8702 (byte-identical duplicate, flagged for designer cleanup, not separately catalogued). See D41 for the full evidence and reasoning.
Likely successor to overlay-flight finder filter. A previous sync (from a binary .fig extraction, before this live-file capture) identified an overlay-flight finder filter modal (node 0x44de70, see screen-mapping.html) with matching Apply/Clear CTAs and check/radio form controls. This component is very likely its live-file successor, but that identity is not confirmed — the two were captured from different Figma files at different times.

Live CSS Preview

Property 1 = filter (393×499)
✕
Sort
Filter
Airline ⌄
Aircraft ⌄
Flight Status ⌄
Aircraft ⌄
Apply
clear
Property 1 = sort (393×480)
✕
Sort
Filter
Arrival Time
Departure Time
Connection Time
Number of Connections
Total Trip Time
Apply
clear

Note: the Filter state's field rows repeat "Aircraft" twice (Airline / Aircraft / Flight Status / Aircraft) in the live Figma capture — reproduced as-observed, not corrected. Flag for design confirmation (possibly a duplicate placeholder, or two distinct aircraft-related filters).

States

StateFigma nameDimensionsContent
FilterProperty 1=filter393 × 4993 instances of Flight Finder Filters (D22) — field rows observed: Airline, Aircraft, Flight Status, Aircraft — + Apply / Clear
SortProperty 1=sort393 × 4805 radio button instances: Arrival Time, Departure Time, Connection Time, Number of Connections, Total Trip Time — + Apply / Clear

Layer Tree

└── flight finder filter and sort · COMPONENT_SET · 2 states (filter / sort)
    ├── nav controls · INSTANCE · close (X)
    ├── tab group · INSTANCE · Sort/Filter pill toggle (2× button pill)
    ├── [filter state] flight finder filters · INSTANCE × 3 (Airline / Aircraft / Flight Status / Aircraft)
    ├── [sort state] radio button · INSTANCE × 5
    ├── Primary button · INSTANCE · "Apply"
    └── Underline Button · FRAME · "clear"

ViewModel

New standalone domain-control ViewModel (per D40). Spec-only; not yet in ComponentViewModels.cs.

└── FlightFinderFilterSortViewModel (spec-only, standalone)
    ├── ActiveTab : enum { Filter, Sort }
    ├── Filters : ObservableCollection<FlightFinderFilterViewModel> — composes Flight Finder Filters (D22) instances
    ├── SortOption : enum { ArrivalTime, DepartureTime, ConnectionTime, NumberOfConnections, TotalTripTime }
    ├── ApplyCommand : ICommand
    └── ClearCommand : ICommand

Developer Notes