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