Further work on UI organization

1 files changed, 105 insertions, 51 deletions

diff --git a/Hotline/Views/ChatView.swift b/Hotline/Views/ChatView.swift
index e28e076..dc6e1d4 100644
--- a/Hotline/Views/ChatView.swift
+++ b/Hotline/Views/ChatView.swift
@@ -7,63 +7,117 @@ struct ChatView: View {
   @State private var scrollPos: Int?
   @State private var contentHeight: CGFloat = 0
   
+  @Namespace var bottomID
+  
   var body: some View {
-    VStack(spacing: 0) {
-      List(hotline.chatMessages) { msg in
-        HStack(alignment: .firstTextBaseline) {
-          if !msg.username.isEmpty {
-            Text("\(msg.username):").bold().fontDesign(.monospaced).font(.system(size: 12))
+    NavigationStack {
+      VStack(spacing: 0) {
+        ScrollView {
+          ScrollViewReader { reader in
+            LazyVStack(alignment: .leading) {
+              ForEach(hotline.chatMessages) { msg in
+                if msg.type == .agreement {
+                  
+                  VStack(alignment: .leading) {
+                    Text(msg.text)
+                      .padding()
+                      .opacity(0.75)
+                      .background(Color(white: 0.96))
+                      .cornerRadius(20)
+                  }
+                  .padding()
+                }
+                else {
+                  HStack(alignment: .firstTextBaseline) {
+                    if !msg.username.isEmpty {
+                      Text("\(msg.username):").bold()
+                    }
+                    Text(msg.text)
+                      .textSelection(.enabled)
+                    Spacer()
+                  }
+                  .padding()
+                }
+              }
+              Text("").id(bottomID)
+            }
+            .onChange(of: hotline.chatMessages.count) {
+              withAnimation {
+                reader.scrollTo(bottomID, anchor: .bottom)
+              }
+              print("SCROLLED TO BOTTOM")
+            }
+            .onAppear {
+              withAnimation {
+                reader.scrollTo("bottom view", anchor: .bottom)
+              }
+            }
           }
-          Text(msg.message)
-            .fontDesign(.monospaced)
-            .textSelection(.enabled)
-            .font(.system(size: 12))
         }
-        .listRowSeparator(.hidden)
+        
+        Divider()
+        
+        HStack(alignment: .top) {
+          Image(systemName: "chevron.right")
+          TextField("", text: $input, axis: .vertical)
+            .lineLimit(1...5)
+            .onSubmit {
+              hotline.sendChat(message: self.input)
+              //        HotlineClient.shared.sendChat(message: self.input)
+              self.input = ""
+            }
+        }.padding()
       }
-      .listStyle(.plain)
-      
-//      GeometryReader { geometry in
-//        ScrollView(.vertical) {
-//          ScrollViewReader { scrollReader in
-//            VStack(alignment: .leading) {
-//              Spacer()
-//              List(hotline.chatMessages) { msg in
-//                HStack(alignment: .firstTextBaseline) {
-//                  Text("\(msg.username):").bold().fontDesign(.monospaced)
-//                  Text(msg.message)
-//                    .fontDesign(.monospaced)
-//                    .textSelection(.enabled)
-//                }
-//              }
-//              .padding()
-//            }
-//            //          .frame(width: geometry.size.width)
-//            .frame(minHeight: geometry.size.height)
-////            .background(Color.red)
-//            .onAppear() {
-////              scrollReader.scrollTo("bottomScroll", anchor: .bottom)
-//            }
-//            //          .onChange() {
-//            //            scrollReader.scrollTo(10000, anchor: .bottomTrailing)
-//            //          }
-//          }
-//        }
-//      }
-      
-      Divider()
-      
-      HStack(alignment: .top) {
-        Image(systemName: "chevron.right")
-        TextField("", text: $input, axis: .vertical)
-          .lineLimit(1...5)
-          .onSubmit {
-            hotline.sendChat(message: self.input)
-            //        HotlineClient.shared.sendChat(message: self.input)
-            self.input = ""
+      .navigationBarTitleDisplayMode(.inline)
+      .toolbar {
+        ToolbarItem(placement: .principal) {
+          Text(hotline.server?.name ?? "")
+            .font(.headline)
+        }
+        ToolbarItem(placement: .navigationBarLeading) {
+          Button {
+            hotline.disconnect()
+          } label: {
+            Image(systemName: "xmark.circle.fill")
+              .symbolRenderingMode(.hierarchical)
+              .foregroundColor(.secondary)
           }
-      }.padding()
+          
+        }
+      }
+      
     }
+    
+    
+    //      GeometryReader { geometry in
+    //        ScrollView(.vertical) {
+    //          ScrollViewReader { scrollReader in
+    //            VStack(alignment: .leading) {
+    //              Spacer()
+    //              List(hotline.chatMessages) { msg in
+    //                HStack(alignment: .firstTextBaseline) {
+    //                  Text("\(msg.username):").bold().fontDesign(.monospaced)
+    //                  Text(msg.message)
+    //                    .fontDesign(.monospaced)
+    //                    .textSelection(.enabled)
+    //                }
+    //              }
+    //              .padding()
+    //            }
+    //            //          .frame(width: geometry.size.width)
+    //            .frame(minHeight: geometry.size.height)
+    ////            .background(Color.red)
+    //            .onAppear() {
+    ////              scrollReader.scrollTo("bottomScroll", anchor: .bottom)
+    //            }
+    //            //          .onChange() {
+    //            //            scrollReader.scrollTo(10000, anchor: .bottomTrailing)
+    //            //          }
+    //          }
+    //        }
+    //      }
+    
+    
   }
 }