Architecture for a command palette

[neurodynamic]

I’m working on an app that has a command palette that gets populated with a bunch of options for commands you can execute. The list of commands changes based on what page you’re on and also based on what search terms you enter into the command palette search bar.

The commands are rendered in the HTML as a list of buttons that the user can tab through, but I also want users to be able to press enter while still focused on the search bar input box and have that automatically trigger the top matching command.

This means that identifying and executing that top command has to be able to happen both in the view (to render the button and appropriate onClick code in the HTML) and in the update function (to identify and execute the top command’s msg when “Enter” is pressed).

My recollection is that it’s generally considered bad practice to use an update function branch to trigger a msg for another update function branch, but that’s basically how I’m accomplishing this right now. The branch that handles the enter-press just ends up triggering whatever the msg is that appears in the onClick for the top-matching command. I can’t think of any other nice way to accomplish this since the list of possible messages I might want to trigger is dynamically generated and super different in different contexts.

Anyone have thoughts on if this is an okay way to go about it or what other options there might be?

[AlanQ]

Hi @neurodynamic, welcome back

I’m assuming that a ‘command’ in this context is not the same as an Elm Command (Platform.Cmd).

I’m probably making other incorrect assumptions but, assuming I have understood correctly, this is what I would do:

• the user types into the search box which triggers messages to update
• the relevant case in update executes a function that searches the list of all commands and populates a list of results in the model
• the view below the search box displays this results list as clickable buttons
• the top button contains something like onClick <| ExecuteCommand topCommand
• the ExecuteCommand branch of update contains a function (runCommand command) which executes the comand it is given
• also, if Enter is pressed it triggers something like onKeyPress decodedEnterKey which generates a subscription message, which is captured by update
• this branch of update contains the same command executing function (runCommand command) that executes the top command from the results list in model

Identifying and executing the top command, only happens in update. View simply displays the top command, and the lesser commands, from the list in the model that has been constructed by a function in update.