Support icons or special characters in the tab title/name

[maulik13]

Is your feature request related to a problem? Please describe. I would like to use icons from nerd font in my tab name. e.g. github icon. I use them to indicate if I am in a repository or type of project.

Right now icons work in other parts e.g. {index}, but it does not work with {name}. If I use special characters or nerd font icons the tab name becomes completely blank.

Describe the solution you'd like Tab title should display icons/special characters.

Additional context none

[dj95]

Hi and thanks for your bug report. Not sure what's going on on your side, but for me it's working. I just cannot paste them when renaming a tab, but using them in a layout works totally fine.

As you also opened an issue in zellij (https://github.com/zellij-org/zellij/issues/3682), I guess it's either a problem when renaming in zellij or in your setup.

[maulik13]

Hi @dj95 thank you for replying. That is actually positive that the plugin already supports this! Then I just need to figure out what is going on on my end. Any pointers would be very helpful.

I have tried changing fonts, I have also tried another terminal (iTerm in addition to kitty), but no luck.

[dj95]

I'd try to also paste the icons into the terminal, to validate, whether the font is correctly loaded. While playing around, I found some icons also didn't show up because of the font I use. If the icons are visible in the terminal, they should also work in tab names (especially when used in a layout).

[maulik13]

Thank you for the pointer. Though these icons are already working in other parts of the terminal (e.g. prompt, even in zjstatus). It is only the zellij tabs text where they do not work.

[maulik13]

@dj95 Just double checking, the text you have there with icons is that part of {name} variable?

[dj95]

Here's the layout I use. So yes, it's part of the {name} variable and comes from zellij.

layout {
    default_tab_template {
        children
        pane size=2 borderless=true {
            plugin location="file:target/wasm32-wasip1/debug/zjstatus.wasm" {
                color_blue   "#89B4FA"
                color_yellow "yellow"
                color_bg     "#181825"

                format_left               "{mode}#[fg=$blue,bg=$bg,bold] {session}"
                format_center             "{tabs}"
                format_right              "{datetime}"
                format_space              "#[bg=$bg]"
                format_precedence         "lrc"
                format_hide_on_overlength "false"

                border_enabled  "true"
                border_char     "─"
                border_format   "#[fg=#6C7086]{char}"
                border_position "top"

                hide_frame_for_single_pane   "true"
                hide_frame_except_for_search "false"

                mode_normal          "#[bg=$blue] #[bg=yellow] "
                mode_tmux            "#[bg=$yellow] "
                mode_default_to_mode "tmux"

                tab_normal              "#[fg=#6C7086,bg=$bg] {index} {name} {floating_indicator} "
                tab_rename              "#[fg=#eba0ac,bg=$bg] {index} {name} {floating_indicator} "
                tab_normal_fullscreen   "#[fg=#6C7086,bg=$bg] {index} {name} [] "
                tab_normal_sync         "#[fg=#6C7086,bg=$bg] {index} {name} <> "
                tab_active              "#[fg=#9399B2,bg=$bg,bold,italic] {index} {name} {floating_total_count}{floating_indicator}{sync_indicator}{fullscreen_indicator}"
                tab_separator           "#[fg=#6C7086,bg=$bg] | "
                tab_floating_indicator  "F"
                tab_sync_indicator      "S"
                tab_fullscreen_indicator "FS"
                tab_display_count       "3"
                tab_truncate_start_format "#[fg=$blue,bg=$bg]#[bg=$blue,fg=black] +{count} ... #[fg=$bg,bg=$blue]"
                tab_truncate_end_format "#[fg=red,bg=$bg] ... +{count} > #[bg=$yellow] "

                datetime             "#[fg=#6C7086,bg=$bg,bold] {format} #[bg=#6C7086,fg=$bg,bold] {time}"
                datetime_time_format "%H:%M:%S"
                datetime_format      "%A, %d %b %Y %H:%M"
                datetime_timezone    "Europe/Berlin"
            }
        }
    }

    tab name=" foo 󰬕󰬌󰫿󰯴󰬍󰰔󰬁"
    tab name="bar"
}

[maulik13]

Thank you for sharing your configuration. I do not see anything that could be different in your config other than design elements.

default_tab_template {
    pane size=2 borderless=true {
        plugin location="file:/$HOME/.config/zellij/plugins/zjstatus.wasm" {
            // Catppuccin Machiatto
            color_rosewater "#f4dbd6"
            color_flamingo "#f0c6c6"
            color_pink "#f5bde6"
            color_mauve "#c6a0f6"
            color_red "#ed8796"
            color_maroon "#ee99a0"
            color_peach "#f5a97f"
            color_yellow "#eed49f"
            color_green "#a6da95"
            color_teal "#8bd5ca"
            color_sky "#91d7e3"
            color_sapphire "#7dc4e4"
            color_blue "#8aadf4"
            color_lavender "#b7bdf8"
            color_text "#cad3f5"
            color_subtext1 "#b8c0e0"
            color_subtext0 "#a5adcb"
            color_overlay2 "#939ab7"
            color_overlay1 "#8087a2"
            color_overlay0 "#6e738d"
            color_surface2 "#5b6078"
            color_surface1 "#494d64"
            color_surface0 "#363a4f"
            color_base "#24273a"
            color_mantle "#1e2030"
            color_crust "#181926"

            format_left  "#[bg=$base,fg=$text,bold]{mode}#[bg=$surface0,fg=$text] 󱓞 #[bg=$surface0,fg=$text,regular] {session}#[bg=$base,fg=$surface0]"
            format_center "#[bg=$base]{tabs}"
            format_space  ""
            format_right "#[bg=$base,fg=$flamingo]#[fg=$base,bg=$flamingo]  #[bg=$surface0,fg=$flamingo] {command_host} "
            format_hide_on_overlength "true"
            format_precedence "crl"

            border_enabled  "false"
            border_char     "─"
            border_format   "#[fg=#6C7086]{char}"
            border_position "top"

            mode_normal        "#[bg=$blue,fg=$surface0,bold] WORK "
            mode_locked        "#[bg=#5b6078,fg=$surface0,bold] LOCKED  "
            mode_resize        "#[bg=#ee99a0,fg=$surface0,bold] RESIZE "
            mode_pane          "#[bg=#a6da95,fg=$surface0,bold] PANE "
            mode_tab           "#[bg=#8bd5ca,fg=$surface0,bold] TAB "
            mode_scroll        "#[bg=#eed49f,fg=$surface0,bold] SCROLL "
            mode_enter_search  "#[bg=#8aadf4,fg=$surface0,bold] ENT-SEARCH "
            mode_search        "#[bg=#8aadf4,fg=$surface0,bold] SEARCHARCH "
            mode_rename_tab    "#[bg=#8bd5ca,fg=$surface0,bold] RENAME-TAB "
            mode_rename_pane   "#[bg=#a6da95,fg=$surface0,bold] RENAME-PANE "
            mode_session       "#[bg=#c6a0f6,fg=$surface0,bold] SESSION "
            mode_move          "#[bg=#f0c6c6,fg=$surface0,bold] MOVE "
            mode_prompt        "#[bg=#7dc4e4,fg=$surface0,bold] PROMPT "
            mode_tmux          "#[bg=#f5a97f,fg=$surface0,bold] TMUX "

            tab_floating_indicator "󰹙 "
            tab_fullscreen_indicator " "
            tab_sync_indicator " "

            // formatting for inactive tabs
            tab_normal              "#[bg=$base,fg=#8aadf4]#[bg=#8aadf4,fg=$surface0,bold]{index} #[bg=$surface0,fg=#b8c0e0] {name}{floating_indicator}#[bg=$base,fg=$surface0]"
            tab_normal_fullscreen   "#[bg=$base,fg=#8aadf4]#[bg=#8aadf4,fg=$surface0,bold]{index} #[bg=$surface0,fg=#b8c0e0] {name}{fullscreen_indicator}#[bg=$base,fg=$surface0]"
            tab_normal_sync         "#[bg=$base,fg=#8aadf4]#[bg=#8aadf4,fg=$surface0,bold]{index} #[bg=$surface0,fg=#b8c0e0] {name}{sync_indicator}#[bg=$base,fg=$surface0]"

            // formatting for the current active tab
            tab_active              "#[bg=$base,fg=$peach]#[bg=$peach,fg=$base,bold]{index} #[bg=$peach,fg=$surface0,bold]{name}{floating_indicator}#[bg=$base,fg=$peach]"
            tab_active_fullscreen   "#[bg=$base,fg=$peach]#[bg=$peach,fg=$base,bold]{index} #[bg=$peach,fg=$surface0,bold]{name}{fullscreen_indicator}#[bg=$base,fg=$peach]"
            tab_active_sync         "#[bg=$base,fg=$peach]#[bg=$peach,fg=$base,bold]{index} #[bg=$peach,fg=$surface0,bold]{name}{sync_indicator}#[bg=$base,fg=$peach]"

            // separator between the tabs
            tab_separator           "#[bg=$base,fg=$base]█"

            // indicators
            tab_sync_indicator       " "
            tab_fullscreen_indicator " 󰊓"
            tab_floating_indicator   " 󰹙"

            command_git_branch_command     "git rev-parse --abbrev-ref HEAD"
            command_git_branch_format      "#[fg=blue] {stdout} "
            command_git_branch_interval    "10"
            command_git_branch_rendermode  "static"

            datetime        "#[fg=#6C7086,bold] {format} "
            datetime_format "%A, %d %b %Y %H:%M"
            datetime_timezone "Europe/London"

            command_host_command    "uname -n"
            command_host_format     "{stdout}"
            command_host_interval   "0"
            command_host_rendermode "static"

            command_user_command    "whoami"
            command_user_format     "{stdout}"
            command_user_interval   "0"
            command_user_rendermode "static"
        }
    }
    children
}

[dj95]

How do you get the icon into the tab name?

[dj95]

Have you tested the behaviour with the default tab bar?

[maulik13]

I tried two methods of setting the icon:

1. using the hook chpwd_functions+=(zellij_tab_name_update)
2. manually using zellij action rename-tab

Yes I have tried in the default tab plugin and it does not work, but that plugin is using ascii string somewhere so I was not sure if it would support icons. And that is why I was hoping this plugin probably could fix it.

I have also tried zellij in different terminals without any luck. If it would not display icon I could live with it, but instead the whole name becomes blank. The icons do show up for indicators right after the tab names.

Example, Before executing rename-tab,

After executing,

[maulik13]

Ok so I think I found out the issue. If I set the tab name like you did in your config it works and I did get the icons to render. But any kind of dynamic tab renaming does not work with an icon in the text. So reproducible steps are,

1. Run zellij with zjstatus
2. Run zellij action rename-tab "hello git  "

[dj95]

Great to hear, that you found the issue!

I think that's probably then a bug in zellij itself, as displaying them works in zjstatus, when the icons are set in a layout file.

Could you add the reproduction steps to the issue you've opened on the zellij side.

Thanks a lot for your great debugging effort and information!