Command palette

use hydroxy_leptos::button::{Button, ButtonVariant};
use hydroxy_leptos::command_palette::*;
use hydroxy_leptos::icon::IconName;
use hydroxy_leptos::kbd::Kbd;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (open, set_open) = signal(false);
    let (last, set_last) = signal(String::from("none yet"));

    // ⌘K or Ctrl+K toggles the palette anywhere on the page.
    let shortcut = window_event_listener(leptos::ev::keydown, move |ev| {
        if (ev.meta_key() || ev.ctrl_key()) && ev.key().eq_ignore_ascii_case("k") {
            ev.prevent_default();
            set_open.update(|o| *o = !*o);
        }
    });
    on_cleanup(move || shortcut.remove());

    let commands = vec![
        CommandItem::new("new", "New project", "Projects").icon(IconName::Plus).hint("N"),
        CommandItem::new("open", "Open Q3 customer research", "Projects").icon(IconName::FileText),
        CommandItem::new("summary", "Draft a summary", "Actions").icon(IconName::Lightbulb).keywords("write report"),
        CommandItem::new("copy", "Copy share link", "Actions").icon(IconName::Copy).hint("C"),
        CommandItem::new("archive", "Archive project", "Actions").icon(IconName::Inbox),
        CommandItem::new("search", "Search sources", "Navigate").icon(IconName::Search).hint("/"),
    ];

    view! {
        <div style="display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;">
            <Button variant=ButtonVariant::Secondary icon_left=IconName::Search on_click=move |_| set_open.set(true)>
                "Search or run a command"
            </Button>
            <span><Kbd>"⌘"</Kbd> " " <Kbd>"K"</Kbd></span>
            <span>"Last command: " {last}</span>
        </div>
        // Controlled: the page owns `open`, so the button and the shortcut can both drive it.
        <CommandPalette
            items=commands
            open=open
            on_open_change=move |o| set_open.set(o)
            on_select=move |id| set_last.set(id)
        />
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::button::{Button, ButtonVariant};
use hydroxy_dioxus::command_palette::{CommandItem, CommandPalette};
use hydroxy_dioxus::icon::IconName;

#[component]
pub fn CommandPaletteDemo() -> Element {
    let mut open = use_signal(|| false);
    let mut last = use_signal(|| String::from("none yet"));
    let commands = vec![
        CommandItem::new("new", "New project", "Projects").icon(IconName::Plus).hint("N"),
        CommandItem::new("open", "Open Q3 customer research", "Projects").icon(IconName::FileText),
        CommandItem::new("summary", "Draft a summary", "Actions").icon(IconName::Lightbulb).keywords("write report"),
        CommandItem::new("copy", "Copy share link", "Actions").icon(IconName::Copy).hint("C"),
        CommandItem::new("archive", "Archive project", "Actions").icon(IconName::Inbox),
        CommandItem::new("search", "Search sources", "Navigate").icon(IconName::Search).hint("/"),
    ];

    rsx! {
        div { style: "display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;",
            Button {
                variant: ButtonVariant::Secondary,
                icon_left: IconName::Search,
                on_click: move |_| open.set(true),
                "Search or run a command"
            }
            span { "Last command: {last}" }
        }
        // Controlled: the page owns `open`.
        CommandPalette {
            items: commands,
            open: Some(open()),
            on_open_change: move |o| open.set(o),
            on_select: move |id| last.set(id),
        }
    }
}