Files
MujicaUI/command_palette.go
T
ZacharyZhang-NY 8880865021 Refactor: results expose Element as a named field
Every component result type now names its element Element instead of
embedding *ui.Element. The eleven element-plus-changed results
(AccordionView, CarouselView, CollapsibleView, ImageViewerView,
PaginationResult, StepsResult, SidebarResult, TabsResult, RatingParts,
FileDropZoneParts, TransferParts) fold into ChoiceResult.

Fixes four Gallery demos where .Width(...).Changed() read the element's
flag instead of the component's: Accordion, MultiSelect, Cascader,
TreeSelect. TestDataAccordionDemoLogsChange covers the Accordion.
2026-10-05 13:35:53 -04:00

225 lines
6.6 KiB
Go

package mujica
import (
"log/slog"
"slices"
"strings"
"github.com/egoist/mygo/ui"
"mujicaui/icons"
"mujicaui/internal"
"mujicaui/theme"
)
// Command is an action of a CommandPalette.
type Command struct {
ID string
Label string
// Group heads the command in the list; commands keep their order within groups.
Group string
// Keywords also match the search.
Keywords []string
Icon *ui.SVG
}
// CommandPaletteOptions configure a CommandPalette.
type CommandPaletteOptions struct {
// OpenMods and OpenKey open the palette; zero key means Cmd+K (Ctrl+K off macOS).
OpenMods ui.Modifiers
OpenKey ui.Key
}
// CommandPaletteResult is the built CommandPalette; Element is nil while closed.
type CommandPaletteResult struct {
Element *ui.Element
chosen string
}
// Chosen returns the ID of the command run in this frame; running closes the palette.
func (r CommandPaletteResult) Chosen() (string, bool) { return r.chosen, r.chosen != "" }
type commandPaletteKey struct{ open *bool }
type commandPaletteState struct {
query string
hl int
ptr [2]float32
wasOpen bool
reveal bool
}
// CommandPalette is a searchable command dialog opened by a shortcut or by setting *open.
func CommandPalette(c *ui.Context, open *bool, commands []Command, opts CommandPaletteOptions) CommandPaletteResult {
seen := map[string]bool{}
for _, cmd := range commands {
if cmd.ID == "" || cmd.Label == "" {
panic("mujica: Command needs an ID and a Label")
}
if seen[cmd.ID] {
panic("mujica: duplicate Command ID " + cmd.ID)
}
seen[cmd.ID] = true
}
mods, key := opts.OpenMods, opts.OpenKey
if key == 0 {
mods, key = ui.Cmd, ui.KeyK
}
st := ui.Local(c.Root(), commandPaletteKey{open}, func() commandPaletteState { return commandPaletteState{} })
if c.Shortcut(mods, key) && !*open {
*open = true
}
if *open && !st.wasOpen {
st.query, st.hl = "", 0
slog.Debug("mujica: command palette open")
}
st.wasOpen = *open
res := CommandPaletteResult{}
k := Tokens(c)
d := Density(c)
u := d.Unit()
res.Element = ui.DialogBase(c, open, func(back, panel *ui.Element) {
ww, wh := c.Size()
back.Background(ui.RGBA(0, 0, 0, 0.4)).Justify(ui.Start)
internal.PopIn(c, back, Motion(c, theme.PopupDuration))
panel.Margin(wh*0.12, 0, 0, 0).Width(560).MaxWidth(ww-32).MaxHeight(wh*0.76).
Radius(theme.PopupRadius).Background(k.Surface).Border(theme.BorderWidth, k.Border).
Shadow(0, 12, 32, 0, ui.RGBA(0, 0, 0, 0.3)).AlignItems(ui.Stretch).Label(msg(c, "command_palette.label"))
found := commandPaletteFilter(commands, st.query)
var in *ui.Element
ui.Row(c).AlignItems(ui.Center).Gap(u*3).Padding(u*3, u*4).Children(func() {
ui.Icon(c, icons.Must("search")).Size(16, 16).TextColor(k.TextMuted)
in = ui.TextInputBase(c, &st.query).FillWidth().AutoFocus().Label(msg(c, "command_palette.search"))
})
ui.Box(c).Height(1).Background(k.Ornament).Role(ui.RoleNone)
if in.Changed() {
st.hl, st.reveal = 0, true
}
n := len(found)
switch {
case n == 0:
case in.Shortcut(0, ui.KeyDown):
st.hl, st.reveal = (st.hl+1)%n, true
case in.Shortcut(0, ui.KeyUp):
st.hl, st.reveal = (st.hl-1+n)%n, true
}
st.hl = max(0, min(st.hl, n-1))
// Focus stays in the search box, so the highlighted command is read out.
if n > 0 {
in.Description(found[st.hl].Label)
if st.reveal {
c.Announce(found[st.hl].Label)
}
} else {
in.Description(msg(c, "command_palette.empty"))
}
run := -1
if in.Submitted() && n > 0 {
run = st.hl
}
list := ui.Scroll(c).Padding(u * 2).Gap(2).MaxHeight(360).Role(ui.RoleList)
list.Children(func() {
if n == 0 {
ui.Text(c, msg(c, "command_palette.empty")).TextColor(k.TextMuted).Padding(u*6, u*2).TextAlign(ui.Center).FillWidth()
return
}
gutter := slices.ContainsFunc(found, func(cmd Command) bool { return cmd.Icon != nil })
group := "\x00"
for i, cmd := range found {
if cmd.Group != group {
group = cmd.Group
if group != "" {
ui.Text(c, group).Font(theme.SerifFont).FontSize(FontSize(c, theme.CaptionSize)).
TextColor(k.Ornament.Mix(k.Text, 0.35)).Padding(u*2, u*2, u, u*2).SingleLine()
}
}
if commandPaletteRow(c, cmd, i, st, gutter) {
run = i
}
}
})
ui.Row(c).Gap(u*4).Padding(u*2, u*4).Background(k.Background).Children(func() {
for _, hint := range []string{"command_palette.hint_move", "command_palette.hint_run", "command_palette.hint_close"} {
ui.Text(c, msg(c, hint)).FontSize(FontSize(c, theme.CaptionSize)).TextColor(k.TextMuted).SingleLine()
}
})
if run >= 0 {
res.chosen = found[run].ID
*open = false
slog.Debug("mujica: command palette run", "id", res.chosen)
}
})
if !*open {
st.wasOpen = false
}
return res
}
// commandPaletteRow builds row i and reports a click on it.
func commandPaletteRow(c *ui.Context, cmd Command, i int, st *commandPaletteState, gutter bool) bool {
k := Tokens(c)
d := Density(c)
u := d.Unit()
row := ui.Row(c).AlignItems(ui.Center).Gap(u*3).MinHeight(d.ControlHeight()).Padding(0, u*3).
Radius(theme.ControlRadius).Role(ui.RoleListItem).Label(cmd.Label).TextColor(k.Text).Cursor(ui.CursorPointer)
on := i == st.hl
if on {
row.Background(k.Selection).FontWeight(600)
row.Draw(func(p *ui.Painter, r ui.Rect) {
p.Fill(ui.Rect{X: r.X, Y: r.Y + 4, W: 3, H: r.H - 8}, k.AccentText, 1.5)
})
if st.reveal {
row.ScrollIntoView()
st.reveal = false
}
}
internal.Ease(row, Motion(c, theme.StateDuration), k.Text)
px, py, over := row.PointerPosition()
b := row.Bounds()
if at := [2]float32{b.X + px, b.Y + py}; over && at != st.ptr {
st.ptr = at
if !on {
st.hl = i
c.Invalidate()
}
}
row.Children(func() {
if cmd.Icon != nil {
ui.Icon(c, cmd.Icon).Size(16, 16).TextColor(k.TextMuted)
} else if gutter {
ui.Box(c).Size(16, 16).Role(ui.RoleNone)
}
ui.Text(c, cmd.Label).SingleLine()
})
return row.Clicked()
}
// commandPaletteFilter keeps commands matching every word of query, grouped by first appearance.
func commandPaletteFilter(commands []Command, query string) []Command {
words := strings.Fields(strings.ToLower(query))
var groups []string
byGroup := map[string][]Command{}
for _, cmd := range commands {
hay := strings.ToLower(cmd.Label + " " + cmd.Group + " " + strings.Join(cmd.Keywords, " "))
ok := true
for _, w := range words {
if !strings.Contains(hay, w) {
ok = false
break
}
}
if !ok {
continue
}
if _, seen := byGroup[cmd.Group]; !seen {
groups = append(groups, cmd.Group)
}
byGroup[cmd.Group] = append(byGroup[cmd.Group], cmd)
}
var out []Command
for _, g := range groups {
out = append(out, byGroup[g]...)
}
return out
}