..

docs/tips.md

@@ -28,7 +28,7 @@ Copy the preset [`manager` component](https://github.com/sxyazi/yazi/blob/main/y
 -		-- Borders
 -		ui.Bar(chunks[1], ui.Position.RIGHT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style),
 -		ui.Bar(chunks[3], ui.Position.LEFT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style),
-+		ui.Border(area, ui.Position.ALL),
++		ui.Border(area, ui.Position.ALL):type(ui.Border.ROUNDED),
 +		ui.Bar(chunks[1], ui.Position.RIGHT),
 +		ui.Bar(chunks[3], ui.Position.LEFT),
 +
@@ -50,70 +50,7 @@ Copy the preset [`manager` component](https://github.com/sxyazi/yazi/blob/main/y
  end
 ```
 
-Finally include it and adjust the manager layout offset:
-
-```toml
-# yazi.toml
-[plugins]
-preload = [
-	"~/.config/yazi/ui.lua"
-]
-
-# theme.toml
-[manager]
-folder_offset  = [ 2, 0, 2, 0 ]
-preview_offset = [ 2, 1, 2, 1 ]
-```
-
-## Full border customization
-
-You can fully customize the border for Yazi via the UI plugin
-
-<img src={useBaseUrl("/img/full-custom-border.png")} width="600" />
-
-Copy the preset [`manager` component](https://github.com/sxyazi/yazi/blob/main/yazi-plugin/preset/components/manager.lua) to any place, for example `~/.config/yazi/ui.lua`, then apply the following patch:
-
-```diff
-
-@@ -10,16 +10,26 @@ function Manager:render(area)
- 		})
- 		:split(area)
-
-+	local bar = function(c, x, y)
-+		return ui.Bar(ui.Rect { x = math.max(0, x), y = math.max(0, y), w = 1, h = 1 }, ui.Position.TOP):symbol(c)
-+	end
-+
- 	return utils.flat {
--		-- Borders
--		ui.Bar(chunks[1], ui.Position.RIGHT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style),
--		ui.Bar(chunks[3], ui.Position.LEFT):symbol(THEME.manager.border_symbol):style(THEME.manager.border_style),
-+		ui.Border(area, ui.Position.ALL),
-+		ui.Bar(chunks[1], ui.Position.RIGHT),
-+		ui.Bar(chunks[3], ui.Position.LEFT),
-+
-+   ---those are the border chars, change them to your liking
-+ 	bar("╰", chunks[1].left, chunks[1].bottom - 1),
-+ 	bar("╭", chunks[1].left, chunks[1].top),
-+ 	bar("╮", chunks[3].right - 1, chunks[1].top),
-+ 	bar("╯", chunks[3].right - 1, chunks[1].bottom - 1),
-+
-+		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.x(1)), { kind = Folder.PARENT }),
-+		Folder:render(chunks[1]:padding(ui.Padding.xy(1)), { kind = Folder.PARENT }),
- 		-- Current
--		Folder:render(chunks[2], { kind = Folder.CURRENT }),
-+		Folder:render(chunks[2]:padding(ui.Padding.y(1)), { kind = Folder.CURRENT }),
- 		-- Preview
--		ui.Base(chunks[3]:padding(ui.Padding.x(1)), ui.Base.PREVIEW),
-+		ui.Base(chunks[3]:padding(ui.Padding.xy(1)), ui.Base.PREVIEW),
- 	}
- end
-```
+If you prefer sharp corners for the border, you can remove `:type(ui.Border.ROUNDED)`.
 
 Finally include it and adjust the manager layout offset:
 
@@ -130,7 +67,6 @@ folder_offset  = [ 2, 0, 2, 0 ]
 preview_offset = [ 2, 1, 2, 1 ]
 ```
 
-
 ## Show symlink in status bar
 
 <img src={useBaseUrl("/img/symlink-in-status.png")} width="600" />