From 9bfe4544bfdc1f59786f857c56e9d51c4acfa427 Mon Sep 17 00:00:00 2001
From: Mitchell Hashimoto <m@mitchellh.com>
Date: Wed, 23 Apr 2025 10:30:50 -0700
Subject: [PATCH] macOS: Command palette has no selection by default, selection
 wraps

#7173

(1) The command palette no longer has any selection by default.
If and when we introduce most recently used commands, defaulting to that
would make sense. A selection only appears when the arrow keys are used
or the user starts typing.

(2) The selection with arrow keys now wraps, so if you press "down" on
the last option, it will wrap to the first option, and if you press "up"
on the first option, it will wrap to the last option. This matches both
VSCode and Zed.
---
 .../Command Palette/CommandPalette.swift      | 54 ++++++++++++++-----
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/macos/Sources/Features/Command Palette/CommandPalette.swift b/macos/Sources/Features/Command Palette/CommandPalette.swift
index 471281128..73d192e76 100644
--- a/macos/Sources/Features/Command Palette/CommandPalette.swift	
+++ b/macos/Sources/Features/Command Palette/CommandPalette.swift	
@@ -21,8 +21,8 @@ struct CommandPaletteView: View {
     var backgroundColor: Color = Color(nsColor: .windowBackgroundColor)
     var options: [CommandOption]
     @State private var query = ""
-    @State private var selectedIndex: UInt = 0
-    @State private var hoveredOptionID: UUID? = nil
+    @State private var selectedIndex: UInt?
+    @State private var hoveredOptionID: UUID?
 
     // The options that we should show, taking into account any filtering from
     // the query.
@@ -35,7 +35,8 @@ struct CommandPaletteView: View {
     }
 
     var selectedOption: CommandOption? {
-        if selectedIndex < filteredOptions.count {
+        guard let selectedIndex else { return nil }
+        return if selectedIndex < filteredOptions.count {
             filteredOptions[Int(selectedIndex)]
         } else {
             filteredOptions.last
@@ -54,20 +55,38 @@ struct CommandPaletteView: View {
                     selectedOption?.action()
 
                 case .move(.up):
-                    if selectedIndex > 0 {
-                        selectedIndex -= 1
-                    }
+                    if filteredOptions.isEmpty { break }
+                    let current = selectedIndex ?? UInt(filteredOptions.count)
+                    selectedIndex = (current == 0)
+                        ? UInt(filteredOptions.count - 1)
+                        : current - 1
 
                 case .move(.down):
-                    if selectedIndex < filteredOptions.count - 1 {
-                        selectedIndex += 1
-                    }
+                    if filteredOptions.isEmpty { break }
+                    let current = selectedIndex ?? UInt.max
+                    selectedIndex = (current >= UInt(filteredOptions.count - 1))
+                        ? 0
+                        : current + 1
 
                 case .move(_):
                     // Unknown, ignore
                     break
                 }
             }
+            .onChange(of: query) { newValue in
+                // If the user types a query then we want to make sure the first
+                // value is selected. If the user clears the query and we were selecting
+                // the first, we unset any selection.
+                if !newValue.isEmpty {
+                    if selectedIndex == nil {
+                        selectedIndex = 0
+                    }
+                } else {
+                    if let selectedIndex, selectedIndex == 0 {
+                        self.selectedIndex = nil
+                    }
+                }
+            }
 
             Divider()
                 .padding(.bottom, 4)
@@ -148,7 +167,7 @@ fileprivate struct CommandPaletteQuery: View {
 
 fileprivate struct CommandTable: View {
     var options: [CommandOption]
-    @Binding var selectedIndex: UInt
+    @Binding var selectedIndex: UInt?
     @Binding var hoveredOptionID: UUID?
     var action: (CommandOption) -> Void
 
@@ -164,9 +183,15 @@ fileprivate struct CommandTable: View {
                         ForEach(Array(options.enumerated()), id: \.1.id) { index, option in
                             CommandRow(
                                 option: option,
-                                isSelected: selectedIndex == index ||
-                                    (selectedIndex >= options.count &&
-                                     index == options.count - 1),
+                                isSelected: {
+                                    if let selected = selectedIndex {
+                                        return selected == index ||
+                                            (selected >= options.count &&
+                                                index == options.count - 1)
+                                    } else {
+                                        return false
+                                    }
+                                }(),
                                 hoveredID: $hoveredOptionID
                             ) {
                                 action(option)
@@ -176,7 +201,8 @@ fileprivate struct CommandTable: View {
                 }
                 .frame(maxHeight: 200)
                 .onChange(of: selectedIndex) { _ in
-                    guard selectedIndex < options.count else { return }
+                    guard let selectedIndex,
+                          selectedIndex < options.count else { return }
                     proxy.scrollTo(
                         options[Int(selectedIndex)].id)
                 }