[List] Automatically shape the first and the last items of the list instead of passing index and count

[ravirajn22]

The new SegmentedListItem API is not very intuitive in this modern times. The problem is the shape property which has to be provided for each item, internally this shape property requires the current item index and total items count. I guess this is to change the shape of first and the last items. I feel this API should have been more like that of iOS lists where the list container component automatically takes care of shaping the first and last items. The iOS kind of API helps when we show/hide an item based on some condition, so we need not care to handle the logic for index and count.

An API similar to the below would have been good,

val isLoggedIn: Boolean = ...
val isPremium: Boolean  = ...

SegmentedList {

    // Always visible — plain toggle row
    SegmentedListItem {
        ToggleRow(
            label = "Enable notifications",
            checked = notificationsEnabled,
            onCheckedChange = { notificationsEnabled = it }
        )
    }

    // Always visible — navigation row with chevron
    SegmentedListItem {
        NavigationRow(
            label = "Notification sound",
            value = selectedSound,
            onClick = { navController.navigate("sound-picker") }
        )
    }

    // Conditional — only shown when logged in
    if (isLoggedIn) {
        SegmentedListItem {
            NavigationRow(
                label = "Notification schedule",
                value = schedule.label,
                onClick = { navController.navigate("schedule") }
            )
        }
    }

    // Conditional — only shown for premium users
    if (isPremium) {
        SegmentedListItem {
            ToggleRow(
                label = "Critical alerts",
                checked = criticalAlertsEnabled,
                onCheckedChange = { criticalAlertsEnabled = it }
            )
        }
    }

    // Always visible — destructive action row
    SegmentedListItem {
        ButtonRow(
            label = "Mute all notifications",
            style = ButtonRowStyle.Destructive,
            onClick = { viewModel.muteAll() }
        )
    }
}

Is something like this possible? Do you have any recommendation on how to solve this? Thanks.