Allow icon's in CommandList

[rouilj]

I have this working:

The changes are pretty minimal. I'll link a pull request here in a few.

It is used with a command array like:

	  {
	    name: "Toggle Dark/Light Theme",
            shortcut: "ctrl+1",
	    icon: null,
            handler: () => {...}
          },
          {
            name: "Change Language",
            shortcut: "ctrl+shift+l",
	    icon: '<span class="icon">&nbsp;></span>',
            handler: () => {...}
         },
          {
            name: "Goto About",
            shortcut: "ctrl+d",
            handler: () => (window.location.hash = "about"),
	    icon: '<img src="../Cjdowner-Cryptocurrency-ICON.512.webp">'
          },
          {
            name: "Destroy Instance",
	    icon: '<svg version="1.1" id="Uploaded to svgrepo.com" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 32 32" xml:space="preserve"><path d="M17,9v0.459v1.468l1.401,0.44C21.75,12.419,24,15.487,24,19c0,4.411-3.589,8-8,8s-8-3.589-8-8 c0-3.513,2.25-6.581,5.599-7.633L15,10.927V9.459V9H17 M17.95,2C16.323,2,15,3.323,15,4.95V7h-2v2.459C8.943,10.734,6,14.523,6,19 c0,5.523,4.477,10,10,10s10-4.477,10-10c0-4.477-2.943-8.266-7-9.541V7h-2V4.95C17,4.426,17.426,4,17.956,4 c0.318,0,0.614,0.158,0.791,0.423l0.843,1.265C20.139,6.51,21.057,7,22.05,7C23.677,7,25,5.677,25,4.05V3h-2v1.05 C23,4.574,22.574,5,22.044,5c-0.318,0-0.614-0.158-0.791-0.423L20.41,3.312C19.861,2.49,18.943,2,17.95,2L17.95,2z M15,12.08 c-3.386,0.488-6,3.401-6,6.92h2c0-2.414,1.721-4.434,4-4.899V12.08z"/></svg>',
            handler: () => {...}

It supports 5 cases:

1. if icon is not defined, it inserts an empty svg that holds 24px of space on the left of the label
2. if icon is null, the space is not held and the label smooshes to the left (first item)
3. if icon is a character, the character is used. You can pad it with   to add space on the left side. If the string is
   longer than 24 px, it's cut off. (second item)
4. the icon can be an image, css sized to 24x24px. (third item)
5. the icon can be an svg, css sized to 24x24px fill set to currentColor. (fourth item)

The icon is separated from the text by .5em of space.

I have one question. For cases 1 and 2, should there be an option for CommandPal that swaps
them. So that a missing icon: doesn't reserve 24px of white space on the left?
In this case setting icon: null would result in an empty 24x24px space.

The reason I bring this up is that a user may not want any icons at all. e.g. for the list of languages, I have
no icons. I could add: icon:null" to each language command. But I think for that case it would be better to have
CommandPal not reserve the icon space.

Thoughts?

[rouilj]

Also while I was looking at the code, I came across:

 {#if !!item.shortcut}

what's with the !!?

[rouilj]

Hi Ben:

I closed the pull request because something weird is happening.

I changed CommandList.svelte to:

  {#each items as item, index}
    <p
      class="item"
      class:selected={index == selectedIndex}
      on:mousedown={e => clickedIndex(e, index)}>
      {#if !!item.icon}
        {@html item.icon}
      {:else}
	{#if item.icon !== null}
            <svg fill="#000000" class="cp-placeholder" height="24" width="24" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"></svg>
        {/if}
      {/if}
      <span class="command">{item.name}</span>
      {#if !!item.shortcut}
        <kyb>{item.shortcut}</kyb>
      {:else}
        <span class="cp-placeholder"/>
      {/if}
    </p>
  {/each}

to add item.icon. when I first pull up the command palette (1) everything is fine. I see:

the blue blobs are the empty svg and the goldenrod squares are an outline on the span holding the place for the shortcut.

Now I type d (2) and I get:

Again everything is fine. If I type c instead I get:

Note the icon has moved to the end on the emergency entry. WT.... If I look at the HTML, I see that the img has actually moved in the p:

Now if I type backspace, I get:

Note zot's icon on the right. I should see (1). If I dismiss (using ESC) the window and use the hotkey to reopen it, is still shows the misplaced icon for zot.

If I type d again I get what is displayed above in (2). Backspacing over the d now returns the original display at (1).

My edits to CommandList.svelte included some css changes (see: https://github.com/rouilj/command-pal/blob/add_icons/src/CommandList.svelte).

But I claim no css would re-arrange the order of the html tags. Is this a svelte bug? Is some state not getting cleared?

One thing to note, if I change: {#if !!item.shortcut} to {#if false && !!item.shortcut} the bug doesn't happen.
So it has something to do with @html being executed.

Any ideas here? I am totally lost and would really like to get icons into command-pal.

[rouilj]

I reopened the request. updating svelte fixed it.