feat: new tbl_col and tbl_cell in theme system for spotter table styling

[sxyazi]

Follow up to #2389

---

An implementation of the feature request: #1986

Closes #1986

[uncenter]

These fields names aren't clear to what they actually affect. Using your diagram:

tbl_col is really inactive table cells, and tbl_cell is really active table cells. Something like tbl_col -> tbl_cell and tbl_cell_hovered (or tbl_cell_selected, there isn't any consistency with this kind of naming so far).

[uncenter]

The green "header" text on the left above each list of fields also doesn't seem themable?

[sxyazi]

tbl_col is really inactive table cells, and tbl_cell is really active table cells.

Didn't quite understand, could you draw a diagram?

[uncenter]

Yeah totally:

Boxes in green (and yellow) are what I think are supposed to be cells of the spotter table. They are the boxes you can move up and down in with the arrow keys. The yellow box aroundn the yellow background, at the top, is the currently selected/hovered table cell. If I move the arrow keys up/down, the selected (yellow box) moves. I think all the green boxes - not hovered table cells - should be configured by tbl_cell, and the yellow box - hovered table cell - should be configured by tbl_cell_hovered/tbl_cell_selected.

---

Ideally, I would think of an even finer configuration. The red "cells" are what I would also think of as cells, but are not configurable. The green text above each set of red "cells" are also cells presumably, also not configurable.

Something like this maybe, splitting this "table" and "cells" concept away from the spotter specifically.

[spot]
border = { fg = "blue" }
title  = { fg = "blue" }

[table]
# Red boxes (fields/keys of the table like 'created:' and 'mimetype:').
key_cell = { fg = "white" }
# Green boxes (values of the table like 'video/mp4' or '0:48').
value_cell = { fg = "blue" }
# Yellow box/text (current selected value of the table, the created date value in my diagram).
value_cell_selected = { fg = "yellow", reversed = true }
# Not on diagram, but green text above each set of red boxes (headers like 'video', 'base', and 'plugins').
header_cell = { fg = "green" }

[uncenter]

@sxyazi any thoughts on my suggestions above?

[sxyazi]

ui.Table is a Lua binding of Ratatui's Table, based on the existing API provided by Ratatui, the "selected" in "value_cell_selected" is meaningless, because you always and can only set a style for a selected cell:

Set the style of the selected cell

Ratatui also lacks an API for styling "cells" as a group - you can only operate on one (and the only) cell, which is the intersection of the current row and column.

If you want to style multiple "cells", you would need to treat them as a whole row or column, and the existing col_style is designed to keep consistent with Ratatui's terminology:

yazi/yazi-plugin/preset/plugins/file.lua

Lines 22 to 28 in 3dc6d82

	ui.Table(self:spot_base(job))
	:area(ui.Pos { "center", w = 60, h = 20 })
	:row(1)
	:col(1)
	:col_style(th.spot.tbl_col)
	:cell_style(th.spot.tbl_cell)
	:widths { ui.Constraint.Length(14), ui.Constraint.Fill(1) }