Overlay UI Improvements

CodeEdit/Features/CodeEditUI/Views/OverlayView.swift

@@ -0,0 +1,177 @@
+//
+//  OverlayWindow.swift
+//  CodeEdit
+//
+//  Created by Khan Winter on 3/17/23.
+//
+
+import Foundation
+import SwiftUI
+
+struct OverlayView<RowView: View, PreviewView: View, Option: Identifiable & Hashable>: View {
+    @ViewBuilder
+    let rowViewBuilder: ((Option) -> RowView)
+
+    @ViewBuilder
+    let previewViewBuilder: ((Option) -> PreviewView)?
+
+    @Binding
+    var options: [Option]
+
+    @State
+    var selection: Option?
+
+    @Binding
+    var text: String
+    let title: String
+    let image: Image
+    let showsPreview: Bool
+    let onRowClick: ((Option) -> Void)
+    let onClose: (() -> Void)
+    let alwaysShowOptions: Bool
+    let optionRowHeight: CGFloat
+
+    init(
+        title: String,
+        image: Image,
+        options: Binding<[Option]>,
+        text: Binding<String>,
+        alwaysShowOptions: Bool = false,
+        optionRowHeight: CGFloat = 30,
+        content: @escaping ((Option) -> RowView),
+        preview: ((Option) -> PreviewView)? = nil,
+        onRowClick: @escaping ((Option) -> Void),
+        onClose: @escaping () -> Void
+    ) {
+        self.title = title
+        self.image = image
+        self._options = options
+        self._text = text
+        self.rowViewBuilder = content
+        self.previewViewBuilder = preview
+        self.onRowClick = onRowClick
+        self.onClose = onClose
+        self.showsPreview = preview != nil
+        self.alwaysShowOptions = alwaysShowOptions
+        self.optionRowHeight = optionRowHeight
+    }
+
+    var body: some View {
+        VStack(spacing: 0) {
+            VStack {
+                HStack(alignment: .center, spacing: 0) {
+                    image
+                        .font(.system(size: 18))
+                        .foregroundColor(.secondary)
+                        .padding(.leading, 1)
+                        .padding(.trailing, 10)
+                    TextField(title, text: $text)
+                        .font(.system(size: 20, weight: .light, design: .default))
+                        .textFieldStyle(.plain)
+                        .onSubmit {
+                            if let selection {
+                                onRowClick(selection)
+                            } else {
+                                NSSound.beep()
+                            }
+                        }
+                        .task(id: options) {
+                            if options.isEmpty {
+                                selection = nil
+                            } else {
+                                if !options.isEmpty {
+                                    selection = options.first
+                                }
+                            }
+                        }
+                }
+                .padding(.vertical, 12)
+                .padding(.horizontal, 12)
+                .foregroundColor(.primary.opacity(0.85))
+                .background(EffectView(.sidebar, blendingMode: .behindWindow))
+            }
+            if !text.isEmpty || alwaysShowOptions == true {
+                Divider()
+                    .padding(0)
+                HStack(spacing: 0) {
+                    if options.isEmpty {
+                        Text("No matching options")
+                            .font(.system(size: 17))
+                            .foregroundColor(.secondary)
+                            .frame(maxWidth: showsPreview ? 272 : .infinity, maxHeight: .infinity)
+                    } else {
+                        NSTableViewWrapper(
+                            data: options,
+                            rowHeight: optionRowHeight,
+                            selection: $selection,
+                            itemView: rowViewBuilder
+                        )
+                        .frame(maxWidth: showsPreview ? 272 : .infinity)
+                    }
+                    if showsPreview {
+                        Divider()
+                        if options.isEmpty {
+                            Spacer()
+                                .frame(maxWidth: .infinity)
+                        } else {
+                            if let selection, let previewViewBuilder {
+                                previewViewBuilder(selection)
+                                    .frame(maxWidth: .infinity)
+                            } else {
+                                Text("Select an option to preview")
+                                    .frame(maxWidth: .infinity)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .overlay {
+            keyHandlers
+        }
+        .background(EffectView(.sidebar, blendingMode: .behindWindow))
+        .edgesIgnoringSafeArea(.vertical)
+        .frame(
+            minWidth: 680,
+            minHeight: text.isEmpty && !alwaysShowOptions ? 19 : 400,
+            maxHeight: text.isEmpty && !alwaysShowOptions ? 19 : .infinity
+        )
+    }
+
+    @ViewBuilder
+    var keyHandlers: some View {
+        Button {
+            onClose()
+        } label: { EmptyView() }
+            .opacity(0)
+            .keyboardShortcut(.escape, modifiers: [])
+            .accessibilityLabel("Close Overlay")
+        Button {
+            guard selection != options.first else {
+                return
+            }
+            if let selection, let index = options.firstIndex(of: selection) {
+                self.selection = options[index-1]
+            } else {
+                selection = options.first
+            }
+        } label: { EmptyView() }
+            .opacity(0)
+            .keyboardShortcut(.upArrow, modifiers: [])
+            .accessibilityLabel("Select Up")
+        Button {
+            guard selection != options.last else {
+                return
+            }
+            if let selection, let index = options.firstIndex(of: selection) {
+
+                self.selection = options[index+1]
+            } else {
+                selection = options.first
+            }
+        } label: { EmptyView() }
+            .opacity(0)
+            .keyboardShortcut(.downArrow, modifiers: [])
+            .accessibilityLabel("Select Down")
+    }
+}

CodeEdit/Features/CodeFile/CodeFileView.swift

@@ -24,11 +24,11 @@ struct CodeFileView: View {
 
     private var cancellables = [AnyCancellable]()
 
-    private let editable: Bool
+    private let isEditable: Bool
 
-    init(codeFile: CodeFileDocument, editable: Bool = true) {
+    init(codeFile: CodeFileDocument, isEditable: Bool = true) {
         self.codeFile = codeFile
-        self.editable = editable
+        self.isEditable = isEditable
 
         codeFile
             .$content
@@ -75,9 +75,10 @@ struct CodeFileView: View {
             tabWidth: $prefs.preferences.textEditing.defaultTabWidth,
             lineHeight: $prefs.preferences.textEditing.lineHeightMultiple,
             wrapLines: $prefs.preferences.textEditing.wrapLinesToEditorWidth,
-            cursorPosition: codeFile.$cursorPosition,
+            cursorPosition: $codeFile.cursorPosition,
             useThemeBackground: prefs.preferences.theme.useThemeBackground,
-            contentInsets: edgeInsets.nsEdgeInsets
+            contentInsets: edgeInsets.nsEdgeInsets,
+            isEditable: isEditable
         )
         .id(codeFile.fileURL)
         .background {
@@ -96,7 +97,6 @@ struct CodeFileView: View {
 
             }
         }
-        .disabled(!editable)
         // minHeight zero fixes a bug where the app would freeze if the contents of the file are empty.
         .frame(minHeight: .zero, maxHeight: .infinity)
         .onChange(of: ThemeModel.shared.selectedTheme) { newValue in

CodeEdit/Features/Commands/ViewModels/CommandPaletteViewModel.swift

@@ -28,12 +28,12 @@ final class CommandPaletteViewModel: ObservableObject {
     func reset() {
         commandQuery = ""
         selected = nil
-        filteredCommands = []
+        filteredCommands = CommandManager.shared.commands
     }
 
     func fetchMatchingCommands(val: String) {
         if val == "" {
-            self.filteredCommands = []
+            self.filteredCommands = CommandManager.shared.commands
             return
         }
         self.filteredCommands = CommandManager.shared.commands.filter { $0.title.localizedCaseInsensitiveContains(val) }