feat: add Menu widget and use it on home screen

src/tui/Button.zig

@@ -7,26 +7,24 @@ const Widget = @import("Widget.zig");
 const command = @import("command.zig");
 const tui = @import("tui.zig");
 
-parent: nc.Plane,
+pub fn Options(context: type) type {
-plane: nc.Plane,
+    return struct {
-active: bool = false,
+        label: []const u8 = "button",
-hover: bool = false,
+        pos: Widget.Box = .{ .y = 0, .x = 0, .w = 8, .h = 1 },
-opts: Options,
+        ctx: context = {},
 
-const Self = @This();
+        on_click: *const fn (ctx: context, button: *State(Context)) void = do_nothing,
+        on_render: ?*const fn (ctx: context, button: *State(Context), theme: *const Widget.Theme) bool = null,
+        on_layout: ?*const fn (ctx: context, button: *State(Context)) Widget.Layout = null,
 
-pub const Options = struct {
+        pub const Context = context;
-    label: []const u8 = "button",
+        pub fn do_nothing(_: context, _: *State(Context)) void {}
-    pos: Widget.Box = .{ .y = 0, .x = 0, .w = 8, .h = 1 },
+    };
-    ctx: ?*anyopaque = null,
+}
 
-    on_click: *const fn (ctx: ?*anyopaque, button: *Self) void = do_nothing,
+pub fn create(ctx: anytype, a: std.mem.Allocator, parent: nc.Plane, opts: Options(@TypeOf(ctx))) !Widget {
-    on_render: ?*const fn (ctx: ?*anyopaque, button: *Self, theme: *const Widget.Theme) bool = null,
+    const Self = State(@TypeOf(ctx));
-    on_layout: ?*const fn (ctx: ?*anyopaque, button: *Self) Widget.Layout = null,
+    const self = try a.create(Self);
-};
-
-pub fn create(a: std.mem.Allocator, parent: nc.Plane, opts: Options) !Widget {
-    const self: *Self = try a.create(Self);
     var n = try nc.Plane.init(&opts.pos.opts(@typeName(Self)), parent);
     errdefer n.deinit();
     self.* = .{
@@ -37,45 +35,56 @@ pub fn create(a: std.mem.Allocator, parent: nc.Plane, opts: Options) !Widget {
     return Widget.to(self);
 }
 
-pub fn deinit(self: *Self, a: std.mem.Allocator) void {
+pub fn State(ctx_type: type) type {
-    self.plane.deinit();
+    return struct {
-    a.destroy(self);
+        parent: nc.Plane,
-}
+        plane: nc.Plane,
+        active: bool = false,
+        hover: bool = false,
+        opts: Options(ctx_type),
 
-pub fn layout(self: *Self) Widget.Layout {
+        const Self = @This();
-    return if (self.opts.on_layout) |on_layout|
+        pub const Context = ctx_type;
-        on_layout(self.opts.ctx, self)
-    else
-        .{ .static = self.opts.label.len + 2 };
-}
 
-pub fn render(self: *Self, theme: *const Widget.Theme) bool {
+        pub fn deinit(self: *Self, a: std.mem.Allocator) void {
-    if (self.opts.on_render) |on_render|
+            self.plane.deinit();
-        return on_render(self.opts.ctx, self, theme);
+            a.destroy(self);
-    tui.set_base_style(&self.plane, " ", if (self.active) theme.scrollbar_active else if (self.hover) theme.scrollbar_hover else theme.scrollbar);
+        }
-    self.plane.erase();
-    self.plane.home();
-    _ = self.plane.print(" {s} ", .{self.opts.label}) catch {};
-    return false;
-}
 
-pub fn receive(self: *Self, _: tp.pid_ref, m: tp.message) error{Exit}!bool {
+        pub fn layout(self: *Self) Widget.Layout {
-    if (try m.match(.{ "B", nc.event_type.PRESS, nc.key.BUTTON1, tp.any, tp.any, tp.any, tp.any, tp.any })) {
+            return if (self.opts.on_layout) |on_layout|
-        self.active = true;
+                on_layout(self.opts.ctx, self)
-        return true;
+            else
-    } else if (try m.match(.{ "B", nc.event_type.RELEASE, nc.key.BUTTON1, tp.any, tp.any, tp.any, tp.any, tp.any })) {
+                .{ .static = self.opts.label.len + 2 };
-        self.opts.on_click(self.opts.ctx, self);
+        }
-        self.active = false;
-        return true;
-    } else if (try m.match(.{ "D", nc.event_type.RELEASE, nc.key.BUTTON1, tp.any, tp.any, tp.any, tp.any, tp.any })) {
-        self.opts.on_click(self.opts.ctx, self);
-        self.active = false;
-        return true;
-    } else if (try m.match(.{ "H", tp.extract(&self.hover) })) {
-        tui.current().request_mouse_cursor_pointer(self.hover);
-        return true;
-    }
-    return false;
-}
 
-pub fn do_nothing(_: ?*anyopaque, _: *Self) void {}
+        pub fn render(self: *Self, theme: *const Widget.Theme) bool {
+            if (self.opts.on_render) |on_render|
+                return on_render(self.opts.ctx, self, theme);
+            tui.set_base_style(&self.plane, " ", if (self.active) theme.scrollbar_active else if (self.hover) theme.scrollbar_hover else theme.scrollbar);
+            self.plane.erase();
+            self.plane.home();
+            _ = self.plane.print(" {s} ", .{self.opts.label}) catch {};
+            return false;
+        }
+
+        pub fn receive(self: *Self, _: tp.pid_ref, m: tp.message) error{Exit}!bool {
+            if (try m.match(.{ "B", nc.event_type.PRESS, nc.key.BUTTON1, tp.any, tp.any, tp.any, tp.any, tp.any })) {
+                self.active = true;
+                return true;
+            } else if (try m.match(.{ "B", nc.event_type.RELEASE, nc.key.BUTTON1, tp.any, tp.any, tp.any, tp.any, tp.any })) {
+                self.opts.on_click(self.opts.ctx, self);
+                self.active = false;
+                return true;
+            } else if (try m.match(.{ "D", nc.event_type.RELEASE, nc.key.BUTTON1, tp.any, tp.any, tp.any, tp.any, tp.any })) {
+                self.opts.on_click(self.opts.ctx, self);
+                self.active = false;
+                return true;
+            } else if (try m.match(.{ "H", tp.extract(&self.hover) })) {
+                tui.current().request_mouse_cursor_pointer(self.hover);
+                return true;
+            }
+            return false;
+        }
+    };
+}

src/tui/Menu.zig

@@ -0,0 +1,76 @@
+const std = @import("std");
+const nc = @import("notcurses");
+const tp = @import("thespian");
+
+const Widget = @import("Widget.zig");
+const WidgetList = @import("WidgetList.zig");
+const Button = @import("Button.zig");
+const tui = @import("tui.zig");
+
+a: std.mem.Allocator,
+menu: *WidgetList,
+menu_widget: Widget,
+
+const Self = @This();
+
+pub fn create(a: std.mem.Allocator, parent: Widget) !*Self {
+    const self: *Self = try a.create(Self);
+    self.* = .{
+        .a = a,
+        .menu = try WidgetList.createV(a, parent, @typeName(Self), .dynamic),
+        .menu_widget = self.menu.widget(),
+    };
+    return self;
+}
+
+pub fn add_item(self: *Self, label: []const u8, on_click: *const fn (_: void, _: *Button.State(void)) void) !void {
+    try self.menu.add(try Button.create({}, self.a, self.menu.parent, .{
+        .on_layout = menu_layout,
+        .label = label,
+        .on_click = on_click,
+        .on_render = render_menu_item,
+    }));
+}
+
+pub fn deinit(self: *Self, a: std.mem.Allocator) void {
+    self.menu.deinit(a);
+    a.destroy(self);
+}
+
+pub fn render(self: *Self, theme: *const Widget.Theme) bool {
+    return self.menu.render(theme);
+}
+
+pub fn resize(self: *Self, box_: Widget.Box) void {
+    var box = box_;
+    box.h = self.menu.widgets.items.len;
+    self.menu.resize(box);
+}
+
+pub fn update(self: *Self) void {
+    self.menu.update();
+}
+
+pub fn walk(self: *Self, walk_ctx: *anyopaque, f: Widget.WalkFn) bool {
+    return self.menu.walk(walk_ctx, f, &self.menu_widget);
+}
+
+fn menu_layout(_: void, _: *Button.State(void)) Widget.Layout {
+    return .{ .static = 1 };
+}
+
+fn render_menu_item(_: void, button: *Button.State(void), theme: *const Widget.Theme) bool {
+    tui.set_base_style(&button.plane, " ", if (button.active) theme.editor_cursor else if (button.hover) theme.editor_selection else theme.editor);
+    button.plane.erase();
+    button.plane.home();
+    const style_subtext = if (tui.find_scope_style(theme, "comment")) |sty| sty.style else theme.editor;
+    const style_text = if (tui.find_scope_style(theme, "keyword")) |sty| sty.style else theme.editor;
+    const style_keybind = if (tui.find_scope_style(theme, "entity.name")) |sty| sty.style else theme.editor;
+    const sep = std.mem.indexOfScalar(u8, button.opts.label, ':') orelse button.opts.label.len;
+    tui.set_style(&button.plane, style_subtext);
+    tui.set_style(&button.plane, style_text);
+    _ = button.plane.print(" {s}", .{button.opts.label[0..sep]}) catch {};
+    tui.set_style(&button.plane, style_keybind);
+    _ = button.plane.print("{s}", .{button.opts.label[sep + 1 ..]}) catch {};
+    return false;
+}

src/tui/home.zig

@@ -5,6 +5,7 @@ const tp = @import("thespian");
 const Widget = @import("Widget.zig");
 const WidgetList = @import("WidgetList.zig");
 const Button = @import("Button.zig");
+const Menu = @import("Menu.zig");
 const tui = @import("tui.zig");
 const command = @import("command.zig");
 const fonts = @import("fonts.zig");
@@ -14,8 +15,7 @@ plane: nc.Plane,
 parent: nc.Plane,
 fire: ?Fire = null,
 commands: Commands = undefined,
-menu: *WidgetList,
+menu: *Menu,
-menu_widget: Widget,
 
 const Self = @This();
 
@@ -24,30 +24,35 @@ pub fn create(a: std.mem.Allocator, parent: Widget) !Widget {
     var n = try nc.Plane.init(&(Widget.Box{}).opts("editor"), parent.plane.*);
     errdefer n.deinit();
 
+    const w = Widget.to(self);
     self.* = .{
         .a = a,
         .parent = parent.plane.*,
         .plane = n,
-        .menu = undefined,
+        .menu = try Menu.create(a, w),
-        .menu_widget = undefined,
     };
     try self.commands.init(self);
-    const w = Widget.to(self);
+    try self.menu.add_item("Help ······················· :h", menu_action_help);
-    const menu = try WidgetList.createV(a, w, @typeName(Self), .{ .static = 32 });
+    try self.menu.add_item("Open file ·················· :o", menu_action_open_file);
-    self.menu = menu;
+    try self.menu.add_item("Open recent file ····(wip)·· :e", menu_action_open_recent_file);
-    self.menu_widget = menu.widget();
+    try self.menu.add_item("Open recent project ·(wip)·· :r", menu_action_open_recent_project);
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Help ······················· :h", .on_click = on_click_help, .on_render = render_menu_item }));
+    try self.menu.add_item("Show/Run commands ···(wip)·· :p", menu_action_show_commands);
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Open file ·················· :o", .on_click = on_click_open_file, .on_render = render_menu_item }));
+    try self.menu.add_item("Open config file ··········· :c", menu_action_open_config);
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Open recent file ····(wip)·· :e", .on_click = on_click_open_recent_file, .on_render = render_menu_item }));
+    try self.menu.add_item("Quit/Close ················· :q", menu_action_quit);
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Open recent project ·(wip)·· :r", .on_click = on_click_open_recent_project, .on_render = render_menu_item }));
+    self.menu.resize(.{ .y = 15, .x = 9, .w = 32 });
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Show/Run commands ···(wip)·· :p", .on_click = on_click_show_commands, .on_render = render_menu_item }));
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Open config file ··········· :c", .on_click = on_click_open_config, .on_render = render_menu_item }));
-    try menu.add(try Button.create(a, parent.plane.*, .{ .on_layout = menu_layout, .label = "Quit/Close ················· :q", .on_click = on_click_quit, .on_render = render_menu_item }));
-    menu.resize(.{ .y = 15, .x = 9, .w = 32, .h = menu.widgets.items.len });
     command.executeName("enter_mode", command.Context.fmt(.{"home"})) catch {};
     return w;
 }
 
+fn menu_item(self: *Self, label: []const u8, on_click: *const fn (_: void, _: *Button.State(void)) void) !void {
+    try self.menu.add(try Button.create({}, self.a, self.parent, .{
+        .on_layout = menu_layout,
+        .label = label,
+        .on_click = on_click,
+        .on_render = render_menu_item,
+    }));
+}
+
 pub fn deinit(self: *Self, a: std.mem.Allocator) void {
     self.menu.deinit(a);
     self.commands.deinit();
@@ -61,7 +66,7 @@ pub fn update(self: *Self) void {
 }
 
 pub fn walk(self: *Self, walk_ctx: *anyopaque, f: Widget.WalkFn, w: *Widget) bool {
-    return self.menu.walk(walk_ctx, f, &self.menu_widget) or f(walk_ctx, w);
+    return self.menu.walk(walk_ctx, f) or f(walk_ctx, w);
 }
 
 pub fn receive(_: *Self, _: tp.pid_ref, m: tp.message) error{Exit}!bool {
@@ -73,35 +78,35 @@ pub fn receive(_: *Self, _: tp.pid_ref, m: tp.message) error{Exit}!bool {
     return false;
 }
 
-fn menu_layout(_: ?*anyopaque, _: *Button) Widget.Layout {
+fn menu_layout(_: void, _: *Button.State(void)) Widget.Layout {
     return .{ .static = 1 };
 }
 
-pub fn on_click_help(_: ?*anyopaque, _: *Button) void {
+fn menu_action_help(_: void, _: *Button.State(void)) void {
     command.executeName("open_help", .{}) catch {};
 }
 
-pub fn on_click_open_file(_: ?*anyopaque, _: *Button) void {
+fn menu_action_open_file(_: void, _: *Button.State(void)) void {
     command.executeName("enter_open_file_mode", .{}) catch {};
 }
 
-pub fn on_click_open_recent_file(_: ?*anyopaque, _: *Button) void {
+fn menu_action_open_recent_file(_: void, _: *Button.State(void)) void {
     tp.self_pid().send(.{ "log", "home", "open recent file not implemented" }) catch {};
 }
 
-pub fn on_click_open_recent_project(_: ?*anyopaque, _: *Button) void {
+fn menu_action_open_recent_project(_: void, _: *Button.State(void)) void {
     tp.self_pid().send(.{ "log", "home", "open recent project not implemented" }) catch {};
 }
 
-pub fn on_click_show_commands(_: ?*anyopaque, _: *Button) void {
+fn menu_action_show_commands(_: void, _: *Button.State(void)) void {
     tp.self_pid().send(.{ "log", "home", "open command palette not implemented" }) catch {};
 }
 
-pub fn on_click_open_config(_: ?*anyopaque, _: *Button) void {
+fn menu_action_open_config(_: void, _: *Button.State(void)) void {
     command.executeName("open_config", .{}) catch {};
 }
 
-pub fn on_click_quit(_: ?*anyopaque, _: *Button) void {
+fn menu_action_quit(_: void, _: *Button.State(void)) void {
     command.executeName("quit", .{}) catch {};
 }
 
@@ -128,7 +133,7 @@ pub fn render(self: *Self, theme: *const Widget.Theme) bool {
         self.plane.cursor_move_yx(10, 8) catch return more;
         fonts.print_string_medium(self.plane, subtext) catch return more;
 
-        self.menu.resize(.{ .y = 15, .x = 10, .w = 32, .h = self.menu.widgets.items.len });
+        self.menu.resize(.{ .y = 15, .x = 10, .w = 32 });
     } else if (self.plane.dim_x() > 55 and self.plane.dim_y() > 16) {
         tui.set_style(&self.plane, style_title);
         self.plane.cursor_move_yx(2, 4) catch return more;
@@ -138,7 +143,7 @@ pub fn render(self: *Self, theme: *const Widget.Theme) bool {
         self.plane.cursor_move_yx(7, 6) catch return more;
         _ = self.plane.print(subtext, .{}) catch {};
 
-        self.menu.resize(.{ .y = 9, .x = 8, .w = 32, .h = self.menu.widgets.items.len });
+        self.menu.resize(.{ .y = 9, .x = 8, .w = 32 });
     } else {
         tui.set_style(&self.plane, style_title);
         self.plane.cursor_move_yx(1, 4) catch return more;
@@ -148,12 +153,12 @@ pub fn render(self: *Self, theme: *const Widget.Theme) bool {
         self.plane.cursor_move_yx(3, 6) catch return more;
         _ = self.plane.print(subtext, .{}) catch {};
 
-        self.menu.resize(.{ .y = 5, .x = 8, .w = 32, .h = self.menu.widgets.items.len });
+        self.menu.resize(.{ .y = 5, .x = 8, .w = 32 });
     }
     return true;
 }
 
-fn render_menu_item(_: ?*anyopaque, button: *Button, theme: *const Widget.Theme) bool {
+fn render_menu_item(_: void, button: *Button.State(void), theme: *const Widget.Theme) bool {
     tui.set_base_style(&button.plane, " ", if (button.active) theme.editor_cursor else if (button.hover) theme.editor_selection else theme.editor);
     button.plane.erase();
     button.plane.home();