╭─────────────╮ │scroll to top│ ╰─────────────╯ ╭ Files.zig ────────────────────────────────────────────────────╮ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ╰───────────────────────────────────────────────────────────────╯
╭────╮ ╭ clone ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╮ │http│ ssh │ │ ╰────╯ ╰ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ╯
337 // a vertical stack: the search box and clone url on top, then a horizontal 338 // split with the file/directory list on the left and a detail pane on the 339 // right showing the selected file's contents. 340 box: wgt.Box(ui.Widget), // vert: [header_index] = header row, [content_index] = split 341 data: *const Self, 342 session: *ui.Session, 343 // what the detail pane was last filled for: the selected list row, and 344 // whether the window was too narrow to show the list beside it 345 shown: Shown = .{ .index = null, .narrow = false }, 346 // the detail's way back to a list that isn't shown beside it 347 back_id: ?usize = null, 348 349 const Shown = struct { index: ?usize, narrow: bool }; 350 351 // the sub-header leads the box where there is one; local mode has none 352 const header_index: usize = 0; 353 // indices within the content box (the horizontal split). 354 const list_index: usize = 0; 355 const detail_index: usize = 1; 356 // indices within the detail pane frame (nav box above the content scroll). 357 const detail_nav_index: usize = 0; 358 const detail_scroll_index: usize = 1; 359 const list_max_width: usize = 35; 360 const detail_min_width: usize = 40; 361 // a list row's height: one text line inside its (hidden) border. 362 const row_height: usize = 3; 363 364 pub fn init(allocator: std.mem.Allocator, data: *const Self, session: *ui.Session) !View { 365 var outer = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .vert }); 366 errdefer outer.deinit(allocator); 367 368 if (data.no_commits) { 369 var center = try ui.widget.initNoCommits(allocator, session, data.handle); 370 errdefer center.deinit(allocator); 371 outer.getFocus().child_id = center.getFocus().id; 372 try outer.children.put(allocator, center.getFocus().id, .{ .widget = .{ .center = center }, .rect = null, .min_size = null }); 373 return .{ .box = outer, .data = data, .session = session }; 374 } 375 376 // the search box and the clone url at the top. local mode has neither. 377 if (session.data.host_kind == .server) { 378 var header_view = try ui.widget.SearchHeader.init(allocator, session, data.handle, " find file ", "find", data.find, data.find_available); 379 errdefer header_view.deinit(allocator); 380 // a row taller than the header, leaving a blank line beneath it 381 try outer.children.put(allocator, header_view.getFocus().id, .{ .widget = .{ .search_header = header_view }, .rect = null, .min_size = .{ .width = null, .height = 4 } }); 382 } 383 384 var box = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .horiz }); 385 errdefer box.deinit(allocator); 386 387 var shows_file = false; 388 389 // the directory listing on the left (one focusable row each). 390 { 391 var list_scroll = blk: { 392 var list_box = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .vert, .stretch = true }); 393 errdefer list_box.deinit(allocator); 394 395 // link kinds are borrowed by the rows, so they live in the page 396 // arena (as long as this page's widget tree). row labels are 397 // copied by their text boxes. 398 const aa = session.page_arena.allocator(); 399 if (data.dir.len != 0) { 400 try addRow(allocator, &list_box, "..", "", try dirLink(session.page_arena, data, parentDir(data.dir))); 401 } 402 for (data.entries) |entry| { 403 const path = try childDir(aa, data.dir, entry.name); 404 // a search result shows its file name, with its directory 405 // in the bottom label. 406 const label = if (data.find != null) 407 std.Io.Dir.path.basenamePosix(entry.name) 408 else if (entry.is_dir) 409 try aa.print("{s}/", .{entry.name}) 410 else 411 entry.name; 412 const bottom_label = if (data.find != null) try resultDirLabel(aa, entry.name) else ""; 413 const link = if (entry.is_dir) 414 try dirLink(session.page_arena, data, path) 415 else 416 try fileLink(session.page_arena, data, path, entry.loaded, lineNumber(entry.window_start)); 417 try addRow(allocator, &list_box, label, bottom_label, link); 418 } 419 if (data.capped) try addRow(allocator, &list_box, "(list truncated)", "", ""); 420 // select the file the route named, else prefer a README so its 421 // contents greet the visitor in the detail pane, else the first 422 // row. a non-root directory has a leading ".." row, so the entry 423 // index is offset by one there. search results have no README 424 // default: the term decides what matters. 425 var sel: usize = 0; 426 if (list_box.children.count() > 0) { 427 const base: usize = if (data.dir.len != 0) 1 else 0; 428 const entry_idx = selectedFileIndex(data) orelse if (data.find == null) readmeIndex(data.entries) else null; 429 sel = if (entry_idx) |i| i + base else 0; 430 list_box.getFocus().child_id = list_box.children.keys()[sel]; 431 shows_file = sel >= base and sel - base < data.entries.len and !data.entries[sel - base].is_dir; 432 } 433 var sc = try wgt.Scroll(ui.Widget).init(allocator, .{ .box = list_box }, .{ .direction = .vert, .web_native = !session.is_terminal, .fill = true }); 434 // start scrolled so the selected row begins at the top of the 435 // viewport. rows are a fixed height, so no layout pass is 436 // needed; a too-far offset near the end of the list is clamped 437 // in build (the browser clamps its own scrolling natively). 438 sc.y = @intCast(sel * row_height); 439 break :blk sc; 440 }; 441 errdefer list_scroll.deinit(allocator); 442 try box.children.put(allocator, list_scroll.getFocus().id, .{ .widget = .{ .scroll = list_scroll }, .rect = null, .min_size = .{ .width = list_max_width, .height = null }, .max_size = .{ .width = list_max_width, .height = null } }); 443 } 444 445 // the detail pane on the right — a "next" nav box above a scroll of the 446 // selected file's content window. both are repopulated per selection by 447 // populateDetail. 448 { 449 var detail_outer = blk: { 450 var frame = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .vert }); 451 errdefer frame.deinit(allocator); 452 453 { 454 var nav_box = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .horiz }); 455 errdefer nav_box.deinit(allocator); 456 try frame.children.put(allocator, nav_box.getFocus().id, .{ .widget = .{ .box = nav_box }, .rect = null, .min_size = null }); 457 } 458 { 459 // the content scroll wrapped in a bordered box; build sets the 460 // border single normally and double when the content is focused 461 // (the content box itself is borderless). 462 var scroll_frame = blk2: { 463 var detail_scroll = blk3: { 464 var detail_inner = try wgt.Box(ui.Widget).init(allocator, .{ .border = null, .direction = .vert }); 465 errdefer detail_inner.deinit(allocator); 466 break :blk3 try wgt.Scroll(ui.Widget).init(allocator, .{ .box = detail_inner }, .{ .direction = .both, .web_native = !session.is_terminal, .fill = true }); 467 }; 468 errdefer detail_scroll.deinit(allocator); 469 var sf = try wgt.Box(ui.Widget).init(allocator, .{ .border = .single, .round_corners = true, .direction = .vert }); 470 errdefer sf.deinit(allocator); 471 // the wrapper's selected child is its scroll, so the focus 472 // chain reaches the content box (populateDetail points the 473 // scroll's inner box at it). 474 sf.getFocus().child_id = detail_scroll.getFocus().id; 475 try sf.children.put(allocator, detail_scroll.getFocus().id, .{ .widget = .{ .scroll = detail_scroll }, .rect = null, .min_size = null }); 476 break :blk2 sf; 477 }; 478 errdefer scroll_frame.deinit(allocator); 479 // entering the detail pane lands on the content scroll (focus 480 // recovery descends the frame's selected child). the nav links 481 // above are reached by scrolling to the top, then up. 482 frame.getFocus().child_id = scroll_frame.getFocus().id; 483 // shrink, so the fill scroll yields the nav box's row 484 // instead of consuming the frame's whole height. 485 try frame.children.put(allocator, scroll_frame.getFocus().id, .{ .widget = .{ .box = scroll_frame }, .rect = null, .min_size = null, .flex = .shrink }); 486 } 487 break :blk frame; 488 }; 489 errdefer detail_outer.deinit(allocator); 490 detail_outer.getFocus().mode = .mouse; 491 try box.children.put(allocator, detail_outer.getFocus().id, .{ .widget = .{ .box = detail_outer }, .rect = null, .min_size = .{ .width = detail_min_width, .height = null } }); 492 } 493 494 box.getFocus().child_id = box.children.keys()[if (shows_file) detail_index else list_index]; 495 try outer.children.put(allocator, box.getFocus().id, .{ .widget = .{ .box = box }, .rect = null, .min_size = null }); 496 497 // focus lives in the split, except that search results start in the 498 // search box so the term can be refined right away. 499 outer.getFocus().child_id = outer.children.keys()[if (data.find != null) header_index else outer.children.count() - 1]; 500 return .{ .box = outer, .data = data, .session = session }; 501 } 502 503 fn addRow(allocator: std.mem.Allocator, box: *wgt.Box(ui.Widget), label: []const u8, bottom_label: []const u8, link: []const u8) !void { 504 var row = try wgt.TextBox.init(allocator, label, .{ .border = .hidden, .round_corners = true, .wrap_kind = .none, .bottom_label = .{ .text = bottom_label } }); 505 errdefer row.deinit(allocator); 506 row.getFocus().mode = .all; 507 if (link.len != 0) row.getFocus().kind = .{ .custom = link }; 508 try box.children.put(allocator, row.getFocus().id, .{ .widget = .{ .text_box = row }, .rect = null, .min_size = null }); 509 } 510 511 // the selected file's contents as a single focusable multi-line text box. 512 // it's borderless — the border lives on the surrounding scroll frame, which 513 // doubles when this content is focused. a non-empty `link` makes activating 514 // the box follow it, like addRow. 515 fn addContentBox(self: *View, allocator: std.mem.Allocator, box: *wgt.Box(ui.Widget), spans: []const wgt.Span, link: []const u8) !void { 516 _ = self; 517 var tb = try wgt.TextBox.initSpans(allocator, spans, .{ .border = null, .wrap_kind = .none }); 518 errdefer tb.deinit(allocator); 519 tb.getFocus().mode = .all; 520 if (link.len != 0) tb.getFocus().kind = .{ .custom = link }; 521 try box.children.put(allocator, tb.getFocus().id, .{ .widget = .{ .text_box = tb }, .rect = null, .min_size = null }); 522 } 523 524 pub fn deinit(self: *View, allocator: std.mem.Allocator) void { 525 self.box.deinit(allocator); 526 } 527 528 // the split is last, after the sub-header where there is one 529 fn contentIndex(self: *View) usize { 530 return self.box.children.count() - 1; 531 } 532 533 fn contentBox(self: *View) *wgt.Box(ui.Widget) { 534 return &self.box.children.values()[self.contentIndex()].widget.box; 535 } 536 537 fn header(self: *View) ?*ui.widget.SearchHeader { 538 switch (self.box.children.values()[header_index].widget) { 539 .search_header => |*header_view| return header_view, 540 else => return null, 541 } 542 } 543 544 fn headerActive(self: *View) bool { 545 const header_view = self.header() orelse return false; 546 return self.box.getFocus().child_id == header_view.getFocus().id; 547 } 548 549 fn listScroll(self: *View) *wgt.Scroll(ui.Widget) { 550 return &self.contentBox().children.values()[list_index].widget.scroll; 551 } 552 553 fn listBox(self: *View) *wgt.Box(ui.Widget) { 554 return &self.listScroll().child.box; 555 } 556 557 fn detailOuter(self: *View) *wgt.Box(ui.Widget) { 558 return &self.contentBox().children.values()[detail_index].widget.box; 559 } 560 561 fn navBox(self: *View) *wgt.Box(ui.Widget) { 562 return &self.detailOuter().children.values()[detail_nav_index].widget.box; 563 } 564 565 // the bordered box wrapping the content scroll (border toggles with focus). 566 fn detailScrollFrame(self: *View) *wgt.Box(ui.Widget) { 567 return &self.detailOuter().children.values()[detail_scroll_index].widget.box; 568 } 569 570 fn detailScroll(self: *View) *wgt.Scroll(ui.Widget) { 571 return &self.detailScrollFrame().children.values()[0].widget.scroll; 572 } 573 574 fn detailInner(self: *View) *wgt.Box(ui.Widget) { 575 return &self.detailScroll().child.box; 576 } 577 578 fn detailActive(self: *View) bool { 579 const content = self.contentBox(); 580 const cid = content.getFocus().child_id orelse return false; 581 return content.children.getIndex(cid) == detail_index; 582 } 583 584 // the selected list row's index, or null when nothing is focused. 585 fn selectedRowIndex(self: *View) ?usize { 586 const lb = self.listBox(); 587 const cid = lb.getFocus().child_id orelse return null; 588 return lb.children.getIndex(cid); 589 } 590 591 // the entry the selected row points at, or null for the ".." row (which 592 // isn't an entry). directory rows return their entry too, though they carry 593 // no contents. 594 fn selectedEntry(self: *View) ?Entry { 595 const idx = self.selectedRowIndex() orelse return null; 596 const base: usize = if (self.data.dir.len != 0) 1 else 0; // skip the ".." row 597 if (idx < base) return null; 598 const e = idx - base; 599 if (e >= self.data.entries.len) return null; 600 return self.data.entries[e]; 601 } 602 603 pub fn build(self: *View, allocator: std.mem.Allocator, constraint: layout.Constraint, root_focus: *Focus) !void { 604 self.clearGrid(); 605 if (self.data.no_commits) return self.box.build(allocator, constraint, root_focus); 606 607 // whether the detail pane fits beside the list, which decides the list 608 // cap below and whether the detail carries a way back to the list 609 const both_panes_fit = if (constraint.max_size.width) |w| w >= list_max_width + detail_min_width else true; 610 611 // swap the detail pane to the selected entry when the selection changes. 612 try self.refreshDetail(allocator, !both_panes_fit); 613 614 // the selected list row shows a border (the focused TextBox upgrades it 615 // to a double border itself); the rest stay borderless. 616 const lb = self.listBox(); 617 for (lb.children.keys(), lb.children.values()) |id, *child| { 618 switch (child.widget) { 619 .text_box => |*tb| ui.widget.markSelected(tb, lb.getFocus().child_id == id), 620 else => {}, 621 } 622 } 623 624 // the content scroll's border is single normally and double when the 625 // content is focused (the content box itself is borderless). 626 const has_content = self.detailInner().children.count() > 0; 627 self.detailScrollFrame().options.border = if (!has_content) null else if (self.focusOnContent(root_focus)) .double else .single; 628 629 // cap the list at list_max_width only while the detail pane fits beside 630 // it. the box drops the detail pane when the width can't hold both 631 // minimums, so when it's that narrow we lift the cap and let the list 632 // fill the whole width. 633 self.contentBox().children.values()[list_index].max_size = if (both_panes_fit) .{ .width = list_max_width, .height = null } else null; 634 635 // stretch the detail pane and its bordered scroll frame across the rest 636 // of the width so the pane fills the area rather than shrinking to its 637 // content, like the refs view's columns. the content scroll inside keeps 638 // its natural width: forcing it to the full inner width would make it one 639 // column too wide whenever the vertical scrollbar appears, leaving a 640 // phantom horizontal scroll. (height fills via the scroll clipping to the 641 // viewport.) 642 if (constraint.max_size.width) |w| { 643 const detail_w = if (both_panes_fit) w - list_max_width else w; 644 self.contentBox().children.values()[detail_index].min_size = .{ .width = detail_w, .height = null }; 645 self.detailOuter().children.values()[detail_scroll_index].min_size = .{ .width = detail_w, .height = null }; 646 } else { 647 self.contentBox().children.values()[detail_index].min_size = .{ .width = detail_min_width, .height = null }; 648 self.detailOuter().children.values()[detail_scroll_index].min_size = null; 649 } 650 651 // crossing panes only re-selects the content box's child (focusList / 652 // focusDetail); when the window is too narrow to show both, the pane that 653 // was holding focus is dropped here. the framework recovers focus after 654 // the top-level build by re-deriving it down the selected-child chain, so 655 // there's nothing to fix up afterward. 656 try self.box.build(allocator, constraint, root_focus); 657 658 // clamp the list's initial offset (a selected row near the end of the 659 // list) against this build's grids, for the next frame. initRoot's 660 // pre-sizing build is unbounded — its full-content "viewport" would 661 // clamp the offset to zero, so only a bounded build counts. 662 if (constraint.max_size.height != null) self.listScroll().clampToContent(); 663 } 664 665 fn refreshDetail(self: *View, allocator: std.mem.Allocator, narrow: bool) !void { 666 const next: Shown = .{ .index = self.selectedRowIndex(), .narrow = narrow }; 667 if (std.meta.eql(next, self.shown)) return; 668 try self.populateDetail(allocator, narrow); 669 self.shown = next; 670 } 671 672 fn populateDetail(self: *View, allocator: std.mem.Allocator, narrow: bool) !void { 673 const nav_box = self.navBox(); 674 const inner = self.detailInner(); 675 676 for (nav_box.children.values()) |*child| child.widget.deinit(allocator); 677 nav_box.children.clearAndFree(allocator); 678 nav_box.getFocus().child_id = null; 679 for (inner.children.values()) |*child| child.widget.deinit(allocator); 680 inner.children.clearAndFree(allocator); 681 inner.getFocus().child_id = null; 682 self.back_id = null; 683 684 // only files have contents to show; directories and the ".." row leave 685 // the pane empty. 686 var markdown = false; 687 if (self.selectedEntry()) |entry| { 688 if (!entry.is_dir) { 689 const path = try childDir(self.session.page_arena.allocator(), self.data.dir, entry.name); 690 // with the list hidden beside it, the detail leads with the way 691 // back. an in-page link to this very page, so both hosts hand 692 // its press and enter to detailInput instead of navigating. 693 if (narrow) { 694 const page_arena = self.session.page_arena; 695 const link = try page_arena.allocator().print("ai:{s}", .{try self.session.data.current_page.toUrl(page_arena)}); 696 self.back_id = try addNavButton(allocator, nav_box, "← back to file list", link); 697 } 698 // the window links sit above the scroll, so they stay put 699 // while the content scrolls. 700 if (entry.window_start > 0) try self.addNavLink(allocator, nav_box, "scroll to top", entry, 0); 701 if (entry.has_more) try self.addNavLink(allocator, nav_box, "next lines →", entry, lineNumber(entry.window_start + file_page)); 702 if (!entry.loaded) { 703 // the placeholder carries the file's "a:" link, so enter 704 // (or a click) here loads the file like on its list row. 705 const link = try fileLink(self.session.page_arena, self.data, path, false, 0); 706 try self.addContentBox(allocator, inner, &.{.{ .text = "(press enter to load this file)" }}, link); 707 } else if (entry.is_binary) { 708 try self.addContentBox(allocator, inner, &.{.{ .text = "(binary file)" }}, ""); 709 } else if (isMarkdown(entry.name) and entry.window_start == 0 and !entry.has_more and entry.lines.len <= max_markdown_lines) { 710 const page_arena = self.session.page_arena; 711 const doc = try md.parse(page_arena.allocator(), entry.lines); 712 var view = try Markdown.View.init(allocator, doc, self.data, path, page_arena); 713 errdefer view.deinit(allocator); 714 try inner.children.put(allocator, view.getFocus().id, .{ .widget = .{ .markdown = view }, .rect = null, .min_size = null }); 715 markdown = true; 716 } else { 717 try self.addContentBox(allocator, inner, try numberedContent(self.session.page_arena, self.data, path, entry.lines, entry.window_start), ""); 718 } 719 } 720 } 721 // point each box at its first child so focus can descend into it, and 722 // the pane at its nav row when it has one, else at the content 723 if (nav_box.children.count() > 0) nav_box.getFocus().child_id = nav_box.children.keys()[0]; 724 if (inner.children.count() > 0) inner.getFocus().child_id = inner.children.keys()[0]; 725 self.detailOuter().getFocus().child_id = if (nav_box.children.count() > 0) nav_box.getFocus().id else self.detailScrollFrame().getFocus().id; 726 727 // reserve the nav row's height (the shrink scroll frame yields it). 728 self.detailOuter().children.values()[detail_nav_index].min_size = 729 if (nav_box.children.count() > 0) .{ .width = null, .height = row_height } else null; 730 731 // rendered markdown wraps to the pane's width, so it only scrolls down 732 const sc = self.detailScroll(); 733 sc.options.direction = if (markdown) .vert else .both; 734 735 // reset the scroll to the top for the newly-shown file: directly on the 736 // terminal (the wasm offset), and via a version bump on the web (so the 737 // renderer's scroll id changes and JS drops the preserved position). 738 sc.x = 0; 739 sc.y = 0; 740 sc.getFocus().version +%= 1; 741 } 742 743 // a focusable "next" link above the content. it's an `a:` link to the 744 // selected file at `target_start`, so activating it (the host follows the 745 // link) reloads the page on the next window. 746 fn addNavLink(self: *View, allocator: std.mem.Allocator, box: *wgt.Box(ui.Widget), label: []const u8, entry: Entry, target_start: usize) !void { 747 const page_arena = self.session.page_arena; 748 const path = try childDir(page_arena.allocator(), self.data.dir, entry.name); 749 const route = self.data.filesRoute(path, target_start) orelse return error.RouteTooLong; 750 const link = try page_arena.allocator().print("a:{s}", .{try route.toUrl(page_arena)}); 751 _ = try addNavButton(allocator, box, label, link); 752 } 753 754 // a bordered button in the nav row carrying `link`, returning its focus id 755 fn addNavButton(allocator: std.mem.Allocator, box: *wgt.Box(ui.Widget), label: []const u8, link: []const u8) !usize { 756 var tb = try wgt.TextBox.init(allocator, label, .{ .border = .single, .round_corners = true, .wrap_kind = .none }); 757 errdefer tb.deinit(allocator); 758 tb.getFocus().mode = .all; 759 tb.getFocus().kind = .{ .custom = link }; 760 try box.children.put(allocator, tb.getFocus().id, .{ .widget = .{ .text_box = tb }, .rect = null, .min_size = null }); 761 return tb.getFocus().id; 762 } 763 764 pub fn input(self: *View, allocator: std.mem.Allocator, key: Key, root_focus: *Focus) !void { 765 if (self.data.no_commits) return self.box.input(allocator, key, root_focus); 766 // scrolling crosses the sub header boundary the same way arrows do 767 const direction = inp.vertDirection(key); 768 if (self.headerActive()) { 769 // active means there is one 770 const header_view = self.header() orelse unreachable; 771 if (direction == .down) { 772 root_focus.setFocus(self.contentBox().getFocus().id); 773 return; 774 } 775 if (key == .enter) if (try header_view.submittedText(allocator)) |term| { 776 defer allocator.free(term); 777 return self.submit(term); 778 }; 779 return header_view.input(allocator, key, root_focus); 780 } 781 if (direction == .up and self.contentAtTop() and self.focusHeader(root_focus)) return; 782 if (self.detailActive()) { 783 try self.detailInput(allocator, key, root_focus); 784 } else { 785 try self.listInput(allocator, key, root_focus); 786 } 787 } 788 789 // navigate to the typed term's results, pinned to the listing's ref. an 790 // empty term leaves the results for the plain listing. 791 fn submit(self: *View, term: []const u8) !void { 792 if (term.len == 0 and self.data.find == null) return; 793 const route = self.data.filesRoute("", 0) orelse return; 794 try self.session.navigate(route.withFind(term) orelse return); 795 } 796 797 fn listInput(self: *View, allocator: std.mem.Allocator, key: Key, root_focus: *Focus) !void { 798 // up/down (and the scroll wheel) move the selection; page up/down jump a 799 // fixed amount. right/Enter cross into the detail pane. Enter/clicks on a 800 // directory (or "..") row are turned into navigation by the host 801 // (crossPageLink) before reaching here. 802 if (inp.rowDelta(key, @intCast(self.listBox().children.count()))) |delta| { 803 ui.widget.moveRowFocus(self.listBox(), self.listScroll(), root_focus, delta); 804 return; 805 } 806 switch (key) { 807 .enter, .arrow_right => try self.focusDetail(root_focus), 808 // when the window is too narrow to lay out the detail pane beside 809 // the list, a click on a row opens it like enter. the row was just 810 // selected, so the detail is swapped to it ahead of the build. 811 .mouse => |mouse| if (self.contentBox().children.values()[detail_index].rect == null and ui.widget.clickOnSelectedRow(self.listBox(), root_focus, mouse)) { 812 try self.refreshDetail(allocator, true); 813 try self.focusDetail(root_focus); 814 }, 815 else => {}, 816 } 817 } 818 819 // whether focus is on the content box (vs. a "previous"/"next" nav link). 820 fn focusOnContent(self: *View, root_focus: *Focus) bool { 821 const g = root_focus.grandchild_id orelse return false; 822 if (self.markdownView()) |view| return view.owns(g); 823 return self.detailInner().children.contains(g); 824 } 825 826 // the rendered markdown in the detail pane, if that's what it shows 827 fn markdownView(self: *View) ?*Markdown.View { 828 const inner = self.detailInner(); 829 if (inner.children.count() == 0) return null; 830 return switch (inner.children.values()[0].widget) { 831 .markdown => |*view| view, 832 else => null, 833 }; 834 } 835 836 fn detailInput(self: *View, allocator: std.mem.Allocator, key: Key, root_focus: *Focus) !void { 837 // the way back to the list, by enter or a click 838 if (self.back_id) |id| { 839 if ((key == .enter and root_focus.grandchild_id == id) or (key == .mouse and inp.leftClickOn(root_focus, id, key.mouse))) return self.focusList(root_focus); 840 } 841 const sc = self.detailScroll(); 842 const on_content = self.focusOnContent(root_focus); 843 // the "next" link sits above the content scroll. on the link, left returns 844 // to the file list and down drops into the content. in the content, the 845 // terminal scrolls by offset (the wheel five rows at a time) and reaching 846 // the top then pressing up crosses back up to the link; on the web 847 // vertical scrolling is the browser's job so up just crosses to the link. 848 const step: isize = if (key == .mouse) 5 else 1; 849 switch (inp.vertDirection(key)) { 850 .up => { 851 if (!on_content) return; 852 if (self.session.is_terminal and sc.y > 0) { 853 sc.y -= step; 854 self.detailScroll().clampToContent(); 855 } else self.focusNav(root_focus); 856 return; 857 }, 858 .down => { 859 if (!on_content) return self.focusContent(root_focus); 860 if (self.session.is_terminal) { 861 sc.y += step; 862 self.detailScroll().clampToContent(); 863 } 864 return; 865 }, 866 .none => {}, 867 } 868 switch (key) { 869 .arrow_left => { 870 if (on_content) { 871 if (sc.x > 0) { 872 sc.x -= 1; 873 self.detailScroll().clampToContent(); 874 } else try self.focusList(root_focus); 875 } else if (!self.moveNav(root_focus, -1)) { 876 try self.focusList(root_focus); 877 } 878 }, 879 .arrow_right => { 880 if (on_content) { 881 sc.x += 1; 882 self.detailScroll().clampToContent(); 883 } else _ = self.moveNav(root_focus, 1); 884 }, 885 .page_up => if (on_content and self.session.is_terminal) { 886 sc.y -= 10; 887 self.detailScroll().clampToContent(); 888 }, 889 .page_down => if (on_content and self.session.is_terminal) { 890 sc.y += 10; 891 self.detailScroll().clampToContent(); 892 }, 893 .home => if (on_content and self.session.is_terminal) { 894 sc.y = 0; 895 self.detailScroll().clampToContent(); 896 }, 897 .end => if (on_content and self.session.is_terminal) { 898 sc.y = std.math.maxInt(isize); 899 self.detailScroll().clampToContent(); 900 }, 901 // step between the rendered markdown's links; the web leaves tab to the browser 902 .tab, .back_tab => if (on_content and self.session.is_terminal) if (self.markdownView()) |view| { 903 try view.stepLink(allocator, root_focus, sc, 0, 0, key == .tab); 904 }, 905 else => {}, 906 } 907 } 908 909 // focus the first (left-most) nav link; a no-op when there are none, leaving 910 // focus on the content. 911 fn focusNav(self: *View, root_focus: *Focus) void { 912 const nav_box = self.navBox(); 913 if (nav_box.children.count() == 0) return; 914 root_focus.setFocus(nav_box.children.keys()[0]); 915 } 916 917 fn focusContent(self: *View, root_focus: *Focus) void { 918 if (self.markdownView()) |view| return root_focus.setFocus(view.body.id); 919 const inner = self.detailInner(); 920 const id = inner.getFocus().child_id orelse (if (inner.children.count() > 0) inner.children.keys()[0] else return); 921 root_focus.setFocus(id); 922 } 923 924 // move focus `delta` rows within the nav box; returns false (without moving) 925 // when that would step off either end. 926 fn moveNav(self: *View, root_focus: *Focus, delta: isize) bool { 927 const nav_box = self.navBox(); 928 const keys = nav_box.children.keys(); 929 const cur_id = nav_box.getFocus().child_id orelse return false; 930 const cur: isize = @intCast(nav_box.children.getIndex(cur_id) orelse return false); 931 const target = cur + delta; 932 if (target < 0 or target >= @as(isize, @intCast(keys.len))) return false; 933 root_focus.setFocus(keys[@intCast(target)]); 934 return true; 935 } 936 937 // enter the detail pane, landing on the "next" link when there is one (so 938 // right-arrow reaches it), else on the content. a directory or ".." row has 939 // neither, so there's nothing to enter. selecting the frame's child (then 940 // focusing the frame) also handles the too-narrow case where the pane isn't 941 // laid out yet — focus lands inside it after the next build. 942 fn focusDetail(self: *View, root_focus: *Focus) !void { 943 const frame = self.detailOuter(); 944 if (self.navBox().children.count() > 0) { 945 frame.getFocus().child_id = self.navBox().getFocus().id; 946 } else if (self.detailInner().children.count() > 0) { 947 frame.getFocus().child_id = self.detailScrollFrame().getFocus().id; 948 } else return; 949 root_focus.setFocus(frame.getFocus().id); 950 } 951 952 // return to the list. 953 fn focusList(self: *View, root_focus: *Focus) !void { 954 root_focus.setFocus(self.listScroll().getFocus().id); 955 } 956 957 pub fn clearGrid(self: *View) void { 958 self.box.clearGrid(); 959 } 960 961 pub fn getGrid(self: View) ?Grid { 962 return self.box.getGrid(); 963 } 964 965 pub fn getFocus(self: *View) *Focus { 966 return self.box.getFocus(); 967 } 968 969 fn contentAtTop(self: *View) bool { 970 if (self.detailActive()) { 971 if (self.detailOuter().getFocus().child_id == self.navBox().getFocus().id) return true; 972 return self.navBox().children.count() == 0 and 973 (!self.session.is_terminal or self.detailScroll().y == 0); 974 } 975 const lb = self.listBox(); 976 const cid = lb.getFocus().child_id orelse return true; 977 return lb.children.getIndex(cid) == 0; 978 } 979 980 // only the header's own row sits directly below the repository header. 981 pub fn atTop(self: *View) bool { 982 if (self.data.no_commits) return true; 983 const focusable = if (self.header()) |header_view| header_view.hasFocusable() else false; 984 return self.headerActive() or (!focusable and self.contentAtTop()); 985 } 986 987 pub fn focusHeader(self: *View, root_focus: *Focus) bool { 988 const header_view = self.header() orelse return false; 989 return header_view.focusHeader(root_focus); 990 } 991 }; 992 993 // `lines` as spans, each prefixed with its 1-based file line number 994 // (right-aligned in a column wide enough for the last number, then a space), 995 // like the diffs view. each number links to the window starting at its line. 996 // `start` is the window's 0-based first line, so numbers continue across 997 // paginated windows. 998 fn numberedContent(page_arena: *std.heap.ArenaAllocator, data: *const Self, path: []const u8, lines: []const []const u8, start: usize) ![]const wgt.Span { 999 const arena = page_arena.allocator(); 1000 const width = std.fmt.count("{d}", .{start + lines.len}); 1001 var spans: std.ArrayList(wgt.Span) = .empty; 1002 for (lines, 0..) |line, i| { 1003 const number = start + i + 1; 1004 const route = data.filesRoute(path, number) orelse return error.RouteTooLong; 1005 try spans.append(arena, .{ .text = try arena.print("{d: >[1]}", .{ number, width }), .link = try route.toUrl(page_arena) }); 1006 try spans.append(arena, .{ .text = try arena.print(" {s}{s}", .{ line, if (i + 1 < lines.len) "\n" else "" }) }); 1007 } 1008 return spans.toOwnedSlice(arena); 1009 } 1010 1011 // the index of the "README"/"README.md" file entry (case-insensitive), or null 1012 // if none. used to pick the default selection at the repo root. 1013 fn readmeIndex(entries: []const Entry) ?usize { 1014 for (entries, 0..) |entry, i| { 1015 if (!entry.is_dir and isReadme(entry.name)) return i; 1016 } 1017 return null; 1018 } 1019 1020 fn isMarkdown(name: []const u8) bool { 1021 const extension = std.Io.Dir.path.extension(name); 1022 return std.ascii.eqlIgnoreCase(extension, ".md") or std.ascii.eqlIgnoreCase(extension, ".markdown"); 1023 } 1024 1025 fn isReadme(name: []const u8) bool { 1026 return std.ascii.eqlIgnoreCase(name, "README") or std.ascii.eqlIgnoreCase(name, "README.md"); 1027 } 1028 1029 // the index of the entry the route named (data.selected_file), or null if none. 1030 fn selectedFileIndex(data: *const Self) ?usize { 1031 const name = data.selected_file orelse return null; 1032 for (data.entries, 0..) |entry, i| { 1033 if (!entry.is_dir and std.mem.eql(u8, entry.name, name)) return i; 1034 } 1035 return null; 1036 } 1037 1038 // an "a:" link to the files route at `path`, pinned to the listing's ref, so 1039 // following it navigates to that directory's listing. 1040 fn dirLink(page_arena: *std.heap.ArenaAllocator, data: *const Self, path: []const u8) ![]const u8 { 1041 const route = data.filesRoute(path, 0) orelse return error.RouteTooLong; 1042 return page_arena.allocator().print("a:{s}", .{try route.toUrl(page_arena)}); 1043 } 1044 1045 // a link to the file's route. a preloaded file gets an "ai:" link 1046 // (crossPageLink ignores it, so a click selects the row in place and shows its 1047 // contents); an unloaded file gets an "a:" link, so activating it reloads the 1048 // page with that file selected and its content read. 1049 fn fileLink(page_arena: *std.heap.ArenaAllocator, data: *const Self, path: []const u8, loaded: bool, line: usize) ![]const u8 { 1050 const route = data.filesRoute(path, line) orelse return error.RouteTooLong; 1051 const prefix = if (loaded) "ai:" else "a:"; 1052 return page_arena.allocator().print("{s}{s}", .{ prefix, try route.toUrl(page_arena) }); 1053 } 1054 1055 // the url `line` value for a content window: its first line's 1-based number, 1056 // except the first window, which serializes as unset (0). 1057 fn lineNumber(window_start: usize) usize { 1058 return if (window_start == 0) 0 else window_start + 1; 1059 } 1060 1061 // `dir`/`name`, or just `name` at the root. 1062 pub fn childDir(arena: std.mem.Allocator, dir: []const u8, name: []const u8) ![]const u8 { 1063 return if (dir.len == 0) name else arena.print("{s}/{s}", .{ dir, name }); 1064 } 1065 1066 // `dir` with its last segment removed ("" when `dir` has a single segment). 1067 fn parentDir(dir: []const u8) []const u8 { 1068 const slash = std.mem.lastIndexOfScalar(u8, dir, '/') orelse return ""; 1069 return dir[0..slash]; 1070 } 1071 1072 // a search result's bottom label: the directory it sits in, empty at the root. 1073 // a directory too wide for the list column is clipped from the left. 1074 fn resultDirLabel(aa: std.mem.Allocator, path: []const u8) ![]const u8 { 1075 const slash = std.mem.lastIndexOfScalar(u8, path, '/') orelse return ""; 1076 const dir = path[0..slash]; 1077 // the row's border and the label's padding take two columns each 1078 const max_width = View.list_max_width - 4; 1079 var width = try xitui.width.displayWidth(dir); 1080 if (width <= max_width) return aa.print(" {s} ", .{dir}); 1081 1082 const ellipsis = ".."; 1083 var iter = (try std.unicode.Utf8View.init(dir)).iterator(); 1084 var start: usize = 0; 1085 while (width > max_width - ellipsis.len) { 1086 const slice = iter.nextCodepointSlice() orelse break; 1087 width -= xitui.width.cellWidth(try std.unicode.utf8Decode(slice)); 1088 start += slice.len; 1089 } 1090 return aa.print(" " ++ ellipsis ++ "{s} ", .{dir[start..]}); 1091 } 1092