feat: Add UI for received transfers Screen

app/src/main/java/com/infomaniak/swisstransfer/ui/components/FileItem.kt

@@ -87,7 +87,7 @@ private fun FileItemContent(
         modifier = Modifier.aspectRatio(164 / 152f),
         colors = CardDefaults.cardColors(containerColor = SwissTransferTheme.materialColors.background),
         shape = CustomShapes.SMALL,
-        border = BorderStroke(width = 1.dp, SwissTransferTheme.materialColors.outlineVariant)
+        border = BorderStroke(width = 1.dp, SwissTransferTheme.materialColors.outlineVariant),
     ) {
         Box(
             modifier = Modifier
@@ -137,7 +137,7 @@ private fun FileItemPreview(@PreviewParameter(FileUiListPreviewParameter::class)
             Column(
                 modifier = Modifier
                     .padding(Margin.Large)
-                    .width(164.dp)
+                    .width(164.dp),
             )
             {
                 var isChecked by remember { mutableStateOf(true) }

app/src/main/java/com/infomaniak/swisstransfer/ui/components/transfer/TransferFilePreview.kt

@@ -0,0 +1,84 @@
+/*
+ * Infomaniak SwissTransfer - Android
+ * Copyright (C) 2024 Infomaniak Network SA
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.infomaniak.swisstransfer.ui.components.transfer
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import com.infomaniak.multiplatform_swisstransfer.common.interfaces.ui.FileUi
+import com.infomaniak.swisstransfer.ui.components.SmallFileItem
+import com.infomaniak.swisstransfer.ui.components.SmallFileTileSize
+import com.infomaniak.swisstransfer.ui.theme.CustomShapes
+import com.infomaniak.swisstransfer.ui.theme.Margin
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
+
+@Composable
+fun TransferFilePreview(
+    file: FileUi? = null,
+    isFirstItem: Boolean = false,
+    remainingFilesCount: Int? = null,
+) {
+    Row {
+        if (!isFirstItem || remainingFilesCount != null) Spacer(modifier = Modifier.width(Margin.Mini))
+        if (file != null) {
+            // TODO: Temporary code to be able to test the view, while waiting real Transfers data
+            // AsyncImage(
+            //     model = ImageRequest.Builder(LocalContext.current)
+            //         .data(randomTestImageUrl()) // TODO: Use the `fileUi.localPath` (probably?) to generate file's preview instead of this hard-coded value
+            //         .crossfade(true)
+            //         .build(),
+            //     contentDescription = null,
+            //     contentScale = ContentScale.Crop,
+            //     onError = { }, // TODO ?
+            //     modifier = Modifier
+            //         .size(Margin.Giant)
+            //         .clip(CustomShapes.SMALL)
+            //         .background(SwissTransferTheme.colors.transferFilePreviewOverflow),
+            // )
+            SmallFileItem(
+                file = com.infomaniak.swisstransfer.ui.components.FileUi(
+                    // TODO: Use file received from TransferFilePreview(…) parameters
+                    fileName = "Introduction to Turning It Off and On Again.pptx",
+                    uid = "Introduction to Turning It Off and On Again.pptx",
+                    fileSizeInBytes = 89_723_143L,
+                    mimeType = null,
+                    uri = "",
+                ),
+                smallFileTileSize = SmallFileTileSize.SMALL,
+            )
+        } else {
+            Box(
+                contentAlignment = Alignment.Center,
+                modifier = Modifier
+                    .size(Margin.Giant)
+                    .clip(CustomShapes.SMALL)
+                    .background(SwissTransferTheme.colors.transferFilePreviewOverflow),
+            ) {
+                Text(
+                    text = "+$remainingFilesCount",
+                    color = SwissTransferTheme.colors.onTransferFilePreviewOverflow,
+                    style = SwissTransferTheme.typography.bodyRegular,
+                )
+            }
+        }
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/components/transfer/TransferItem.kt

@@ -0,0 +1,120 @@
+/*
+ * Infomaniak SwissTransfer - Android
+ * Copyright (C) 2024 Infomaniak Network SA
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.infomaniak.swisstransfer.ui.components.transfer
+
+import android.text.format.Formatter
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import com.infomaniak.multiplatform_swisstransfer.common.interfaces.ui.TransferUi
+import com.infomaniak.swisstransfer.R
+import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons
+import com.infomaniak.swisstransfer.ui.images.icons.ChevronRightThick
+import com.infomaniak.swisstransfer.ui.theme.CustomShapes
+import com.infomaniak.swisstransfer.ui.theme.Margin
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
+import com.infomaniak.swisstransfer.ui.utils.FORMAT_DATE_TITLE
+import com.infomaniak.swisstransfer.ui.utils.format
+import java.util.Date
+
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun TransferItem(
+    transfer: TransferUi,
+    onClick: () -> Unit,
+) {
+
+    val date = Date(transfer.createdDateTimestamp).format(FORMAT_DATE_TITLE)
+    val size = Formatter.formatShortFileSize(LocalContext.current, transfer.sizeUploaded)
+    val expiry = transfer.expiresInDays
+    val files = transfer.files
+    val itemCount = files.count()
+
+    Card(
+        onClick = onClick,
+        colors = CardDefaults.cardColors(containerColor = SwissTransferTheme.materialColors.surfaceContainerHighest),
+        shape = CustomShapes.SMALL,
+    ) {
+        Row(
+            modifier = Modifier.padding(Margin.Medium),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+
+            Column(
+                modifier = Modifier.weight(1.0f),
+            ) {
+
+                Text(
+                    text = date,
+                    style = SwissTransferTheme.typography.bodyMedium,
+                    color = SwissTransferTheme.colors.primaryTextColor,
+                    maxLines = 1,
+                    overflow = TextOverflow.MiddleEllipsis,
+                )
+
+                Spacer(modifier = Modifier.height(Margin.Mini))
+                Row {
+                    Text(
+                        text = size,
+                        color = SwissTransferTheme.colors.secondaryTextColor,
+                        style = SwissTransferTheme.typography.bodySmallRegular,
+                    )
+                    Text(
+                        text = "•",
+                        modifier = Modifier.padding(horizontal = Margin.Mini),
+                        color = SwissTransferTheme.colors.secondaryTextColor,
+                        style = SwissTransferTheme.typography.bodySmallRegular,
+                    )
+                    Text(
+                        text = stringResource(R.string.expiresIn, expiry),
+                        color = SwissTransferTheme.colors.secondaryTextColor,
+                        style = SwissTransferTheme.typography.bodySmallRegular,
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(Margin.Mini))
+                ContextualFlowRow(
+                    itemCount = itemCount,
+                    maxLines = 1,
+                    overflow = ContextualFlowRowOverflow.expandIndicator { TransferFilePreview(remainingFilesCount = totalItemCount - shownItemCount) },
+                ) { index ->
+                    TransferFilePreview(
+                        file = files[index],
+                        isFirstItem = index == 0,
+                    )
+                }
+            }
+
+            Spacer(modifier = Modifier.width(Margin.Medium))
+            Icon(
+                imageVector = AppIcons.ChevronRightThick,
+                contentDescription = null,
+                modifier = Modifier.size(Margin.Medium),
+                tint = SwissTransferTheme.colors.iconColor,
+            )
+        }
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/components/transfer/TransferItemList.kt

@@ -0,0 +1,54 @@
+/*
+ * Infomaniak SwissTransfer - Android
+ * Copyright (C) 2024 Infomaniak Network SA
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.infomaniak.swisstransfer.ui.components.transfer
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import com.infomaniak.multiplatform_swisstransfer.common.interfaces.ui.TransferUi
+import com.infomaniak.swisstransfer.ui.previewparameter.FileUiListPreviewParameter
+import com.infomaniak.swisstransfer.ui.theme.Margin
+import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
+import com.infomaniak.swisstransfer.ui.utils.PreviewAllWindows
+
+@Composable
+fun TransferItemList(
+    modifier: Modifier = Modifier,
+    transfers: List<TransferUi>,
+    onClick: (TransferUi) -> Unit,
+) {
+    LazyColumn(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(Margin.Medium),
+    ) {
+        items(
+            count = transfers.count(),
+            key = { transfers[it].uuid },
+            contentType = { transfers[it] },
+            itemContent = {
+                val transfer = transfers[it]
+                TransferItem(
+                    transfer = transfer,
+                    onClick = { onClick(transfer) },
+                )
+            },
+        )
+    }
+}

app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/ChevronRightThick.kt

@@ -41,7 +41,7 @@ val AppIcons.ChevronRightThick: ImageVector
         if (_chevronRightThick != null) return _chevronRightThick!!
 
         _chevronRightThick = Builder(
-            name = "ChevronRightSmall",
+            name = "ChevronRightThick",
             defaultWidth = 16.0.dp,
             defaultHeight = 16.0.dp,
             viewportWidth = 16.0f,