WezTermのタブにアイコンをつける

はじめに

以下の記事でWezTermを触り始めて、大まかな見た目などを変更したりタブにディレクトリ名を入れたりしました。

https://zenn.dev/gsy0911/articles/73747712233191

以前の記事で設定したタブの状態（前記事より引用）

実際に触っていると文字が多く見切れてしまっている点が気になりました。そのため、文字数を少なくして見切れないようにすると、そのために動いているサービスをアイコンで表示してパッと見でわかるように修正します。

改善後

設定後の完成イメージは以下の通りです。下部に設定後のタブを表示しています。

修正後のWezTermのタブ

タブの部分のみ拡大したのが以下の図です。

修正後のWezTermのタブの拡大図

設定

WezTemで設定できるiconは以下の公式サイトにまとめられています。この中からzshやdockerなどのアイコンを選びます。

https://wezfurlong.org/wezterm/config/lua/wezterm/nerdfonts.html

local wezterm = require 'wezterm'を記述した上で、以下のように対応づけました。

項目	nerdfontsの名前
neovim	wezterm.nerdfonts.linux_neovim
docker	wezterm.nerdfonts.md_docker
node	wezterm.nerdfonts.md_language_typescript
python	wezterm.nerdfonts.dev_python
task	wezterm.nerdfonts.cod_server_process
zsh	wezterm.nerdfonts.dev_terminal
fallback	wezterm.nerdfonts.md_console_network

上記のようなiconの対応関係でwezterm.luaの修正をしていきます。

nodeの場合のみ、TypeScriptのアイコンを設定しているのは変な気もしますが、実際にこのプロセスが動くのはReactなどのサーバーを動かすことが多いためこのようにしています。

まずは、アイコンと色を定数として定義します。色は、各種アイコンがパッとわかるような色を設定しています。

~/Library/Application Support/lazygit/wezterm.lua

  （前略）
-- タブのアイコン
local TAB_ICON_DOCKER = wezterm.nerdfonts.md_docker
local TAB_ICON_PYTHON = wezterm.nerdfonts.dev_python
local TAB_ICON_NEOVIM = wezterm.nerdfonts.linux_neovim
local TAB_ICON_ZSH = wezterm.nerdfonts.dev_terminal
local TAB_ICON_TASK = wezterm.nerdfonts.cod_server_process
local TAB_ICON_NODE = wezterm.nerdfonts.md_language_typescript
local TAB_ICON_FALLBACK = wezterm.nerdfonts.md_console_network
-- タブのアイコン色
local TAB_ICON_COLOR_DOCKER = "#4169e1"
local TAB_ICON_COLOR_PYTHON = "#ffd700"
local TAB_ICON_COLOR_NEOVIM = "#32cd32"
local TAB_ICON_COLOR_ZSH = "#808080"
local TAB_ICON_COLOR_TASK = "#ff7f50"
local TAB_ICON_COLOR_NODE = "#1e90ff"
local TAB_ICON_COLOR_FALLBACK = "#ae8b2d"
local TAB_FOREGROUND_DEFAULT = "#FFFFFF"
local TAB_BACKGROUND_DEFAULT = "#5c6d74"
local TAB_FOREGROUND_ACTIVE = "#FFFFFF"
local TAB_BACKGROUND_ACTIVE = "#ae8b2d"
-- タブの左側の装飾
local SOLID_LEFT_ARROW = wezterm.nerdfonts.ple_lower_right_triangle
local SOLID_LEFT_CIRCLE = wezterm.nerdfonts.ple_left_half_circle_thick
-- タブの右側の装飾
local SOLID_RIGHT_ARROW = wezterm.nerdfonts.ple_upper_left_triangle
local SOLID_RIGHT_CIRCLE = wezterm.nerdfonts.ple_right_half_circle_thick

次に、タブの色の設定です。アクティブになった場合のみ色を変えるようにしています。これは前記事と同じ設定です。

~/Library/Application Support/lazygit/wezterm.lua

  （承前）
wezterm.on("format-tab-title", function(tab, tabs, panes, config, hover, max_width)
  local background = TAB_BACKGROUND_DEFAULT
  local foreground = TAB_FOREGROUND_DEFAULT
  if tab.is_active then
    background = TAB_BACKGROUND_ACTIVE
    foreground = TAB_FOREGROUND_ACTIVE
  end
  local edge_background = "none"
  local edge_foreground = background
  

タブの名前に対応するアイコンと色を設定します。

~/Library/Application Support/lazygit/wezterm.lua

  （承前）
  local icon = TAB_ICON_FALLBACK
  local icon_foreground = TAB_ICON_COLOR_FALLBACK
  if tab.active_pane.title == "nvim" then
    icon = TAB_ICON_NEOVIM
    icon_foreground = TAB_ICON_COLOR_NEOVIM
  elseif tab.active_pane.title == "zsh" then
    icon = TAB_ICON_ZSH
    icon_foreground = TAB_ICON_COLOR_ZSH
  elseif tab.active_pane.title == "Python" or string.find(tab.active_pane.title, "python") then
    icon = TAB_ICON_PYTHON
    icon_foreground = TAB_ICON_COLOR_PYTHON
  elseif tab.active_pane.title == "node" or string.find(tab.active_pane.title, "node") then
    icon = TAB_ICON_NODE
    icon_foreground = TAB_ICON_COLOR_NODE
  elseif tab.active_pane.title == "docker" or string.find(tab.active_pane.title, "docker") then
    icon = TAB_ICON_DOCKER
    icon_foreground = TAB_ICON_COLOR_DOCKER
  elseif tab.active_pane.title == "task" or string.find(tab.active_pane.title, "task") then
    icon = TAB_ICON_TASK
    icon_foreground = TAB_ICON_COLOR_TASK
  end

最後に、タブを作成していきます。return節で左から順次タブを形づくっていきます。

~/Library/Application Support/lazygit/wezterm.lua

  （承前）
  local pane = tab.active_pane
  local pane_id = pane.pane_id
  local cwd = "none"
  if title_cache[pane_id] then
    cwd = title_cache[pane_id]
  else
    cwd = "-"
  end
  
  local wholeTitle = cwd 
  local title = " " .. wezterm.truncate_right(wholeTitle, max_width - 1) .. " "
  return {
    { Background = { Color = edge_background } },
    { Foreground = { Color = icon_foreground } },
    { Text = icon },
    { Text = " " },
    { Foreground = { Color = edge_foreground } },
    { Text = SOLID_LEFT_CIRCLE },
    { Background = { Color = background } },
    { Foreground = { Color = foreground } },
    { Text = title },
    { Background = { Color = edge_background } },
    { Foreground = { Color = edge_foreground } },
    { Text = SOLID_RIGHT_CIRCLE },
  }
end)

