Show the date on a room when the last message is older than today. (#484)

* Format the last message date correctly.
* Update room cell layout - fixes an issue where the longer the date got the smaller the last message width was.

ElementX/Sources/Other/Extensions/Date.swift

@@ -0,0 +1,43 @@
+//
+// Copyright 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.
+//
+
+import Foundation
+
+extension Date {
+    /// The date formatted with the minimal necessary units given how long ago it occurred.
+    func formattedMinimal() -> String {
+        let calendar = Calendar.current
+        
+        if calendar.isDateInToday(self) {
+            // Just the time if it was today.
+            return formatted(date: .omitted, time: .shortened)
+        } else if calendar.isDateInYesterday(self) {
+            // Simply "Yesterday" if it was yesterday.
+            return formatted(Date.RelativeFormatStyle(presentation: .named, capitalizationContext: .beginningOfSentence))
+        } else if let sixDaysAgo = calendar.date(byAdding: .day, value: -6, to: calendar.startOfDay(for: .now)),
+                  sixDaysAgo <= self {
+            // The named day if it was in the last 6 days.
+            return formatted(.dateTime.weekday(.wide))
+        } else if let oneYearAgo = calendar.date(byAdding: .year, value: -1, to: .now),
+                  oneYearAgo <= self {
+            // The day and month if it was in the last 6 days.
+            return formatted(.dateTime.day().month())
+        } else {
+            // The day, month and year if it is any older.
+            return formatted(.dateTime.year().day().month())
+        }
+    }
+}

ElementX/Sources/Screens/HomeScreen/HomeScreenViewModel.swift

@@ -261,7 +261,7 @@ class HomeScreenViewModel: HomeScreenViewModelType, HomeScreenViewModelProtocol
         }
         
         if let lastMessageTimestamp = details.lastMessageTimestamp {
-            room.timestamp = lastMessageTimestamp.formatted(date: .omitted, time: .shortened)
+            room.timestamp = lastMessageTimestamp.formattedMinimal()
         }
         
         roomsForIdentifiers[details.id] = room

ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift

