New chat thread view
This commit changes the thread view to a new UX concept where children views of the selected view are now presented as chat bubbles, and the entire tree of conversation is shown flattened. New interactions, layout, and design changes have been introduced to revamp the user experience. Testing ------- Device: A mix of iPhone physical devices and simulator iOS: A mix of iOS 17 versions Damus: A mix of versions leading up to this one. Coverage: 1. Unit tests are passing 2. A select few users have been using prototypes versions of this as their daily driver 3. Layout tested with an eclectic mix of threads 4. Posting new notes to the thread works 5. Clicking on reply quote view takes user to the mentioned message with a momentary visible highlight 6. Swipe actions work 7. Long press on chat bubbles works and shows emoji selector. Adding emoji sends the reaction 8. Clicking on notes selects them with an easy to follow transition Known issues: 1. The text on the reply quote view occasionally appears to be off-center (in about 10% of occurrences). The cause is still unknown 2. Long press will still show the emoji keyboard even if user is on "onlyzaps" mode 3. Quoted events are not rendered on chat bubbles. When user posts a quoted event with no text, that could lead to confusion Closes: https://github.com/damus-io/damus/issues/1126 Changelog-Added: Completely new threads experience that is easier and more pleasant to use Signed-off-by: Daniel D’Aquino <daniel@daquino.me>
This commit is contained in:
Daniel D’Aquino
@@ -0,0 +1,195 @@
|
||||
//
|
||||
// ChatroomView.swift
|
||||
// damus
|
||||
//
|
||||
// Created by William Casarin on 2022-04-19.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import SwipeActions
|
||||
|
||||
struct ChatroomThreadView: View {
|
||||
@Environment(\.dismiss) var dismiss
|
||||
@State var once: Bool = false
|
||||
let damus: DamusState
|
||||
@ObservedObject var thread: ThreadModel
|
||||
@State var selected_note_id: NoteId? = nil
|
||||
@State var user_just_posted_flag: Bool = false
|
||||
@Namespace private var animation
|
||||
|
||||
@State var parent_events: [NostrEvent] = []
|
||||
@State var sorted_child_events: [NostrEvent] = []
|
||||
|
||||
func compute_events(selected_event: NostrEvent? = nil) {
|
||||
let selected_event = selected_event ?? thread.event
|
||||
self.parent_events = damus.events.parent_events(event: selected_event, keypair: damus.keypair)
|
||||
let all_recursive_child_events = self.recursive_child_events(event: selected_event)
|
||||
self.sorted_child_events = all_recursive_child_events.filter({
|
||||
should_show_event(event: $0, damus_state: damus) // Hide muted events from chatroom conversation
|
||||
}).sorted(by: { a, b in
|
||||
return a.created_at < b.created_at
|
||||
})
|
||||
}
|
||||
|
||||
func recursive_child_events(event: NdbNote) -> [NdbNote] {
|
||||
let immediate_children = damus.events.child_events(event: event)
|
||||
var indirect_children: [NdbNote] = []
|
||||
for immediate_child in immediate_children {
|
||||
indirect_children.append(contentsOf: self.recursive_child_events(event: immediate_child))
|
||||
}
|
||||
return immediate_children + indirect_children
|
||||
}
|
||||
|
||||
func go_to_event(scroller: ScrollViewProxy, note_id: NoteId) {
|
||||
scroll_to_event(scroller: scroller, id: note_id, delay: 0, animate: true, anchor: .top)
|
||||
selected_note_id = note_id
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5, execute: {
|
||||
withAnimation {
|
||||
selected_note_id = nil
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
func set_active_event(scroller: ScrollViewProxy, ev: NdbNote) {
|
||||
withAnimation {
|
||||
self.compute_events(selected_event: ev)
|
||||
thread.set_active_event(ev, keypair: self.damus.keypair)
|
||||
self.go_to_event(scroller: scroller, note_id: ev.id)
|
||||
}
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ScrollViewReader { scroller in
|
||||
ScrollView(.vertical) {
|
||||
LazyVStack(alignment: .leading, spacing: 8) {
|
||||
// MARK: - Parents events view
|
||||
ForEach(parent_events, id: \.id) { parent_event in
|
||||
EventMutingContainerView(damus_state: damus, event: parent_event) {
|
||||
EventView(damus: damus, event: parent_event)
|
||||
.matchedGeometryEffect(id: parent_event.id.hex(), in: animation, anchor: .center)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.onTapGesture {
|
||||
self.set_active_event(scroller: scroller, ev: parent_event)
|
||||
}
|
||||
.id(parent_event.id)
|
||||
|
||||
Divider()
|
||||
.padding(.top, 4)
|
||||
.padding(.leading, 25 * 2)
|
||||
|
||||
}.background(GeometryReader { geometry in
|
||||
// get the height and width of the EventView view
|
||||
let eventHeight = geometry.frame(in: .global).height
|
||||
// let eventWidth = geometry.frame(in: .global).width
|
||||
|
||||
// vertical gray line in the background
|
||||
Rectangle()
|
||||
.fill(Color.gray.opacity(0.25))
|
||||
.frame(width: 2, height: eventHeight)
|
||||
.offset(x: 40, y: 40)
|
||||
})
|
||||
|
||||
// MARK: - Actual event view
|
||||
EventMutingContainerView(
|
||||
damus_state: damus,
|
||||
event: self.thread.event,
|
||||
muteBox: { event_shown, muted_reason in
|
||||
AnyView(
|
||||
EventMutedBoxView(shown: event_shown, reason: muted_reason)
|
||||
.padding(5)
|
||||
)
|
||||
}
|
||||
) {
|
||||
SelectedEventView(damus: damus, event: self.thread.event, size: .selected)
|
||||
.matchedGeometryEffect(id: self.thread.event.id.hex(), in: animation, anchor: .center)
|
||||
}
|
||||
.id(self.thread.event.id)
|
||||
|
||||
|
||||
// MARK: - Children view
|
||||
let events = sorted_child_events
|
||||
let count = events.count
|
||||
SwipeViewGroup {
|
||||
ForEach(Array(zip(events, events.indices)), id: \.0.id) { (ev, ind) in
|
||||
ChatEventView(event: events[ind],
|
||||
selected_event: self.thread.event,
|
||||
prev_ev: ind > 0 ? events[ind-1] : nil,
|
||||
next_ev: ind == count-1 ? nil : events[ind+1],
|
||||
damus_state: damus,
|
||||
thread: thread,
|
||||
scroll_to_event: { note_id in
|
||||
self.go_to_event(scroller: scroller, note_id: note_id)
|
||||
},
|
||||
focus_event: {
|
||||
self.set_active_event(scroller: scroller, ev: ev)
|
||||
},
|
||||
highlight_bubble: selected_note_id == ev.id,
|
||||
bar: make_actionbar_model(ev: ev.id, damus: damus)
|
||||
)
|
||||
.padding(.horizontal)
|
||||
.id(ev.id)
|
||||
.matchedGeometryEffect(id: ev.id.hex(), in: animation, anchor: .center)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.top)
|
||||
EndBlock()
|
||||
}
|
||||
.onReceive(handle_notify(.post), perform: { notify in
|
||||
switch notify {
|
||||
case .post(_):
|
||||
user_just_posted_flag = true
|
||||
case .cancel:
|
||||
return
|
||||
}
|
||||
})
|
||||
.onReceive(thread.objectWillChange) {
|
||||
self.compute_events()
|
||||
if let last_event = thread.events().last, last_event.pubkey == damus.pubkey, user_just_posted_flag {
|
||||
self.go_to_event(scroller: scroller, note_id: last_event.id)
|
||||
user_just_posted_flag = false
|
||||
}
|
||||
}
|
||||
.onAppear() {
|
||||
thread.subscribe()
|
||||
self.compute_events()
|
||||
scroll_to_event(scroller: scroller, id: thread.event.id, delay: 0.1, animate: false)
|
||||
}
|
||||
.onDisappear() {
|
||||
thread.unsubscribe()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func toggle_thread_view() {
|
||||
NotificationCenter.default.post(name: .toggle_thread_view, object: nil)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
struct ChatroomView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
Group {
|
||||
ChatroomThreadView(damus: test_damus_state, thread: ThreadModel(event: test_note, damus_state: test_damus_state))
|
||||
.previewDisplayName("Test note")
|
||||
|
||||
let test_thread = ThreadModel(event: test_thread_note_1, damus_state: test_damus_state)
|
||||
ChatroomThreadView(damus: test_damus_state, thread: test_thread)
|
||||
.onAppear {
|
||||
test_thread.add_event(test_thread_note_2, keypair: test_keypair)
|
||||
test_thread.add_event(test_thread_note_3, keypair: test_keypair)
|
||||
test_thread.add_event(test_thread_note_4, keypair: test_keypair)
|
||||
test_thread.add_event(test_thread_note_5, keypair: test_keypair)
|
||||
test_thread.add_event(test_thread_note_6, keypair: test_keypair)
|
||||
test_thread.add_event(test_thread_note_7, keypair: test_keypair)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
func scroll_after_load(thread: ThreadModel, proxy: ScrollViewProxy) {
|
||||
scroll_to_event(scroller: proxy, id: thread.event.id, delay: 0.1, animate: false)
|
||||
}
|
||||
Reference in New Issue
Block a user