[Picker] How to create custom styles for different pickers.

[kingedward35]

I was hoping someone could help with customizing the different picker options with the new Snacks picker plugin. What I would like to do is for files and grep pickers to have a certain look, but then with buffers or highlights have another look. I am able to somewhat achieve this using some of the presets, but I can't update the title or width etc. when using these presets. I was wondering if anyone knew of a way do this?

These are some of the things I have tried, but I can't get the exact thing that I am looking for.

  opts = {
    picker = {
      -- layouts = {
      --   buffers = {
      --     layout = {
      --       preview = false,
      --       layout = {
      --         backdrop = false,
      --         width = 0.5,
      --         min_width = 80,
      --         height = 0.4,
      --         min_height = 10,
      --         box = "vertical",
      --         border = "rounded",
      --         title = " Buffers ",
      --         title_pos = "center",
      --         { win = "input", height = 1, border = "bottom" },
      --         { win = "list", border = "none" },
      --         { win = "preview", height = 0.4, border = "top" },
      --       },
      --     },
      --   },
      -- },
      sources = {
        buffers = {
          -- preset = "select",
          -- layout = "select",
          -- preview = false,
          border = "rounded",
          title = " Buffers ",
          title_pos = "center",
          winopts = {
            width = 0.5,
            height = 0.4,
          },
        },
      },
      layout = {
        reverse = true,
        layout = {
          box = "horizontal",
          backdrop = false,
          width = 0.8,
          height = 0.9,
          border = "none",
          {
            box = "vertical",
            { win = "list", title = " Results ", title_pos = "center", border = "rounded" },
            { win = "input", height = 1, border = "rounded", title = "{source} {live}", title_pos = "center" },
          },
          {
            win = "preview",
            width = 0.50,
            border = "rounded",
            title = " Preview ",
            title_pos = "center",
          },
        },
      },

Any help would be greatly appreciated. Thanks.

[folke]

source.buffer.layout = ...

You can eitehr set it to a full layout, or a preset.

[kingedward35]

Thanks for the response. I am pretty close to styling the picker the way that I want with this code:

      sources = {
        buffers = {
          layout = {
            title = " Buffers ",
            title_pos = "center",
            border = "rounded",
            preview = false,
            -- backdrop = false,
            -- row = 5,
            layout = {
              -- {
              width = 0.5,
              min_width = 80,
              height = 0.4,
              min_height = 10,
              -- },
            },
            -- {
            -- box = "vertical",
            -- { win = "list", border = "none" },
            -- { win = "input", height = 1, border = "bottom" },
            -- },
          },
        },
      },

The only issue that I currently have is that the input is on the bottom of the list and I would like to have the input on the top.

Is there some configuration that I am missing to get the input above the list? Thanks again.

[nidzola]

@kingedward35 box = "vertical" inside layout