← Back to Index

CardSmall (card-sm) — Data Source Analysis

Component: CardSmall (card-sm) — Home Screen Navigation Tile ViewModel: CardSmallViewModel : CardViewModel : SurfaceViewModel Figma: node 4099:5230 (main-feed slot), component card-sm Last Updated: 2026-06-04

Favorite heart — rendered (design decision D31, 2026-06-26): The i-heart (18×18, top-right) IS drawn on the tile. IsFavorite persists as client state (Settings.FavoriteItemIdsJSON).

ASCII Diagram — card-sm

Shows how CardSmallViewModel properties map to the rendered control. Each card-sm is a single MenuItem row on the home screen.

   ┌──────────┬──────────────────────────────────────┐
   │          │                                      │
   │   IMG    │  DART                                │ ◄── tile row (image + title)
   │  80px    │                                      │
   └──────────┴──────────────────────────────────────┘
        ▲                  ▲
        │                  │
   ImageSource          Title                            Entire row → Link (Path)
   (MenuItem.ImageSource)  (MenuItem.Title)

   IsFavorite: client favorite state — persisted to Settings; heart rendered on the tile
   Fallback bg: #dfedf9 (light) or #05273e (dark, nav-only tiles)

Note: card-sm is the simplest of the home components — backed entirely by MenuItem, no DocumentItem involvement.

As-built adapter (2026-07-15 — WI-2262, D58): the MenuItem → CardSmallViewModel mapping ships as MenuItemCardFactory (ALPAMobile/Components/MenuItemCardFactory.cs, DI singleton, pure mapper). Two behaviors beyond the raw field copy this doc describes: (1) web-servable image check — MenuItem.ImageSource is usually a native-only resource name (e.g. icn_home_jumpseat.png) that a WebView <img> can't load, so the factory only passes it through when it starts with / or http; (2) icon-mask fallback — CardSmallViewModel.IconMaskUrl is always set from MenuItemIconMask.For(title) (generic glyph for unmapped titles) so a menu-backed tile never renders an empty image box. Consumer today: FavoritesViewModel (menu-item favorites). The dynamic feed's card-sm path hydrates through ItemComponentFactory (ItemDto, ItemType: "CardSmall") instead.

Summary

Property Status Source Notes
Title ✅ Available MenuItem.Title Lora SemiBold 16px
ImageSource ✅ Available MenuItem.ImageSource 80px-wide tile image
Image fallback ✅ Client Design token #dfedf9 (light) / #05273e (dark)
Link ✅ Available MenuItem.Path Entire card tappable
IsFavorite ✅ Client Local Settings Favorite state, client-persisted; heart icon rendered on the tile (i-heart 18×18)
ShowOnHomeScreen ✅ Available MenuItem.ShowOnHomeScreen Controls presence in feed
SortOrder ✅ Available MenuItem.SortOrder Controls feed position

No API changes required for card-sm. All properties exist on the current MenuItem model.

Observed Instances (from Figma)

DART · ALPA Directories · Committee Calendar · Flight Pay Loss · My Payments · Infor Expense Management · Finance Reports · Meeting Request · MPS

All are standard app menu items with ShowOnHomeScreen = true.

ViewModel Definition (as shipped)

An earlier draft of this section sketched a constructor taking (MenuItem, ISettingsService) — that shape violates D11 (the scaffold must stay domain-free) and never shipped. As built, the ViewModel is a plain scaffold POCO and the MenuItem mapping lives in MenuItemCardFactory (see the as-built adapter note above); favorite state is composed by the consuming page, not baked into the ViewModel.

// Scaffold — ALPAMobile/Components/ViewModels/ComponentViewModels.cs (domain-free)
public class CardSmallViewModel : CardViewModel
{
    public string? Title { get; set; }        // bindable via SetProperty in real code
    public string? Image { get; set; }
    public string? IconMaskUrl { get; set; }  // WebView-safe icon mask fallback
    // Link inherited from CardViewModel
}

// Mapping — ALPAMobile/Components/MenuItemCardFactory.cs (D58)
var card = menuItemCardFactory.Create(menuItem);

Properties

Title

ImageSource

IsFavorite

ShowOnHomeScreen / SortOrder

Data Dependencies

Service Interface Notes
DataManager IDataManager GetMenuItems(refresh) — returns the MenuItem collection
Settings ISettingsService Persists IsFavorite state locally

Document Owner: ALPA Mobile Team Purpose: Structural + data-source reference for the card-sm home navigation tile