fix: alpha rendering of buttons and palettes

src/renderer/vaxis/Plane.zig

@@ -114,6 +114,19 @@ pub fn home(self: *Plane) void {
     self.col = 0;
 }
 
+pub fn fill_width(self: *Plane, comptime fmt: anytype, args: anytype) !usize {
+    var buf: [fmt.len + 4096]u8 = undefined;
+    var pos: usize = 0;
+    const width = self.window.width;
+    var text_width: usize = 0;
+    while (text_width < width) {
+        const text = try std.fmt.bufPrint(buf[pos..], fmt, args);
+        pos += text.len;
+        text_width += self.egc_chunk_width(text, 0, 8);
+    }
+    return self.putstr(buf[0..pos]);
+}
+
 pub fn print(self: *Plane, comptime fmt: anytype, args: anytype) !usize {
     var buf: [fmt.len + 4096]u8 = undefined;
     const text = try std.fmt.bufPrint(&buf, fmt, args);

src/tui/mode/overlay/open_recent.zig

@@ -96,11 +96,17 @@ inline fn max_menu_width() usize {
 }
 
 fn on_render_menu(_: *Self, button: *Button.State(*Menu.State(*Self)), theme: *const Widget.Theme, selected: bool) bool {
-    const style_base = if (button.active) theme.editor_cursor else if (button.hover or selected) theme.editor_selection else theme.editor_widget;
+    const style_base = theme.editor_widget;
+    const style_label = if (button.active) theme.editor_cursor else if (button.hover or selected) theme.editor_selection else theme.editor_widget;
     const style_keybind = if (tui.find_scope_style(theme, "entity.name")) |sty| sty.style else style_base;
     button.plane.set_base_style(style_base);
     button.plane.erase();
     button.plane.home();
+    button.plane.set_style(style_label);
+    if (button.active or button.hover or selected) {
+        _ = button.plane.fill_width(" ", .{}) catch {};
+        button.plane.home();
+    }
     var file_path: []const u8 = undefined;
     var iter = button.opts.label; // label contains cbor, first the file name, then multiple match indexes
     if (!(cbor.matchString(&iter, &file_path) catch false))
@@ -111,7 +117,7 @@ fn on_render_menu(_: *Self, button: *Button.State(*Menu.State(*Self)), theme: *c
     var buf: [std.fs.max_path_bytes]u8 = undefined;
     var removed_prefix: usize = 0;
     const max_len = max_menu_width() - 2;
-    button.plane.set_style(style_base);
+    button.plane.set_style(style_label);
     _ = button.plane.print("{s} ", .{
         if (file_path.len > max_len) root.shorten_path(&buf, file_path, &removed_prefix, max_len) else file_path,
     }) catch {};

src/tui/mode/overlay/palette.zig

@@ -115,11 +115,17 @@ pub fn Create(options: type) type {
         }
 
         fn on_render_menu(_: *Self, button: *Button.State(*Menu.State(*Self)), theme: *const Widget.Theme, selected: bool) bool {
+            const style_base = theme.editor_widget;
             const style_label = if (button.active) theme.editor_cursor else if (button.hover or selected) theme.editor_selection else theme.editor_widget;
             const style_hint = if (tui.find_scope_style(theme, "entity.name")) |sty| sty.style else style_label;
-            button.plane.set_base_style(style_label);
+            button.plane.set_base_style(style_base);
             button.plane.erase();
             button.plane.home();
+            button.plane.set_style(style_label);
+            if (button.active or button.hover or selected) {
+                _ = button.plane.fill_width(" ", .{}) catch {};
+                button.plane.home();
+            }
             var label: []const u8 = undefined;
             var hint: []const u8 = undefined;
             var iter = button.opts.label; // label contains cbor, first the file name, then multiple match indexes

src/tui/status/filestate.zig

@@ -76,11 +76,16 @@ pub fn layout(_: *Self, _: *Button.State(Self)) Widget.Layout {
 }
 
 pub fn render(self: *Self, btn: *Button.State(Self), theme: *const Widget.Theme) bool {
-    const frame = tracy.initZone(@src(), .{ .name = @typeName(@This()) ++ " render" });
+    const style_base = theme.statusbar;
-    defer frame.deinit();
+    const style_label = if (btn.active) theme.editor_cursor else style_base;
-    btn.plane.set_base_style(if (btn.active) theme.editor_cursor else theme.statusbar);
+    btn.plane.set_base_style(style_base);
     btn.plane.erase();
     btn.plane.home();
+    btn.plane.set_style(style_label);
+    if (btn.active) {
+        _ = btn.plane.fill_width(" ", .{}) catch {};
+        btn.plane.home();
+    }
     if (tui.current().mini_mode) |_|
         render_mini_mode(&btn.plane, theme)
     else if (self.detailed)

src/tui/status/modestate.zig

@@ -41,18 +41,24 @@ fn is_overlay_mode() bool {
 }
 
 pub fn render(_: *void, self: *Button.State(void), theme: *const Widget.Theme) bool {
-    const base_style = if (self.active) theme.editor_cursor else if (self.hover) theme.editor_selection else theme.statusbar_hover;
+    const style_base = theme.statusbar_hover;
-    self.plane.set_base_style(base_style);
+    const style_label = if (self.active) theme.editor_cursor else if (self.hover) theme.editor_selection else style_base;
+    self.plane.set_base_style(style_base);
     self.plane.on_styles(style.bold);
     self.plane.erase();
     self.plane.home();
+    self.plane.set_style(style_label);
+    if (self.active or self.hover) {
+        _ = self.plane.fill_width(" ", .{}) catch {};
+        self.plane.home();
+    }
     var buf: [31:0]u8 = undefined;
     if (!is_mini_mode() and !is_overlay_mode()) {
-        render_logo(self, theme, base_style);
+        render_logo(self, theme, style_label);
     } else {
         _ = self.plane.putstr("  ") catch {};
     }
-    self.plane.set_base_style(base_style);
+    self.plane.set_style(style_label);
     self.plane.on_styles(style.bold);
     _ = self.plane.putstr(std.fmt.bufPrintZ(&buf, "{s} ", .{tui.get_mode()}) catch return false) catch {};
     if (is_mini_mode())