Repository: android/compose-samples
File: JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt (Kotlin)

Code before:
            }
        }
    }
}

/**
 * Display a sectioned list of topics
 *
 * @param sections (state) topics to display, grouped by sections
 * @param selectedTopics (state) currently selected topics
 * @param onTopicSelect (event) request a topic+section selection be changed
 */
@Composable
private fun TabWithSections(
    sections: List<InterestSection>,
    selectedTopics: Set<TopicSelection>,
    onTopicSelect: (TopicSelection) -> Unit
) {
    BoxWithConstraints {
        val windowSize = remember(maxWidth) { getWindowSize(maxWidth) }
        val columns = remember(windowSize) { if (windowSize == WindowSize.Compact) 1 else 2 }

        val itemMaxWidth = rememberItemMaxWidth(windowMaxWidth = maxWidth, columns = columns)
        // Group interest sections given the number of columns that fill the screen.
        // Sections are distributed evenly on the screen using the modulus operator.
        val groupedSections: Array<MutableList<InterestSection>> = remember(columns) {
            val sectionsInColumns = Array<MutableList<InterestSection>>(columns) { mutableListOf() }
            sections.forEachIndexed { index, section ->
                val column = index % columns
                sectionsInColumns[column] += section
            }
            sectionsInColumns
        }

        Row(
            horizontalArrangement = Arrangement.SpaceEvenly,
            modifier = Modifier.navigationBarsPadding().fillMaxSize()
        ) {
            groupedSections.forEach { sectionsInGroup ->
                LazyColumn(
                    Modifier
                        .widthIn(max = itemMaxWidth)
                        .padding(horizontal = if (columns > 1) 8.dp else 0.dp)
                ) {
                    sectionsInGroup.forEach { (section, topics) ->
                        item {
                            Text(
                                text = section,
                                modifier = Modifier
                                    .padding(16.dp)
                                    .semantics { heading() },

Review comment (suggestion):
I think this can be simplified as is pretty easily:

```
        val groupedSections = sections
            .withIndex()
            .groupBy({ it.index % columns }) { it.value }
            .values
```

Code after:
                        .widthIn(max = itemMaxWidth)
                        .padding(horizontal = if (columns > 1) 8.dp else 0.dp)
                ) {
                    sectionsInGroup.forEach { (section, topics) ->
                        item {
                            Text(
                                text = section,
                                modifier = Modifier
                                    .padding(16.dp)
                                    .semantics { heading() },
                                style = MaterialTheme.typography.subtitle1
                            )
                        }
                        items(topics) { topic ->
                            TopicItem(
                                itemTitle = topic,
                                selected = selectedTopics.contains(TopicSelection(section, topic)),
                                onToggle = { onTopicSelect(TopicSelection(section, topic)) },
                                modifier = Modifier
                            )
                            TopicDivider(Modifier)
                        }
                    }
                }
            }
        }
    }
}

/**
 * Display a full-width topic item
 *
 * @param itemTitle (state) topic title
 * @param selected (state) is topic currently selected
 * @param onToggle (event) toggle selection for topic
 */
@Composable
private fun TopicItem(
    itemTitle: String,
    selected: Boolean,
    onToggle: () -> Unit,
    modifier: Modifier = Modifier
) {
    val image = painterResource(R.drawable.placeholder_1_1)
    Row(
        modifier = modifier
            .toggleable(
                value = selected,
                onValueChange = { onToggle() }
            )
            .padding(horizontal = 16.dp)