BUGFIX: Reevaluate command query when changed instead of selecting option

Previously it was not possible to adjust the search via keyboard after
a command query had been updated and the results were already displayed.
Now when changing the query, a dirty state is set in the UI and „Enter“ will
start a new query.

Author: Sebobo

packages/commandbar/src/Theme.module.css

@@ -28,4 +28,6 @@
     --textOnGray: #fff;
     --textOnWhite: #252525;
     --primaryBlue: #00adee;
+    --success: #00a338;
+    --warn: #ff8700;
 }

packages/commandbar/src/components/Icons/IconRepeat.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export function IconRepeat() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            <path
+                fill="currentColor"
+                d="M0 224c0 17.7 14.3 32 32 32s32-14.3 32-32c0-53 43-96 96-96H320v32c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-9.2-9.2-22.9-11.9-34.9-6.9S320 19.1 320 32V64H160C71.6 64 0 135.6 0 224zm512 64c0-17.7-14.3-32-32-32s-32 14.3-32 32c0 53-43 96-96 96H192V352c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V448H352c88.4 0 160-71.6 160-160z"
+            />
+        </svg>
+    );
+}

packages/commandbar/src/components/Icons/index.ts

@@ -3,3 +3,4 @@ export { IconNeos } from './IconNeos';
 export { IconSpinner } from './IconSpinner';
 export { IconStar } from './IconStar';
 export { IconPlay } from './IconPlay';
+export { IconRepeat } from './IconRepeat';

packages/commandbar/src/components/SearchBox/SearchBox.module.css

@@ -54,3 +54,7 @@
 .executeButton:hover svg {
     color: var(--primaryBlue);
 }
+
+.commandQueryDirty {
+    color: var(--warn);
+}

packages/commandbar/src/components/SearchBox/SearchBox.tsx

@@ -3,9 +3,9 @@ import { useSignalEffect } from '@preact/signals';
 
 import { useCommandBarState, STATUS, useIntl, useCommandExecutor } from '../../state';
 import IconWrapper from '../IconWrapper/IconWrapper';
+import { IconPlay, IconRepeat } from '../Icons';
 
 import * as styles from './SearchBox.module.css';
-import { IconPlay } from '../Icons';
 
 // Timer helper for debouncing updates of command query results
 let updateResultsTimer = null;
@@ -96,15 +96,17 @@ const SearchBox: React.FC = () => {
                 </button>
             )}
             {state.status.value === STATUS.DISPLAYING_RESULT &&
-                state.commands.value[state.resultCommandId.value]?.executeManually && (
+                state.commands.value[state.resultCommandId.value]?.executeManually &&
+                !state.activeCommandId.value && (
                     <button
-                        className={styles.executeButton}
+                        className={[
+                            styles.executeButton,
+                            state.commandQueryDirty.value ? styles.commandQueryDirty : '',
+                        ].join(' ')}
                         onClick={() => executeCommand(state.resultCommandId.value)}
                         title={translate('SearchBox.execute.title', 'Execute the command')}
                     >
-                        <IconWrapper>
-                            <IconPlay />
-                        </IconWrapper>
+                        <IconWrapper>{state.commandQueryDirty.value ? <IconPlay /> : <IconRepeat />}</IconWrapper>
                     </button>
                 )}
         </>

packages/commandbar/src/state/CommandBarExecutor.tsx

@@ -68,7 +68,7 @@ export const CommandBarExecutor: React.FC<CommandInputContextProps> = ({ childre
             let commandId = state.availableCommandIds.value[state.highlightedItem.value];
             if (state.status.value === STATUS.DISPLAYING_RESULT) {
                 // If there are options the command to execute is the highlighted option
-                if (Object.values(state.result.value.options).length) {
+                if (!state.commandQueryDirty.value && Object.values(state.result.value.options).length) {
                     commandId = Object.keys(state.result.value.options)[state.highlightedOption.value];
                 } else {
                     // If there are no options we run the command which generated the result again

packages/commandbar/src/state/CommandBarStateProvider.tsx

@@ -19,6 +19,7 @@ interface CommandBarContextValues {
         activeCommandMessage: ReadonlySignal<string>;
         availableCommandIds: ReadonlySignal<CommandId[]>;
         commandQuery: ReadonlySignal<string>;
+        commandQueryDirty: ReadonlySignal<boolean>;
         commands: ReadonlySignal<FlatCommandList>;
         expanded: ReadonlySignal<boolean>;
         favouriteCommands: ReadonlySignal<CommandId[]>;
@@ -56,6 +57,7 @@ function createAppState(initialState: CommandBarState) {
     const activeCommandMessage = computed(() => commandBarState.value.activeCommandMessage);
     const availableCommandIds = computed(() => commandBarState.value.availableCommandIds);
     const commandQuery = computed(() => commandBarState.value.commandQuery);
+    const commandQueryDirty = computed(() => commandBarState.value.commandQueryDirty);
     const commands = computed(() => commandBarState.value.commands);
     const expanded = computed(() => commandBarState.value.expanded);
     const favouriteCommands = computed(() => commandBarState.value.favouriteCommands);
@@ -75,6 +77,7 @@ function createAppState(initialState: CommandBarState) {
             activeCommandMessage,
             availableCommandIds,
             commandQuery,
+            commandQueryDirty,
             commands,
             expanded,
             favouriteCommands,
@@ -104,6 +107,7 @@ export const CommandBarStateProvider: React.FC<CommandBarContextProps> = ({
             activeCommandMessage: null,
             availableCommandIds: Object.keys(commands),
             commandQuery: '',
+            commandQueryDirty: false,
             commands: flattenCommands(commands),
             expanded: false,
             favouriteCommands: userPreferences.favouriteCommands,

packages/commandbar/src/state/commandBarReducer.ts

@@ -22,6 +22,7 @@ export type CommandBarState = MachineState & {
     activeCommandMessage: string;
     availableCommandIds: CommandId[];
     commandQuery: string;
+    commandQueryDirty: boolean;
     commands: FlatCommandList;
     expanded: boolean;
     favouriteCommands: CommandId[];
@@ -89,6 +90,7 @@ function runAction(action: ACTION, nextState: CommandBarState, event: CommandBar
         case ACTION.SET_COMMAND_QUERY:
             assert(event.type === TRANSITION.UPDATE_COMMAND_QUERY);
             nextState.commandQuery = event.commandQuery;
+            nextState.commandQueryDirty = true;
             break;
         case ACTION.EXPAND:
             nextState.expanded = true;
@@ -113,6 +115,7 @@ function runAction(action: ACTION, nextState: CommandBarState, event: CommandBar
                 ...event.result,
             };
             nextState.resultCommandId = nextState.activeCommandId;
+            nextState.commandQueryDirty = false;
             break;
         case ACTION.RESET_OPTION_HIGHLIGHT:
             nextState.highlightedOption = 0;