feat: add configurable icon styles (#58)

pablospe · web-flow · commit c8a8f8eabf50 · 2026-01-13T00:21:45.000+02:00
Add `icons` config option to customize file tree icons. **Styles:** - `ascii`: +, x, * (default) - `unicode`: +, ⛌, ● - `nerd-fonts`: different icons per status - `nerd-fonts-alt`: simple with file icons **Features:** - Press `i` to cycle through styles - Icons colored by git status (green/red/yellow) - The highlighted selection is of the color of the change (same as icon color) - Selection highlight uses status color - Folder icons also change per style | ascii | `unicode` | `nerd-fonts` | `nerd-fonts-alt` | | :------------------: | :-----: | :------: | :------------------------------------: | | <img width="130" height="664" alt="image" src="https://github.com/user-attachments/assets/fb22360e-0811-4030-9b06-0bf7a82aaba2" /> | <img width="130" height="664" alt="image" src="https://github.com/user-attachments/assets/81c56616-21f7-425f-ae6c-26f54e36a822" /> | <img width="130" height="664" alt="image" src="https://github.com/user-attachments/assets/4a8fc6a4-2b5d-409a-a52e-f716cade2c25" /> | <img width="130" height="664" alt="image" src="https://github.com/user-attachments/assets/4da8053f-e184-40a8-afb1-a6d87665b015" /> | **Config file:** | Option | Type | Default | Description | | :------------------ | :----- | :------ | :------------------------------------ | | `ui.icons` | string | `ascii` | Icon style: `ascii`, `unicode`, `nerd-fonts`, or `nerd-fonts-alt` |
diff --git a/README.md b/README.md
@@ -70,15 +70,23 @@ ui:
 
   # Customize the search panel width (default: 50)
   searchTreeWidth: 60
+
+  # Icon style: "nerd-fonts" (default), "nerd-fonts-alt", "unicode", or "ascii"
+  icons: nerd-fonts
+
+  # Color filenames by git status (default: true)
+  colorFileNames: false
 ```
 
-| Option              | Type | Default | Description                           |
-| :------------------ | :--- | :------ | :------------------------------------ |
-| `ui.hideHeader`     | bool | `false` | Hide the "DIFFNAV" header             |
-| `ui.hideFooter`     | bool | `false` | Hide the footer with keybindings help |
-| `ui.showFileTree`   | bool | `true`  | Show file tree on startup             |
-| `ui.fileTreeWidth`  | int  | `26`    | Width of the file tree sidebar        |
-| `ui.searchTreeWidth`| int  | `50`    | Width of the search panel             |
+| Option              | Type   | Default | Description                           |
+| :------------------ | :----- | :------ | :------------------------------------ |
+| `ui.hideHeader`     | bool   | `false` | Hide the "DIFFNAV" header             |
+| `ui.hideFooter`     | bool   | `false` | Hide the footer with keybindings help |
+| `ui.showFileTree`   | bool   | `true`  | Show file tree on startup             |
+| `ui.fileTreeWidth`  | int    | `26`    | Width of the file tree sidebar        |
+| `ui.searchTreeWidth`| int    | `50`    | Width of the search panel             |
+| `ui.icons`          | string | `nerd-fonts` | Icon style: `nerd-fonts`, `nerd-fonts-alt`, `unicode`, or `ascii` |
+| `ui.colorFileNames` | bool   | `true`  | Color filenames by git status |
 
 ### Delta
 
@@ -97,8 +105,9 @@ If you want the exact delta configuration I'm using - [it can be found here](htt
 | <kbd>e</kbd>      | Toggle the file tree |
 | <kbd>t</kbd>      | Search/go-to file    |
 | <kbd>y</kbd>      | Copy file path       |
+| <kbd>i</kbd>      | Cycle icon style     |
 | <kbd>o</kbd>      | Open file in $EDITOR |
-| <kbd>Tab</kbd>      | Switch focus between the panes       |
+| <kbd>Tab</kbd>    | Switch focus between the panes |
 | <kbd>q</kbd>      | Quit                 |
 
 ## Under the hood
diff --git a/pkg/config/config.go b/pkg/config/config.go
@@ -9,11 +9,13 @@ import (
 )
 
 type UIConfig struct {
-	HideHeader      bool `yaml:"hideHeader"`
-	HideFooter      bool `yaml:"hideFooter"`
-	ShowFileTree    bool `yaml:"showFileTree"`
-	FileTreeWidth   int  `yaml:"fileTreeWidth"`
-	SearchTreeWidth int  `yaml:"searchTreeWidth"`
+	HideHeader      bool   `yaml:"hideHeader"`
+	HideFooter      bool   `yaml:"hideFooter"`
+	ShowFileTree    bool   `yaml:"showFileTree"`
+	FileTreeWidth   int    `yaml:"fileTreeWidth"`
+	SearchTreeWidth int    `yaml:"searchTreeWidth"`
+	Icons           string `yaml:"icons"`          // "nerd-fonts" (default), "nerd-fonts-alt", "unicode", "ascii"
+	ColorFileNames  bool   `yaml:"colorFileNames"` // Color filenames by git status (default: true)
 }
 
 type Config struct {
@@ -28,6 +30,8 @@ func DefaultConfig() Config {
 			ShowFileTree:    true,
 			FileTreeWidth:   26,
 			SearchTreeWidth: 50,
+			Icons:           "nerd-fonts",
+			ColorFileNames:  true,
 		},
 	}
 }
diff --git a/pkg/filenode/file_node.go b/pkg/filenode/file_node.go
@@ -2,53 +2,101 @@ package filenode
 
 import (
 	"path/filepath"
-	"strings"
 
 	"github.com/bluekeyes/go-gitdiff/gitdiff"
 	"github.com/charmbracelet/lipgloss"
 	"github.com/charmbracelet/lipgloss/tree"
+)
 
-	"github.com/dlvhdr/diffnav/pkg/constants"
-	"github.com/dlvhdr/diffnav/pkg/utils"
+// Icon style constants.
+const (
+	IconsNerdFonts    = "nerd-fonts"
+	IconsNerdFontsAlt = "nerd-fonts-alt"
+	IconsUnicode      = "unicode"
+	IconsASCII        = "ascii"
 )
 
 type FileNode struct {
-	File    *gitdiff.File
-	Depth   int
-	YOffset int
+	File           *gitdiff.File
+	Depth          int
+	YOffset        int
+	IconStyle      string
+	Selected       bool
+	ColorFileNames bool
+	PanelWidth     int
 }
 
 func (f FileNode) Path() string {
 	return GetFileName(f.File)
 }
 
 func (f FileNode) Value() string {
-	icon := " "
-	status := " "
-	if f.File.IsNew {
-		status += lipgloss.NewStyle().Foreground(lipgloss.Color("2")).Render("")
-	} else if f.File.IsDelete {
-		status += lipgloss.NewStyle().Foreground(lipgloss.Color("1")).Render("")
-	} else {
-		status += lipgloss.NewStyle().Foreground(lipgloss.Color("3")).Render("")
-	}
+	icon := f.getIcon()
+	name := filepath.Base(f.Path())
+	// Icon is always colored by status
+	coloredIcon := lipgloss.NewStyle().Foreground(f.StatusColor()).Render(icon)
 
-	depthWidth := f.Depth * 2
-	iconsWidth := lipgloss.Width(icon) + lipgloss.Width(status)
-	nameMaxWidth := constants.OpenFileTreeWidth - depthWidth - iconsWidth
-	base := filepath.Base(f.Path())
-	name := utils.TruncateString(base, nameMaxWidth)
+	if f.Selected {
+		// Apply background with fixed width to extend to panel edge
+		bgStyle := lipgloss.NewStyle().
+			Bold(true).
+			Foreground(f.StatusColor()).
+			Background(lipgloss.Color("#3a3a3a"))
+		if f.PanelWidth > 0 {
+			iconWidth := lipgloss.Width(coloredIcon) + 1
+			// Subtract tree indentation
+			availableWidth := f.PanelWidth - iconWidth - (f.Depth * 2)
+			if availableWidth > 0 {
+				bgStyle = bgStyle.Width(availableWidth)
+			}
+		}
+		return coloredIcon + " " + bgStyle.Render(name)
+	}
 
-	spacerWidth := constants.OpenFileTreeWidth - lipgloss.Width(name) - iconsWidth - depthWidth
-	if len(name) < len(base) {
-		spacerWidth = spacerWidth - 1
+	if f.ColorFileNames {
+		styledName := lipgloss.NewStyle().Foreground(f.StatusColor()).Render(name)
+		return coloredIcon + " " + styledName
 	}
-	spacer := ""
-	if spacerWidth > 0 {
-		spacer = strings.Repeat(" ", spacerWidth)
+
+	return coloredIcon + " " + name
+}
+
+func (f FileNode) getIcon() string {
+	switch f.IconStyle {
+	case IconsNerdFonts:
+		if f.File.IsNew {
+			return ""
+		} else if f.File.IsDelete {
+			return ""
+		}
+		return ""
+	case IconsNerdFontsAlt:
+		return ""
+	case IconsUnicode:
+		if f.File.IsNew {
+			return "+"
+		} else if f.File.IsDelete {
+			return "⛌"
+		}
+		return "●"
+	default: // ascii (fallback for unknown values)
+		if f.File.IsNew {
+			return "+"
+		} else if f.File.IsDelete {
+			return "x"
+		}
+		return "*"
 	}
+}
 
-	return lipgloss.JoinHorizontal(lipgloss.Top, icon, name, spacer, status)
+// StatusColor returns the color for this file based on its git status.
+func (f FileNode) StatusColor() lipgloss.Color {
+	if f.File.IsNew {
+		return lipgloss.Color("2") // green
+	} else if f.File.IsDelete {
+		return lipgloss.Color("1") // red
+	}
+	return lipgloss.Color("3") // yellow/orange
 }
 
 func (f FileNode) String() string {
diff --git a/pkg/ui/mainModel.go b/pkg/ui/mainModel.go
@@ -72,11 +72,12 @@ type mainModel struct {
 	config             config.Config
 	draggingSidebar    bool
 	customSidebarWidth int
+	iconStyle          string
 }
 
 func New(input string, cfg config.Config) mainModel {
-	m := mainModel{input: input, isShowingFileTree: cfg.UI.ShowFileTree, activePanel: FileTreePanel, config: cfg}
-	m.fileTree = filetree.New()
+	m := mainModel{input: input, isShowingFileTree: cfg.UI.ShowFileTree, activePanel: FileTreePanel, config: cfg, iconStyle: cfg.UI.Icons}
+	m.fileTree = filetree.New(cfg.UI.Icons, cfg.UI.ColorFileNames)
 	m.diffViewer = diffviewer.New()
 
 	m.help = help.New()
@@ -93,7 +94,7 @@ func New(input string, cfg config.Config) mainModel {
 	m.search = textinput.New()
 	m.search.ShowSuggestions = true
 	m.search.KeyMap.AcceptSuggestion = key.NewBinding(key.WithKeys("tab"))
-	m.search.Prompt = " "
+	m.search.Prompt = " "
 	m.search.PromptStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("8"))
 	m.search.Placeholder = "Filter files 󰬛 "
 	m.search.PlaceholderStyle = lipgloss.NewStyle().MaxWidth(lipgloss.Width(m.search.Placeholder)).Foreground(lipgloss.Color("8"))
@@ -145,6 +146,8 @@ func (m mainModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 				}
 				dfCmd := m.diffViewer.SetSize(m.width-m.sidebarWidth(), m.height-m.footerHeight()-m.headerHeight())
 				cmds = append(cmds, dfCmd)
+			case "i":
+				m.cycleIconStyle()
 			case "tab":
 				if m.isShowingFileTree {
 					if m.activePanel == FileTreePanel {
@@ -240,6 +243,20 @@ func (m mainModel) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
 	return m, tea.Batch(cmds...)
 }
 
+func (m *mainModel) cycleIconStyle() {
+	switch m.iconStyle {
+	case filenode.IconsASCII:
+		m.iconStyle = filenode.IconsUnicode
+	case filenode.IconsUnicode:
+		m.iconStyle = filenode.IconsNerdFonts
+	case filenode.IconsNerdFonts:
+		m.iconStyle = filenode.IconsNerdFontsAlt
+	default:
+		m.iconStyle = filenode.IconsASCII
+	}
+	m.fileTree = m.fileTree.SetIconStyle(m.iconStyle)
+}
+
 func (m mainModel) searchUpdate(msg tea.Msg) (mainModel, []tea.Cmd) {
 	var cmd tea.Cmd
 	var cmds []tea.Cmd
@@ -413,7 +430,7 @@ func (m mainModel) footerView() string {
 func (m mainModel) resultsView() string {
 	sb := strings.Builder{}
 	for i, f := range m.filtered {
-		fName := utils.TruncateString(" "+f, m.config.UI.SearchTreeWidth-2)
+		fName := utils.TruncateString(" "+f, m.config.UI.SearchTreeWidth-2)
 		if i == m.resultsCursor {
 			sb.WriteString(lipgloss.NewStyle().Background(lipgloss.Color("#1b1b33")).Bold(true).Render(fName) + "\n")
 		} else {
diff --git a/pkg/ui/panes/filetree/filetree.go b/pkg/ui/panes/filetree/filetree.go
