style(tailwind): use block vs. icon for Color items

[minusfive]

Use block characters instead of an icon for the Color item "kind" to make swatches more usable.

Old

New

[Saghen]

Looks good! Although I don't think we should replace the icon for all color items. This should be a special case for tailwind instead

[minusfive]

Looks good! Although I don't think we should replace the icon for all color items. This should be a special case for tailwind instead

Agree, let me correct it.

[minusfive]

Alright @Saghen, think it's ready for review now. I took the opportunity to clean up some of the code a bit, hope it's OK.

[minusfive]

@Saghen LMK if you'd like me to roll back some of the unnecessary changes, or whether you'd prefer I go in a different direction. Lay it on me, I won't be offended ;)

[Saghen]

Thanks!

[nmfirdausw]

@Saghen, @minusfive
Can we make the block is configurable, I want to use this ■ instead of block.

[minusfive]

@Saghen, @minusfive

Can we make the block is configurable, I want to use this ■ instead of block.

I'd originally made it configurable through the Kinds array, but that was before I learned Kinds are actually defined at the protocol level https://microsoft.github.io/language-server-protocol/specifications/lsp/3.17/specification/, which I believe is one of the reasons @Saghen refactored my original.

Wouldn't be too hard to add a config option I'd think. Unfortunately I'll be tied up for the next couple of weeks, but if I find the time I'll give it a shot.

Or feel free to submit your own PR!

[idr4n]

@nmfirdausw I wanted the same and I got it working with the following:

opts = {
  completion = {
    menu = {
      draw = {
        components = {
          kind_icon = {
            text = function(ctx)
              if require("blink.cmp.completion.windows.render.tailwind").get_hex_color(ctx.item) then
                return "󱓻"
              end
              return ctx.kind_icon .. ctx.icon_gap
            end,
          },
        },
      },
    },
  },
}

[minusfive]

@nmfirdausw I wanted the same and I got it working with the following:

opts = {

  completion = {

    menu = {

      draw = {

        components = {

          kind_icon = {

            text = function(ctx)

              if require("blink.cmp.completion.windows.render.tailwind").get_hex_color(ctx.item) then

                return "󱓻"

              end

              return ctx.kind_icon .. ctx.icon_gap

            end,

          },

        },

      },

    },

  },

}

I feel like this is the best option, tbh. Not sure it's worth polluting the config table with a single orphan icon outside of the kinds array. Component overrides are very powerful and let you do whatever you want.