[FR] Add fuzzy/orderless way of searching in command line

[idlip]

• Command line can be one of the highlight for glide and since it gives APIs many will be using functions.

I've a link picker which shows all href link from DOM.

Fuzzy search or orderless way to search would really benefit command line options.
Currently just hitting space hides all other candidates. So enter by default choses last visible item.
Even Force passing empty candidate would be great.

Ig this is where search happens?

glide/src/glide/toolkit/content/widgets/glide-commandline.ts

Line 112 in c4daad2

source.search(ctx, options);

Please let me know if there is better method to do this via glide api itself.

Code to hints in commandline

type LinkAction = "open" | "copy" | "newtab" | "background";

async function showLinkPicker(action: LinkAction) {
  const currentTab = await getCurrentTab();
  if (!currentTab.id) return;

  const results = await browser.tabs.executeScript(currentTab.id, {
    code: `
      Array.from(document.querySelectorAll('[href]')).map(el => ({
        href: el.href,
        text: el.textContent?.trim() || '',
        title: el.getAttribute('title') || ''
      }))
    `,
  });

  const links = results[0] as Array<{
    href: string;
    text: string;
    title: string;
  }>;

  const actionTitles: Record<LinkAction, string> = {
    open: "Open Link",
    copy: "Copy Link",
    newtab: "Open in New Tab",
    background: "Open in Background",
  };

  glide.commandline.show({
    title: `${actionTitles[action]} (${links.length} found)`,
    options: links.map((link) => ({
      label: link.text || link.href,
      render: () => {
        const container = document.createElement("div");
        container.style.cssText =
          "display: flex; flex-direction: column; gap: 2px;";

        const title = document.createElement("div");
        title.textContent = link.text || "No text";
        title.style.cssText = "font-weight: 500;";

        const url = document.createElement("div");
        url.textContent = link.href;
        url.style.cssText = "font-size: 0.9em; opacity: 0.7;";

        container.appendChild(title);
        container.appendChild(url);
        return container;
      },
      async execute() {
        switch (action) {
          case "open":
            await browser.tabs.update(currentTab.id, { url: link.href });
            break;
          case "copy":
            await navigator.clipboard.writeText(link.href);
            break;
          case "newtab":
            await browser.tabs.create({ url: link.href });
            break;
          case "background":
            await browser.tabs.create({ url: link.href, active: false });
            break;
        }
      },
    })),
  });
}

---

TLDR;

1. Fuzzy or orderless way to search command line items
2. Allow choosing no item so it can force exit or pass null "", rather than last visible item

[RobertCraigie]

You can override matches() on the option to filter however you'd like!

glide/src/glide/browser/base/content/glide.d.ts

Lines 1770 to 1784 in c4daad2

	/**
	* Optional callback used to determine if this option matches the input entered in the commandline.
	*
	* This is called every time the input changes.
	*
	* `null` can be returned to defer to the default matcher.
	*
	* @example
	* ```typescript
	* matches({ input }) {
	* return my_fuzzy_matcher(input, [bookmark.title]);
	* }
	* ```
	*/
	matches?(props: { input: string }): boolean | null;

(sorry there are not good docs for this yet)

Allow choosing no item so it can force exit or pass null "", rather than last visible item

do you want some specific callback you can override to be executed in this case? or to just close the commandline?

If it's the latter, <esc> would close it immediately, and you can customise it with

glide.keymaps.set("command", "<Esc>", "commandline_toggle");

---

Side note: you can use DOM.create_element() instead of document.createElement() if you weren't aware, it is so much nicer imo (no bias at all 😅). I believe this should be equivalent to your render function

      render: () => {
        return DOM.create_element("div", {
          style: {
            display: "flex",
            flexDirection: "column",
            gap: "2px",
          },
          children: [
            DOM.create_element("div", { textContent: link.text || "No text", style: { fontWeight: "500" } }),
            DOM.create_element("div", { textContent: link.href, style: { fontSize: "0.9em", opacity: "0.7" } }),
          ],
        });
      },

[idlip]

Thank you for pointing out.
Missed the matches in render()