Transition Timeline to List + stream post automatically + keep position + new counter UI

IceCubesApp/App/Tabs/Timeline/TimelineTab.swift

@@ -144,7 +144,7 @@ struct TimelineTab: View {
       if UIDevice.current.userInterfaceIdiom != .pad {
         ToolbarItem(placement: .navigationBarLeading) {
           AppAccountsSelectorView(routerPath: routerPath)
-            .id(client.id)
+            .id(currentAccount.account?.id)
         }
       }
       statusEditorToolbarItem(routerPath: routerPath,

Packages/Account/Sources/Account/AccountDetailView.swift

@@ -69,7 +69,7 @@ public struct AccountDetailView: View {
             if viewModel.selectedTab == .statuses {
               pinnedPostsView
             }
-            StatusesListView(fetcher: viewModel)
+            StatusesListView(fetcher: viewModel, isEmbdedInList: false)
           case .followedTags:
             tagsListView
           case .lists:

Packages/Account/Sources/Account/AccountDetailViewModel.swift

@@ -246,4 +246,8 @@ class AccountDetailViewModel: ObservableObject, StatusesFetcher {
       }
     }
   }
+  
+  func statusDidAppear(status: Models.Status) async {
+    
+  }
 }

Packages/Status/Sources/Status/Detail/StatusDetailView.swift

@@ -73,7 +73,6 @@ public struct StatusDetailView: View {
                 }
               }
             }
-            .frame(maxWidth: .maxColumnWidth)
           }
           .padding(.top, .layoutPadding)
         }

Packages/Status/Sources/Status/List/StatusesFetcher.swift

@@ -16,4 +16,5 @@ public protocol StatusesFetcher: ObservableObject {
   var statusesState: StatusesState { get }
   func fetchStatuses() async
   func fetchNextPage() async
+  func statusDidAppear(status: Status) async
 }

Packages/Status/Sources/Status/List/StatusesListView.swift

@@ -4,25 +4,35 @@ import Shimmer
 import SwiftUI
 
 public struct StatusesListView<Fetcher>: View where Fetcher: StatusesFetcher {
+  @EnvironmentObject private var theme: Theme
+  
   @ObservedObject private var fetcher: Fetcher
   private let isRemote: Bool
+  private let isEmbdedInList: Bool
 
-  public init(fetcher: Fetcher, isRemote: Bool = false) {
+  public init(fetcher: Fetcher, isRemote: Bool = false, isEmbdedInList: Bool = true) {
     self.fetcher = fetcher
     self.isRemote = isRemote
+    self.isEmbdedInList = isEmbdedInList
   }
 
   public var body: some View {
-    Group {
     switch fetcher.statusesState {
     case .loading:
       ForEach(Status.placeholders()) { status in
         StatusRowView(viewModel: .init(status: status, isCompact: false))
+          .padding(.horizontal, isEmbdedInList ? 0 : .layoutPadding)
           .redacted(reason: .placeholder)
-            .padding(.horizontal, .layoutPadding)
+          .listRowBackground(theme.primaryBackgroundColor)
+          .listRowInsets(.init(top: 12,
+                               leading: .layoutPadding,
+                               bottom: 12,
+                               trailing: .layoutPadding))
+        if !isEmbdedInList {
           Divider()
             .padding(.vertical, .dividerPadding)
         }
+      }
     case .error:
       ErrorView(title: "status.error.title",
                 message: "status.error.loading.message",
@@ -31,18 +41,31 @@ public struct StatusesListView<Fetcher>: View where Fetcher: StatusesFetcher {
           await fetcher.fetchStatuses()
         }
       }
+      .listRowBackground(theme.primaryBackgroundColor)
 
     case let .display(statuses, nextPageState):
       ForEach(statuses, id: \.viewId) { status in
         let viewModel = StatusRowViewModel(status: status, isCompact: false, isRemote: isRemote)
         if viewModel.filter?.filter.filterAction != .hide {
           StatusRowView(viewModel: viewModel)
+            .padding(.horizontal, isEmbdedInList ? 0 : .layoutPadding)
             .id(status.id)
-              .padding(.horizontal, .layoutPadding)
+            .listRowBackground(theme.primaryBackgroundColor)
+            .listRowInsets(.init(top: 12,
+                                 leading: .layoutPadding,
+                                 bottom: 12,
+                                 trailing: .layoutPadding))
+            .onAppear {
+              Task {
+                await fetcher.statusDidAppear(status: status)
+              }
+            }
+          if !isEmbdedInList {
             Divider()
               .padding(.vertical, .dividerPadding)
           }
         }
+      }
 
       switch nextPageState {
       case .hasNextPage:
@@ -59,8 +82,6 @@ public struct StatusesListView<Fetcher>: View where Fetcher: StatusesFetcher {
       }
     }
   }
-    .frame(maxWidth: .maxColumnWidth)
-  }
 
   private var loadingRow: some View {
     HStack {
@@ -69,5 +90,6 @@ public struct StatusesListView<Fetcher>: View where Fetcher: StatusesFetcher {
       Spacer()
     }
     .padding(.horizontal, .layoutPadding)
+    .listRowBackground(theme.primaryBackgroundColor)
   }
 }

Packages/Status/Sources/Status/Row/StatusRowView.swift

@@ -115,6 +115,9 @@ public struct StatusRowView: View {
           remoteContentLoadingView
         }
       }
+      .alignmentGuide(.listRowSeparatorLeading) { _ in
+        -100
+      }
     }
   }
 

