╭ ui.zig ───────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
🬐 🬠 🬞🬂🬏 🬟 🬑 🬟 🬑 ╭9a877129..╮ 9a877129.. see-em: 🬋🬋🬋 🬋🬋🬋 🬋 🬋 │files │ commits refs discuss issues new login 🬐 🬠 🬐 🬠 🬑 🬟 🬰 ╰──────────╯ (100) user
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
.. embed/ event/ test/ ui/ command.zig event.zig lib.zig main.zig main_wasm.zig serve.zig serve_ssh.zig serve_ssh_protocol.zig test.zig testnet.zig try.zig ╭─────────────────────────────────╮ │ui.zig │ ╰─────────────────────────────────╯ web.zig
1 const std = @import("std"); 2 const xit = @import("xit"); 3 const rp = xit.repo; 4 const xitui = xit.xitui; 5 const term = xitui.terminal; 6 const wgt = xitui.widget; 7 const layout = xitui.layout; 8 const inp = xitui.input; 9 const Grid = xitui.grid.Grid; 10 const Focus = xitui.focus.Focus; 11 const evt = @import("./event.zig"); 12 13 pub const canonical_repo_opts: rp.RepoOpts(.xit) = .{}; 14 pub const DB = rp.Repo(.xit, canonical_repo_opts).DB; 15 16 pub const Home = @import("./ui/Home.zig"); 17 18 pub const Page = union(enum) { 19 home: Home, 20 }; 21 22 // per-connection mutable state. each SSH session / web session / local TUI 23 // run gets its own 24 pub const Session = struct { 25 user_id: ?[]const u8 = null, 26 arena: ?*std.heap.ArenaAllocator = null, 27 haxy_moment: ?DB.HashMap(.read_only) = null, 28 }; 29 30 pub fn run(io: std.Io, allocator: std.mem.Allocator, page: *const Page, session: *Session) !void { 31 var root = try initRoot(allocator, page, session); 32 defer root.deinit(); 33 34 var terminal = try term.Terminal.init(io, allocator); 35 defer terminal.deinit(io); 36 37 var last_size = layout.Size{ .width = 0, .height = 0 }; 38 var last_grid = try Grid.init(allocator, last_size); 39 defer last_grid.deinit(); 40 41 while (!terminal.shouldQuit()) { 42 const grid_changed = try terminal.render(&root, &last_grid, &last_size); 43 44 // process any inputs. 45 // 46 // if the grid didn't change, then first do a blocking 47 // read, so the thread will sleep until further input. 48 // after that, all remaining reads are non-blocking so 49 // we can process the rest of the queued inputs. 50 // 51 // if the grid *did* change, then only do non-blocking 52 // reads. we do not want to sleep the thread because 53 // there may be an animation that requires more looping. 54 var blocking = !grid_changed; 55 while (try terminal.readKey(io, blocking)) |key| { 56 try inputKey(&root, key, &terminal); 57 blocking = false; 58 } 59 60 try root.build(.{ 61 .min_size = .{ .width = null, .height = null }, 62 .max_size = .{ .width = last_size.width, .height = last_size.height }, 63 }, root.getFocus()); 64 } 65 } 66 67 pub fn inputKey(root: *Widget, key: inp.Key, terminal: anytype) !void { 68 switch (key) { 69 .codepoint => |cp| if (cp == 'q') terminal.requestQuit() else try root.input(key, root.getFocus()), 70 .mouse => |mouse| { 71 if (mouse.action == .press and mouse.action.press == .left) { 72 const root_focus = root.getFocus(); 73 var iter = root_focus.children.iterator(); 74 while (iter.next()) |entry| { 75 const child = entry.value_ptr.*; 76 if (!child.focus.focusable) continue; 77 const r = child.rect; 78 if (mouse.x >= r.x and mouse.y >= r.y and 79 mouse.x < r.x + r.size.width and mouse.y < r.y + r.size.height) 80 { 81 try root_focus.setFocus(entry.key_ptr.*); 82 break; 83 } 84 } 85 // forward the press into the widget tree so buttons (and any 86 // future click-aware widgets) can react. widgets that don't 87 // care about presses ignore it. 88 try root.input(key, root.getFocus()); 89 } else { 90 try root.input(key, root.getFocus()); 91 } 92 }, 93 else => try root.input(key, root.getFocus()), 94 } 95 } 96 97 pub fn initRoot(allocator: std.mem.Allocator, page: *const Page, session: *Session) !Widget { 98 var root: Widget = switch (page.*) { 99 .home => |*p| .{ .home = try Home.View.init(allocator, p, session) }, 100 }; 101 errdefer root.deinit(); 102 103 try root.build(.{ 104 .min_size = .{ .width = null, .height = null }, 105 .max_size = .{ .width = 80, .height = null }, 106 }, root.getFocus()); 107 if (root.getFocus().child_id) |child_id| { 108 try root.getFocus().setFocus(child_id); 109 } 110 111 return root; 112 } 113 114 pub const Widget = union(enum) { 115 text: wgt.Text(Widget), 116 box: wgt.Box(Widget), 117 text_box: wgt.TextBox(Widget), 118 text_input: wgt.TextInput(Widget), 119 scroll: wgt.Scroll(Widget), 120 stack: wgt.Stack(Widget), 121 selectable_list: SelectableList, 122 spacer: Spacer, 123 center: Center, 124 home: Home.View, 125 home_header: Home.Header.View, 126 home_users: Home.Users.View, 127 home_repos: Home.Repos.View, 128 home_auth_tab: Home.Header.AuthTab.View, 129 home_auth: Home.Auth.View, 130 131 pub fn deinit(self: *Widget) void { 132 switch (self.*) { 133 inline else => |*case| case.deinit(), 134 } 135 } 136 137 pub fn build(self: *Widget, constraint: layout.Constraint, root_focus: *Focus) anyerror!void { 138 switch (self.*) { 139 inline else => |*case| try case.build(constraint, root_focus), 140 } 141 } 142 143 pub fn input(self: *Widget, key: inp.Key, root_focus: *Focus) anyerror!void { 144 switch (self.*) { 145 inline else => |*case| try case.input(key, root_focus), 146 } 147 } 148 149 pub fn clearGrid(self: *Widget) void { 150 switch (self.*) { 151 inline else => |*case| case.clearGrid(), 152 } 153 } 154 155 pub fn getGrid(self: Widget) ?Grid { 156 switch (self) { 157 inline else => |*case| return case.getGrid(), 158 } 159 } 160 161 pub fn getFocus(self: *Widget) *Focus { 162 switch (self.*) { 163 inline else => |*case| return case.getFocus(), 164 } 165 } 166 }; 167 168 // a scrollable list of selectable single-line items. content is replaced 169 // via setItems, which dupes the strings into the widget's own allocation. 170 pub const SelectableList = struct { 171 allocator: std.mem.Allocator, 172 scroll: wgt.Scroll(Widget), 173 lines: std.ArrayList([]const u8), 174 175 pub fn init(allocator: std.mem.Allocator) !SelectableList { 176 var self = blk: { 177 var inner_box = try wgt.Box(Widget).init(allocator, .{ .border_style = null, .rounded_corners = true, .direction = .vert }); 178 errdefer inner_box.deinit(); 179 180 var scroll = try wgt.Scroll(Widget).init(allocator, .{ .box = inner_box }, .vert); 181 errdefer scroll.deinit(); 182 183 break :blk SelectableList{ 184 .allocator = allocator, 185 .scroll = scroll, 186 .lines = .empty, 187 }; 188 }; 189 errdefer self.deinit(); 190 return self; 191 } 192 193 pub fn deinit(self: *SelectableList) void { 194 self.scroll.deinit(); 195 for (self.lines.items) |line| self.allocator.free(line); 196 self.lines.deinit(self.allocator); 197 } 198 199 pub fn setItems(self: *SelectableList, items: []const []const u8) !void { 200 const inner_box = &self.scroll.child.box; 201 202 for (inner_box.children.values()) |*child| { 203 child.widget.deinit(); 204 } 205 inner_box.children.clearAndFree(self.allocator); 206 207 for (self.lines.items) |line| self.allocator.free(line); 208 self.lines.clearAndFree(self.allocator); 209 210 self.scroll.x = 0; 211 self.scroll.y = 0; 212 // keep the focus tree in sync with the widget tree so setFocus can 213 // descend even when the pane isn't laid out this build (e.g. narrow 214 // terminal where only the focused pane fits). build's clear+addChild 215 // would do this otherwise, but it gets skipped for unbuilt panes. 216 inner_box.getFocus().clear(); 217 inner_box.getFocus().child_id = null; 218 219 for (items) |item| { 220 const line = try self.allocator.dupe(u8, item); 221 { 222 errdefer self.allocator.free(line); 223 try self.lines.append(self.allocator, line); 224 } 225 226 var text_box = try wgt.TextBox(Widget).init(self.allocator, line, .{ .border_style = .hidden, .rounded_corners = true, .wrap_kind = .none }); 227 errdefer text_box.deinit(); 228 text_box.getFocus().focusable = true; 229 try inner_box.children.put(self.allocator, text_box.getFocus().id, .{ .widget = .{ .text_box = text_box }, .rect = null, .min_size = null }); 230 try inner_box.getFocus().addChild(text_box.getFocus(), .{ .width = 0, .height = 0 }, 0, 0); 231 } 232 233 if (inner_box.children.count() > 0) { 234 inner_box.getFocus().child_id = inner_box.children.keys()[0]; 235 } 236 } 237 238 pub fn build(self: *SelectableList, constraint: layout.Constraint, root_focus: *Focus) !void { 239 self.clearGrid(); 240 const children = &self.scroll.child.box.children; 241 for (children.keys(), children.values()) |id, *item| { 242 item.widget.text_box.options.border_style = if (self.getFocus().child_id == id) 243 (if (root_focus.grandchild_id == id) .double else .single) 244 else 245 .hidden; 246 } 247 try self.scroll.build(constraint, root_focus); 248 } 249 250 pub fn input(self: *SelectableList, key: inp.Key, root_focus: *Focus) !void { 251 if (self.getFocus().child_id) |child_id| { 252 const children = &self.scroll.child.box.children; 253 if (children.getIndex(child_id)) |current_index| { 254 var index = current_index; 255 256 switch (key) { 257 .arrow_up => { 258 index -|= 1; 259 }, 260 .arrow_down => { 261 if (index + 1 < children.count()) { 262 index += 1; 263 } 264 }, 265 .home => { 266 index = 0; 267 }, 268 .end => { 269 if (children.count() > 0) { 270 index = children.count() - 1; 271 } 272 }, 273 .page_up => { 274 if (self.getGrid()) |grid| { 275 const half_count = (grid.size.height / 3) / 2; 276 index -|= half_count; 277 } 278 }, 279 .page_down => { 280 if (self.getGrid()) |grid| { 281 if (children.count() > 0) { 282 const half_count = (grid.size.height / 3) / 2; 283 index = @min(index + half_count, children.count() - 1); 284 } 285 } 286 }, 287 .mouse => |mouse| switch (mouse.action) { 288 .scroll => |dir| switch (dir) { 289 .up => index -|= 1, 290 .down => if (index + 1 < children.count()) { 291 index += 1; 292 }, 293 }, 294 else => {}, 295 }, 296 else => {}, 297 } 298 299 if (index != current_index) { 300 try root_focus.setFocus(children.keys()[index]); 301 self.updateScroll(index); 302 } 303 } 304 } 305 } 306 307 pub fn clearGrid(self: *SelectableList) void { 308 self.scroll.clearGrid(); 309 } 310 311 pub fn getGrid(self: SelectableList) ?Grid { 312 return self.scroll.getGrid(); 313 } 314 315 pub fn getFocus(self: *SelectableList) *Focus { 316 return self.scroll.getFocus(); 317 } 318 319 pub fn getSelectedIndex(self: SelectableList) ?usize { 320 if (self.scroll.child.box.focus.child_id) |child_id| { 321 const children = &self.scroll.child.box.children; 322 return children.getIndex(child_id); 323 } else { 324 return null; 325 } 326 } 327 328 fn updateScroll(self: *SelectableList, index: usize) void { 329 const inner_box = &self.scroll.child.box; 330 if (inner_box.children.values()[index].rect) |rect| { 331 self.scroll.scrollToRect(rect); 332 } 333 } 334 }; 335 336 // an invisible widget that fills the horizontal space granted by its parent. 337 // used inside Box(horiz) with a min_size so the box reserves space for the 338 // children that follow, pushing them to the right. 339 pub const Spacer = struct { 340 allocator: std.mem.Allocator, 341 focus: Focus, 342 grid: ?Grid, 343 344 pub fn init(allocator: std.mem.Allocator) Spacer { 345 return .{ 346 .allocator = allocator, 347 .focus = Focus.init(allocator, .container), 348 .grid = null, 349 }; 350 } 351 352 pub fn deinit(self: *Spacer) void { 353 self.focus.deinit(); 354 if (self.grid) |*grid| { 355 grid.deinit(); 356 self.grid = null; 357 } 358 } 359 360 pub fn build(self: *Spacer, constraint: layout.Constraint, root_focus: *Focus) !void { 361 _ = root_focus; 362 self.clearGrid(); 363 const width = constraint.max_size.width orelse return; 364 if (width == 0) return; 365 self.grid = try Grid.init(self.allocator, .{ .width = width, .height = 1 }); 366 } 367 368 pub fn input(self: *Spacer, key: inp.Key, root_focus: *Focus) !void { 369 _ = self; 370 _ = key; 371 _ = root_focus; 372 } 373 374 pub fn clearGrid(self: *Spacer) void { 375 if (self.grid) |*grid| { 376 grid.deinit(); 377 self.grid = null; 378 } 379 } 380 381 pub fn getGrid(self: Spacer) ?Grid { 382 return self.grid; 383 } 384 385 pub fn getFocus(self: *Spacer) *Focus { 386 return &self.focus; 387 } 388 }; 389 390 // a single-child wrapper that builds the child at its natural size and 391 // positions its grid in the middle of the area granted by the parent 392 pub const Center = struct { 393 allocator: std.mem.Allocator, 394 focus: Focus, 395 grid: ?Grid, 396 child: *Widget, 397 direction: Direction, 398 399 pub const Direction = enum { both, horiz, vert }; 400 401 pub fn init(allocator: std.mem.Allocator, child_widget: Widget, direction: Direction) !Center { 402 const child = try allocator.create(Widget); 403 errdefer allocator.destroy(child); 404 child.* = child_widget; 405 return .{ 406 .allocator = allocator, 407 .focus = Focus.init(allocator, .container), 408 .grid = null, 409 .child = child, 410 .direction = direction, 411 }; 412 } 413 414 pub fn deinit(self: *Center) void { 415 self.focus.deinit(); 416 if (self.grid) |*grid| { 417 grid.deinit(); 418 self.grid = null; 419 } 420 self.child.deinit(); 421 self.allocator.destroy(self.child); 422 } 423 424 pub fn build(self: *Center, constraint: layout.Constraint, root_focus: *Focus) !void { 425 self.clearGrid(); 426 self.getFocus().clear(); 427 428 // build the child without forcing it to fill min_size; it sizes 429 // itself to its content within the available max. 430 try self.child.build(.{ 431 .min_size = .{ .width = null, .height = null }, 432 .max_size = constraint.max_size, 433 }, root_focus); 434 435 const child_grid = self.child.getGrid() orelse return; 436 437 const width = constraint.max_size.width orelse child_grid.size.width; 438 const height = constraint.max_size.height orelse child_grid.size.height; 439 if (width == 0 or height == 0) return; 440 441 const offset_x: usize = if (self.direction == .horiz or self.direction == .both) 442 (width -| child_grid.size.width) / 2 443 else 444 0; 445 const offset_y: usize = if (self.direction == .vert or self.direction == .both) 446 (height -| child_grid.size.height) / 2 447 else 448 0; 449 450 var grid = try Grid.init(self.allocator, .{ .width = width, .height = height }); 451 errdefer grid.deinit(); 452 try grid.drawGrid(child_grid, offset_x, offset_y); 453 try self.getFocus().addChild(self.child.getFocus(), child_grid.size, offset_x, offset_y); 454 self.getFocus().child_id = self.child.getFocus().id; 455 456 self.grid = grid; 457 } 458 459 pub fn input(self: *Center, key: inp.Key, root_focus: *Focus) !void { 460 try self.child.input(key, root_focus); 461 } 462 463 pub fn clearGrid(self: *Center) void { 464 if (self.grid) |*grid| { 465 grid.deinit(); 466 self.grid = null; 467 } 468 self.child.clearGrid(); 469 } 470 471 pub fn getGrid(self: Center) ?Grid { 472 return self.grid; 473 } 474 475 pub fn getFocus(self: *Center) *Focus { 476 return &self.focus; 477 } 478 }; 479