refactor(ui): improve chat and node list row layout

PocketMesh/Extensions/View+ListChevron.swift

@@ -0,0 +1,15 @@
+import SwiftUI
+
+extension View {
+    /// Adds a trailing chevron aligned with the top row of a list item.
+    /// Used with hidden NavigationLink pattern to control chevron positioning.
+    func listChevron(offset: CGFloat = -8) -> some View {
+        HStack(spacing: 12) {
+            self
+            Image(systemName: "chevron.right")
+                .font(.caption.weight(.semibold))
+                .foregroundStyle(.tertiary)
+                .offset(y: offset)
+        }
+    }
+}

PocketMesh/Views/Chats/ChannelConversationRow.swift

@@ -9,24 +9,27 @@ struct ChannelConversationRow: View {
     var body: some View {
         HStack(spacing: 12) {
             ChannelAvatar(channel: channel, size: 44)
+                .overlay(alignment: .topTrailing) {
+                    UnreadCountBadge(count: channel.unreadCount)
+                }
 
             VStack(alignment: .leading, spacing: 4) {
                 HStack(spacing: 4) {
                     Text(channel.name.isEmpty ? L10n.Chats.Chats.Channel.defaultName(Int(channel.index)) : channel.name)
                         .font(.headline)
                         .lineLimit(1)
 
-                    Spacer()
-
-                    NotificationLevelIndicator(level: channel.notificationLevel)
-
                     if channel.isFavorite {
                         Image(systemName: "star.fill")
                             .foregroundStyle(.yellow)
-                            .font(.caption)
+                            .font(.system(size: 13.2))
                             .accessibilityLabel(Strings.favorite)
                     }
 
+                    Spacer()
+
+                    NotificationLevelIndicator(level: channel.notificationLevel)
+
                     if let date = channel.lastMessageDate {
                         ConversationTimestamp(date: date)
                     }
@@ -39,12 +42,6 @@ struct ChannelConversationRow: View {
                         .lineLimit(1)
 
                     Spacer()
-
-                    UnreadBadges(
-                        unreadCount: channel.unreadCount,
-                        unreadMentionCount: channel.unreadMentionCount,
-                        notificationLevel: channel.notificationLevel
-                    )
                 }
             }
             .alignmentGuide(.listRowSeparatorLeading) { d in

PocketMesh/Views/Chats/ConversationListContent.swift

@@ -78,20 +78,26 @@ struct ConversationListContent: View {
         let route = ChatRoute(conversation: conversation)
         switch conversation {
         case .direct(let contact):
-            NavigationLink(value: route) {
-                ConversationRow(contact: contact, viewModel: viewModel)
-            }
-            .conversationSwipeActions(conversation: conversation, viewModel: viewModel) {
-                onDeleteConversation(conversation)
-            }
+            ConversationRow(contact: contact, viewModel: viewModel)
+                .listChevron(offset: -11)
+                .background {
+                    NavigationLink(value: route) { EmptyView() }
+                        .opacity(0)
+                }
+                .conversationSwipeActions(conversation: conversation, viewModel: viewModel) {
+                    onDeleteConversation(conversation)
+                }
 
         case .channel(let channel):
-            NavigationLink(value: route) {
-                ChannelConversationRow(channel: channel, viewModel: viewModel)
-            }
-            .conversationSwipeActions(conversation: conversation, viewModel: viewModel) {
-                onDeleteConversation(conversation)
-            }
+            ChannelConversationRow(channel: channel, viewModel: viewModel)
+                .listChevron(offset: -11)
+                .background {
+                    NavigationLink(value: route) { EmptyView() }
+                        .opacity(0)
+                }
+                .conversationSwipeActions(conversation: conversation, viewModel: viewModel) {
+                    onDeleteConversation(conversation)
+                }
 
         case .room(let session):
             Button {

PocketMesh/Views/Chats/ConversationRow.swift

@@ -8,27 +8,30 @@ struct ConversationRow: View {
     var body: some View {
         HStack(spacing: 12) {
             ContactAvatar(contact: contact, size: 44)
+                .overlay(alignment: .topTrailing) {
+                    UnreadCountBadge(count: contact.unreadCount)
+                }
 
             VStack(alignment: .leading, spacing: 4) {
                 HStack(spacing: 4) {
                     Text(contact.displayName)
                         .font(.headline)
                         .lineLimit(1)
 
-                    Spacer()
-
-                    MutedIndicator(isMuted: contact.isMuted)
-
                     if viewModel.togglingFavoriteID == contact.id {
                         ProgressView()
                             .controlSize(.small)
                     } else if contact.isFavorite {
                         Image(systemName: "star.fill")
                             .foregroundStyle(.yellow)
-                            .font(.caption)
+                            .font(.system(size: 13.2))
                             .accessibilityLabel(L10n.Chats.Chats.Row.favorite)
                     }
 
+                    Spacer()
+
+                    MutedIndicator(isMuted: contact.isMuted)
+
                     if let date = contact.lastMessageDate {
                         ConversationTimestamp(date: date)
                     }
@@ -41,12 +44,6 @@ struct ConversationRow: View {
                         .lineLimit(1)
 
                     Spacer()
-
-                    UnreadBadges(
-                        unreadCount: contact.unreadCount,
-                        unreadMentionCount: contact.unreadMentionCount,
-                        notificationLevel: contact.isMuted ? .muted : .all
-                    )
                 }
             }
             .alignmentGuide(.listRowSeparatorLeading) { d in

PocketMesh/Views/Chats/ConversationTimestamp.swift

@@ -18,9 +18,13 @@ struct ConversationTimestamp: View {
         if calendar.isDateInToday(date) {
             return date.formatted(date: .omitted, time: .shortened)
         } else if calendar.isDateInYesterday(date) {
-            return date.formatted(.relative(presentation: .named))
-        } else {
+            return "Yesterday"
+        } else if let daysAgo = calendar.dateComponents([.day], from: date, to: now).day, daysAgo < 7 {
+            return date.formatted(.dateTime.weekday(.wide))
+        } else if calendar.component(.year, from: date) == calendar.component(.year, from: now) {
             return date.formatted(.dateTime.month(.abbreviated).day())
+        } else {
+            return date.formatted(.dateTime.month(.abbreviated).day().year())
         }
     }
 }

PocketMesh/Views/Chats/RoomConversationRow.swift

@@ -5,26 +5,29 @@ struct RoomConversationRow: View {
     let session: RemoteNodeSessionDTO
 
     var body: some View {
-        HStack(spacing: 12) {
+        HStack(alignment: .center, spacing: 12) {
             NodeAvatar(publicKey: session.publicKey, role: .roomServer, size: 44)
+                .overlay(alignment: .topTrailing) {
+                    UnreadCountBadge(count: session.unreadCount)
+                }
 
             VStack(alignment: .leading, spacing: 4) {
                 HStack(spacing: 4) {
                     Text(session.name)
                         .font(.headline)
                         .lineLimit(1)
 
-                    Spacer()
-
-                    NotificationLevelIndicator(level: session.notificationLevel)
-
                     if session.isFavorite {
                         Image(systemName: "star.fill")
                             .foregroundStyle(.yellow)
-                            .font(.caption)
+                            .font(.system(size: 13.2))
                             .accessibilityLabel(L10n.Chats.Chats.Row.favorite)
                     }
 
+                    Spacer()
+
+                    NotificationLevelIndicator(level: session.notificationLevel)
+
                     if let date = session.lastMessageDate {
                         ConversationTimestamp(date: date)
                     }
@@ -42,11 +45,6 @@ struct RoomConversationRow: View {
                     }
 
                     Spacer()
-
-                    UnreadBadges(
-                        unreadCount: session.unreadCount,
-                        notificationLevel: session.notificationLevel
-                    )
                 }
             }
             .alignmentGuide(.listRowSeparatorLeading) { d in
@@ -56,6 +54,7 @@ struct RoomConversationRow: View {
             Image(systemName: "chevron.right")
                 .font(.caption.weight(.semibold))
                 .foregroundStyle(.tertiary)
+                .offset(y: -11)
         }
         .padding(.vertical, 4)
         .contentShape(.rect)

PocketMesh/Views/Components/RelativeTimestampText.swift

@@ -4,15 +4,6 @@ import SwiftUI
 struct RelativeTimestampText: View {
     let timestamp: UInt32
 
-    private static let relativeFormatter: RelativeDateTimeFormatter = {
-        let formatter = RelativeDateTimeFormatter()
-        formatter.unitsStyle = .abbreviated
-        return formatter
-    }()
-
-    private static let weekThreshold: TimeInterval = 604_800
-    private static let nowThreshold: TimeInterval = 60
-
     var body: some View {
         TimelineView(.everyMinute) { context in
             Text(Self.format(timestamp: timestamp, relativeTo: context.date))
@@ -24,17 +15,29 @@ struct RelativeTimestampText: View {
     /// Formats a timestamp relative to the given date. Exposed for testing.
     static func format(timestamp: UInt32, relativeTo now: Date) -> String {
         let date = Date(timeIntervalSince1970: TimeInterval(timestamp))
-        let interval = now.timeIntervalSince(date)
+        let calendar = Calendar.current
+
+        let startOfNow = calendar.startOfDay(for: now)
+        let startOfDate = calendar.startOfDay(for: date)
+        let daysAgo = calendar.dateComponents([.day], from: startOfDate, to: startOfNow).day ?? 0
+
+        if daysAgo == 0 {
+            return date.formatted(date: .omitted, time: .shortened)
+        }
+
+        if daysAgo == 1 {
+            return "Yesterday"
+        }
 
-        if interval < nowThreshold {
-            return L10n.Chats.Chats.Timestamp.now
+        if daysAgo < 7 {
+            return date.formatted(.dateTime.weekday(.wide))
         }
 
-        if interval >= weekThreshold {
+        if calendar.component(.year, from: date) == calendar.component(.year, from: now) {
             return date.formatted(.dateTime.month(.abbreviated).day())
         }
 
-        return relativeFormatter.localizedString(for: date, relativeTo: now)
+        return date.formatted(.dateTime.month(.abbreviated).day().year())
     }
 }
 

PocketMesh/Views/Components/UnreadCountBadge.swift

@@ -0,0 +1,45 @@
+import SwiftUI
+
+/// Red badge with unread count, displayed as an overlay on avatars.
+/// Matches iOS app icon badge style.
+struct UnreadCountBadge: View {
+    let count: Int
+
+    var body: some View {
+        if count > 0 {
+            Text(count, format: .number)
+                .font(.caption2.bold())
+                .foregroundStyle(.white)
+                .padding(.horizontal, 4)
+                .frame(minWidth: 18, minHeight: 18)
+                .background(.red, in: .capsule)
+                .offset(x: 4, y: -4)
+        }
+    }
+}
+
+#Preview {
+    VStack(spacing: 20) {
+        Circle()
+            .fill(.blue)
+            .frame(width: 44, height: 44)
+            .overlay(alignment: .topTrailing) {
+                UnreadCountBadge(count: 3)
+            }
+
+        Circle()
+            .fill(.blue)
+            .frame(width: 44, height: 44)
+            .overlay(alignment: .topTrailing) {
+                UnreadCountBadge(count: 42)
+            }
+
+        Circle()
+            .fill(.blue)
+            .frame(width: 44, height: 44)
+            .overlay(alignment: .topTrailing) {
+                UnreadCountBadge(count: 0)
+            }
+    }
+    .padding()
+}

PocketMesh/Views/Contacts/ContactRowView.swift

@@ -40,18 +40,18 @@ struct ContactRowView: View {
                             .accessibilityLabel(L10n.Contacts.Contacts.Row.blocked)
                     }
 
-                    Spacer()
-
                     if isTogglingFavorite {
                         ProgressView()
                             .controlSize(.small)
                     } else if contact.isFavorite {
                         Image(systemName: "star.fill")
-                            .font(.caption)
+                            .font(.system(size: 13.2))
                             .foregroundStyle(.yellow)
                             .accessibilityLabel(L10n.Contacts.Contacts.Row.favorite)
                     }
 
+                    Spacer()
+
                     RelativeTimestampText(timestamp: contact.lastAdvertTimestamp)
                 }
 

PocketMesh/Views/Contacts/ContactsCompactList.swift

@@ -20,14 +20,17 @@ struct ContactsCompactList: View {
             .listSectionSeparator(.hidden)
 
             ForEach(Array(filteredContacts.enumerated()), id: \.element.id) { index, contact in
-                NavigationLink(value: contact) {
-                    ContactRowView(
-                        contact: contact,
-                        showTypeLabel: isSearching,
-                        userLocation: appState.locationService.currentLocation,
-                        index: index,
-                        isTogglingFavorite: viewModel.togglingFavoriteID == contact.id
-                    )
+                ContactRowView(
+                    contact: contact,
+                    showTypeLabel: isSearching,
+                    userLocation: appState.locationService.currentLocation,
+                    index: index,
+                    isTogglingFavorite: viewModel.togglingFavoriteID == contact.id
+                )
+                .listChevron()
+                .background {
+                    NavigationLink(value: contact) { EmptyView() }
+                        .opacity(0)
                 }
                 .contactSwipeActions(contact: contact, viewModel: viewModel)
             }