Feature: Tab bar scroll to top (#1598)

* - *WIP* Explore tab: Tap on tab to scroll to top.

* - Explore tab: Tap tab to scroll to top.

* - Explore: Tap tab again to focus on search bar.
- Explore: Set `.defaultMinListRowHeight` so scroll to view doesn't occupy more than 1pt height in grouped style list.
- Explore: Add padding to get Explore list view to look the same.

* - Explore: Minor adjust to padding.

* - Messages: Add tap tab to scroll to top.

* - Notifications: Add tap tab to scroll to top.

* - Profile: Add tap tab to scroll to top.

* Add `ScrollToView` that can be used across all views.

* Move scroll-to-top constants to ScrollToView.

* Format

---------

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

IceCubesApp/App/AppRegistry.swift

@@ -17,9 +17,9 @@ extension View {
     navigationDestination(for: RouterDestination.self) { destination in
       switch destination {
       case let .accountDetail(id):
-        AccountDetailView(accountId: id)
+        AccountDetailView(accountId: id, scrollToTopSignal: .constant(0))
       case let .accountDetailWithAccount(account):
-        AccountDetailView(account: account)
+        AccountDetailView(account: account, scrollToTopSignal: .constant(0))
       case let .accountSettingsWithAccount(account, appAccount):
         AccountSettingsView(account: account, appAccount: appAccount)
       case let .statusDetail(id):

IceCubesApp/App/Tabs/ExploreTab.swift

@@ -14,11 +14,12 @@ struct ExploreTab: View {
   @Environment(CurrentAccount.self) private var currentAccount
   @Environment(Client.self) private var client
   @State private var routerPath = RouterPath()
+  @State private var scrollToTopSignal: Int = 0
   @Binding var popToRootTab: Tab
 
   var body: some View {
     NavigationStack(path: $routerPath.path) {
-      ExploreView()
+      ExploreView(scrollToTopSignal: $scrollToTopSignal)
         .withAppRouter()
         .withSheetDestinations(sheetDestinations: $routerPath.presentedSheet)
         .toolbarBackground(theme.primaryBackgroundColor.opacity(0.50), for: .navigationBar)
@@ -39,9 +40,13 @@ struct ExploreTab: View {
     .environment(routerPath)
     .onChange(of: $popToRootTab.wrappedValue) { _, newValue in
       if newValue == .explore {
+        if routerPath.path.isEmpty {
+          scrollToTopSignal += 1
+        } else {
           routerPath.path = []
         }
       }
+    }
     .onChange(of: client.id) {
       routerPath.path = []
     }

IceCubesApp/App/Tabs/MessagesTab.swift

@@ -16,11 +16,12 @@ struct MessagesTab: View {
   @Environment(CurrentAccount.self) private var currentAccount
   @Environment(AppAccountsManager.self) private var appAccount
   @State private var routerPath = RouterPath()
+  @State private var scrollToTopSignal: Int = 0
   @Binding var popToRootTab: Tab
 
   var body: some View {
     NavigationStack(path: $routerPath.path) {
-      ConversationsListView()
+      ConversationsListView(scrollToTopSignal: $scrollToTopSignal)
         .withAppRouter()
         .withSheetDestinations(sheetDestinations: $routerPath.presentedSheet)
         .toolbar {
@@ -35,9 +36,13 @@ struct MessagesTab: View {
     }
     .onChange(of: $popToRootTab.wrappedValue) { _, newValue in
       if newValue == .messages {
+        if routerPath.path.isEmpty {
+          scrollToTopSignal += 1
+        } else {
           routerPath.path = []
         }
       }
+    }
     .onChange(of: client.id) {
       routerPath.path = []
     }

IceCubesApp/App/Tabs/NotificationTab.swift

@@ -20,13 +20,14 @@ struct NotificationsTab: View {
   @Environment(UserPreferences.self) private var userPreferences
   @Environment(PushNotificationsService.self) private var pushNotificationsService
   @State private var routerPath = RouterPath()
+  @State private var scrollToTopSignal: Int = 0
   @Binding var popToRootTab: Tab
 
   let lockedType: Models.Notification.NotificationType?
 
   var body: some View {
     NavigationStack(path: $routerPath.path) {
-      NotificationsListView(lockedType: lockedType)
+      NotificationsListView(lockedType: lockedType, scrollToTopSignal: $scrollToTopSignal)
         .withAppRouter()
         .withSheetDestinations(sheetDestinations: $routerPath.presentedSheet)
         .toolbar {
@@ -58,9 +59,13 @@ struct NotificationsTab: View {
     .environment(routerPath)
     .onChange(of: $popToRootTab.wrappedValue) { _, newValue in
       if newValue == .notifications {
+        if routerPath.path.isEmpty {
+          scrollToTopSignal += 1
+        } else {
           routerPath.path = []
         }
       }
+    }
     .onChange(of: pushNotificationsService.handledNotification) { _, newValue in
       if let newValue, let type = newValue.notification.supportedType {
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {

IceCubesApp/App/Tabs/ProfileTab.swift

@@ -15,27 +15,32 @@ struct ProfileTab: View {
   @Environment(Client.self) private var client
   @Environment(CurrentAccount.self) private var currentAccount
   @State private var routerPath = RouterPath()
+  @State private var scrollToTopSignal: Int = 0
   @Binding var popToRootTab: Tab
 
   var body: some View {
     NavigationStack(path: $routerPath.path) {
       if let account = currentAccount.account {
-        AccountDetailView(account: account)
+        AccountDetailView(account: account, scrollToTopSignal: $scrollToTopSignal)
           .withAppRouter()
           .withSheetDestinations(sheetDestinations: $routerPath.presentedSheet)
           .toolbarBackground(theme.primaryBackgroundColor.opacity(0.50), for: .navigationBar)
           .id(account.id)
       } else {
-        AccountDetailView(account: .placeholder())
+        AccountDetailView(account: .placeholder(), scrollToTopSignal: $scrollToTopSignal)
           .redacted(reason: .placeholder)
           .allowsHitTesting(false)
       }
     }
     .onChange(of: $popToRootTab.wrappedValue) { _, newValue in
       if newValue == .profile {
+        if routerPath.path.isEmpty {
+          scrollToTopSignal += 1
+        } else {
           routerPath.path = []
         }
       }
+    }
     .onChange(of: client.id) {
       routerPath.path = []
     }

Packages/Account/Sources/Account/AccountDetailContextMenu.swift

@@ -146,8 +146,7 @@ public struct AccountDetailContextMenu: View {
           Divider()
         }
 
-        if let lang = preferences.serverPreferences?.postLanguage ?? Locale.current.language.languageCode?.identifier
+        if let lang = preferences.serverPreferences?.postLanguage ?? Locale.current.language.languageCode?.identifier {
-        {
           Button {
             Task {
               await viewModel.translate(userLang: lang)

Packages/Account/Sources/Account/AccountDetailView.swift

@@ -30,14 +30,18 @@ public struct AccountDetailView: View {
   @State private var isEditingFilters: Bool = false
   @State private var isEditingRelationshipNote: Bool = false
 
+  @Binding var scrollToTopSignal: Int
+
   /// When coming from a URL like a mention tap in a status.
-  public init(accountId: String) {
+  public init(accountId: String, scrollToTopSignal: Binding<Int>) {
     _viewModel = .init(initialValue: .init(accountId: accountId))
+    _scrollToTopSignal = scrollToTopSignal
   }
 
   /// When the account is already fetched by the parent caller.
-  public init(account: Account) {
+  public init(account: Account, scrollToTopSignal: Binding<Int>) {
     _viewModel = .init(initialValue: .init(account: account))
+    _scrollToTopSignal = scrollToTopSignal
   }
 
   public var body: some View {
@@ -46,6 +50,7 @@ public struct AccountDetailView: View {
         makeHeaderView(proxy: proxy)
           .applyAccountDetailsRowStyle(theme: theme)
           .padding(.bottom, -20)
+          .id(ScrollToView.Constants.scrollToTop)
         familiarFollowers
           .applyAccountDetailsRowStyle(theme: theme)
         featuredTagsView
@@ -83,6 +88,11 @@ public struct AccountDetailView: View {
       .listStyle(.plain)
       .scrollContentBackground(.hidden)
       .background(theme.primaryBackgroundColor)
+      .onChange(of: scrollToTopSignal) {
+        withAnimation {
+          proxy.scrollTo(ScrollToView.Constants.scrollToTop, anchor: .top)
+        }
+      }
     }
     .onAppear {
       guard reasons != .placeholder else { return }
@@ -418,6 +428,6 @@ extension View {
 
 struct AccountDetailView_Previews: PreviewProvider {
   static var previews: some View {
-    AccountDetailView(account: .placeholder())
+    AccountDetailView(account: .placeholder(), scrollToTopSignal: .constant(0))
   }
 }

Packages/Account/Sources/Account/AccountDetailViewModel.swift

@@ -96,6 +96,8 @@ import SwiftUI
     }
   }
 
+  var scrollToTopVisible: Bool = false
+
   var translation: Translation?
   var isLoadingTranslation = false
 

Packages/AppAccount/Sources/AppAccount/AppAccountsSelectorView.swift

@@ -96,9 +96,9 @@ public struct AppAccountsSelectorView: View {
 
   private var accountBackgroundColor: Color {
     if #available(iOS 16.4, *) {
-      return Color.clear
+      Color.clear
     } else {
-      return theme.secondaryBackgroundColor
+      theme.secondaryBackgroundColor
     }
   }
 

Packages/Conversations/Sources/Conversations/List/ConversationsListView.swift

@@ -15,7 +15,11 @@ public struct ConversationsListView: View {
 
   @State private var viewModel = ConversationsListViewModel()
 
-  public init() {}
+  @Binding var scrollToTopSignal: Int
+
+  public init(scrollToTopSignal: Binding<Int>) {
+    _scrollToTopSignal = scrollToTopSignal
+  }
 
   private var conversations: Binding<[Conversation]> {
     if viewModel.isLoadingFirstPage {
@@ -26,7 +30,9 @@ public struct ConversationsListView: View {
   }
 
   public var body: some View {
+    ScrollViewReader { proxy in
       ScrollView {
+        scrollToTopView
         LazyVStack {
           Group {
             if !conversations.isEmpty || viewModel.isLoadingFirstPage {
@@ -90,6 +96,11 @@ public struct ConversationsListView: View {
           viewModel.handleEvent(event: latestEvent)
         }
       }
+      .onChange(of: scrollToTopSignal) {
+        withAnimation {
+          proxy.scrollTo(ScrollToView.Constants.scrollToTop, anchor: .top)
+        }
+      }
       .refreshable {
         // note: this Task wrapper should not be necessary, but it reportedly crashes without it
         // when refreshing on an empty list
@@ -111,3 +122,15 @@ public struct ConversationsListView: View {
       }
     }
   }
+
+  private var scrollToTopView: some View {
+    ScrollToView()
+      .frame(height: .scrollToViewHeight)
+      .onAppear {
+        viewModel.scrollToTopVisible = true
+      }
+      .onDisappear {
+        viewModel.scrollToTopVisible = false
+      }
+  }
+}

Packages/Conversations/Sources/Conversations/List/ConversationsListViewModel.swift

@@ -13,6 +13,8 @@ import SwiftUI
 
   var nextPage: LinkHandler?
 
+  var scrollToTopVisible: Bool = false
+
   public init() {}
 
   func fetchConversations() async {

Packages/DesignSystem/Sources/DesignSystem/DesignSystem.swift

@@ -4,6 +4,7 @@ import Foundation
 public extension CGFloat {
   static let layoutPadding: CGFloat = 20
   static let dividerPadding: CGFloat = 2
+  static let scrollToViewHeight: CGFloat = 1
   static let statusColumnsSpacing: CGFloat = 8
   static let secondaryColumnWidth: CGFloat = 400
   static let sidebarWidth: CGFloat = 80

Packages/DesignSystem/Sources/DesignSystem/Views/ScrollToView.swift

@@ -0,0 +1,21 @@
+import SwiftUI
+
+/// Add to any `ScrollView` or `List` to enable scroll-to behaviour (e.g. useful for scroll-to-top).
+///
+/// This view is configured such that `.onAppear` and `.onDisappear` are called while remaining invisible to users on-screen.
+public struct ScrollToView: View {
+  public enum Constants {
+    public static let scrollToTop = "top"
+  }
+
+  public init() {}
+
+  public var body: some View {
+    HStack { SwiftUI.EmptyView() }
+      .listRowBackground(Color.clear)
+      .listRowSeparator(.hidden)
+      .listRowInsets(.init())
+      .accessibilityHidden(true)
+      .id(Constants.scrollToTop)
+  }
+}

Packages/Explore/Sources/Explore/ExploreView.swift

@@ -15,12 +15,20 @@ public struct ExploreView: View {
 
   @State private var viewModel = ExploreViewModel()
 
-  public init() {}
+  @Binding var scrollToTopSignal: Int
+
+  public init(scrollToTopSignal: Binding<Int>) {
+    _scrollToTopSignal = scrollToTopSignal
+  }
 
   public var body: some View {
+    ScrollViewReader { proxy in
       List {
+        scrollToTopView
+          .padding(.bottom, 4)
         if !viewModel.isLoaded {
           quickAccessView
+            .padding(.bottom, 5)
           loadingView
         } else if !viewModel.searchQuery.isEmpty {
           if let results = viewModel.results[viewModel.searchQuery] {
@@ -51,6 +59,8 @@ public struct ExploreView: View {
             .listRowSeparator(.hidden)
         } else {
           quickAccessView
+            .padding(.bottom, 4)
+
           if !viewModel.trendingTags.isEmpty {
             trendingTagsSection
           }
@@ -65,6 +75,7 @@ public struct ExploreView: View {
           }
         }
       }
+      .environment(\.defaultMinListRowHeight, .scrollToViewHeight)
       .task {
         viewModel.client = client
         await viewModel.fetchTrending()
@@ -83,6 +94,7 @@ public struct ExploreView: View {
       .background(theme.secondaryBackgroundColor)
       .navigationTitle("explore.navigation-title")
       .searchable(text: $viewModel.searchQuery,
+                  isPresented: $viewModel.isSearchPresented,
                   placement: .navigationBarDrawer(displayMode: .always),
                   prompt: Text("explore.search.prompt"))
       .searchScopes($viewModel.searchScope) {
@@ -96,6 +108,16 @@ public struct ExploreView: View {
           await viewModel.search()
         } catch {}
       }
+      .onChange(of: scrollToTopSignal) {
+        if viewModel.scrollToTopVisible {
+          viewModel.isSearchPresented.toggle()
+        } else {
+          withAnimation {
+            proxy.scrollTo(ScrollToView.Constants.scrollToTop, anchor: .top)
+          }
+        }
+      }
+    }
   }
 
   private var quickAccessView: some View {
@@ -234,4 +256,15 @@ public struct ExploreView: View {
       .listRowBackground(theme.primaryBackgroundColor)
     }
   }
+
+  private var scrollToTopView: some View {
+    ScrollToView()
+      .frame(height: .scrollToViewHeight)
+      .onAppear {
+        viewModel.scrollToTopVisible = true
+      }
+      .onDisappear {
+        viewModel.scrollToTopVisible = false
+      }
+  }
 }

Packages/Explore/Sources/Explore/ExploreViewModel.swift

@@ -54,6 +54,8 @@ import SwiftUI
   var trendingStatuses: [Status] = []
   var trendingLinks: [Card] = []
   var searchScope: SearchScope = .all
+  var scrollToTopVisible: Bool = false
+  var isSearchPresented: Bool = false
 
   init() {}
 

Packages/Network/Sources/Network/Client.swift

@@ -83,9 +83,9 @@ import SwiftUI
       if let rootHost = host.split(separator: ".", maxSplits: 1).last {
         // Sometimes the connection is with the root host instead of a subdomain
         // eg. Mastodon runs on mastdon.domain.com but the connection is with domain.com
-        return $0.connections.contains(host) || $0.connections.contains(String(rootHost))
+        $0.connections.contains(host) || $0.connections.contains(String(rootHost))
       } else {
-        return $0.connections.contains(host)
+        $0.connections.contains(host)
       }
     }
   }

Packages/Notifications/Sources/Notifications/NotificationsListView.swift

@@ -14,21 +14,31 @@ public struct NotificationsListView: View {
   @Environment(RouterPath.self) private var routerPath
   @Environment(CurrentAccount.self) private var account
   @State private var viewModel = NotificationsViewModel()
+  @Binding var scrollToTopSignal: Int
 
   let lockedType: Models.Notification.NotificationType?
 
-  public init(lockedType: Models.Notification.NotificationType?) {
+  public init(lockedType: Models.Notification.NotificationType?, scrollToTopSignal: Binding<Int>) {
     self.lockedType = lockedType
+    _scrollToTopSignal = scrollToTopSignal
   }
 
   public var body: some View {
+    ScrollViewReader { proxy in
       List {
+        scrollToTopView
         topPaddingView
         notificationsView
       }
       .id(account.account?.id)
       .environment(\.defaultMinListRowHeight, 1)
       .listStyle(.plain)
+      .onChange(of: scrollToTopSignal) {
+        withAnimation {
+          proxy.scrollTo(ScrollToView.Constants.scrollToTop, anchor: .top)
+        }
+      }
+    }
     .toolbar {
       ToolbarItem(placement: .principal) {
         let title = lockedType?.menuTitle() ?? viewModel.selectedType?.menuTitle() ?? "notifications.navigation-title"
@@ -196,4 +206,15 @@ public struct NotificationsListView: View {
       .frame(height: .layoutPadding)
       .accessibilityHidden(true)
   }
+
+  private var scrollToTopView: some View {
+    ScrollToView()
+      .frame(height: .scrollToViewHeight)
+      .onAppear {
+        viewModel.scrollToTopVisible = true
+      }
+      .onDisappear {
+        viewModel.scrollToTopVisible = false
+      }
+  }
 }

Packages/Notifications/Sources/Notifications/NotificationsViewModel.swift

@@ -48,6 +48,8 @@ import SwiftUI
     }
   }
 
+  var scrollToTopVisible: Bool = false
+
   private var queryTypes: [String]? {
     if let selectedType {
       var excludedTypes = Models.Notification.NotificationType.allCases

Packages/Status/Sources/Status/Editor/Components/StatusEditorCompressor.swift

@@ -15,11 +15,10 @@ actor StatusEditorCompressor {
         return
       }
 
-      let maxPixelSize: Int
+      let maxPixelSize: Int = if Bundle.main.bundlePath.hasSuffix(".appex") {
-      if Bundle.main.bundlePath.hasSuffix(".appex") {
+        1536
-        maxPixelSize = 1536
       } else {
-        maxPixelSize = 4096
+        4096
       }
 
       let downsampleOptions = [

Packages/Status/Sources/Status/Editor/Components/StatusEditorUTTypeSupported.swift

@@ -188,9 +188,9 @@ private func localURLFor(received: ReceivedTransferredFile) -> URL {
 public extension URL {
   func mimeType() -> String {
     if let mimeType = UTType(filenameExtension: pathExtension)?.preferredMIMEType {
-      return mimeType
+      mimeType
     } else {
-      return "application/octet-stream"
+      "application/octet-stream"
     }
   }
 }

Packages/Status/Sources/Status/Row/Subviews/StatusRowContextMenu.swift

@@ -128,8 +128,7 @@ struct StatusRowContextMenu: View {
       Label("status.action.copy-link", systemImage: "link")
     }
 
-    if let lang = preferences.serverPreferences?.postLanguage ?? Locale.current.language.languageCode?.identifier
+    if let lang = preferences.serverPreferences?.postLanguage ?? Locale.current.language.languageCode?.identifier {
-    {
       Button {
         Task {
           await viewModel.translate(userLang: lang)

Packages/Timeline/Sources/Timeline/TimelineView.swift

@@ -9,10 +9,6 @@ import SwiftUIIntrospect
 
 @MainActor
 public struct TimelineView: View {
-  private enum Constants {
-    static let scrollToTop = "top"
-  }
-
   @Environment(\.scenePhase) private var scenePhase
   @Environment(Theme.self) private var theme
   @Environment(CurrentAccount.self) private var account
@@ -87,7 +83,7 @@ public struct TimelineView: View {
       }
       .onChange(of: scrollToTopSignal) {
         withAnimation {
-          proxy.scrollTo(Constants.scrollToTop, anchor: .top)
+          proxy.scrollTo(ScrollToView.Constants.scrollToTop, anchor: .top)
         }
       }
     }
@@ -258,18 +254,13 @@ public struct TimelineView: View {
   }
 
   private var scrollToTopView: some View {
-    HStack { EmptyView() }
+    ScrollToView()
-      .listRowBackground(theme.primaryBackgroundColor)
-      .listRowSeparator(.hidden)
-      .listRowInsets(.init())
       .frame(height: .layoutPadding)
-      .id(Constants.scrollToTop)
       .onAppear {
         viewModel.scrollToTopVisible = true
       }
       .onDisappear {
         viewModel.scrollToTopVisible = false
       }
-      .accessibilityHidden(true)
   }
 }