replace searchable with a custom search bar

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

@@ -26,16 +26,16 @@ private let enableGrid = UIDevice.isIPad || FeatureFlag.enableGridCardsOnPhone
         .refreshable {
           loadItems(isRefresh: true)
         }
-        .searchable(
-          text: $viewModel.searchTerm
-        ) {
-          if viewModel.searchTerm.isEmpty {
-            Text("Inbox").searchCompletion("in:inbox ")
-            Text("All").searchCompletion("in:all ")
-            Text("Archived").searchCompletion("in:archive ")
-            Text("Files").searchCompletion("type:file ")
-          }
-        }
+//        .searchable(
+//          text: $viewModel.searchTerm
+//        ) {
+//          if viewModel.searchTerm.isEmpty {
+//            Text("Inbox").searchCompletion("in:inbox ")
+//            Text("All").searchCompletion("in:all ")
+//            Text("Archived").searchCompletion("in:archive ")
+//            Text("Files").searchCompletion("type:file ")
+//          }
+//        }
         .onChange(of: viewModel.searchTerm) { _ in
           // Maybe we should debounce this, but
           // it feels like it works ok without
@@ -44,9 +44,6 @@ private let enableGrid = UIDevice.isIPad || FeatureFlag.enableGridCardsOnPhone
         .onChange(of: viewModel.selectedLabels) { _ in
           loadItems(isRefresh: true)
         }
-        .onSubmit(of: .search) {
-          loadItems(isRefresh: true)
-        }
         .sheet(item: $viewModel.itemUnderLabelEdit) { item in
           ApplyLabelsView(mode: .item(item), onSave: nil)
         }
@@ -131,10 +128,13 @@ 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)
+          .padding(.bottom)
         ZStack(alignment: .bottom) {
           ScrollView(.horizontal, showsIndicators: false) {
             HStack {

apple/OmnivoreKit/Sources/Views/SearchBar.swift

@@ -0,0 +1,40 @@
+import SwiftUI
+
+public struct SearchBar: View {
+  @Binding var searchTerm: String
+  @Binding var isSearching: Bool
+
+  public init(
+    searchTerm: Binding<String>,
+    isSearching: Binding<Bool>
+  ) {
+    self._searchTerm = searchTerm
+    self._isSearching = isSearching
+  }
+
+  public var body: some View {
+    HStack(spacing: 0) {
+      TextField("Search", text: $searchTerm)
+        .padding(.vertical, 8)
+        .padding(.horizontal, 8)
+        .background(Color(.systemGray6))
+        .cornerRadius(8)
+        .padding(.horizontal, 10)
+        .onTapGesture {
+          self.isSearching = true
+        }
+
+      if isSearching {
+        Button(
+          action: {
+            self.isSearching = false
+            self.searchTerm = ""
+          },
+          label: { Text("Cancel") }
+        )
+        .padding(.trailing)
+        .transition(.move(edge: .trailing))
+      }
+    }
+  }
+}