Can't get borders to show up following the wiki

[andreatitolo]

What system are you running Yazi on?

macOS

What terminal are you running Yazi in?

WezTerm 20230712-072601-f4abf8fd

Yazi version

yazi 0.1.5

Did you try the latest main branch to see if the problem has already been fixed?

Tried, but the problem is still present

Describe the bug

I am sorry because this is likely my lack of knowledge, and thank you for this wonderful file manager. :)

Following the Tips section of the wiki, I am trying to get borders to show up in yazi. I am basically clueless regarding lua, but the config loads, so it should not be broken (I think?).

I have copied the Manager:render function to a ui.lua file inside ~/.config/yazi, and then applied the changes described in the wiki (I have to say that the diff view is a bit hard to understand and copy), in the theme.toml file as well and in the plugin section of yazi.toml. However, there seems to be no visible change at all?

If I follow other steps of the wiki, like "No Status Bar", the plugin works with no issues.

Expected Behavior

For the borders to show up like in this image (https://yazi-rs.github.io/img/full-border.png)

To Reproduce

Follow the steps on the wiki.

Configuration

yazi.toml

[manager]
layout         = [ 1, 3, 4 ]
sort_by        = "natural"
sort_sensitive = true
sort_reverse   = false
sort_dir_first = true
linemode       = "size"
show_hidden    = false
show_symlink   = true

[preview]
tab_size        = 3
max_width       = 600
max_height      = 900

[opener]
edit = [
	{ exec = '$EDITOR "$@"', block = true,  for = "unix" },
	{ exec = 'code "%*"',    orphan = true, for = "windows" },
]
open = [
	{ exec = 'xdg-open "$@"',             desc = "Open", for = "linux" },
	{ exec = 'open "$@"',                 desc = "Open", for = "macos" },
	{ exec = 'start "%1"', orphan = true, desc = "Open", for = "windows" }
]
reveal = [
	{ exec = 'open -R "$1"',                       desc = "Reveal", for = "macos" },
	{ exec = 'explorer /select,%1', orphan = true, desc = "Reveal", for = "windows" },
	{ exec = '''exiftool "$1"; echo "Press enter to exit"; read''', block = true, desc = "Show EXIF", for = "unix" },
]
extract = [
	{ exec = 'unar "$1"', desc = "Extract here", for = "unix" },
	{ exec = 'unar "%1"', desc = "Extract here", for = "windows" },
]
play = [
	{ exec = 'mpv "$@"', orphan = true, for = "unix" },
	{ exec = 'mpv "%1"', orphan = true, for = "windows" },
	{ exec = '''mediainfo "$1"; echo "Press enter to exit"; read''', block = true, desc = "Show media info", for = "unix" },
]

[open]
rules = [
	{ name = "*/", use = [ "edit", "open", "reveal" ] },

	{ mime = "text/*",  use = [ "edit", "reveal" ] },
	{ mime = "image/*", use = [ "open", "reveal" ] },
	{ mime = "video/*", use = [ "play", "reveal" ] },
	{ mime = "audio/*", use = [ "play", "reveal" ] },
	{ mime = "inode/x-empty", use = [ "edit", "reveal" ] },

	{ mime = "application/json", use = [ "edit", "reveal" ] },
	{ mime = "*/javascript",     use = [ "edit", "reveal" ] },

	{ mime = "application/zip",             use = [ "extract", "reveal" ] },
	{ mime = "application/gzip",            use = [ "extract", "reveal" ] },
	{ mime = "application/x-tar",           use = [ "extract", "reveal" ] },
	{ mime = "application/x-bzip",          use = [ "extract", "reveal" ] },
	{ mime = "application/x-bzip2",         use = [ "extract", "reveal" ] },
	{ mime = "application/x-7z-compressed", use = [ "extract", "reveal" ] },
	{ mime = "application/x-rar",           use = [ "extract", "reveal" ] },

	{ mime = "*", use = [ "open", "reveal" ] },
]

[plugins]
preload = [
	"~/.config/yazi/ui.lua",
	"~/.config/yazi/status_ui.lua"
]

[input]
# cd
cd_title  = "Change directory:"
cd_origin = "top-center"
cd_offset = [ 0, 2, 50, 3 ]

# create
create_title  = "Create:"
create_origin = "top-center"
create_offset = [ 0, 2, 50, 3 ]

# rename
rename_title  = "Rename:"
rename_origin = "hovered"
rename_offset = [ 0, 1, 50, 3 ]

# trash
trash_title 	= "Move {n} selected file{s} to trash? (y/N)"
trash_origin	= "top-center"
trash_offset	= [ 0, 2, 50, 3 ]

# delete
delete_title 	= "Delete {n} selected file{s} permanently? (y/N)"
delete_origin	= "top-center"
delete_offset	= [ 0, 2, 50, 3 ]

# find
find_title  = [ "Find next:", "Find previous:" ]
find_origin = "top-center"
find_offset = [ 0, 2, 50, 3 ]

# search
search_title  = "Search:"
search_origin = "top-center"
search_offset = [ 0, 2, 50, 3 ]

# shell
shell_title  = [ "Shell:", "Shell (block):" ]
shell_origin = "top-center"
shell_offset = [ 0, 2, 50, 3 ]

# overwrite
overwrite_title  = "Overwrite an existing file? (y/N)"
overwrite_origin = "top-center"
overwrite_offset = [ 0, 2, 50, 3 ]

# quit
quit_title  = "{n} task{s} running, sure to quit? (y/N)"
quit_origin = "top-center"
quit_offset = [ 0, 2, 50, 3 ]

[select]
open_title  = "Open with:"
open_origin = "hovered"
open_offset = [ 0, 1, 50, 7 ]

[log]
enabled = false

theme.toml

[manager]
cwd = { fg = "#81c8be" }
folder_offset  = [ 2, 0, 2, 0 ]
preview_offset = [ 2, 1, 2, 1 ]

# Hovered
hovered         = { fg = "#303446", bg = "#8caaee" }
preview_hovered = { underline = true }

# Find
find_keyword  = { fg = "#e5c890", italic = true }
find_position = { fg = "#f4b8e4", bg = "reset", italic = true }

# Marker
marker_selected = { fg = "#a6d189", bg = "#a6d189" }
marker_copied   = { fg = "#e5c890", bg = "#e5c890" }
marker_cut      = { fg = "#e78284", bg = "#e78284" }

# Tab
tab_active   = { fg = "#303446", bg = "#8caaee" }
tab_inactive = { fg = "#c6d0f5", bg = "#51576d" }
tab_width    = 1

# Border
border_symbol = "│"
border_style  = { fg = "#838ba7" }

# Highlighting
syntect_theme = "~/.config/bat/themes/Catppuccin-frappe.tmTheme"

# : }}}


# : Status {{{

[status]
separator_open  = ""
separator_close = ""
separator_style = { fg = "#51576d", bg = "#51576d" }

# Mode
mode_normal = { fg = "#303446", bg = "#8caaee", bold = true }
mode_select = { fg = "#303446", bg = "#a6d189", bold = true }
mode_unset  = { fg = "#303446", bg = "#eebebe", bold = true }

# Progress
progress_label  = { fg = "#ffffff", bold = true }
progress_normal = { fg = "#8caaee", bg = "#51576d" }
progress_error  = { fg = "#e78284", bg = "#51576d" }

# Permissions
permissions_t = { fg = "#8caaee" }
permissions_r = { fg = "#e5c890" }
permissions_w = { fg = "#e78284" }
permissions_x = { fg = "#a6d189" }
permissions_s = { fg = "#838ba7" }

# : }}}


# : Input {{{

[input]
border   = { fg = "#8caaee" }
title    = {}
value    = {}
selected = { reversed = true }

# : }}}


# : Select {{{

[select]
border   = { fg = "#8caaee" }
active   = { fg = "#f4b8e4" }
inactive = {}

# : }}}


# : Tasks {{{

[tasks]
border  = { fg = "#8caaee" }
title   = {}
hovered = { underline = true }

# : }}}


# : Which {{{

[which]
mask            = { bg = "#414559" }
cand            = { fg = "#81c8be" }
rest            = { fg = "#949cbb" }
desc            = { fg = "#f4b8e4" }
separator       = "  "
separator_style = { fg = "#626880" }

# : }}}


# : Help {{{

[help]
on      = { fg = "#f4b8e4" }
exec    = { fg = "#81c8be" }
desc    = { fg = "#949cbb" }
hovered = { bg = "#626880", bold = true }
footer  = { fg = "#51576d", bg = "#c6d0f5" }

# : }}}


# : File-specific styles {{{

[filetype]

rules = [
	# Images
	{ mime = "image/*", fg = "#81c8be" },

	# Videos
	{ mime = "video/*", fg = "#e5c890" },
	{ mime = "audio/*", fg = "#e5c890" },

	# Archives
	{ mime = "application/zip",             fg = "#f4b8e4" },
	{ mime = "application/gzip",            fg = "#f4b8e4" },
	{ mime = "application/x-tar",           fg = "#f4b8e4" },
	{ mime = "application/x-bzip",          fg = "#f4b8e4" },
	{ mime = "application/x-bzip2",         fg = "#f4b8e4" },
	{ mime = "application/x-7z-compressed", fg = "#f4b8e4" },
	{ mime = "application/x-rar",           fg = "#f4b8e4" },

	# Fallback
	{ name = "*", fg = "#c6d0f5" },
	{ name = "*/", fg = "#8caaee" }
]

ui.lua

Manager = {}

function Manager:render(area)
	local chunks = ui.Layout()
		:direction(ui.Direction.HORIZONTAL)
		:constraints({
			ui.Constraint.Ratio(MANAGER.layout.parent, MANAGER.layout.all),
			ui.Constraint.Ratio(MANAGER.layout.current, MANAGER.layout.all),
			ui.Constraint.Ratio(MANAGER.layout.preview, MANAGER.layout.all),
		})
		:split(area)

	local bar = function(c, x, y)
		return ui.Bar(
			ui.Rect { x = math.max(0, x), y = math.max(0, y), w = math.min(1, area.w), h = math.min(1, area.h) }, ui.Position.TOP
		):symbol(c)
	end

	return utils.flat {
		ui.Border(area, ui.Position.ALL):type(ui.Border.ROUNDED),
		ui.Bar(chunks[1], ui.Position.RIGHT),
		ui.Bar(chunks[3], ui.Position.LEFT),
		bar("┬", chunks[1].right - 1, chunks[1].y),
		bar("┴", chunks[1].right - 1, chunks[1].bottom - 1),
		bar("┬", chunks[2].right, chunks[2].y),
		bar("┴", chunks[2].right, chunks[1].bottom - 1),
		-- Parent
		Folder:render(chunks[1]:padding(ui.Padding.xy(1)), { kind = Folder.PARENT }),
		-- Current
		Folder:render(chunks[2]:padding(ui.Padding.y(1)), { kind = Folder.CURRENT }),
		-- Preview
		ui.Base(chunks[3]:padding(ui.Padding.xy(1)), ui.Base.PREVIEW),
	}
end

Anything else?

No response

[sxyazi]

You need to copy only the Manager:render function, excluding Manager = {}, unless you want to rewrite the entire UI.

[andreatitolo]

Thanks! as I thought it was my lack of knowledge, thanks for the speedy reply :)

