refactor(ModelSelectionView): improve UI and logic for model selection

Author: purr100

Chato/Views/ChatSetting/ModelSelectionView.swift

@@ -1,20 +1,20 @@
 // Created for Chato in 2025
 
-import os
 import SwiftData
 import SwiftUI
+import os
 
 struct ModelSelectionView: View {
   @Environment(\.dismiss) private var dismiss
-  
+
   @Query(filter: #Predicate<Provider> { $0.enabled }) private var providers: [Provider]
   @Query private var allModels: [ModelEntity]
-  
+
   @Bindable var chatOption: ChatOption
   @State private var searchText = ""
   @State private var expandedProviders: Set<PersistentIdentifier> = []
   @State private var favoritesExpanded = true
-  
+
   var body: some View {
     ModelSelectionContent(
       chatOption: chatOption,
@@ -36,17 +36,17 @@ struct ModelSelectionContent: View {
   @Binding var expandedProviders: Set<PersistentIdentifier>
   @Binding var favoritesExpanded: Bool
   let dismiss: DismissAction
-  
+
   private func favoritedModels() -> [ModelEntity] {
     let filtered = allModels.filter { $0.favorited }
     let sorted = ModelEntity.smartSort(filtered)
     return sorted
   }
-  
+
   private func searchKeywords() -> [String] {
     return parseSearchText(searchText)
   }
-  
+
   private var filteredModels: [ModelEntity] {
     let keywords = searchKeywords()
     if keywords.isEmpty {
@@ -59,24 +59,24 @@ struct ModelSelectionContent: View {
     }
     return filtered
   }
-  
+
   private func parseSearchText(_ text: String) -> [String] {
     let separators = CharacterSet(charactersIn: " ,")
     let keywords = text.components(separatedBy: separators)
       .map { $0.trimmingCharacters(in: .whitespaces) }
       .filter { !$0.isEmpty }
     return keywords
   }
-  
+
   private func matchesKeywords(text: String, keywords: [String]) -> Bool {
     guard !keywords.isEmpty else { return true }
-    
+
     let lowercasedText = text.lowercased()
     return keywords.contains { keyword in
       lowercasedText.contains(keyword.lowercased())
     }
   }
-  
+
   private var groupedProviders: [(provider: Provider, models: [ModelEntity])] {
     let modelsToGroup: [ModelEntity]
     if searchText.isEmpty {
@@ -86,7 +86,7 @@ struct ModelSelectionContent: View {
     }
     return modelsToGroup.groupedByProvider()
   }
-  
+
   var body: some View {
     ScrollViewReader { proxy in
       List {
@@ -110,7 +110,7 @@ struct ModelSelectionContent: View {
       }
     }
   }
-  
+
   @ViewBuilder
   private var favoritesSection: some View {
     let favorited = favoritedModels()
@@ -130,20 +130,21 @@ struct ModelSelectionContent: View {
           .id(model.id)
         }
       } label: {
-        Label("Favorites", systemImage: "star.fill")
-          .foregroundColor(.yellow)
+        Text("Favorites").font(.headline)
       }
+      .tint(.secondary)
     }
   }
-  
+
   @ViewBuilder
   private var providerSections: some View {
     ForEach(groupedProviders, id: \.provider.id) { group in
       providerSection(for: group)
     }
   }
-  
-  private func providerSection(for group: (provider: Provider, models: [ModelEntity])) -> some View {
+
+  private func providerSection(for group: (provider: Provider, models: [ModelEntity])) -> some View
+  {
     DisclosureGroup(
       isExpanded: providerBinding(for: group.provider.id)
     ) {
@@ -160,13 +161,13 @@ struct ModelSelectionContent: View {
       }
     } label: {
       HStack {
-        Image(systemName: group.provider.iconName)
         Text(group.provider.displayName)
+          .font(.headline)
       }
     }
     .tint(.secondary)
   }
-  
+
   private func providerBinding(for providerId: PersistentIdentifier) -> Binding<Bool> {
     Binding(
       get: { expandedProviders.contains(providerId) },
@@ -179,18 +180,18 @@ struct ModelSelectionContent: View {
       }
     )
   }
-  
+
   @ViewBuilder
   private var emptyStateViews: some View {
     if !searchText.isEmpty && filteredModels.isEmpty {
       ContentUnavailableView.search
     }
-    
+
     if providers.isEmpty && allModels.isEmpty {
       noModelsView
     }
   }
-  
+
   private var noModelsView: some View {
     ContentUnavailableView {
       Label("No Models Available", systemImage: "cube.box")
@@ -203,14 +204,15 @@ struct ModelSelectionContent: View {
       .buttonStyle(.borderedProminent)
     }
   }
-  
+
   private func expandInitialSections() {
     guard expandedProviders.isEmpty else { return }
-    
+
     // Check if selected model exists and is not in favorites
     let favorited = favoritedModels()
     if let selectedModel = chatOption.model,
-       !favorited.contains(where: { $0.id == selectedModel.id }) {
+      !favorited.contains(where: { $0.id == selectedModel.id })
+    {
       // Find and expand only the provider containing the selected model
       if let providerGroup = groupedProviders.first(where: { group in
         group.models.contains(where: { $0.id == selectedModel.id })
@@ -220,17 +222,17 @@ struct ModelSelectionContent: View {
     }
     // Otherwise, all providers remain collapsed (only favorites is expanded)
   }
-  
+
   private func scrollToSelectedModel(proxy: ScrollViewProxy) {
     guard let selectedModel = chatOption.model else { return }
-    
+
     DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
       withAnimation {
         proxy.scrollTo(selectedModel.id, anchor: .center)
       }
     }
   }
-  
+
   private func selectModel(_ model: ModelEntity) {
     chatOption.model = model
   }
@@ -242,7 +244,7 @@ struct ModelSelectionRow: View {
   let showProvider: Bool
   let searchKeywords: [String]
   let action: () -> Void
-  
+
   var body: some View {
     HStack(spacing: 12) {
       Button(action: action) {
@@ -254,39 +256,38 @@ struct ModelSelectionRow: View {
             )
             .font(.body)
             .foregroundColor(.primary)
-            
+
             HStack(spacing: 8) {
               if showProvider {
                 Label(model.provider.displayName, systemImage: model.provider.iconName)
                   .font(.caption)
                   .foregroundColor(.secondary)
               }
-              
+
               if model.isCustom {
                 Label("Custom", systemImage: "wrench")
                   .font(.caption2)
                   .foregroundColor(.blue)
               }
-              
+
               if let contextLength = model.contextLength {
                 Text("\(contextLength)k")
                   .font(.caption)
                   .foregroundColor(.secondary)
               }
             }
           }
-          
+
           Spacer()
-          
+
           if isSelected {
             Image(systemName: "checkmark")
-              .foregroundColor(.accentColor)
           }
         }
         .contentShape(Rectangle())
       }
       .buttonStyle(.plain)
-      
+
       Button {
         withAnimation {
           model.favorited.toggle()
@@ -303,33 +304,34 @@ struct ModelSelectionRow: View {
 struct HighlightedText: View {
   let text: String
   let keywords: [String]
-  
+
   var body: some View {
     if keywords.isEmpty {
       Text(text)
     } else {
       Text(attributedString)
     }
   }
-  
+
   private var attributedString: AttributedString {
     var attributed = AttributedString(text)
-    
+
     let lowercasedText = text.lowercased()
-    
+
     for keyword in keywords {
       let lowercasedKeyword = keyword.lowercased()
       var searchRange = lowercasedText.startIndex..<lowercasedText.endIndex
-      
-      while let range = lowercasedText.range(of: lowercasedKeyword, options: [], range: searchRange) {
+
+      while let range = lowercasedText.range(of: lowercasedKeyword, options: [], range: searchRange)
+      {
         if let attributedRange = Range(range, in: attributed) {
           attributed[attributedRange].backgroundColor = .yellow.opacity(0.3)
           attributed[attributedRange].font = .body.bold()
         }
         searchRange = range.upperBound..<lowercasedText.endIndex
       }
     }
-    
+
     return attributed
   }
 }