custom search

apps/ios/Shared/Views/ChatList/ChatListView.swift

@@ -63,7 +63,8 @@ struct ChatListView: View {
 
     private var chatListView: some View {
         VStack {
-            chatList.searchable(text: $searchText)
+//            chatList.searchable(text: $searchText)
+            chatList
         }
         .onDisappear() { withAnimation { userPickerVisible = false } }
         .refreshable {
@@ -82,7 +83,7 @@ struct ChatListView: View {
                 secondaryButton: .cancel()
             ))
         }
-        .offset(x: -8)
+//        .offset(x: -8)
         .listStyle(.plain)
         .navigationBarTitleDisplayMode(.inline)
         .sheet(isPresented: $showCreateGroupSheet) {
@@ -160,12 +161,20 @@ struct ChatListView: View {
     @ViewBuilder private var chatList: some View {
         let cs = filteredChats()
         ZStack {
-            List {
+            VStack {
-                ForEach(cs, id: \.viewId) { chat in
+                if !chatModel.chats.isEmpty {
-                    ChatListNavLink(chat: chat)
+                    ChatListSearchBar(text: $searchText)
-                        .padding(.trailing, -16)
+                        .listRowSeparator(.hidden, edges: .top)
-                        .disabled(chatModel.chatRunning != true)
+                        .frame(maxWidth: .infinity)
                 }
+                List {
+                    ForEach(cs, id: \.viewId) { chat in
+                        ChatListNavLink(chat: chat)
+                            .padding(.trailing, -16)
+                            .disabled(chatModel.chatRunning != true)
+                    }
+                }
+                .offset(x: -8)
             }
             .onChange(of: chatModel.chatId) { _ in
                 if chatModel.chatId == nil, let chatId = chatModel.chatToTop {
@@ -265,6 +274,64 @@ struct ChatListView: View {
     }
 }
 
+struct ChatListSearchBar: View {
+    @Binding var text: String
+    @State private var showCancelButton = false
+    @State private var showScanCodeSheet = false
+
+    var body: some View {
+        VStack {
+            HStack(spacing: 8) {
+                HStack(spacing: 4) {
+                    Image(systemName: "magnifyingglass")
+                        .foregroundColor(.secondary)
+                    TextField("Search", text: $text)
+                        .onTapGesture {
+                            showCancelButton = true
+                        }
+                }
+                .padding(.horizontal, 7)
+                .padding(.vertical, 7)
+                .background(Color(uiColor: .secondarySystemFill))
+                .clipShape(RoundedRectangle(cornerRadius: 10))
+
+                if showCancelButton {
+                    Button {
+                        hideKeyboard()
+                        text = ""
+                        showCancelButton = false
+                    } label: {
+                        Text("Cancel")
+                            .foregroundColor(.accentColor)
+                    }
+                    .padding(.trailing, 8)
+                    .transition(.identity)
+                }
+
+                scanCodeButton()
+            }
+            Divider()
+        }
+        .padding(.horizontal, 18)
+        .padding(.vertical, 2)
+    }
+
+    private func scanCodeButton() -> some View {
+        Button {
+            showScanCodeSheet = true
+        } label: {
+            Image(systemName: "qrcode")
+                .resizable()
+                .scaledToFit()
+                .foregroundColor(.accentColor)
+                .frame(width: 20, height: 20)
+        }
+        .sheet(isPresented: $showScanCodeSheet) {
+            NewChatView(selection: .connect, showScanQRCodeSheet: true)
+        }
+    }
+}
+
 func chatStoppedIcon() -> some View {
     Button {
         AlertManager.shared.showAlertMsg(

apps/ios/Shared/Views/NewChat/NewChatView.swift

@@ -20,8 +20,9 @@ enum NewChatOption: Identifiable {
 struct NewChatView: View {
     @EnvironmentObject var m: ChatModel
     @State var selection: NewChatOption
-    @State var connReqInvitation: String
+    @State var showScanQRCodeSheet = false
-    @State var contactConnection: PendingContactConnection?
+    @State var connReqInvitation: String = ""
+    @State var contactConnection: PendingContactConnection? = nil
     @State private var creatingConnReq = false
 
     var body: some View {
@@ -46,14 +47,14 @@ struct NewChatView: View {
                     contactConnection: $contactConnection,
                     connReqInvitation: connReqInvitation
                 )
-                case .connect: ConnectView()
+                case .connect: ConnectView(showScanQRCodeSheet: showScanQRCodeSheet)
                 }
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
             .padding()
             .background(Color(.systemGroupedBackground))
             .onChange(of: selection) { sel in
-                if case .connect = sel,
+                if case .invite = sel,
                    connReqInvitation == "" && contactConnection == nil && !creatingConnReq {
                     createInvitation()
                 }
@@ -156,25 +157,34 @@ struct InviteView: View {
                         .frame(maxWidth: .infinity, alignment: .center)
                         .padding(.top)
                     } else {
-                        Text("Creating link…")
+                        VStack(alignment: .center, spacing: 4) {
-                            .textCase(.uppercase)
-                            .font(.footnote)
-                            .foregroundColor(.secondary)
-                            .padding(.horizontal)
-
-                        VStack(alignment: .center) {
                             ProgressView()
                                 .progressViewStyle(.circular)
-                                .scaleEffect(2)
+                            Text("Creating link…")
-                                .frame(maxWidth: .infinity)
+                                .foregroundColor(.secondary)
-                                .padding(.horizontal)
-                                .padding(.vertical, 8)
                         }
                         .frame(maxWidth: .infinity, alignment: .center)
-                        .background(
+                        .padding(.top)
-                            RoundedRectangle(cornerRadius: 12, style: .continuous)
+
-                                .fill(Color(uiColor: .systemBackground))
+//                        Text("Creating link…")
-                        )
+//                            .textCase(.uppercase)
+//                            .font(.footnote)
+//                            .foregroundColor(.secondary)
+//                            .padding(.horizontal)
+//
+//                        VStack(alignment: .center) {
+//                            ProgressView()
+//                                .progressViewStyle(.circular)
+//                                .scaleEffect(2)
+//                                .frame(maxWidth: .infinity)
+//                                .padding(.horizontal)
+//                                .padding(.vertical, 14)
+//                        }
+//                        .frame(maxWidth: .infinity, alignment: .center)
+//                        .background(
+//                            RoundedRectangle(cornerRadius: 12, style: .continuous)
+//                                .fill(Color(uiColor: .systemBackground))
+//                        )
                     }
                 }
             }
@@ -205,10 +215,10 @@ struct InviteView: View {
 
 struct ConnectView: View {
     @Environment(\.dismiss) var dismiss: DismissAction
+    @State var showScanQRCodeSheet = false
     @State private var connectionLink: String = ""
     @State private var alert: PlanAndConnectAlert?
     @State private var sheet: PlanAndConnectActionSheet?
-    @State private var showScanQRCodeSheet = false
     @State private var scannedLink: String = ""
 
     var body: some View {