Allow adding multiple images per activity

Author: Inky-developer

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Unreleased
 
+- Allow adding multiple images to an activity
+
 # 2025.11.1
 
 - Fix bug where setting the place to none was not possible

app/src/main/java/com/inky/fitnesscalendar/ui/components/ActivityCard.kt

@@ -62,6 +62,7 @@ import com.inky.fitnesscalendar.localization.LocalizationRepository
 import com.inky.fitnesscalendar.ui.util.ContextFormat
 import com.inky.fitnesscalendar.ui.util.Icons
 import com.inky.fitnesscalendar.ui.util.skipToLookaheadSize
+import com.inky.fitnesscalendar.util.asNonEmptyOrNull
 import com.inky.fitnesscalendar.util.gpx.simplify
 
 @OptIn(ExperimentalFoundationApi::class)
@@ -139,7 +140,7 @@ fun ActivityCard(
             }
         }
 
-        if (images.isNotEmpty()) {
+        images.asNonEmptyOrNull()?.let { images ->
             HorizontalDivider()
             ActivityImages(
                 images = images,

app/src/main/java/com/inky/fitnesscalendar/ui/components/imageComponents.kt

@@ -7,8 +7,12 @@ import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.PickVisualMediaRequest
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.aspectRatio
-import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyRow
+import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
@@ -20,30 +24,38 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import coil.compose.AsyncImagePainter
 import com.inky.fitnesscalendar.R
 import com.inky.fitnesscalendar.data.ImageName
+import com.inky.fitnesscalendar.util.NonEmptyList
 import com.inky.fitnesscalendar.util.copyFileToStorage
 import com.inky.fitnesscalendar.util.getOrCreateImagesDir
 
 const val IMAGE_ASPECT_RATIO: Float = 4 / 3f
 
 @Composable
 fun ActivityImages(
-    images: List<ImageName>,
+    images: NonEmptyList<ImageName>,
     modifier: Modifier = Modifier,
     onClick: (ImageName) -> Unit = {},
-    onState: ((AsyncImagePainter.State) -> Unit)? = null,
+    onState: ((ImageName, AsyncImagePainter.State) -> Unit)? = null,
 ) {
-    // TODO: Draw multiple images
-    val uri = images.map { it.getImageUri() }.first()
-    ActivityImage(
-        uri = uri,
-        modifier = modifier,
-        onClick = { onClick(images.first()) },
-        onState = onState
-    )
+    val imageScale = if (images.size == 1) 1f else 0.9f
+    BoxWithConstraints(modifier = modifier) {
+        val imageWidth = this.maxWidth * imageScale
+        LazyRow(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+            items(images) { image ->
+                ActivityImage(
+                    uri = image.getImageUri(),
+                    modifier = Modifier.width(imageWidth),
+                    onClick = { onClick(image) },
+                    onState = { state -> onState?.let { it(image, state) } }
+                )
+            }
+        }
+    }
 }
 
 @Composable
@@ -59,7 +71,6 @@ fun ActivityImage(
         onState = onState,
         contentScale = ContentScale.Crop,
         modifier = modifier
-            .fillMaxWidth()
             .aspectRatio(IMAGE_ASPECT_RATIO)
             .clip(MaterialTheme.shapes.large)
             .clickable { onClick() }

app/src/main/java/com/inky/fitnesscalendar/ui/views/ActivityShareView.kt

@@ -75,6 +75,7 @@ import com.inky.fitnesscalendar.ui.theme.FitnessCalendarTheme
 import com.inky.fitnesscalendar.ui.util.Icons
 import com.inky.fitnesscalendar.ui.util.SharedContentKey
 import com.inky.fitnesscalendar.ui.util.sharedBounds
+import com.inky.fitnesscalendar.util.asNonEmptyOrNull
 import com.inky.fitnesscalendar.util.getOrCreateSharedMediaCache
 import com.inky.fitnesscalendar.util.getOrCreateSharedTracksCache
 import com.inky.fitnesscalendar.util.gpx.GpxWriter
@@ -318,7 +319,7 @@ private fun ActivityShareCard(
         }
 
         AnimatedVisibility(config.showImage) {
-            if (images.isNotEmpty()) {
+            images.asNonEmptyOrNull()?.let { images ->
                 HorizontalDivider()
                 ActivityImages(
                     images = images,

app/src/main/java/com/inky/fitnesscalendar/ui/views/EditActivityView.kt

@@ -81,6 +81,7 @@ import com.inky.fitnesscalendar.ui.components.defaultTopAppBarColors
 import com.inky.fitnesscalendar.ui.components.optionGroupDefaultBackground
 import com.inky.fitnesscalendar.ui.components.rememberImagePickerLauncher
 import com.inky.fitnesscalendar.ui.util.Icons
+import com.inky.fitnesscalendar.util.asNonEmptyOrNull
 import com.inky.fitnesscalendar.util.someOrNone
 import com.inky.fitnesscalendar.util.toDate
 import com.inky.fitnesscalendar.util.toLocalDateTime
@@ -297,14 +298,13 @@ fun NewActivity(
                 .padding(horizontal = 8.dp)
                 .verticalScroll(scrollState)
         ) {
-            val imageNames = editState.images.map { it.imageName }
-            if (imageNames.isNotEmpty()) {
+            val imageNames = editState.images.map { it.imageName }.asNonEmptyOrNull()
+            if (imageNames != null) {
                 ActivityImages(
                     images = imageNames,
-                    onState = { state ->
-                        // FIXME: only remove the bad image, instead of all new images
-                        if (state is AsyncImagePainter.State.Error && editState.images != initialState.images) {
-                            onState(editState.copy(images = initialState.images))
+                    onState = { image, state ->
+                        if (state is AsyncImagePainter.State.Error && !initialState.images.any { it.imageName == image }) {
+                            onState(editState.copy(images = editState.images.filter { it.imageName != image }))
                         }
                     },
                     onClick = { imageViewerImage = it },

app/src/main/java/com/inky/fitnesscalendar/util/NonEmptyList.kt

@@ -0,0 +1,19 @@
+package com.inky.fitnesscalendar.util
+
+interface NonEmptyList<T> : List<T>
+
+@JvmInline
+@Suppress("JavaDefaultMethodsNotOverriddenByDelegation")
+private value class NonEmptyListImpl<T>(val data: List<T>) : List<T> by data, NonEmptyList<T> {
+    init {
+        require(data.isNotEmpty()) { "List must not be empty" }
+    }
+}
+
+
+fun <T> List<T>.asNonEmptyOrNull(): NonEmptyList<T>? {
+    if (this.isEmpty()) {
+        return null
+    }
+    return NonEmptyListImpl(this)
+}