Search string is emphasized (bold) in UI (#812)

- RankingList now defers rendering LibraryComparable.name to a closure
- ArtistList and VenueList will render their names emphasizing the
searchString in the UI.

Sources/Site/Music/UI/ArtistList.swift

@@ -19,7 +19,8 @@ struct ArtistList: View {
       items: digests, sectioner: sectioner,
       title: String(localized: "Artists", bundle: .module),
       associatedRankName: String(localized: "Sort By Venue Count", bundle: .module),
-      associatedRankSectionHeader: { $0.venuesCountView }, sort: $sort
+      associatedRankSectionHeader: { $0.venuesCountView },
+      itemLabelView: { Text($0.name.emphasizedAttributed(matching: searchString)) }, sort: $sort
     )
     .archiveSearchable(
       searchPrompt: String(localized: "Artist Names", bundle: .module),

Sources/Site/Music/UI/RankableSortList.swift

@@ -7,12 +7,14 @@
 
 import SwiftUI
 
-struct RankableSortList<T, SectionHeaderContent: View>: View where T: Rankable, T.ID == String {
+struct RankableSortList<T, SectionHeaderContent: View, LabelContent: View>: View
+where T: Rankable, T.ID == String {
   let items: [T]
   let sectioner: LibrarySectioner
   let title: String
   let associatedRankName: String
   @ViewBuilder let associatedRankSectionHeader: (Ranking) -> SectionHeaderContent
+  @ViewBuilder let itemLabelView: ((T) -> LabelContent)
 
   @Binding var sort: RankingSort
 
@@ -26,14 +28,14 @@ struct RankableSortList<T, SectionHeaderContent: View>: View where T: Rankable,
         items: items,
         rankingMapBuilder: { sectioner.sectionMap(for: $0) },
         itemContentView: { showCount(for: $0) },
-        sectionHeaderView: { $0.representingView })
+        sectionHeaderView: { $0.representingView }, itemLabelView: itemLabelView)
     } else if sort.isFirstSeen {
       RankingList(
         items: items,
         rankingMapBuilder: { $0.firstSeen },
         rankSorted: PartialDate.compareWithUnknownsMuted(lhs:rhs:),
         itemContentView: { Text($0.firstSet.rank.formatted(.hash)) },
-        sectionHeaderView: { Text($0.formatted(.compact)) })
+        sectionHeaderView: { Text($0.formatted(.compact)) }, itemLabelView: itemLabelView)
     } else {
       RankingList(
         items: items,
@@ -46,7 +48,7 @@ struct RankableSortList<T, SectionHeaderContent: View>: View where T: Rankable,
           default:
             $0.sectionHeader(for: sort)
           }
-        })
+        }, itemLabelView: itemLabelView)
     }
   }
 
@@ -69,7 +71,8 @@ struct RankableSortList<T, SectionHeaderContent: View>: View where T: Rankable,
     RankableSortList(
       items: vaultPreviewData.venueDigests, sectioner: vaultPreviewData.sectioner,
       title: "Venues", associatedRankName: "Sort By Artist Count",
-      associatedRankSectionHeader: { $0.artistsCountView }, sort: .constant(.alphabetical)
+      associatedRankSectionHeader: { $0.artistsCountView }, itemLabelView: { Text($0.name) },
+      sort: .constant(.alphabetical)
     )
     .musicDestinations(vaultPreviewData)
   }

Sources/Site/Music/UI/RankingList.swift

@@ -7,13 +7,14 @@
 
 import SwiftUI
 
-struct RankingList<T, R, ItemContent: View, SectionHeader: View>: View
+struct RankingList<T, R, ItemContent: View, SectionHeader: View, LabelContent: View>: View
 where T: LibraryComparable, T: Hashable, T: PathRestorable, R: Comparable, R: Hashable {
   let items: [T]
   let rankingMapBuilder: ([T]) -> [R: [T]]
   var rankSorted: ((R, R) -> Bool)?
   @ViewBuilder let itemContentView: (T) -> ItemContent
   @ViewBuilder let sectionHeaderView: (R) -> SectionHeader
+  @ViewBuilder let itemLabelView: ((T) -> LabelContent)
 
   var body: some View {
     let rankingMap = rankingMapBuilder(items)
@@ -26,7 +27,7 @@ where T: LibraryComparable, T: Hashable, T: PathRestorable, R: Comparable, R: Ha
                 LabeledContent {
                   itemContentView(item)
                 } label: {
-                  Text(item.name)
+                  itemLabelView(item)
                 }
               }
             }
@@ -53,7 +54,8 @@ where T: LibraryComparable, T: Hashable, T: PathRestorable, R: Comparable, R: Ha
       },
       sectionHeaderView: { section in
         Text("Artists")
-      }
+      },
+      itemLabelView: { Text($0.name) }
     )
     .navigationTitle("Artists")
     .musicDestinations(vaultPreviewData)
@@ -70,7 +72,8 @@ where T: LibraryComparable, T: Hashable, T: PathRestorable, R: Comparable, R: Ha
       itemContentView: { _ in },
       sectionHeaderView: { section in
         Text("Venues")
-      }
+      },
+      itemLabelView: { Text($0.name) }
     )
     .navigationTitle("Venues")
     .musicDestinations(vaultPreviewData)

Sources/Site/Music/UI/VenueList.swift

@@ -19,7 +19,8 @@ struct VenueList: View {
       items: digests, sectioner: sectioner,
       title: String(localized: "Venues", bundle: .module),
       associatedRankName: String(localized: "Sort By Artist Count", bundle: .module),
-      associatedRankSectionHeader: { $0.artistsCountView }, sort: $sort
+      associatedRankSectionHeader: { $0.artistsCountView },
+      itemLabelView: { Text($0.name.emphasizedAttributed(matching: searchString)) }, sort: $sort
     )
     .archiveSearchable(
       searchPrompt: String(localized: "Venue Names", bundle: .module),

Sources/Site/Utility/String+EmphasizedMatching.swift

@@ -24,4 +24,12 @@ extension String {
       return "**\(m)**"
     }
   }
+
+  func emphasizedAttributed(matching fragment: String) -> AttributedString {
+    let markdown = self.emphasized(matching: fragment)
+    guard let emphasized = try? AttributedString(markdown: markdown) else {
+      return AttributedString(self)
+    }
+    return emphasized
+  }
 }