add: search text field in preparation for fuzzy search feature

src/content.zig

@@ -18,24 +18,31 @@ pub fn Website(App: type) type {
         fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
             const this: *@This() = @ptrCast(@alignCast(ctx));
             switch (event) {
-                .about => {
+                .page => |page| switch (page) {
-                    model.page.deinit(this.gpa);
+                    .about => {
-                    model.page = .about;
+                        model.page.deinit(this.gpa);
+                        model.page = .about;
 
-                    model.document.deinit(this.gpa);
+                        model.document.deinit(this.gpa);
-                    model.document = .init(try std.fs.cwd().readFileAlloc(this.gpa, "./doc/about.md", std.math.maxInt(usize)));
+                        model.document = .init(try std.fs.cwd().readFileAlloc(this.gpa, "./doc/about.md", std.math.maxInt(usize)));
+                    },
+                    .blog => |path| {
+                        model.page.deinit(this.gpa);
+                        model.document.deinit(this.gpa);
+                        errdefer {
+                            if (path) |p| this.gpa.free(p);
+                            model.document = .invalidPage;
+                            model.page = .{ .blog = null };
+                        }
+
+                        model.document = .init(try std.fs.cwd().readFileAlloc(this.gpa, if (path) |p| p else "./doc/blog.md", std.math.maxInt(usize)));
+                        model.page = .{ .blog = path };
+                    },
                 },
-                .blog => |path| {
+                .key => |key| {
-                    model.page.deinit(this.gpa);
+                    if (key.eql(.{ .cp = '/' })) model.searching = true;
-                    model.document.deinit(this.gpa);
-                    errdefer {
-                        if (path) |p| this.gpa.free(p);
-                        model.document = .invalidPage;
-                        model.page = .{ .blog = null };
-                    }
 
-                    model.document = .init(try std.fs.cwd().readFileAlloc(this.gpa, if (path) |p| p else "./doc/blog.md", std.math.maxInt(usize)));
+                    if (key.eql(.{ .cp = zterm.input.Escape })) model.searching = false;
-                    model.page = .{ .blog = path };
                 },
                 else => {},
             }
@@ -118,20 +125,66 @@ pub fn Title(App: type) type {
 }
 
 pub fn InfoBanner(App: type) type {
-    const left_text: []const u8 = "Build with zig";
+    const left_text: []const u8 = "Build using zig";
-    const right_text: []const u8 = "Yves Biener (@yves-biener)";
+    const right_text: []const u8 = "Yves Biener";
 
     return struct {
+        gpa: Allocator,
+        search: App.TextField,
+        queue: *App.Queue,
+
+        pub fn init(gpa: Allocator, queue: *App.Queue) @This() {
+            return .{
+                .gpa = gpa,
+                .search = .init(gpa, .init(.default, .default)),
+                .queue = queue,
+            };
+        }
+
         pub fn element(this: *@This()) App.Element {
             return .{
                 .ptr = this,
                 .vtable = &.{
+                    .deinit = deinit,
+                    .minSize = minSize,
+                    .handle = handle,
                     .content = content,
                 },
             };
         }
 
-        fn content(_: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
+        fn deinit(ctx: *anyopaque) void {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            this.search.deinit();
+        }
+
+        fn minSize(ctx: *anyopaque, model: *const App.Model, _: zterm.Point) zterm.Point {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            if (!model.searching) this.search.clear();
+            return .{ .y = if (model.searching) 2 else 1 };
+        }
+
+        fn handle(ctx: *anyopaque, model: *App.Model, event: App.Event) !void {
+            const this: *@This() = @ptrCast(@alignCast(ctx));
+            switch (event) {
+                .key => if (model.searching) {
+                    const prev_len = this.search.input.items.len;
+                    try this.search.element().handle(model, event);
+                    const next_len = this.search.input.items.len;
+
+                    if (next_len == 0) {
+                        model.searching = false;
+                        return;
+                    }
+
+                    // NOTE do not include the leading '/' in the `.search` event payload!
+                    if (prev_len != next_len) this.queue.push(.{ .search = this.search.input.items[1..] });
+                },
+                else => {},
+            }
+        }
+
+        fn content(ctx: *anyopaque, model: *const App.Model, cells: []zterm.Cell, size: zterm.Point) !void {
             assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
 
             for (0.., left_text) |idx, cp| {
@@ -170,6 +223,11 @@ pub fn InfoBanner(App: type) type {
                 cells[idx].style.emphasis = &.{.dim};
                 cells[idx].cp = cp;
             }
+
+            if (model.searching) {
+                const this: *@This() = @ptrCast(@alignCast(ctx));
+                try this.search.element().content(model, cells[size.x..], .{ .x = size.x, .y = 1 });
+            }
         }
     };
 }

src/main.zig

@@ -38,7 +38,6 @@ pub fn main() !void {
         },
     }, website.element());
     defer container.deinit();
-    var content_container: App.Container = undefined;
 
     // header with navigation buttons and content's title
     {
@@ -76,27 +75,24 @@ pub fn main() !void {
         }
         try container.append(header);
     }
-    // main actual tui_website page content
+    // page contents
     {
         var content: Content = .{};
-        content_container = try .init(allocator, .{}, content.element());
+        var scrollable: App.Scrollable = .init(try .init(allocator, .{}, content.element()), .enabled(.green, false));
 
-        var scrollable: App.Scrollable = .init(content_container, .enabled(.green, false));
         // intermediate container for *padding* containing the scrollable `Content`
         var scrollable_container: App.Container = try .init(allocator, .{
             .layout = .{ .padding = .horizontal(2) },
         }, .{});
         try scrollable_container.append(try .init(allocator, .{}, scrollable.element()));
+
         try container.append(scrollable_container);
     }
     // footer
     {
-        var info_banner: InfoBanner = .{};
+        var info_banner: InfoBanner = .init(allocator, &app.queue);
         const footer: App.Container = try .init(allocator, .{
-            .size = .{
+            .size = .{ .grow = .horizontal },
-                .dim = .{ .y = 1 },
-                .grow = .horizontal,
-            },
         }, info_banner.element());
         try container.append(footer);
     }
@@ -115,7 +111,11 @@ pub fn main() !void {
         blog = std.mem.trimStart(u8, blog, "./");
         blog = std.mem.trimEnd(u8, blog, ".md");
         blog = std.mem.trimEnd(u8, blog, "/");
-        app.postEvent(.{ .blog = try std.fmt.allocPrint(allocator, "./doc/{s}.md", .{blog}) });
+        app.postEvent(.{
+            .page = .{
+                .blog = try std.fmt.allocPrint(allocator, "./doc/{s}.md", .{blog}),
+            },
+        });
     }
     arg_it.deinit();
 
@@ -138,10 +138,16 @@ pub fn main() !void {
                 .key => |key| {
                     if (key.eql(.{ .cp = 'c', .mod = .{ .ctrl = true } }) or key.eql(.{ .cp = 'q' })) app.quit();
                     // test if the event handling is working correctly
-                    if (key.eql(.{ .cp = zterm.input.Space })) app.postEvent(.{ .blog = try allocator.dupe(u8, "./doc/test.md") });
+                    if (key.eql(.{ .cp = zterm.input.Space })) app.postEvent(.{
+                        .page = .{
+                            .blog = try allocator.dupe(u8, "./doc/test.md"),
+                        },
+                    });
+                },
+                .page => |page| switch (page) {
+                    .about => log.info(ResourceRequestFormat, .{"./doc/about.md"}),
+                    .blog => |path| log.info(ResourceRequestFormat, .{if (path) |p| p else "./doc/blog.md"}),
                 },
-                .about => log.info(ResourceRequestFormat, .{"./doc/about.md"}),
-                .blog => |path| log.info(ResourceRequestFormat, .{if (path) |p| p else "./doc/blog.md"}),
                 .err => |err| log.err("Received {s} with message: {s}", .{ @errorName(err.err), err.msg }),
                 else => {},
             }
@@ -179,7 +185,10 @@ const zlog = @import("zlog");
 const zterm = @import("zterm");
 const App = zterm.App(
     Model,
-    Model.Pages,
+    union(enum) {
+        search: []const u21,
+        page: Model.Pages,
+    },
 );
 
 const contents = @import("content.zig");

src/model.zig

@@ -1,6 +1,8 @@
 page: Pages,
 document: Document,
 
+searching: bool = false,
+
 pub fn deinit(this: *@This(), allocator: Allocator) void {
     this.page.deinit(allocator);
     this.document.deinit(allocator);

src/navigation.zig

@@ -1,6 +1,6 @@
-pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
+pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Model.Pages)) type {
     const navigation_struct = struct {
-        fn navigation_fn(page: std.meta.FieldEnum(App.Event)) type {
+        fn navigation_fn(page: std.meta.FieldEnum(App.Model.Pages)) type {
             return struct {
                 text: []const u8,
                 highlight: bool,
@@ -12,7 +12,6 @@ pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
                         .highlight = switch (page) {
                             .about => model.page == .about,
                             .blog => model.page == .blog,
-                            else => @compileError("NavigationButton initiated with non page `App.Event` variant"),
                         },
                         .queue = queue,
                     };
@@ -36,12 +35,13 @@ pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
                 fn handle(ctx: *anyopaque, _: *App.Model, event: App.Event) !void {
                     const this: *@This() = @ptrCast(@alignCast(ctx));
                     switch (event) {
-                        .about, .blog => this.highlight = event == page,
+                        .page => |p| this.highlight = p == page,
                         // TODO accept key input too?
                         .mouse => |mouse| if (mouse.button == .left and mouse.kind == .release) this.queue.push(switch (page) {
-                            .about => .about,
+                            .about => .{ .page = .about },
-                            .blog => .{ .blog = null },
+                            .blog => .{
-                            else => @compileError("The provided navigation button event to trigger is not a `App.Model.Pages` enum variation."),
+                                .page = .{ .blog = null },
+                            },
                         }),
                         else => {},
                     }
@@ -54,8 +54,7 @@ pub fn NavigationButton(App: type) fn (std.meta.FieldEnum(App.Event)) type {
                     assert(size.y == 1);
 
                     for (1.., this.text) |idx, cp| {
-                        cells[idx].style.fg = if (this.highlight) .black else .default;
+                        if (this.highlight) cells[idx].style.ul = .green;
-                        cells[idx].style.bg = if (this.highlight) .green else .default;
                         cells[idx].style.emphasis = &.{.underline};
                         cells[idx].cp = cp;
                     }