Page MenuHomePhabricator

[Spike] Investigate different UI options for Timeline module
Closed, ResolvedPublic1 Estimated Story Points

Description

In order to use the default system swipe actions, I believe we need to use a SwiftUI List element. Activity tab (as it stands today) is already wrapped up in a ScrollView. This could lead to scrollview-within-a-scrollview situations (because List already scrolls). This task is to explore different approaches and see which one works the best for us. I have added what I think are downsides / cons before each section, but this investigation is to confirm if those are founded.

Timebox: 1 day

List embedded within ScrollView
Cons: Probably would be a scrollview-within-a-scrollview so might feel weird when scrolling down and/or cause performance issues (i.e. might cause List to lay out it's entire 1,000 item views since it is inside of a ScrollView)

ScrollView {
     Username/Time module {}
     ReadingModule {}
     SavedModule {}
     CategoriesModule {}
     List {
          (Timeline items w/ swipe actions here)
     }
}

Entire tab is a list, with modules embedded in their own first section
Cons: Not sure if we can have certain list items without swipe actions and some with.

List {
     Section() {
         Username/Time module {} (no swipe actions)
         ReadingModule {} (no swipe actions)
         SavedModule {} (no swipe actions)
         CategoriesModule {} (no swipe actions)
     }

     Section(header: {Text("Today")} {
          Timeline Item 1 (with swipe actions)
          Timeline Item 2 (with swipe actions)
     }
     
     Section(header: {Text("Yesterday")} {
          Timeline Item 1 (with swipe actions)
          Timeline Item 2 (with swipe actions)
     }
}

Entire tab is a list, with all initial modules + first timeline section embedded in the first section header
Cons: Weird and non-performant to have such a massive section header, and it will only grow larger with the addition future of editing modules.

List {
     Section(header: { VStack { Username/Time module, ReadingModule, SavedModule, CategoriesModule, Text("Today") } }) {
          Timeline Item 1 (with swipe actions)
          Timeline Item 2 (with swipe actions)
     }

     Section(header: {Text("Yesterday")} {
          Timeline Item 1 (with swipe actions)
          Timeline Item 2 (with swipe actions)
     }
}

Use a simple ScrollView with a LazyVStack
Cons: I think we'd lose default system swipe actions here.

ScrollView {
    LazyVStack {
        Username/Time module {}
        ReadingModule {}
        SavedModule {}
        CategoriesModule {}
        Text("Today")
        Timeline Item 1
        Timeline Item 2
        Text("Yesterday")
        Timeline Item 1
        Timeline Item 2
    }
}

Event Timeline

prototype/activity_tab_history branch for information

Details:

  • Can put the entire body in a List element
  • Will need to create TimelineItem (like history item)
  • Will need to use context menu and preview