Merge pull request #1801 from vector-im/feature/bma/timelineBeginning

Add a View to show the beginning of the timeline (parity with iOS)

Author: bmarty

changelog.d/1801.misc

@@ -0,0 +1 @@
+Add item "This is the beginning of..." at the beginning of the timeline.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/MessagesView.kt

@@ -373,6 +373,7 @@ private fun MessagesViewContent(
                 TimelineView(
                     modifier = Modifier.padding(paddingValues),
                     state = state.timelineState,
+                    roomName = state.roomName.dataOrNull(),
                     onMessageClicked = onMessageClicked,
                     onMessageLongClicked = onMessageLongClicked,
                     onUserDataClicked = onUserDataClicked,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineStateProvider.kt

@@ -43,7 +43,11 @@ import kotlin.random.Random
 
 fun aTimelineState(timelineItems: ImmutableList<TimelineItem> = persistentListOf()) = TimelineState(
     timelineItems = timelineItems,
-    paginationState = MatrixTimeline.PaginationState(isBackPaginating = false, hasMoreToLoadBackwards = true),
+    paginationState = MatrixTimeline.PaginationState(
+        isBackPaginating = false,
+        hasMoreToLoadBackwards = true,
+        beginningOfRoomReached = false,
+    ),
     highlightedEventId = null,
     userHasPermissionToSendMessage = true,
     hasNewItems = false,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/TimelineView.kt

@@ -59,6 +59,7 @@ import io.element.android.features.messages.impl.timeline.components.TimelineIte
 import io.element.android.features.messages.impl.timeline.components.TimelineItemStateEventRow
 import io.element.android.features.messages.impl.timeline.components.TimelineItemVirtualRow
 import io.element.android.features.messages.impl.timeline.components.group.GroupHeaderView
+import io.element.android.features.messages.impl.timeline.components.virtual.TimelineItemRoomBeginningView
 import io.element.android.features.messages.impl.timeline.components.virtual.TimelineLoadingMoreIndicator
 import io.element.android.features.messages.impl.timeline.di.LocalTimelineItemPresenterFactories
 import io.element.android.features.messages.impl.timeline.di.aFakeTimelineItemPresenterFactories
@@ -82,6 +83,7 @@ import kotlinx.coroutines.launch
 @Composable
 fun TimelineView(
     state: TimelineState,
+    roomName: String?,
     onUserDataClicked: (UserId) -> Unit,
     onMessageClicked: (TimelineItem.Event) -> Unit,
     onMessageLongClicked: (TimelineItem.Event) -> Unit,
@@ -148,6 +150,11 @@ fun TimelineView(
                     }
                 }
             }
+            if (state.paginationState.beginningOfRoomReached) {
+                item(contentType = "BeginningOfRoomReached") {
+                    TimelineItemRoomBeginningView(roomName = roomName)
+                }
+            }
         }
 
         TimelineScrollHelper(
@@ -346,6 +353,7 @@ internal fun TimelineViewPreview(
     ) {
         TimelineView(
             state = aTimelineState(timelineItems),
+            roomName = null,
             onMessageClicked = {},
             onTimestampClicked = {},
             onUserDataClicked = {},

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/virtual/TimelineItemRoomBeginningView.kt

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.messages.impl.timeline.components.virtual
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import io.element.android.features.messages.impl.R
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.theme.ElementTheme
+
+@Composable
+fun TimelineItemRoomBeginningView(
+    roomName: String?,
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp, vertical = 8.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        val text = if (roomName == null) {
+            stringResource(id = R.string.room_timeline_beginning_of_room_no_name)
+        } else {
+            stringResource(id = R.string.room_timeline_beginning_of_room, roomName)
+        }
+        Text(
+            color = MaterialTheme.colorScheme.secondary,
+            style = ElementTheme.typography.fontBodyMdRegular,
+            text = text,
+            textAlign = TextAlign.Center,
+        )
+    }
+}
+
+@PreviewsDayNight
+@Composable
+internal fun TimelineItemRoomBeginningViewPreview() = ElementPreview {
+    Column {
+        TimelineItemRoomBeginningView(
+            roomName = null,
+        )
+        TimelineItemRoomBeginningView(
+            roomName = "Room Name",
+        )
+    }
+}

features/messages/impl/src/main/res/values-cs/translations.xml

@@ -15,6 +15,8 @@
   </plurals>
   <string name="report_content_explanation">"Tato zpráva bude nahlášena správci vašeho domovského serveru. Nebude si moci přečíst žádné šifrované zprávy."</string>
   <string name="report_content_hint">"Důvod nahlášení tohoto obsahu"</string>
+  <string name="room_timeline_beginning_of_room">"Toto je začátek %1$s."</string>
+  <string name="room_timeline_beginning_of_room_no_name">"Toto je začátek této konverzace."</string>
   <string name="screen_room_mentions_at_room_subtitle">"Informujte celou místnost"</string>
   <string name="screen_report_content_block_user_hint">"Zaškrtněte, pokud chcete skrýt všechny aktuální a budoucí zprávy od tohoto uživatele"</string>
   <string name="screen_room_attachment_source_camera">"Fotoaparát"</string>

features/messages/impl/src/main/res/values-de/translations.xml

@@ -14,6 +14,8 @@
   </plurals>
   <string name="report_content_explanation">"Diese Meldung wird an den Administrator deines Homeservers weitergeleitet. Dieser kann keine verschlüsselten Nachrichten lesen."</string>
   <string name="report_content_hint">"Grund für die Meldung dieses Inhalts"</string>
+  <string name="room_timeline_beginning_of_room">"Dies ist der Anfang von %1$s."</string>
+  <string name="room_timeline_beginning_of_room_no_name">"Dies ist der Anfang dieses Gesprächs."</string>
   <string name="screen_report_content_block_user_hint">"Prüfe, ob du alle aktuellen und zukünftigen Nachrichten dieses Benutzers ausblenden möchtest"</string>
   <string name="screen_room_attachment_source_camera">"Kamera"</string>
   <string name="screen_room_attachment_source_camera_photo">"Foto machen"</string>

features/messages/impl/src/main/res/values-es/translations.xml

@@ -14,6 +14,8 @@
   </plurals>
   <string name="report_content_explanation">"Este mensaje se notificará al administrador de su homeserver. No podrán leer ningún mensaje cifrado."</string>
   <string name="report_content_hint">"Motivo para denunciar este contenido"</string>
+  <string name="room_timeline_beginning_of_room">"Este es el principio de %1$s."</string>
+  <string name="room_timeline_beginning_of_room_no_name">"Este es el principio de esta conversación."</string>
   <string name="screen_report_content_block_user_hint">"Marque si quieres ocultar todos los mensajes actuales y futuros de este usuario"</string>
   <string name="screen_report_content_block_user">"Bloquear usuario"</string>
 </resources>

features/messages/impl/src/main/res/values-fr/translations.xml

@@ -14,6 +14,8 @@
   </plurals>
   <string name="report_content_explanation">"Ce message sera signalé à l’administrateur de votre serveur d’accueil. Il ne pourra lire aucun message chiffré."</string>
   <string name="report_content_hint">"Raison du signalement de ce contenu"</string>
+  <string name="room_timeline_beginning_of_room">"Ceci est le début de %1$s."</string>
+  <string name="room_timeline_beginning_of_room_no_name">"Ceci est le début de cette conversation."</string>
   <string name="screen_room_mentions_at_room_subtitle">"Notifier tout le salon"</string>
   <string name="screen_report_content_block_user_hint">"Cochez si vous souhaitez masquer tous les messages actuels et futurs de cet utilisateur."</string>
   <string name="screen_room_attachment_source_camera">"Appareil photo"</string>

features/messages/impl/src/main/res/values-it/translations.xml

@@ -14,6 +14,8 @@
   </plurals>
   <string name="report_content_explanation">"Questo messaggio verrà segnalato all\'amministratore dell\'homeserver. Questi non sarà in grado di leggere i messaggi criptati."</string>
   <string name="report_content_hint">"Motivo della segnalazione di questo contenuto"</string>
+  <string name="room_timeline_beginning_of_room">"Questo è l\'inizio di %1$s."</string>
+  <string name="room_timeline_beginning_of_room_no_name">"Questo è l\'inizio della conversazione."</string>
   <string name="screen_report_content_block_user_hint">"Seleziona se vuoi nascondere tutti i messaggi attuali e futuri di questo utente"</string>
   <string name="screen_report_content_block_user">"Blocca utente"</string>
 </resources>