feat(components): let AboutCard join a grouped list

AboutCard drew its own Surface, so it could only stand alone. Taking a
Position and rendering through GroupedSurface lets it be the top of a group
with rows continuing underneath — for apps whose call to action reads better
as a row of its own than as a tonal button inside the card.

Defaults to Position.Alone, so existing callers are unchanged.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-30 21:12:37 +02:00
parent 38e508b259
commit ed1d3ca5e8

View File

@@ -13,12 +13,10 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.FilledTonalButton import androidx.compose.material3.FilledTonalButton
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Surface
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
@@ -41,6 +39,12 @@ data class AboutLink(val icon: ImageVector, val label: String, val url: String)
* outlined buttons (e.g. source, licence) and an optional full-width * outlined buttons (e.g. source, licence) and an optional full-width
* [highlightLink] tonal button (e.g. donate). Each link opens its URL in the * [highlightLink] tonal button (e.g. donate). Each link opens its URL in the
* browser. The app supplies its own logo, strings and links. * browser. The app supplies its own logo, strings and links.
*
* [position] lets the card join a grouped list instead of standing alone: with
* [Position.Top] it takes the group's top corners and the 2dp gap below, so a
* [GroupedRow] underneath continues the same container. Use that when the card's
* call to action reads better as a row of its own than as a button inside the
* card — the two then form one block rather than a card with a lid on it.
*/ */
@Composable @Composable
fun AboutCard( fun AboutCard(
@@ -49,15 +53,16 @@ fun AboutCard(
author: String, author: String,
primaryLinks: List<AboutLink>, primaryLinks: List<AboutLink>,
highlightLink: AboutLink? = null, highlightLink: AboutLink? = null,
position: Position = Position.Alone,
) { ) {
val context = LocalContext.current val context = LocalContext.current
val open = { url: String -> val open = { url: String ->
runCatching { context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url))) } runCatching { context.startActivity(Intent(Intent.ACTION_VIEW, Uri.parse(url))) }
Unit Unit
} }
Surface( GroupedSurface(
position = position,
color = MaterialTheme.colorScheme.surfaceContainerHigh, color = MaterialTheme.colorScheme.surfaceContainerHigh,
shape = RoundedCornerShape(24.dp),
modifier = Modifier.fillMaxWidth(), modifier = Modifier.fillMaxWidth(),
) { ) {
Column(Modifier.fillMaxWidth().padding(16.dp)) { Column(Modifier.fillMaxWidth().padding(16.dp)) {