highlight search query in 'Open Quickly' results

CodeEdit/Features/CEWorkspace/Models/CEWorkspaceFile.swift

@@ -26,11 +26,11 @@ import Combine
 /// loading all intermediate subdirectories (from the nearest cached parent to the file) has not been done yet and doing
 /// so would be unnecessary.
 ///
-/// An example of this is in the ``QuickOpenView``. This view finds a file URL via a search bar, and needs to display a
-/// quick preview of the file. There's a good chance the file is deep in some subdirectory of the workspace, so fetching
-/// it from the ``CEWorkspaceFileManager`` may require loading and caching multiple directories. Instead, it just
-/// makes a disconnected object and uses it for the preview. Then, when opening the file in the workspace it forces the
-/// file to be loaded and cached.
+/// An example of this is in the ``OpenQuicklyView``. This view finds a file URL via a search bar, and needs to display
+/// a quick preview of the file. There's a good chance the file is deep in some subdirectory of the workspace, so
+/// fetching it from the ``CEWorkspaceFileManager`` may require loading and caching multiple directories. Instead, it
+/// just makes a disconnected object and uses it for the preview. Then, when opening the file in the workspace it
+/// forces the file to be loaded and cached.
 final class CEWorkspaceFile: Codable, Comparable, Hashable, Identifiable, EditorTabRepresentable {
 
     /// The id of the ``CEWorkspaceFile``.

CodeEdit/Features/Commands/ViewModels/QuickActionsViewModel.swift

@@ -5,7 +5,7 @@
 //  Created by Alex on 25.05.2022.
 //
 
-import Foundation
+import SwiftUI
 
 /// Simple state class for command palette view. Contains currently selected command,
 /// query text and list of filtered commands
@@ -35,4 +35,17 @@ final class QuickActionsViewModel: ObservableObject {
         self.filteredCommands = CommandManager.shared.commands.filter { $0.title.localizedCaseInsensitiveContains(val) }
         self.selected = self.filteredCommands.first
     }
+
+    func highlight(_ commandTitle: String) -> NSAttributedString {
+        let attribText = NSMutableAttributedString(string: commandTitle)
+        let range: NSRange = attribText.mutableString.range(
+            of: self.commandQuery,
+            options: NSString.CompareOptions.caseInsensitive
+        )
+        attribText.addAttribute(.foregroundColor, value: NSColor(Color(.labelColor)), range: range)
+        attribText.addAttribute(.font, value: NSFont.boldSystemFont(ofSize: NSFont.systemFontSize), range: range)
+
+        return attribText
+    }
+
 }

CodeEdit/Features/Commands/Views/QuickActionsView.swift

