Make the composer wrap and grow, and surface Launch at Login
Long prompts hit a single-line field before; the composer is now an NSTextView that wraps and grows up to seven lines, keeps Return as send, and uses Shift+Return for a newline. Launch at Login already existed in the menu bar icon's right-click menu, so it is now also a toggle in the sync panel where it is easier to find.
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
import AppKit
|
||||
import SwiftUI
|
||||
|
||||
/// A chat-style composer backed by AppKit: wraps long prompts, grows to fit up
|
||||
/// to seven lines, then scrolls. Return submits; Shift+Return inserts a
|
||||
/// newline. A plain SwiftUI `TextField(axis: .vertical)` cannot keep Return as
|
||||
/// "send", which is why this is not one.
|
||||
///
|
||||
/// Height is driven by the caller: the representable measures the text and
|
||||
/// writes the clamped height into `height`, which the caller applies as a
|
||||
/// `.frame(height:)`. Driving the frame is what actually resizes a
|
||||
/// representable — `intrinsicContentSize` is ignored once SwiftUI offers a
|
||||
/// bigger size.
|
||||
struct ComposerView: NSViewRepresentable {
|
||||
@Binding var text: String
|
||||
@Binding var isFocused: Bool
|
||||
@Binding var height: CGFloat
|
||||
var placeholder: String
|
||||
var onSubmit: () -> Void
|
||||
var onEscape: (() -> Void)? = nil
|
||||
|
||||
private let maxLines: CGFloat = 7
|
||||
|
||||
/// The one-line height, so the composer starts at exactly one line instead
|
||||
/// of snapping to its real height on the first keystroke.
|
||||
static var oneLineHeight: CGFloat {
|
||||
let font = NSFont.systemFont(ofSize: NSFont.systemFontSize)
|
||||
return font.ascender - font.descender + font.leading + 10 // 2 x 5 inset
|
||||
}
|
||||
|
||||
func makeCoordinator() -> Coordinator { Coordinator(self) }
|
||||
|
||||
func makeNSView(context: Context) -> NSScrollView {
|
||||
let scrollView = NSScrollView()
|
||||
scrollView.drawsBackground = false
|
||||
scrollView.borderType = .noBorder
|
||||
scrollView.hasVerticalScroller = true
|
||||
scrollView.autohidesScrollers = true
|
||||
scrollView.horizontalScrollElasticity = .none
|
||||
|
||||
let textView = ComposerTextView()
|
||||
textView.delegate = context.coordinator
|
||||
textView.placeholderText = placeholder
|
||||
textView.isRichText = false
|
||||
textView.isVerticallyResizable = true
|
||||
textView.isHorizontallyResizable = false
|
||||
textView.autoresizingMask = [.width]
|
||||
textView.textContainer?.widthTracksTextView = true
|
||||
textView.textContainer?.lineFragmentPadding = 0
|
||||
textView.textContainerInset = NSSize(width: 0, height: 5)
|
||||
textView.font = .systemFont(ofSize: NSFont.systemFontSize)
|
||||
textView.textColor = .labelColor
|
||||
textView.drawsBackground = false
|
||||
// No containerSize: with widthTracksTextView the container follows the
|
||||
// view's width, which is what makes long lines wrap.
|
||||
|
||||
scrollView.documentView = textView
|
||||
textView.frame = NSRect(origin: .zero, size: scrollView.contentSize)
|
||||
context.coordinator.watchWindow(of: textView)
|
||||
return scrollView
|
||||
}
|
||||
|
||||
func updateNSView(_ scrollView: NSScrollView, context: Context) {
|
||||
guard let textView = scrollView.documentView as? ComposerTextView else { return }
|
||||
context.coordinator.parent = self
|
||||
if textView.string != text {
|
||||
textView.string = text
|
||||
updateHeight(textView)
|
||||
}
|
||||
textView.placeholderText = placeholder
|
||||
if isFocused, scrollView.window?.firstResponder != textView {
|
||||
scrollView.window?.makeFirstResponder(textView)
|
||||
}
|
||||
}
|
||||
|
||||
fileprivate func updateHeight(_ textView: ComposerTextView) {
|
||||
guard let layoutManager = textView.layoutManager,
|
||||
let textContainer = textView.textContainer else { return }
|
||||
layoutManager.ensureLayout(for: textContainer)
|
||||
let content = layoutManager.usedRect(for: textContainer).height + 2 * textView.textContainerInset.height
|
||||
let line = Self.oneLineHeight
|
||||
let clamped = max(line, min(content, line * maxLines + 1))
|
||||
if abs(height - clamped) > 0.5 {
|
||||
// Defer so the binding is not written from inside a layout pass.
|
||||
DispatchQueue.main.async { self.height = clamped }
|
||||
}
|
||||
}
|
||||
|
||||
final class Coordinator: NSObject, NSTextViewDelegate {
|
||||
var parent: ComposerView
|
||||
private var windowObserver: Any?
|
||||
|
||||
init(_ parent: ComposerView) { self.parent = parent }
|
||||
|
||||
/// Re-assert focus every time the panel becomes key again. The focus
|
||||
/// binding stays `true` while hidden, so without this a re-shown panel
|
||||
/// would not refocus the composer.
|
||||
fileprivate func watchWindow(of textView: ComposerTextView) {
|
||||
windowObserver = NotificationCenter.default.addObserver(
|
||||
forName: NSWindow.didBecomeKeyNotification, object: nil, queue: .main
|
||||
) { [weak self, weak textView] note in
|
||||
guard let self, let textView,
|
||||
(note.object as? NSWindow) === textView.window,
|
||||
self.parent.isFocused else { return }
|
||||
textView.window?.makeFirstResponder(textView)
|
||||
}
|
||||
}
|
||||
|
||||
deinit {
|
||||
if let windowObserver {
|
||||
NotificationCenter.default.removeObserver(windowObserver)
|
||||
}
|
||||
}
|
||||
|
||||
func textDidChange(_ notification: Notification) {
|
||||
guard let textView = notification.object as? ComposerTextView else { return }
|
||||
if parent.text != textView.string {
|
||||
parent.text = textView.string
|
||||
}
|
||||
parent.updateHeight(textView)
|
||||
}
|
||||
|
||||
// Return sends, Shift+Return inserts a newline. Esc is forwarded so the
|
||||
// panel can clear its selection or hide, which a TextField used to do
|
||||
// via onExitCommand.
|
||||
func textView(_ textView: NSTextView, doCommandBy commandSelector: Selector) -> Bool {
|
||||
if commandSelector == #selector(NSResponder.cancelOperation(_:)) {
|
||||
parent.onEscape?()
|
||||
return true
|
||||
}
|
||||
guard commandSelector == #selector(NSResponder.insertNewline(_:)) else { return false }
|
||||
if NSApp.currentEvent?.modifierFlags.contains(.shift) == true {
|
||||
return false
|
||||
}
|
||||
parent.onSubmit()
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private final class ComposerTextView: NSTextView {
|
||||
var placeholderText: String = "" {
|
||||
didSet { needsDisplay = true }
|
||||
}
|
||||
|
||||
override func draw(_ dirtyRect: NSRect) {
|
||||
super.draw(dirtyRect)
|
||||
guard string.isEmpty, !placeholderText.isEmpty else { return }
|
||||
let attributes: [NSAttributedString.Key: Any] = [
|
||||
.font: font as Any,
|
||||
.foregroundColor: NSColor.placeholderTextColor,
|
||||
]
|
||||
let inset = textContainerInset
|
||||
let origin = NSPoint(x: inset.width + (textContainer?.lineFragmentPadding ?? 0), y: inset.height)
|
||||
placeholderText.draw(at: origin, withAttributes: attributes)
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,8 @@ struct PanelView: View {
|
||||
@ObservedObject private var sync = SyncService.shared
|
||||
|
||||
@State private var composer = ""
|
||||
@State private var composerFocused = false
|
||||
@State private var composerHeight: CGFloat = ComposerView.oneLineHeight
|
||||
@State private var search = ""
|
||||
@State private var showSearch = false
|
||||
@State private var showSectionSwitcher = false
|
||||
@@ -19,7 +21,7 @@ struct PanelView: View {
|
||||
@State private var copiedID: UUID?
|
||||
@State private var accessibilityGranted = AXIsProcessTrusted()
|
||||
|
||||
private enum Field: Hashable { case composer, search, newWorkspace }
|
||||
private enum Field: Hashable { case search, newWorkspace }
|
||||
@FocusState private var focusedField: Field?
|
||||
|
||||
var body: some View {
|
||||
@@ -47,10 +49,10 @@ struct PanelView: View {
|
||||
.overlay(newWorkspaceModal)
|
||||
.onDrop(of: [UTType.image.identifier, UTType.fileURL.identifier], isTargeted: nil, perform: handleDrop)
|
||||
.onReceive(NotificationCenter.default.publisher(for: .promptPanelDidShow)) { _ in
|
||||
focusedField = .composer
|
||||
composerFocused = true
|
||||
accessibilityGranted = AXIsProcessTrusted()
|
||||
}
|
||||
.onAppear { focusedField = .composer }
|
||||
.onAppear { composerFocused = true }
|
||||
}
|
||||
|
||||
// MARK: - Header
|
||||
@@ -120,7 +122,7 @@ struct PanelView: View {
|
||||
.onExitCommand {
|
||||
search = ""
|
||||
showSearch = false
|
||||
focusedField = .composer
|
||||
composerFocused = true
|
||||
}
|
||||
if !search.isEmpty {
|
||||
Button { search = "" } label: { Image(systemName: "xmark.circle.fill") }
|
||||
@@ -473,6 +475,12 @@ struct PanelView: View {
|
||||
.font(.caption)
|
||||
.foregroundStyle(.secondary)
|
||||
}
|
||||
Divider()
|
||||
Toggle("Launch at Login", isOn: Binding(
|
||||
get: { LoginItem.isEnabled },
|
||||
set: { _ in _ = LoginItem.toggle() }
|
||||
))
|
||||
.font(.callout)
|
||||
if let error = sync.lastError {
|
||||
Text(error)
|
||||
.font(.caption)
|
||||
@@ -548,7 +556,7 @@ struct PanelView: View {
|
||||
private func dismissNewWorkspace() {
|
||||
showNewWorkspace = false
|
||||
newWorkspaceName = ""
|
||||
focusedField = .composer
|
||||
composerFocused = true
|
||||
}
|
||||
|
||||
// MARK: - Selection
|
||||
@@ -615,28 +623,32 @@ struct PanelView: View {
|
||||
// MARK: - Composer
|
||||
|
||||
private var composerField: some View {
|
||||
HStack(spacing: 8) {
|
||||
TextField("Add a note or prompt (\(store.activeSection.name))", text: $composer)
|
||||
.textFieldStyle(.plain)
|
||||
.focused($focusedField, equals: .composer)
|
||||
.onSubmit(submit)
|
||||
.onExitCommand {
|
||||
// Esc clears a selection first, and only hides the panel
|
||||
// once there is nothing selected.
|
||||
HStack(alignment: .bottom, spacing: 8) {
|
||||
ComposerView(
|
||||
text: $composer,
|
||||
isFocused: $composerFocused,
|
||||
height: $composerHeight,
|
||||
placeholder: "Add a note or prompt (\(store.activeSection.name))",
|
||||
onSubmit: submit,
|
||||
onEscape: {
|
||||
if selection.isEmpty {
|
||||
PanelController.shared.hide()
|
||||
} else {
|
||||
clearSelection()
|
||||
}
|
||||
}
|
||||
)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: composerHeight)
|
||||
if !composer.isEmpty {
|
||||
Button(action: submit) { Image(systemName: "arrow.up.circle.fill") }
|
||||
.buttonStyle(.plain)
|
||||
.foregroundStyle(Color.accentColor)
|
||||
.help("Add (Return; Shift+Return for a new line)")
|
||||
}
|
||||
}
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 10)
|
||||
.padding(.vertical, 8)
|
||||
}
|
||||
|
||||
private func submit() {
|
||||
@@ -663,7 +675,7 @@ struct PanelView: View {
|
||||
withAnimation(.easeInOut(duration: 0.15)) { showSectionSwitcher.toggle() }
|
||||
}
|
||||
.keyboardShortcut("k", modifiers: .command)
|
||||
Button("") { focusedField = .composer }
|
||||
Button("") { composerFocused = true }
|
||||
.keyboardShortcut("n", modifiers: .command)
|
||||
Button("") {
|
||||
withAnimation(.easeInOut(duration: 0.15)) { showSync.toggle() }
|
||||
@@ -739,7 +751,7 @@ struct PanelView: View {
|
||||
focusedField = .search
|
||||
} else {
|
||||
search = ""
|
||||
focusedField = .composer
|
||||
composerFocused = true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user