command_palette: Add base markup

Author: orlowdev

lib/core/src/types.ts

@@ -219,7 +219,7 @@ declare global {
 	 */
 	interface cmd {
 		command_palette: {
-			add: { args: Ordo.CommandPalette.Item }
+			add: { args: Ordo.CommandPalette.Item<() => void> }
 			remove: { args: string | number }
 			toggle: { args: void }
 			show: { args: Ordo.CommandPalette.Instance | undefined }
@@ -1152,36 +1152,44 @@ declare global {
 		}
 
 		namespace CommandPalette {
-			type Instance = {
-				items: Ordo.CommandPalette.Item[]
-				on_new_item?: (input: string) => Ordo.CommandPalette.Item
+			type Instance<$Value = any> = {
+				items: Ordo.CommandPalette.Item<$Value>[]
+				on_new_item?: (input: string) => Ordo.CommandPalette.Item<$Value>
 				is_multiple?: boolean
-				on_select: (item: Ordo.CommandPalette.Item) => void
-				on_deselect?: (item: Ordo.CommandPalette.Item) => void
-				pinned_items?: Ordo.CommandPalette.Item[]
+				on_select: (item: Ordo.CommandPalette.Item<$Value>) => void
+				on_deselect?: (item: Ordo.CommandPalette.Item<$Value>) => void
+				pinned_items?: Ordo.CommandPalette.Item<$Value>[]
 				max_items?: number
 			}
 
+			type Id = string | number
+
+			type RenderIcon = (span: HTMLSpanElement) => void | Promise<void>
+
+			type RenderCustomItemFooter = (div: HTMLDivElement) => void | Promise<void>
+
+			type RenderCustomItemInfo = (div: HTMLDivElement) => void | Promise<void>
+
 			/**
 			 * Command palette item.
 			 */
-			type Item<T = any> = {
-				id: string | number
+			type Item<$Value = any> = {
+				id: Ordo.CommandPalette.Id
 				/**
 				 * Readable name of the command palette item. Put a translation key here, if you use i18n.
 				 */
-				readable_name: Ordo.I18N.TranslationKey
+				readable_name: string
 
-				value: T
+				value: $Value
 
 				/**
 				 * Icon to be displayed for the context menu item.
 				 *
 				 * @optional
 				 */
-				render_icon?: (span: HTMLSpanElement) => void | Promise<void>
-				render_custom_footer?: (div: HTMLDivElement) => void | Promise<void>
-				render_custom_info?: (div: HTMLDivElement) => void | Promise<void>
+				render_icon?: Ordo.CommandPalette.RenderIcon
+				render_custom_footer?: Ordo.CommandPalette.RenderCustomItemFooter
+				render_custom_info?: Ordo.CommandPalette.RenderCustomItemFooter
 
 				/**
 				 * Keyboard hotkey for the context menu item. It only works while the context menu is
@@ -1191,7 +1199,7 @@ declare global {
 				 */
 				hotkey?: string
 
-				description?: Ordo.I18N.TranslationKey
+				description?: string
 
 				type?: C.CommandPaletteItemType
 			}

lib/frontend-app/src/command-palette/command-palette.component.ts

@@ -1,21 +1,17 @@
 import { Maoka, maoka } from "@ordo-pink/maoka"
+import { create_hotkey_from_event } from "@ordo-pink/hotkey-from-event"
 import { maoka_jabs } from "@ordo-pink/maoka-jabs"
+import { sweech } from "@ordo-pink/sweech"
+import { title_case } from "@ordo-pink/tau"
 
-import { app_context } from "@ordo-pink/frontend-app/app-context"
+import { app_context } from "../../app-context"
 import { command_palette$ } from "./command-palette.state"
 
-export const command_palette = () =>
-	internal.command_palette_wrapper(() =>
-		internal.command_palette_window(() => [
-			internal.command_palette_search(),
-			internal.command_palette_items_div(() => () => "Items"),
-			internal.command_palette_footer_div(() => () => "Footer"),
-		]),
-	)
+export const command_palette = () => internal.overlay(internal.modal)
 
 namespace internal {
-	export const command_palette_wrapper: Maoka.Teacher = kindergarten =>
-		styled.command_palette_wrapper(use => {
+	export const overlay: Maoka.Teacher = kindergarten =>
+		styled.overlay(use => {
 			const { hunter } = use(app_context.consume)
 
 			const handle_show = () => use(maoka_jabs.add_class("active"))
@@ -29,21 +25,59 @@ namespace internal {
 			return kindergarten
 		})
 
-	export const command_palette_window: Maoka.Teacher = kindergarten =>
-		styled.command_palette_window(use => {
-			const handle_click = (event: MouseEvent) => event.stopPropagation()
-
+	export const modal = () =>
+		styled.modal(use => {
 			const get_current = use(maoka_jabs.cheat$(command_palette$, "current" as const))
 
+			const handle_click = (event: MouseEvent) => event.stopPropagation()
+
 			use(maoka_jabs.set_id("cp"))
 			use(maoka_jabs.listen("onclick", handle_click))
 
-			return () => get_current() && kindergarten()
+			return () => {
+				const current = get_current()
+
+				if (!current) return null
+
+				return [
+					search(),
+					// TODO open via route fragment and query
+					// TODO create subitems if item is found with fuzzy search but the match is not exact
+					current.is_multiple
+						? items_wrapper(() => [items(() => current.items.map(item)), items(() => current.pinned_items?.map(item))])
+						: items(() => current.items.map(item)),
+					styled.footer(() => () => "Footer"),
+				]
+			}
+		})
+
+	const item = (item: Ordo.CommandPalette.Item) =>
+		styled.item(use => {
+			const handle_click = () => item.value()
+
+			use(maoka_jabs.set_id(String(item.id)))
+			use(maoka_jabs.set_attribute("title", item.description))
+			use(maoka_jabs.listen("onclick", handle_click))
+
+			return () => [
+				item_main(() => [
+					styled.item_title_wrapper(() => () => [item.render_icon && item_icon_span(item.render_icon), item.readable_name]),
+					item.hotkey && styled.item_info(() => () => hotkey(item.hotkey!, { decoration_only: true })),
+				]),
+				item_footer(() => item.description),
+			]
 		})
 
-	export const command_palette_search = () =>
-		command_palette_form(() =>
-			styled.command_palette_input(use => {
+	const item_main: Maoka.Teacher = kindergarten => styled.item_main(() => kindergarten)
+
+	const item_footer: Maoka.Teacher = kindergarten => styled.item_footer(() => kindergarten)
+
+	const item_icon_span = (render_icon: Ordo.CommandPalette.RenderIcon) =>
+		maoka.create("span", use => use(maoka.jabs.if_dom(n => void render_icon(n.value))))
+
+	const search = () =>
+		form(() =>
+			styled.item_input(use => {
 				const t_search = "Search..." // TODO i18n
 
 				const handle_mount = () => use(maoka.jabs.if_dom(n => n.value.focus()))
@@ -55,8 +89,8 @@ namespace internal {
 			}),
 		)
 
-	const command_palette_form: Maoka.Teacher = kindergarten =>
-		styled.command_palette_form(use => {
+	const form: Maoka.Teacher = kindergarten =>
+		styled.item_form(use => {
 			const handle_submit = (event: Event) => event.preventDefault()
 
 			use(maoka_jabs.set_id("cp-form"))
@@ -65,13 +99,108 @@ namespace internal {
 			return kindergarten
 		})
 
-	export const command_palette_items_div = maoka.styled.div("command-palette_items")
-	export const command_palette_footer_div = maoka.styled.div("command-palette_footer")
+	const items_wrapper: Maoka.Teacher = kindergarten => styled.items_wrapper(() => kindergarten)
+
+	const items: Maoka.Teacher = kindergarten => styled.items(() => kindergarten)
 
 	namespace styled {
-		export const command_palette_form = maoka.styled.form("command-palette_form")
-		export const command_palette_input = maoka.styled.input("command-palette_search")
-		export const command_palette_window = maoka.styled.div("command-palette")
-		export const command_palette_wrapper = maoka.styled.div("command-palette_wrapper")
+		export const items_wrapper = maoka.styled.div("command-palette_items_multiple-wrapper")
+		export const items = maoka.styled.div("command-palette_items")
+		export const item = maoka.styled.div("command-palette_item")
+		export const item_info = maoka.styled.div("command-palette_item_info")
+		export const item_title_wrapper = maoka.styled.div("command-palette_item_title-wrapper")
+		export const item_main = maoka.styled.div("command-palette_item_main")
+		export const item_footer = maoka.styled.div("command-palette_item_footer")
+		export const item_form = maoka.styled.form("command-palette_form")
+		export const item_input = maoka.styled.input("command-palette_search")
+		export const modal = maoka.styled.div("command-palette")
+		export const overlay = maoka.styled.div("command-palette_wrapper")
+		export const footer = maoka.styled.div("command-palette_footer")
 	}
 }
+
+// TODO Move to core
+
+export type HotkeyOptions = {
+	prevent_in_inputs?: boolean
+	prevent_in_contenteditable?: boolean
+	decoration_only?: boolean
+	show_in_mobile?: boolean
+}
+
+const hotkey = (hotkey: string, options?: HotkeyOptions) =>
+	hotkey_div((use, node) => {
+		const split = hotkey.split("+")
+
+		const is_darwin = use(maoka_jabs.is_darwin)
+
+		const meta = is_darwin ? Key("⌥") : Key("Alt")
+		const mod = is_darwin ? Key("⌘") : Key("Ctrl")
+		const ctrl = Key("Ctrl")
+		const option = Key("⌥")
+		const shift = Key("⇧")
+
+		const symbol = split[split.length - 1].toLowerCase()
+
+		const handle_mount = () => {
+			const handle_keydown = (event: KeyboardEvent) => {
+				if (IGNORED_KEYS.includes(event.key) || options?.decoration_only) return
+
+				if (options?.prevent_in_inputs) {
+					const target = event.target as HTMLElement
+
+					// TODO Add textarea and div contenteditable
+					if (target.tagName === "INPUT") return
+				}
+
+				const parsed_hotkey = create_hotkey_from_event(event, is_darwin)
+
+				if (parsed_hotkey === hotkey) {
+					event.preventDefault()
+
+					if (node.value instanceof globalThis.HTMLElement) node.value.click()
+				}
+			}
+
+			document.addEventListener("keydown", handle_keydown)
+
+			return () => {
+				document.removeEventListener("keydown", handle_keydown)
+			}
+		}
+
+		if (options?.show_in_mobile) use(maoka_jabs.add_class("mobile"))
+		if (!options?.decoration_only) use(maoka.jabs.onmount(handle_mount))
+
+		return () => [
+			split.includes("ctrl") ? ctrl : void 0,
+			split.includes("meta") ? meta : void 0,
+			split.includes("option") ? option : void 0,
+			split.includes("mod") ? mod : void 0,
+			split.includes("shift") ? shift : void 0,
+
+			Key(symbol),
+		]
+	})
+
+const hotkey_div = maoka.styled.div("hotkey")
+
+const IGNORED_KEYS = ["Control", "Shift", "Alt", "Meta"]
+
+const KeyContainer = maoka.styled.span("key-container")
+
+const Key = (key: string) =>
+	KeyContainer(
+		() => () =>
+			sweech
+				.match(key)
+				.case("backspace", () => "⌫")
+				.case("enter", () => "⏎")
+				.case("escape", () => "Esc")
+				.case("tab", () => "⇥")
+				.case("arrowleft", () => "←")
+				.case("arrowright", () => "→")
+				.case("arrowup", () => "↑")
+				.case("arrowdown", () => "↓")
+				.default(() => title_case(key)),
+	)

lib/frontend-app/src/command-palette/command-palette.jab.ts

@@ -1,10 +1,12 @@
 import { Maoka, maoka } from "@ordo-pink/maoka"
+import { CommandPaletteItemType } from "@ordo-pink/core"
 
 import { app_context } from "../../app-context"
 import { command_palette } from "./command-palette.component"
 import { command_palette$ } from "./command-palette.state"
 
 import "./command-palette.style.css"
+import { BsTerminal } from "@ordo-pink/frontend-icons"
 
 export const create_command_palette: Maoka.Jab = use => {
 	use(internal.track_prey)
@@ -23,7 +25,19 @@ namespace internal {
 			const release_show = hunter.track("command_palette.show", guns.command_palette_show)
 			const release_toggle = hunter.track("command_palette.toggle", guns.command_palette_toggle)
 
+			hunter.shoot("command_palette.add", {
+				id: COMMAND_PALETTE_TOGGLE_ID,
+				readable_name: "Toggle command palette",
+				value: () => hunter.shoot("command_palette.toggle"),
+				hotkey: "mod+shift+p",
+				description: "Show or hide command palette. Hides command palette if you can see this message.",
+				type: CommandPaletteItemType.MODAL_OPENER,
+				render_icon: span => maoka.dom.render(span, BsTerminal(), () => crypto.randomUUID()),
+			})
+
 			return () => {
+				hunter.shoot("command_palette.remove", COMMAND_PALETTE_TOGGLE_ID)
+
 				release_add()
 				release_hide()
 				release_remove()
@@ -35,8 +49,10 @@ namespace internal {
 		use(maoka.jabs.onmount(handle_onmount))
 	}
 
+	const COMMAND_PALETTE_TOGGLE_ID = "command_palette.toggle"
+
 	// TODO Check how to select global items
-	const global_palette = (): Ordo.CommandPalette.Instance => ({
+	const global_palette = (): Ordo.CommandPalette.Instance<() => void> => ({
 		items: command_palette$.select("items"),
 		on_select: item => item.value(),
 	})