@@ -43,15 +43,19 @@ struct QuickActionsView: View {
     }
 
     var body: some View {
-        SearchPanelView<SearchResultLabel, EmptyView, Command>(
+        SearchPanelView<QuickSearchResultLabel, EmptyView, Command>(
             title: "Commands",
             image: Image(systemName: "magnifyingglass"),
             options: $state.filteredCommands,
             text: $state.commandQuery,
             alwaysShowOptions: true,
             optionRowHeight: 30
         ) { command in
-            SearchResultLabel(labelName: command.title, textToMatch: state.commandQuery)
+            QuickSearchResultLabel(
+                labelName: command.title,
+                charactersToHighlight: [],
+                nsLabelName: state.highlight(command.title)
+            )
         } onRowClick: { command in
             callHandler(command: command)
         } onClose: {
@@ -62,47 +66,3 @@ struct QuickActionsView: View {
         }
     }
 }
-
-/// Implementation of command palette entity. While swiftui does not allow to use NSMutableAttributeStrings,
-/// the only way to fallback to UIKit and have NSViewRepresentable to be a bridge between UIKit and SwiftUI.
-/// Highlights currently entered text query
-
-struct SearchResultLabel: NSViewRepresentable {
-
-    var labelName: String
-    var textToMatch: String
-
-    public func makeNSView(context: Context) -> some NSTextField {
-        let label = NSTextField(wrappingLabelWithString: labelName)
-        label.translatesAutoresizingMaskIntoConstraints = false
-        label.drawsBackground = false
-        label.textColor = .labelColor
-        label.isEditable = false
-        label.isSelectable = false
-        label.font = .labelFont(ofSize: 13)
-        label.allowsDefaultTighteningForTruncation = false
-        label.cell?.truncatesLastVisibleLine = true
-        label.cell?.wraps = true
-        label.maximumNumberOfLines = 1
-        label.attributedStringValue = highlight()
-        return label
-    }
-
-    func highlight() -> NSAttributedString {
-        let attribText = NSMutableAttributedString(string: self.labelName)
-        let range: NSRange = attribText.mutableString.range(
-            of: self.textToMatch,
-            options: NSString.CompareOptions.caseInsensitive
-        )
-        attribText.addAttribute(.foregroundColor, value: NSColor(Color(.labelColor)), range: range)
-        attribText.addAttribute(.font, value: NSFont.boldSystemFont(ofSize: NSFont.systemFontSize), range: range)
-
-        return attribText
-    }
-
-    func updateNSView(_ nsView: NSViewType, context: Context) {
-        nsView.textColor = textToMatch.isEmpty ? .labelColor : .secondaryLabelColor
-        nsView.attributedStringValue = highlight()
-    }
-
-}

CodeEdit/Features/Documents/Controllers/CodeEditWindowController.swift

@@ -126,7 +126,7 @@ final class CodeEditWindowController: NSWindowController, NSToolbarDelegate, Obs
     }
 
     @IBAction func openQuickly(_ sender: Any) {
-        if let workspace, let state = workspace.quickOpenViewModel {
+        if let workspace, let state = workspace.openQuicklyViewModel {
             if let quickOpenPanel {
                 if quickOpenPanel.isKeyWindow {
                     quickOpenPanel.close()
@@ -139,7 +139,7 @@ final class CodeEditWindowController: NSWindowController, NSToolbarDelegate, Obs
                 let panel = SearchPanel()
                 self.quickOpenPanel = panel
 
-                let contentView = QuickOpenView(state: state) {
+                let contentView = OpenQuicklyView(state: state) {
                     panel.close()
                 } openFile: { file in
                     workspace.editorManager.openTab(item: file)

CodeEdit/Features/Documents/WorkspaceDocument.swift

@@ -34,7 +34,7 @@ final class WorkspaceDocument: NSDocument, ObservableObject, NSToolbarDelegate {
     var statusBarViewModel = StatusBarViewModel()
     var utilityAreaModel = UtilityAreaViewModel()
     var searchState: SearchState?
-    var quickOpenViewModel: QuickOpenViewModel?
+    var openQuicklyViewModel: OpenQuicklyViewModel?
     var commandsPaletteState: QuickActionsViewModel?
     var listenerModel: WorkspaceNotificationModel = .init()
     var sourceControlManager: SourceControlManager?
@@ -123,7 +123,7 @@ final class WorkspaceDocument: NSDocument, ObservableObject, NSToolbarDelegate {
         self.sourceControlManager = sourceControlManager
         sourceControlManager.fileManager = workspaceFileManager
         self.searchState = .init(self)
-        self.quickOpenViewModel = .init(fileURL: url)
+        self.openQuicklyViewModel = .init(fileURL: url)
         self.commandsPaletteState = .init()
 
         editorManager.restoreFromState(self)

CodeEdit/Features/OpenQuickly/ViewModels/OpenQuicklyViewModel.swift

@@ -0,0 +1,91 @@
+//
+//  OpenQuicklyViewModel.swift
+//  CodeEditModules/QuickOpen
+//
+//  Created by Marco Carnevali on 05/04/22.
+//
+
+import Combine
+import Foundation
+import CollectionConcurrencyKit
+
+final class OpenQuicklyViewModel: ObservableObject {
+    @Published var query: String = ""
+    @Published var searchResults: [SearchResult] = []
+
+    let fileURL: URL
+    var runningTask: Task<Void, Never>?
+
+    init(fileURL: URL) {
+        self.fileURL = fileURL
+    }
+
+    /// This is used to populate the ``OpenQuicklyListItemView`` view which shows the search results to the user.
+    ///
+    /// ``OpenQuicklyPreviewView`` also uses this to load the `fileUrl` for preview.
+    struct SearchResult: Identifiable, Hashable {
+        var id: String { fileURL.id }
+        let fileURL: URL
+        let matchedCharacters: [NSRange]
+
+        // This custom Hashable implementation prevents the highlighted
+        // selection from flickering when searching in 'Open Quickly'.
+        //
+        // See https://github.com/CodeEditApp/CodeEdit/pull/1790#issuecomment-2206832901
+        // for flickering visuals.
+        //
+        // Before commit 0e28b382f59184b7ebe5a7c3295afa3655b7d4e7, only the fileURL
+        // was retrieved from the search results and it worked as expected.
+        //
+        static func == (lhs: Self, rhs: Self) -> Bool { lhs.fileURL == rhs.fileURL }
+        func hash(into hasher: inout Hasher) { hasher.combine(fileURL) }
+    }
+
+    func fetchResults() {
+        let startTime = Date()
+        guard query != "" else {
+            searchResults = []
+            return
+        }
+
+        runningTask?.cancel()
+        runningTask = Task.detached(priority: .userInitiated) {
+            let enumerator = FileManager.default.enumerator(
+                at: self.fileURL,
+                includingPropertiesForKeys: [
+                    .isRegularFileKey
+                ],
+                options: [
+                    .skipsPackageDescendants
+                ]
+            )
+            if let filePaths = enumerator?.allObjects as? [URL] {
+                guard !Task.isCancelled else { return }
+                /// removes all filePaths which aren't regular files
+                let filteredFiles = filePaths.filter { url in
+                    do {
+                        let values = try url.resourceValues(forKeys: [.isRegularFileKey])
+                        return (values.isRegularFile ?? false)
+                    } catch {
+                        return false
+                    }
+                }
+
+                let fuzzySearchResults = await filteredFiles.fuzzySearch(
+                    query: self.query.trimmingCharacters(in: .whitespaces)
+                ).concurrentMap {
+                    SearchResult(
+                        fileURL: $0.item,
+                        matchedCharacters: $0.result.matchedParts
+                    )
+                }
+
+                guard !Task.isCancelled else { return }
+                await MainActor.run {
+                    self.searchResults = fuzzySearchResults
+                    print("Duration: \(Date().timeIntervalSince(startTime))")
+                }
+            }
+        }
+    }
+}

CodeEdit/Features/QuickOpen/Views/QuickOpenItem.swift → CodeEdit/Features/OpenQuickly/Views/OpenQuicklyListItemView.swift

@@ -1,37 +1,39 @@
 //
-//  QuickOpenItem.swift
+//  OpenQuicklyListItemView.swift
 //  CodeEditModules/QuickOpen
 //
 //  Created by Pavel Kasila on 20.03.22.
 //
 
 import SwiftUI
 
-struct QuickOpenItem: View {
+struct OpenQuicklyListItemView: View {
     private let baseDirectory: URL
-    private let fileURL: URL
+    private let searchResult: OpenQuicklyViewModel.SearchResult
 
     init(
         baseDirectory: URL,
-        fileURL: URL
+        searchResult: OpenQuicklyViewModel.SearchResult
     ) {
         self.baseDirectory = baseDirectory
-        self.fileURL = fileURL
+        self.searchResult = searchResult
     }
 
     var relativePathComponents: ArraySlice<String> {
-        return fileURL.pathComponents.dropFirst(baseDirectory.pathComponents.count).dropLast()
+        return searchResult.fileURL.pathComponents.dropFirst(baseDirectory.pathComponents.count).dropLast()
     }
 
     var body: some View {
         HStack(spacing: 8) {
-            Image(nsImage: NSWorkspace.shared.icon(forFile: fileURL.path))
+            Image(nsImage: NSWorkspace.shared.icon(forFile: searchResult.fileURL.path))
                 .resizable()
                 .aspectRatio(contentMode: .fit)
                 .frame(width: 24, height: 24)
             VStack(alignment: .leading, spacing: 0) {
-                Text(fileURL.lastPathComponent).font(.system(size: 13))
-                    .lineLimit(1)
+                QuickSearchResultLabel(
+                    labelName: searchResult.fileURL.lastPathComponent,
+                    charactersToHighlight: searchResult.matchedCharacters
+                )
                 Text(relativePathComponents.joined(separator: " ▸ "))
                     .font(.system(size: 10.5))
                     .foregroundColor(.secondary)

CodeEdit/Features/QuickOpen/Views/QuickOpenPreviewView.swift → CodeEdit/Features/OpenQuickly/Views/OpenQuicklyPreviewView.swift

@@ -1,13 +1,13 @@
 //
-//  QuickOpenPreviewView.swift
+//  OpenQuicklyPreviewView.swift
 //  CodeEditModules/QuickOpen
 //
 //  Created by Pavel Kasila on 20.03.22.
 //
 
 import SwiftUI
 
-struct QuickOpenPreviewView: View {
+struct OpenQuicklyPreviewView: View {
 
     private let queue = DispatchQueue(label: "app.codeedit.CodeEdit.quickOpen.preview")
     private let item: CEWorkspaceFile

CodeEdit/Features/QuickOpen/Views/QuickOpenView.swift → CodeEdit/Features/OpenQuickly/Views/OpenQuicklyView.swift

@@ -1,5 +1,5 @@
 //
-//  QuickOpenView.swift
+//  OpenQuicklyView.swift
 //  CodeEditModules/QuickOpen
 //
 //  Created by Pavel Kasila on 20.03.22.
@@ -13,22 +13,22 @@ extension URL: Identifiable {
     }
 }
 
-struct QuickOpenView: View {
+struct OpenQuicklyView: View {
     @EnvironmentObject private var workspace: WorkspaceDocument
 
     private let onClose: () -> Void
     private let openFile: (CEWorkspaceFile) -> Void
 
-    @ObservedObject private var state: QuickOpenViewModel
+    @ObservedObject private var openQuicklyViewModel: OpenQuicklyViewModel
 
     @State private var selectedItem: CEWorkspaceFile?
 
     init(
-        state: QuickOpenViewModel,
+        state: OpenQuicklyViewModel,
         onClose: @escaping () -> Void,
         openFile: @escaping (CEWorkspaceFile) -> Void
     ) {
-        self.state = state
+        self.openQuicklyViewModel = state
         self.onClose = onClose
         self.openFile = openFile
     }
@@ -37,28 +37,31 @@ struct QuickOpenView: View {
         SearchPanelView(
             title: "Open Quickly",
             image: Image(systemName: "magnifyingglass"),
-            options: $state.openQuicklyFiles,
-            text: $state.openQuicklyQuery,
+            options: $openQuicklyViewModel.searchResults,
+            text: $openQuicklyViewModel.query,
             optionRowHeight: 40
-        ) { file in
-            QuickOpenItem(baseDirectory: state.fileURL, fileURL: file)
-        } preview: { fileURL in
-            QuickOpenPreviewView(item: CEWorkspaceFile(url: fileURL))
-        } onRowClick: { fileURL in
+        ) { searchResult in
+            OpenQuicklyListItemView(
+                baseDirectory: openQuicklyViewModel.fileURL,
+                searchResult: searchResult
+            )
+        } preview: { searchResult in
+            OpenQuicklyPreviewView(item: CEWorkspaceFile(url: searchResult.fileURL))
+        } onRowClick: { searchResult in
             guard let file = workspace.workspaceFileManager?.getFile(
-                fileURL.relativePath,
+                searchResult.fileURL.relativePath,
                 createIfNotFound: true
             ) else {
                 return
             }
             openFile(file)
-            state.openQuicklyQuery = ""
+            openQuicklyViewModel.query = ""
             onClose()
         } onClose: {
             onClose()
         }
-        .onReceive(state.$openQuicklyQuery.debounce(for: 0.2, scheduler: DispatchQueue.main)) { _ in
-            state.fetchOpenQuickly()
+        .onReceive(openQuicklyViewModel.$query.debounce(for: 0.2, scheduler: DispatchQueue.main)) { _ in
+            openQuicklyViewModel.fetchResults()
         }
     }
 }