DEV Community

chovy
chovy

Posted on Originally published at dev.profullstack.com

DiskPush 0.8.0: each pane is a folding tree, and the mouse drives it

DiskPush 0.8.0: each pane is a folding tree, and the mouse drives it

diskpush tui is the two-pane rsync browser that runs in a terminal. Until this week it was a keyboard program. You could click a row and the cursor would move there, and that was all the mouse did.

0.8.0 makes each pane a folding tree that one click drives.

What changed

Click a directory and it unfolds in place. Its listing is fetched, locally or over the same SSH session for a server, and drawn indented beneath it. Click a directory inside that and it unfolds too, as deep as you like. The marker on the row tells you the state: ▸ folded, ▾ unfolded, … while the listing is on its way. Click it again and it folds. The listing is kept, so unfolding it again is instant.

Click a file and it is selected. Click .. at the top and the pane goes up a level. There is no double-click anywhere. The first cut of this had one, and it felt odd the moment I used it, because nothing in a terminal needs two presses.

The row under the pointer lights up, a shade lighter than the background, and goes out when the pointer leaves the rows. Small, but it is the difference between a screen that reacts and one that waits.

The rest of the screen is clickable too. Every key cap in the bar at the bottom is a button: c endpoint opens the server picker, p preview starts the dry run, q quit quits. In the picker, one click on a server points the pane at it. Dialogs have real buttons, and a click on the backdrop closes the ones that are safe to close. The unknown-host-key question is not one of those. It answers only from its two buttons.

The keyboard walks the same tree. → unfolds a directory, or steps onto its first child if it is already open. ← folds the directory under the cursor, or climbs to its parent row, or leaves the root. ⏎ toggles. ↑ and ↓ move through whatever is unfolded.

hqtui 0.5.1 underneath

DiskPush's TUI is drawn with hqtui, and hqtui only knew how to make rows clickable. This week it gained click hooks on status bar items, modal buttons and backdrops, and panels (0.5.0), then a hovered row on table, list and tree, an onRow callback on the tree so a scrolled tree can turn a click back into a node, and a scrollbar on the tree (0.5.1).

ui.tree({
  nodes, selected, hovered: state.hover,
  onSelectRow: (row) => toggle(row),
  onHoverRow: (row) => { state.hover = row; state.hoverSeen = true },
  onRow: (_node, index, y) => { first = index - y },
})
Enter fullscreen mode Exit fullscreen mode

A modal now owns the screen while it is up. Its body and its backdrop both swallow clicks, so a list drawn underneath never selects a row a click was aimed past it at. That was a bug waiting in any hqtui app with a dialog over a list.

The headless test screen gained click, scroll and hover, all running the same hit-test the app runs. Every claim above is a test that clicks on the rendered frame. The interaction tests make a real directory on disk, unfold it, click into its nested directory, fold the parent, and walk it with the arrow keys.

Get it 

curl -fsSL https://diskpush.com/install.sh | sh
diskpush tui prod:/srv/app
Enter fullscreen mode Exit fullscreen mode

Or diskpush update if you already have it. hqtui is npm install @profullstack/hqtui, release notes at https://github.com/profullstack/hqtui/releases.

Top comments (0)