[sxyazi]

I have to say that the diff view is a bit hard to understand and copy

Yeah ideally it should call the GitHub API to fetch the latest source code, and automatically merge it into the final code that users can copy by https://github.com/google/diff-match-patch, just haven't found the time to add it yet...

[grig-iv]

Hello! Same problem here. I only have init.lua in my ~/.config/yazi/

init.lua:

function Manager:render(area)
    local chunks = self:layout(area)

    return ya.flat {
        -- Borders
        ui.Border(area, ui.Border.ALL):type(ui.Border.ROUNDED),
        ui.Bar(chunks[1], ui.Bar.RIGHT),
        ui.Bar(chunks[3], ui.Bar.LEFT),

        bar("┬", chunks[1].right - 1, chunks[1].y),
        bar("┴", chunks[1].right - 1, chunks[1].bottom - 1),
        bar("┬", chunks[2].right, chunks[2].y),
        bar("┴", chunks[2].right, chunks[1].bottom - 1),

        -- Parent
        Parent:render(chunks[1]:padding(ui.Padding.xy(1))),
        -- Current
        Current:render(chunks[2]:padding(ui.Padding.y(1))),
        -- Preview
        Preview:render(chunks[3]:padding(ui.Padding.xy(1))),
    }
end

and with that i got

P.S: Found out about yazi today, it's amazing!

[Reledia]

Ops, just forgot to paste it here. It doesn't work with bar either

What version are you on?

[grig-iv]

yazi 0.2.2

[grig-iv]

[Reledia]

The function render has been changed a couple of days ago and its not released yet (will be in 2.3), even if the tip already links to the updated version. You can try to install from cargo using the --git flag or try to add this into your function instead of local chunks = self:layout(area):

	self.area = area

	local chunks = ui.Layout()
	ui.Layout()
	        :direction(ui.Layout.HORIZONTAL)
		:constraints({
			ui.Constraint.Ratio(MANAGER.ratio.parent, MANAGER.ratio.all),
			ui.Constraint.Ratio(MANAGER.ratio.current, MANAGER.ratio.all),
			ui.Constraint.Ratio(MANAGER.ratio.preview, MANAGER.ratio.all),
		})
		:split(area)

[grig-iv]

Thanks! Build from source, now it works