Fix Search bar disappearing on Discover tab when scrolling

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Removed integration with Universal Name Space [#1636](https://github.com/planetary-social/nos/issues/1636)
 - Remove most usage of xcstringstool-generated strings to improve performance. [#1458](https://github.com/planetary-social/nos/issues/1458)
 - Added new authors and categories to the Discover tab. [#1592](https://github.com/planetary-social/nos/issues/1592)
+- Fix Search bar disappearing on Discover tab when scrolling. [#1679](https://github.com/planetary-social/nos/issues/1679)
 
 ### Internal Changes
 - Added code to hide users on the Discover tab with no profile metadata. [#1592](https://github.com/planetary-social/nos/issues/1592)

Nos/Assets/Colors.xcassets/search-bar-bg.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x32",
+          "green" : "0x16",
+          "red" : "0x20"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Nos/Assets/Colors.xcassets/search-bar-outer-shadow.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "0.400",
+          "blue" : "0xCE",
+          "green" : "0x64",
+          "red" : "0x6C"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

Nos/Views/Components/SearchBar.swift

@@ -3,28 +3,33 @@ import SwiftUI
 struct SearchBar: View {
     @Binding var text: String
     var isSearching: FocusState<Bool>.Binding
-
+    var placeholder = String(localized: "Search")
+
     var body: some View {
         HStack(spacing: 8) {
             HStack(spacing: 8) {
                 HStack {
                     Image(systemName: "magnifyingglass")
-                        .foregroundColor(Color(.systemGray))
-                    TextField("Search", text: $text)
-                        .font(.clarity(.regular))
+                        .foregroundColor(Color(.secondaryTxt))
+                    TextField("", text: $text)
                         .foregroundColor(.primaryTxt)
+                        .placeholder(when: $text.wrappedValue.isEmpty, placeholder: { 
+                            Text(placeholder)
+                                .foregroundStyle(Color.secondaryTxt)
+                                .lineLimit(1)
+                        })
                         .onTapGesture {
                             isSearching.wrappedValue = true // Set focus to the search bar when tapped
                         }
                         .focused(isSearching)
                         .submitLabel(.search)
                     Spacer()
                 }
-                .padding(8)
+                .padding(10)
             }
-            .background(Color.cardBgBottom)
-            .cornerRadius(8)
-            
+            .background(Color.searchBarBg)
+            .cornerRadius(10)
+
             if isSearching.wrappedValue {
                 Button(action: {
                     text = "" // Clear the search text
@@ -38,6 +43,7 @@ struct SearchBar: View {
             }
         }
         .padding(16)
+        .shadow(color: Color.searchBarOuterShadow, radius: 0, x: 0, y: 0.31)
     }
 }
 

Nos/Views/Discover/DiscoverContentsView.swift

@@ -133,7 +133,7 @@ struct DiscoverContentsView: View {
             }
             .scrollIndicators(.never)
         }
-        .background(Color.profileBgTop)
+        .background(Color.cardBgBottom)
     }
 
     var categoriesStack: some View {

Nos/Views/Discover/DiscoverTab.swift

@@ -20,58 +20,63 @@ struct DiscoverTab: View {
     @StateObject private var searchController = SearchController()
 
     @State var predicate: NSPredicate = .false
+    @FocusState private var isSearching: Bool
 
     let goToFeedTip = GoToFeedTip()
 
     // MARK: - View
 
     var body: some View {
         NosNavigationStack(path: $router.discoverPath) {
-            ZStack {
-                DiscoverContentsView(
-                    featuredAuthorCategory: .all,
-                    searchController: searchController
+            VStack {
+                SearchBar(
+                    text: $searchController.query,
+                    isSearching: $isSearching,
+                    placeholder: String(localized: "searchBar")
                 )
+                .background(Color.cardBgBottom)
+                .onSubmit {
+                    searchController.submitSearch(query: searchController.query)
+                }
+                ZStack {
+                    DiscoverContentsView(
+                        featuredAuthorCategory: .all,
+                        searchController: searchController
+                    )
+
+                    VStack {
+                        Spacer()
 
-                VStack {
-                    Spacer()
-
-                    TipView(goToFeedTip)
-                        .padding(.horizontal, 12)
-                        .padding(.bottom, 8)
-                        .readabilityPadding()
-                        .tipBackground(LinearGradient.horizontalAccentReversed)
-                        .tipViewStyle(.pointDownEmoji)
+                        TipView(goToFeedTip)
+                            .padding(.horizontal, 12)
+                            .padding(.bottom, 8)
+                            .readabilityPadding()
+                            .tipBackground(LinearGradient.horizontalAccentReversed)
+                            .tipViewStyle(.pointDownEmoji)
+                    }
                 }
-            }
-            .searchable(
-                text: $searchController.query, 
-                placement: .toolbar, 
-                prompt: Text("searchBar")
-            )
-            .autocorrectionDisabled()
-            .onSubmit(of: .search) {
-                searchController.submitSearch(query: searchController.query)
-            }
-            .background(Color.appBg)
-            .animation(.easeInOut, value: columns)
-            .onAppear {
-                if router.selectedTab == .discover {
-                    isVisible = true
+                .background(Color.appBg)
+                .animation(.easeInOut, value: columns)
+                .onAppear {
+                    if router.selectedTab == .discover {
+                        isVisible = true
+                    }
                 }
-            }
-            .onDisappear {
-                isVisible = false
-            }
-            .onChange(of: isVisible) {
-                if isVisible {
-                    analytics.showedDiscover()
+                .onDisappear {
+                    isVisible = false
+                }
+                .onChange(of: isVisible) {
+                    if isVisible {
+                        analytics.showedDiscover()
+                    }
                 }
+                .nosNavigationBar("discover")
+                .toolbarBackground(.visible, for: .navigationBar)
+                .toolbarBackground(Color.cardBgBottom, for: .navigationBar)
+                .navigationBarItems(leading: SideMenuButton())
             }
-            .nosNavigationBar("discover")
-            .toolbarBackground(.visible, for: .navigationBar)
-            .toolbarBackground(Color.cardBgBottom, for: .navigationBar)
-            .navigationBarItems(leading: SideMenuButton())
+            // This makes the white line change to the background color instead
+            .padding(.top, 1)
         }
     }
 }

Nos/Views/Modifiers/TextField+PlaceHolderStyle.swift

@@ -4,19 +4,23 @@ import SwiftUI
 /// - Parameters:
 ///   - show: A Boolean indicating whether to show the placeholder.
 ///   - placeholder: The text to display as the placeholder.
+///   - placeholderColor: The color of the placeholder.
+///   - font: The font type of the placeholder.
 struct PlaceholderStyle: ViewModifier {
     var show: Bool
     var placeholder: String
+    var placeholderColor: Color = .actionSheetTextfieldPlaceholder
+    var font: Font = .headline
 
     /// Displays the placeholder text if `show` is true, overlaying it
     /// on the content view.
     func body(content: Content) -> some View {
         ZStack(alignment: .leading) {
             if show {
                 Text(placeholder)
-                    .foregroundColor(Color.actionSheetTextfieldPlaceholder)
+                    .foregroundColor(placeholderColor)
                     .padding(.leading, 9)
-                    .font(.headline)
+                    .font(font)
                     .fontWeight(.bold)
             }
             content