UI polish to MailListView and SearchView

enzevalos_iphone/SwiftUI/Inbox/MailListView.swift

@@ -15,64 +15,56 @@ struct MailListView: View {
     @Environment(\.managedObjectContext) var managedObjectContext
     var fetchRequest: FetchRequest<MailRecord>
     var mails: FetchedResults<MailRecord>{fetchRequest.wrappedValue}
+    var folderPath: String
+    var folderName: String
     
-    var folderpath: String
-    var name: String
-    
-    @State var updating = false
-    @State var showUser = false
-    @State var searchText = ""
-    @State var searchField = SearchType.All
-//    @State var searchNow = false
-    @State var composeMail = false
+    @State private var updating = false
+    @State private var showUser = false
+    @State private var searchText = ""
+    @State private var searchType = SearchType.All
+    @State private var composeMail = false
     
     init(folderpath: String, name: String) {
         fetchRequest = MailRecord.mailsInFolderFetchRequest(folderpath: folderpath)
-        self.folderpath = folderpath
-        self.name = name
+        self.folderPath = folderpath
+        self.folderName = name
     }
+    
     var body: some View {
-        mainView
-            .navigationBarTitle(name, displayMode: .inline)
-            .onAppear {
-                self.updateMails()
-            }
-            .sheet(isPresented: $composeMail) {
-                ComposeView()
+        VStack(alignment: .leading) {
+            SearchView(searchText: $searchText, searchType: $searchType).padding()
+            
+            mailList.padding(-12)
         }
+            .navigationBarTitle(folderName, displayMode: .inline)
+            .onAppear { updateMails() }
+            .sheet(isPresented: $composeMail) { ComposeView() }
+            .toolbar {
+                ToolbarItem(placement: .status) {
+                    lastUpdate
                 }
                 
-    private var mainView: some View {
-        VStack (alignment: .leading){
-            SearchView(searchText: $searchText, searchType: $searchField)
-                .padding(6)
-            mailList
-                .padding(-12)
-            // Toolbar
-            HStack {
-                Spacer()
-                self.lastUpdate
+                ToolbarItemGroup(placement: .bottomBar) {
                     Spacer()
-                self.composeButton
+                    composeButton
                 }
-            .padding(6)
             }
     }
     
     private var mailList: some View {
         List(self.mails.filter(filterKeyRecord), id: \.self) { record in
-            NavigationLink(
-                destination: ReadMainView(model: ReadModel(mail: record))) {
+            NavigationLink(destination: ReadMainView(model: ReadModel(mail: record))) {
                 MailRowView(mail: record)
             }
         }
+        .listStyle(InsetGroupedListStyle())
         .resignKeyboardOnDragGesture() // hide keyboard when dragging
     }
     
     private var composeButton: some View {
-        Button(action: {
+        Button {
             composeMail = true
-        }) {
+        } label: {
             Image(systemName: "square.and.pencil").imageScale(.large)
         }
     }
@@ -99,22 +91,20 @@ struct MailListView: View {
         guard !updating else {
             return
         }
+        
         LetterboxModel
             .instance
             .mailHandler
-            .updateFolder(folderpath: folderpath,
-                          completionCallback: { error in
+            .updateFolder(folderpath: folderPath) { error in
                 if error == nil {
                     self.updating = false
                 }
                 // TODO: Add error message
-                          })
+            }
         updating = true
     }
     
     func filterKeyRecord(keyRecord: MailRecord) -> Bool {
-//        let searchType = SearchType.findType(i: searchField)
-        let searchType = searchField
         if self.searchText.isEmpty
             || self.searchText == NSLocalizedString("Searchbar.Title", comment: "Search") {
             return true

enzevalos_iphone/SwiftUI/SupportingViews/SearchView.swift

@@ -9,70 +9,60 @@
 import SwiftUI
 import Combine
 
-/**
- Where are we looking for? Used in the search footer.
- */
-enum SearchType: LocalizedStringKey, CaseIterable {
-    case All = "All"
-    case Sender = "Sender"
-    case Subject = "Subject"
-    case Body = "Body"
-}
 /**
  A SearchView for mails with a search segmented Picker to choose the search area.
  Open Problems: Deplay the search, s.t. we do not start a search after each input.
- 
  */
 struct SearchView: View {
     @Binding var searchText: String
     @Binding var searchType: SearchType
-    @State private var showCancelButton: Bool = false
+    @State private var editingSearchField: Bool = false
     
     var body: some View {
         VStack {
             HStack {
                 searchFieldView
-                if showCancelButton {
+                if editingSearchField {
                     Button("Cancel") {
                         UIApplication.shared.endEditing(true)
-                        self.searchText = ""
-                        self.showCancelButton = false
+                        searchText = ""
                     }
-                    .foregroundColor(Color(.systemBlue))
+                    .foregroundColor(.accentColor)
                 }
             }
             
-            if showCancelButton {
+            if editingSearchField {
                 searchTypePicker
             }
         }
-        .padding(.horizontal)
     }
     
     var searchFieldView: some View {
         HStack {
             Image(systemName: "magnifyingglass")
-            TextField(NSLocalizedString("Searchbar.Title", comment: "Search"),
-                      text: $searchText) { _ in
-                self.showCancelButton = true
+            
+            TextField("Searchbar.Title", text: $searchText) { isEditing in
+                withAnimation {
+                    editingSearchField = isEditing
+                }
             }
             .foregroundColor(.primary)
             
             Button {
-                self.searchText = ""
+                searchText = ""
             } label: {
                 Image(systemName: "xmark.circle.fill")
                     .opacity(searchText == "" ? 0 : 1)
             }
         }
-        .padding(EdgeInsets(top: 8, leading: 6, bottom: 8, trailing: 6))
+        .padding(8)
         .foregroundColor(.secondary)
         .background(Color(.secondarySystemBackground))
         .cornerRadius(10.0)
     }
     
     var searchTypePicker: some View {
-        Picker("Hellooo", selection: $searchType) {
+        Picker("Search Filter", selection: $searchType) {
             ForEach(SearchType.allCases, id: \.self) { searchType in
                 Text(searchType.rawValue)
             }
@@ -108,3 +98,13 @@ extension View {
         return modifier(ResignKeyboardOnDragGesture())
     }
 }
+
+/**
+ Where are we looking for? Used in the search footer.
+ */
+enum SearchType: LocalizedStringKey, CaseIterable {
+    case All = "All"
+    case Sender = "Sender"
+    case Subject = "Subject"
+    case Body = "Body"
+}