@@ -35,16 +35,15 @@ struct HomeScreen: View {
             }
             
             if context.viewState.roomListMode == .skeletons {
-                LazyVStack {
+                LazyVStack(spacing: 0) {
                     ForEach(context.viewState.visibleRooms) { room in
                         HomeScreenRoomCell(room: room, context: context)
                             .redacted(reason: .placeholder)
                             .disabled(true)
                     }
                 }
-                .padding(.horizontal)
             } else {
-                LazyVStack {
+                LazyVStack(spacing: 0) {
                     ForEach(context.viewState.visibleRooms) { room in
                         Group {
                             if room.isPlaceholder {
@@ -62,7 +61,6 @@ struct HomeScreen: View {
                         }
                     }
                 }
-                .padding(.horizontal)
                 .searchable(text: $context.searchQuery)
                 .disableAutocorrection(true)
             }

ElementX/Sources/Screens/HomeScreen/View/HomeScreenRoomCell.swift

@@ -29,60 +29,11 @@ struct HomeScreenRoomCell: View {
             }
         } label: {
             HStack(spacing: 16.0) {
-                if let avatar = room.avatar {
-                    Image(uiImage: avatar)
-                        .resizable()
-                        .scaledToFill()
-                        .frame(width: avatarSize, height: avatarSize)
-                        .clipShape(Circle())
-                        .accessibilityHidden(true)
-                } else {
-                    PlaceholderAvatarImage(text: room.name, contentId: room.roomId)
-                        .clipShape(Circle())
-                        .frame(width: avatarSize, height: avatarSize)
-                        .accessibilityHidden(true)
-                }
+                avatar
                 
-                HStack(alignment: .top) {
-                    VStack(alignment: .leading, spacing: 2.0) {
-                        Text(room.name)
-                            .font(.element.callout.bold())
-                            .foregroundColor(.element.primaryContent)
-                            .lineLimit(1)
-                        
-                        if let lastMessage = room.lastMessage, !String(lastMessage.characters).isEmpty {
-                            Text(lastMessage)
-                                .font(lastMessageFont)
-                                .foregroundColor(lastMessageForegroundColor)
-                                .lineLimit(2)
-                                .multilineTextAlignment(.leading)
-                                .padding(.top, 2)
-                                .id(lastMessage)
-                                .transition(.opacity.animation(.elementDefault))
-                        }
-                    }
-                    .animation(.elementDefault, value: room)
-                    
-                    Spacer()
-                  
-                    VStack(alignment: .trailing, spacing: 3.0) {
-                        if let timestamp = room.timestamp {
-                            Text(timestamp)
-                                .font(.element.caption1)
-                                .foregroundColor(.element.secondaryContent)
-                                .id(timestamp)
-                                .transition(.opacity.animation(.elementDefault))
-                        }
-                        
-                        if room.hasUnreads {
-                            Rectangle()
-                                .frame(width: 12, height: 12)
-                                .foregroundColor(.element.primaryContent)
-                                .clipShape(Circle())
-                                .transition(.opacity.animation(.elementDefault))
-                        }
-                    }
-                    .animation(.elementDefault, value: room)
+                VStack(alignment: .leading, spacing: 2) {
+                    header
+                    footer
                 }
             }
             .frame(minHeight: 64.0)
@@ -93,23 +44,99 @@ struct HomeScreenRoomCell: View {
                 }
             }
         }
+        .buttonStyle(HomeScreenRoomCellButtonStyle())
         .accessibilityIdentifier("roomName:\(room.name)")
     }
     
-    var lastMessageFont: Font {
-        if room.hasUnreads {
-            return .element.subheadline.bold()
+    @ViewBuilder
+    var avatar: some View {
+        if let avatar = room.avatar {
+            Image(uiImage: avatar)
+                .resizable()
+                .scaledToFill()
+                .frame(width: avatarSize, height: avatarSize)
+                .clipShape(Circle())
+                .accessibilityHidden(true)
         } else {
-            return .element.subheadline
+            PlaceholderAvatarImage(text: room.name, contentId: room.roomId)
+                .clipShape(Circle())
+                .frame(width: avatarSize, height: avatarSize)
+                .accessibilityHidden(true)
         }
     }
     
-    var lastMessageForegroundColor: Color {
-        if room.hasUnreads {
-            return .element.primaryContent
-        } else {
-            return .element.secondaryContent
+    @ViewBuilder
+    var header: some View {
+        HStack(alignment: .firstTextBaseline) {
+            Text(room.name)
+                .font(.element.callout.bold())
+                .foregroundColor(.element.primaryContent)
+                .lineLimit(1)
+                .frame(maxWidth: .infinity, alignment: .leading)
+            
+            if let timestamp = room.timestamp {
+                Text(timestamp)
+                    .font(.element.caption1)
+                    .foregroundColor(.element.secondaryContent)
+                    .id(timestamp)
+                    .transition(.opacity.animation(.elementDefault))
+            }
         }
+        .animation(.elementDefault, value: room)
+    }
+    
+    @ViewBuilder
+    var footer: some View {
+        HStack(alignment: .firstTextBaseline) {
+            ZStack(alignment: .topLeading) {
+                // Hidden text with 2 lines to maintain consistent height, scaling with dynamic text.
+                Text(" \n ").lastMessageFormatting().hidden()
+                
+                if let lastMessage = room.lastMessage, !String(lastMessage.characters).isEmpty {
+                    Text(lastMessage)
+                        .lastMessageFormatting()
+                        .id(lastMessage)
+                        .transition(.opacity.animation(.elementDefault))
+                }
+            }
+            
+            Spacer()
+            
+            if room.hasUnreads {
+                Rectangle()
+                    .frame(width: 12, height: 12)
+                    .foregroundColor(.element.primaryContent)
+                    .clipShape(Circle())
+                    .transition(.opacity.animation(.elementDefault))
+            }
+        }
+        .animation(.elementDefault, value: room)
+    }
+}
+
+struct HomeScreenRoomCellButtonStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .roomCellBackground(configuration.isPressed ? .element.system : .clear)
+            .contentShape(Rectangle())
+    }
+}
+
+private extension View {
+    func lastMessageFormatting() -> some View {
+        font(.element.subheadline)
+            .foregroundColor(.element.secondaryContent)
+            .lineLimit(2)
+            .multilineTextAlignment(.leading)
+            .padding(.top, 2)
+    }
+    
+    // To be used to indicate the selected room too
+    func roomCellBackground(_ background: Color) -> some View {
+        padding(.horizontal, 8)
+            .padding(.vertical, 6)
+            .background { background.clipShape(RoundedRectangle(cornerRadius: 12)) }
+            .padding(.horizontal, 8)
     }
 }
 
@@ -136,11 +163,12 @@ struct HomeScreenRoomCell_Previews: PreviewProvider {
                                       roomId: details.id,
                                       name: details.name,
                                       hasUnreads: details.unreadNotificationCount > 0,
-                                      timestamp: Date.now.formatted(date: .omitted, time: .shortened))
+                                      timestamp: Date.now.formattedMinimal(),
+                                      lastMessage: details.lastMessage)
             }
         }
 
-        return VStack {
+        return VStack(spacing: 0) {
             ForEach(rooms) { room in
                 HomeScreenRoomCell(room: room, context: viewModel.context)
             }