Add search overlays for cancel and the mag. glass

apple/OmnivoreKit/Sources/App/Views/Home/HomeFeedViewIOS.swift

@@ -121,12 +121,11 @@ private let enableGrid = UIDevice.isIPad || FeatureFlag.enableGridCardsOnPhone
     @EnvironmentObject var dataService: DataService
     @Binding var prefersListLayout: Bool
     @State private var showLabelsSheet = false
-    @State private var isSearching = false
     @ObservedObject var viewModel: HomeFeedViewModel
 
     var body: some View {
       VStack(spacing: 0) {
-        SearchBar(searchTerm: $viewModel.searchTerm, isSearching: $isSearching)
+        SearchBar(searchTerm: $viewModel.searchTerm)
 
         ZStack(alignment: .bottom) {
           ScrollView(.horizontal, showsIndicators: false) {

apple/OmnivoreKit/Sources/Views/SearchBar.swift

@@ -2,39 +2,52 @@ import SwiftUI
 
 public struct SearchBar: View {
   @Binding var searchTerm: String
-  @Binding var isSearching: Bool
+  @FocusState private var isFocused: Bool
 
   public init(
-    searchTerm: Binding<String>,
-    isSearching: Binding<Bool>
+    searchTerm: Binding<String>
   ) {
     self._searchTerm = searchTerm
-    self._isSearching = isSearching
   }
 
   public var body: some View {
     HStack(spacing: 0) {
       TextField("Search", text: $searchTerm)
-        .padding(.vertical, 8)
-        .padding(.horizontal, 8)
+        .padding(7)
+        .padding(.horizontal, 25)
         .background(Color(.systemGray6))
         .cornerRadius(8)
-        .padding(.horizontal, 10)
-        .onTapGesture {
-          self.isSearching = true
-        }
+        .focused($isFocused)
+        .overlay(
+          HStack {
+            Image(systemName: "magnifyingglass")
+              .foregroundColor(.gray)
+              .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
+              .padding(.leading, 10)
 
-      if isSearching {
-        Button(
-          action: {
-            self.isSearching = false
-            self.searchTerm = ""
-            self.hideKeyboard()
-          },
-          label: { Image(systemName: "xmark.circle").foregroundColor(.appGrayTextContrast) }
+            if self.searchTerm != "" {
+              Button(action: {
+                self.searchTerm = ""
+                self.isFocused = false
+              }) {
+                Image(systemName: "multiply.circle.fill")
+                  .foregroundColor(.gray)
+                  .padding(.trailing, 8)
+              }
+            }
+          }
         )
-        .padding(.trailing)
-        .transition(.opacity)
+        .padding(.horizontal, 10)
+
+      if isFocused {
+        Button(action: {
+          self.isFocused = false
+          self.searchTerm = ""
+        }) {
+          Text("Cancel")
+        }
+        .padding(.trailing, 10)
+        .transition(.move(edge: .trailing))
       }
     }
   }