The command palette is an interface to both quickly navigate the app and provide information.

This feature is dependent on Flop package for searching.

Mounting

This command pallette is a LiveView that is designed to be mounted in the layout.

<%= live_render(
  (assigns[:conn] || assigns[:socket]),
  TutorialWeb.Live.CommandPaletteLive,
  id: "command-palette-lv",
  session: %{"context" => "app"}) %>

Context

You can pass a context and that is by default "app" or "admin". The idea is that you can use the same LiveView code but return different result depending on if you are a user in the normal application or an admin in the admin area.

Trigger

The command palette modal can be opened with keyboard shortcut or a LiveView.JS command that dispatches a show-event to the #command-palette

Bt default, it will be triggered with command+k or ctrl+k which are the standard ways to open similar features.

Configuration

Inside the CommandPalette module, you can add the routes and schemas that you want to search. There are some boilerplate code there already to help you get started.

Add a route

To add a route, simply add it in the routes and it should be visible when searching

  def routes("app") do
    [
      %{label: "Dashboard", path: ~p"/"},
      %{label: "Settings", path: ~p"/users/settings"},
      ## ADD ADDITIONAL ROUTES BELOW ##
    ]
  end

Add a schema

To search a schema, for example all posts, add the schema

  def schemas("app") do
    [
      ## ADD ADDITIONAL SCHEMAS BELOW ##
      Tutorial.Posts.Post
    ]
  end

Format the search Result

# lib/tutorial_web/command_palette/result.ex
defimpl TutorialWeb.CommandPalette.Format, for: Tutorial.Posts.Post do
  def header(_), do: "Posts"
  def label(post), do: post.title
  def link(post), do: ~p"/posts/#{post}"
end