（再掲）タブにアイコンを設定した図

以下に全てをまとめたファイルを置いておきます。実際に反映する場合には利用してください。

まとめたwezterm.lua

~/Library/Application Support/lazygit/wezterm.lua

-- タブのアイコン
local TAB_ICON_DOCKER = wezterm.nerdfonts.md_docker
local TAB_ICON_PYTHON = wezterm.nerdfonts.dev_python
local TAB_ICON_NEOVIM = wezterm.nerdfonts.linux_neovim
local TAB_ICON_ZSH = wezterm.nerdfonts.dev_terminal
local TAB_ICON_TASK = wezterm.nerdfonts.cod_server_process
local TAB_ICON_NODE = wezterm.nerdfonts.md_language_typescript
local TAB_ICON_FALLBACK = wezterm.nerdfonts.md_console_network
-- タブのアイコン色
local TAB_ICON_COLOR_DOCKER = "#4169e1"
local TAB_ICON_COLOR_PYTHON = "#ffd700"
local TAB_ICON_COLOR_NEOVIM = "#32cd32"
local TAB_ICON_COLOR_ZSH = "#808080"
local TAB_ICON_COLOR_TASK = "#ff7f50"
local TAB_ICON_COLOR_NODE = "#1e90ff"
local TAB_ICON_COLOR_FALLBACK = "#ae8b2d"
local TAB_FOREGROUND_DEFAULT = "#FFFFFF"
local TAB_BACKGROUND_DEFAULT = "#5c6d74"
local TAB_FOREGROUND_ACTIVE = "#FFFFFF"
local TAB_BACKGROUND_ACTIVE = "#ae8b2d"
-- タブの左側の装飾
local SOLID_LEFT_ARROW = wezterm.nerdfonts.ple_lower_right_triangle
local SOLID_LEFT_CIRCLE = wezterm.nerdfonts.ple_left_half_circle_thick
-- タブの右側の装飾
local SOLID_RIGHT_ARROW = wezterm.nerdfonts.ple_upper_left_triangle
local SOLID_RIGHT_CIRCLE = wezterm.nerdfonts.ple_right_half_circle_thick

wezterm.on("format-tab-title", function(tab, tabs, panes, config, hover, max_width)
  local background = TAB_BACKGROUND_DEFAULT
  local foreground = TAB_FOREGROUND_DEFAULT
  if tab.is_active then
    background = TAB_BACKGROUND_ACTIVE
    foreground = TAB_FOREGROUND_ACTIVE
  end
  local edge_background = "none"
  local edge_foreground = background

  local icon = TAB_ICON_FALLBACK
  local icon_foreground = TAB_ICON_COLOR_FALLBACK
  if tab.active_pane.title == "nvim" then
    icon = TAB_ICON_NEOVIM
    icon_foreground = TAB_ICON_COLOR_NEOVIM
  elseif tab.active_pane.title == "zsh" then
    icon = TAB_ICON_ZSH
    icon_foreground = TAB_ICON_COLOR_ZSH
  elseif tab.active_pane.title == "Python" or string.find(tab.active_pane.title, "python") then
    icon = TAB_ICON_PYTHON
    icon_foreground = TAB_ICON_COLOR_PYTHON
  elseif tab.active_pane.title == "node" or string.find(tab.active_pane.title, "node") then
    icon = TAB_ICON_NODE
    icon_foreground = TAB_ICON_COLOR_NODE
  elseif tab.active_pane.title == "docker" or string.find(tab.active_pane.title, "docker") then
    icon = TAB_ICON_DOCKER
    icon_foreground = TAB_ICON_COLOR_DOCKER
  elseif tab.active_pane.title == "task" or string.find(tab.active_pane.title, "task") then
    icon = TAB_ICON_TASK
    icon_foreground = TAB_ICON_COLOR_TASK
  end

  local pane = tab.active_pane
  local pane_id = pane.pane_id
  local cwd = "none"
  if title_cache[pane_id] then
    cwd = title_cache[pane_id]
  else
    cwd = "-"
  end
  
  local wholeTitle = cwd 
  local title = " " .. wezterm.truncate_right(wholeTitle, max_width - 1) .. " "
  return {
    { Background = { Color = edge_background } },
    { Foreground = { Color = icon_foreground } },
    { Text = icon },
    { Text = " " },
    { Foreground = { Color = edge_foreground } },
    { Text = SOLID_LEFT_CIRCLE },
    { Background = { Color = background } },
    { Foreground = { Color = foreground } },
    { Text = title },
    { Background = { Color = edge_background } },
    { Foreground = { Color = edge_foreground } },
    { Text = SOLID_RIGHT_CIRCLE },
  }
end)

おわりに

WezTermのタブがわかりやすくなりました。快適なWezTermライフを送っていきます。