Packages/Timeline/Sources/Timeline/TimelineView.swift

@@ -34,13 +34,12 @@ public struct TimelineView: View {
   public var body: some View {
     ScrollViewReader { proxy in
       ZStack(alignment: .top) {
-        ScrollView {
+        List {
-          Rectangle()
+          if viewModel.tag == nil {
-            .frame(height: 0)
+            scrollToTopView
-            .id(Constants.scrollToTop)
+          } else {
-          LazyVStack {
             tagHeaderView
-              .padding(.bottom, 16)
+          }
           switch viewModel.timeline {
           case .remoteLocal:
             StatusesListView(fetcher: viewModel, isRemote: true)
@@ -48,8 +47,9 @@ public struct TimelineView: View {
             StatusesListView(fetcher: viewModel)
           }
         }
-          .padding(.top, .layoutPadding + (!viewModel.pendingStatuses.isEmpty ? 28 : 0))
+        .environment(\.defaultMinListRowHeight, 1)
-        }
+        .listStyle(.plain)
+        .scrollContentBackground(.hidden)
         .background(theme.primaryBackgroundColor)
         if viewModel.pendingStatusesEnabled {
           makePendingNewPostsView(proxy: proxy)
@@ -107,38 +107,27 @@ public struct TimelineView: View {
   private func makePendingNewPostsView(proxy: ScrollViewProxy) -> some View {
     if !viewModel.pendingStatuses.isEmpty {
       HStack(spacing: 6) {
+        Spacer()
         Button {
           withAnimation {
-            proxy.scrollTo(Constants.scrollToTop)
+            proxy.scrollTo(viewModel.pendingStatuses.last?.id, anchor: .bottom)
-            viewModel.displayPendingStatuses()
           }
         } label: {
           Text(viewModel.pendingStatusesButtonTitle)
         }
-        .keyboardShortcut("r", modifiers: .command)
-        .buttonStyle(.bordered)
-        .background(.thinMaterial)
-        .cornerRadius(8)
-        if viewModel.pendingStatuses.count > 1 {
-          Button {
-            withAnimation {
-              viewModel.dequeuePendingStatuses()
-            }
-          } label: {
-            Image(systemName: "text.insert")
-          }
         .buttonStyle(.bordered)
         .background(.thinMaterial)
         .cornerRadius(8)
       }
-      }
+      .padding(12)
-      .padding(.top, 6)
     }
   }
 
   @ViewBuilder
   private var tagHeaderView: some View {
     if let tag = viewModel.tag {
+      VStack(alignment: .leading) {
+        Spacer()
         HStack {
           VStack(alignment: .leading, spacing: 4) {
             Text("#\(tag.name)")
@@ -160,9 +149,23 @@ public struct TimelineView: View {
             Text(tag.following ? "account.follow.following" : "account.follow.follow")
           }.buttonStyle(.bordered)
         }
-      .padding(.horizontal, .layoutPadding)
+        Spacer()
-      .padding(.vertical, 8)
-      .background(theme.secondaryBackgroundColor)
       }
+      .listRowBackground(theme.secondaryBackgroundColor)
+      .listRowSeparator(.hidden)
+      .listRowInsets(.init(top: 8,
+                           leading: .layoutPadding,
+                           bottom: 8,
+                           trailing: .layoutPadding))
+    }
+  }
+  
+  private var scrollToTopView: some View {
+    HStack{ }
+      .listRowBackground(theme.primaryBackgroundColor)
+      .listRowSeparator(.hidden)
+      .listRowInsets(.init())
+      .frame(height: .layoutPadding)
+      .id(Constants.scrollToTop)
   }
 }

Packages/Timeline/Sources/Timeline/TimelineViewModel.swift

@@ -38,19 +38,10 @@ class TimelineViewModel: ObservableObject, StatusesFetcher {
   }
 
   @Published var tag: Tag?
-
-  enum PendingStatusesState {
-    case refresh, stream
-  }
-
   @Published var pendingStatuses: [Status] = []
-  @Published var pendingStatusesState: PendingStatusesState = .stream
 
   var pendingStatusesButtonTitle: LocalizedStringKey {
-    switch pendingStatusesState {
+    "\(pendingStatuses.count)"
-    case .stream, .refresh:
-      return "timeline-new-posts \(pendingStatuses.count)"
-    }
   }
 
   var pendingStatusesEnabled: Bool {
@@ -81,7 +72,6 @@ class TimelineViewModel: ObservableObject, StatusesFetcher {
       } else if let first = pendingStatuses.first ?? statuses.first {
         var newStatuses: [Status] = await fetchNewPages(minId: first.id, maxPages: 20)
         if userIntent || !pendingStatusesEnabled {
-          pendingStatuses.insert(contentsOf: newStatuses, at: 0)
           statuses.insert(contentsOf: pendingStatuses, at: 0)
           pendingStatuses = []
           withAnimation {
@@ -92,7 +82,10 @@ class TimelineViewModel: ObservableObject, StatusesFetcher {
             !pendingStatuses.contains(where: { $0.id == status.id })
           }
           pendingStatuses.insert(contentsOf: newStatuses, at: 0)
-          pendingStatusesState = .refresh
+          statuses.insert(contentsOf: pendingStatuses, at: 0)
+          withAnimation {
+            statusesState = .display(statuses: statuses, nextPageState: statuses.count < 20 ? .none : .hasNextPage)
+          }
         }
       }
     } catch {
@@ -153,14 +146,10 @@ class TimelineViewModel: ObservableObject, StatusesFetcher {
        !statuses.contains(where: { $0.id == event.status.id }),
        !pendingStatuses.contains(where: { $0.id == event.status.id })
     {
-      if event.status.account.id == currentAccount.account?.id, pendingStatuses.isEmpty {
-        withAnimation {
-          statuses.insert(event.status, at: 0)
-          statusesState = .display(statuses: statuses, nextPageState: .hasNextPage)
-        }
-      } else {
       pendingStatuses.insert(event.status, at: 0)
-        pendingStatusesState = .stream
+      statuses.insert(event.status, at: 0)
+      withAnimation {
+        statusesState = .display(statuses: statuses, nextPageState: .hasNextPage)
       }
     } else if let event = event as? StreamEventDelete {
       withAnimation {
@@ -175,22 +164,9 @@ class TimelineViewModel: ObservableObject, StatusesFetcher {
     }
   }
 
-  func displayPendingStatuses() {
+  func statusDidAppear(status: Status) async {
-    guard timeline == .home else { return }
+    if let index = pendingStatuses.firstIndex(of: status) {
-    pendingStatuses = pendingStatuses.filter { status in
+      pendingStatuses.remove(at: index)
-      !statuses.contains(where: { $0.id == status.id })
     }
-    statuses.insert(contentsOf: pendingStatuses, at: 0)
-    pendingStatuses = []
-    statusesState = .display(statuses: statuses, nextPageState: .hasNextPage)
-  }
-
-  func dequeuePendingStatuses() {
-    guard timeline == .home else { return }
-    if pendingStatuses.count > 1 {
-      let status = pendingStatuses.removeLast()
-      statuses.insert(status, at: 0)
-    }
-    statusesState = .display(statuses: statuses, nextPageState: .hasNextPage)
   }
 }