How to implement search filters in SwiftUI

import SwiftUI

// MARK: - Models

enum ArticleCategory: String, CaseIterable, Identifiable {
    case all = "All"
    case design = "Design"
    case code = "Code"
    case marketing = "Marketing"
    var id: String { rawValue }
}

enum SortOrder: String, CaseIterable, Identifiable {
    case newest = "Newest First"
    case oldest = "Oldest First"
    case title  = "Title A–Z"
    var id: String { rawValue }
}

struct Article: Identifiable {
    let id = UUID()
    let title: String
    let category: ArticleCategory
    let date: Date
}

// MARK: - View

struct ArticleListView: View {
    // Sample data
    private let articles: [Article] = [
        Article(title: "Building design systems", category: .design,    date: .now.addingTimeInterval(-86400 * 2)),
        Article(title: "SwiftUI performance tips", category: .code,     date: .now.addingTimeInterval(-86400 * 5)),
        Article(title: "Growth hacking 101",       category: .marketing,date: .now.addingTimeInterval(-86400 * 1)),
        Article(title: "Color theory for devs",    category: .design,   date: .now.addingTimeInterval(-86400 * 8)),
        Article(title: "Async/Await patterns",     category: .code,     date: .now.addingTimeInterval(-86400 * 3)),
        Article(title: "App Store screenshots",    category: .marketing,date: .now.addingTimeInterval(-86400 * 4)),
        Article(title: "Typography basics",        category: .design,   date: .now.addingTimeInterval(-86400 * 6)),
        Article(title: "Combine vs async streams", category: .code,     date: .now.addingTimeInterval(-86400 * 7)),
    ]

    @State private var searchQuery    = ""
    @State private var activeCategory = ArticleCategory.all
    @State private var sortOrder      = SortOrder.newest

    // Computed filtered + sorted results
    private var filteredArticles: [Article] {
        let categoryFiltered = articles.filter {
            activeCategory == .all || $0.category == activeCategory
        }
        let queryFiltered = categoryFiltered.filter {
            searchQuery.isEmpty || $0.title.localizedStandardContains(searchQuery)
        }
        return queryFiltered.sorted {
            switch sortOrder {
            case .newest: return $0.date > $1.date
            case .oldest: return $0.date < $1.date
            case .title:  return $0.title < $1.title
            }
        }
    }

    var body: some View {
        NavigationStack {
            Group {
                if filteredArticles.isEmpty {
                    ContentUnavailableView.search(text: searchQuery)
                } else {
                    List(filteredArticles) { article in
                        ArticleRow(article: article)
                    }
                    .listStyle(.plain)
                }
            }
            .navigationTitle("Articles")
            .searchable(text: $searchQuery, prompt: "Search articles")
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    filterMenu
                }
            }
        }
    }

    // MARK: Filter Menu
    private var filterMenu: some View {
        Menu {
            // Category filter
            Section("Category") {
                Picker("Category", selection: $activeCategory) {
                    ForEach(ArticleCategory.allCases) { cat in
                        Label(cat.rawValue,
                              systemImage: activeCategory == cat ? "checkmark" : "")
                            .tag(cat)
                    }
                }
                .pickerStyle(.inline)
            }

            // Sort order
            Section("Sort") {
                Picker("Sort order", selection: $sortOrder) {
                    ForEach(SortOrder.allCases) { order in
                        Text(order.rawValue).tag(order)
                    }
                }
                .pickerStyle(.inline)
            }
        } label: {
            Label("Filter", systemImage: "line.3.horizontal.decrease.circle")
                .symbolVariant(activeCategory != .all ? .fill : .none)
                .accessibilityLabel(
                    activeCategory == .all
                        ? "Filter articles"
                        : "Filter articles — \(activeCategory.rawValue) active"
                )
        }
    }
}

// MARK: - Row

struct ArticleRow: View {
    let article: Article
    private static let formatter = RelativeDateTimeFormatter()

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(article.title)
                .font(.body)
            HStack(spacing: 6) {
                Text(article.category.rawValue)
                    .font(.caption)
                    .padding(.horizontal, 8)
                    .padding(.vertical, 2)
                    .background(.tint.opacity(0.12))
                    .foregroundStyle(.tint)
                    .clipShape(Capsule())
                Text(Self.formatter.localizedString(for: article.date, relativeTo: .now))
                    .font(.caption)
                    .foregroundStyle(.secondary)
            }
        }
        .padding(.vertical, 4)
        .accessibilityElement(children: .combine)
    }
}

// MARK: - Preview

#Preview {
    ArticleListView()
}