DodoTech-Public/DodoSSH
Public Access
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Move SFTP and S3 into the tab strip, and the host list into a card grid

Browse Source 
Four asks in one pass over the desktop head, and two of them are furniture
moving rather than anything new.

THE STRIP IS THE WINDOW'S NOW, not the terminal's. Vaults, SFTP and S3 sit at
its head and cannot be closed, and open terminals follow them. SFTP and S3 left
the nav rail to get there, which is the one semantic change: they are the two
destinations you stay in while something runs, and a rail entry is for
somewhere you go and come back from. So the rail belongs to the Vaults tab and
collapses with it, which also means SFTP, S3 and a terminal each get the full
1016 rather than the 826 a page gets.

The tab is expressed as "a page, and not one of the two the strip took" rather
than as a fourth ShellSurface. Both are still ShellScreen members and have to
be — that is what they are on the phone, where they are two rows in a hub — so
a surface each would have been a second way to say a thing Screen already says.
IsTransfersShowing and IsBucketsShowing light the other two tabs unchanged.
What is new is one field: the page Vaults comes back to, because it is the one
tab with sub-navigation and therefore the one that can return to the wrong
place. That is not the hidden field ShellSurface argues against — that one
would be a second copy of "which page"; this is a tab remembering its own.

THE HOSTS SCREEN IS A GRID, and the 268-pixel sidebar is gone. That column was
choosing among forty machines and editing one of them at two-thirds width, and
it was narrow so the editor beneath it could be a column at all. Cards took the
first job at full width; a 304-pixel drawer took the second and collapses when
nothing is selected. Pressing a group card narrows the grid; SHOW ALL is the
way back. The group editor moved into the drawer as well, which finally makes
IsEditingGroup mean the same thing on both heads — it was the phone's alone,
because the desktop's editor was a bar that was always on screen.

AreHostsExpanded and ToggleHosts went with the control that used them. They
folded the whole list away under one heading, an affordance that existed
because the column was narrow. Folding a single group is a different thing and
is still here.

THE TYPE SCALE IS A POINT LARGER and the text ramp is white. The base size was
never stated anywhere — a bare TextBlock took TextElement's default of 12 — so
raising the scale meant naming it, on Window and on UserControl. The second
selector is not redundancy: the layout harness hosts a UserControl in a window
it builds itself, and without it the suite would measure every screen a point
smaller than it ships, silently. A selector on TextBlock would have been the
obvious way and is wrong, because a style setter beats an inherited value and
would collapse every deliberate step back to one number.

#E3E7F4 is a blue-tinted white on blue-black surfaces, which costs contrast
twice — once for being darker than white and once for sharing a hue with what
it is drawn on. Pure white is 18.3:1 against the canvas where that was 15.5:1.
Every step below moved with the top, so the intervals the design chose are
kept and TextDim clears 9:1 against 6.4:1. The palette is shared, so the phone
has both changes too.

TWO DEFECTS THE HARNESS STRUCTURALLY CANNOT SEE, found by rendering the screen
rather than by measuring it, and both now covered.

The tile was 232 and was first written as 248, from arithmetic that left out
the scrolling stack's own margins. Every layout test passed — the harness asks
whether a control is inside the window, never how many fit on a line — so the
grid quietly became one column wide at exactly the minimum this application
guarantees, which is the shape cards exist to avoid.
TheHostsGridKeepsTwoColumnsAtTheMinimumWithTheDrawerOpen counts columns
instead, and fails at 248.

And a card's text ran past its own border, because a horizontal StackPanel
measures children with infinite width: a TextBlock inside one never learns it
is short of room, so TextTrimming never fires. Both card rows are grids with a
star column that gives way and an Auto column that does not — a hostname with
its tail cut is still the machine you were looking for, where a badge or the
word naming an auth method is not.

The keychain header changed shape for the same class of reason. It was
Auto,Auto,*,Auto with the buttons last, so the slack column was the only thing
absorbing a change of width and five buttons fell off the right edge the moment
the type grew. That is how GENERATE lost the word KEY once already. The summary
sits in the star column and trims now, so the buttons always get their width.

HostSidebarTests became HostGridTests and moved to the grid with the gestures
it drives. docs/design-import-gaps.md gains a v3 section naming the five
toolbar controls in the design with nothing behind them — a view-mode switch, a
tag filter, a calendar, a share control and Serial — and manual-checks.md and
the README follow the controls that moved.
This commit is contained in:
jaap-jan
2026-08-03 15:08:48 +02:00
parent 416f233657
commit 208443b932
38 changed files with 2252 additions and 1432 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/DodoSSH.Client.App/Views/HostsScreen.axaml.cs
+343 -13
View File
@@ -1,27 +1,357 @@
using Avalonia;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Interactivity;
using Avalonia.VisualTree;
using DodoSSH.Client.Shell.ViewModels;
namespace DodoSSH.Client.App.Views;
/// <summary>
/// The hosts screen: the host list, and an overview of the one that is selected.
/// The grid of groups and hosts, and everything on it that is a gesture rather than a binding.
/// </summary>
/// <remarks>
/// Its data context is the shell rather than the vault, unlike <see cref="HostSidebar"/> and
/// <see cref="VaultScreen"/>. The sidebar is handed the vault from inside the markup; everything else here
/// reaches it through <c>Vault.*</c>. That split is not tidiness — this element's visibility is the shell's
/// business and the sidebar's bindings are the vault's, and an element carrying both resolves the first
/// against the second, where it does not exist.
/// <para>
/// All of this was <c>HostSidebar</c>'s until the host list became a grid of cards. It moved with the list
/// rather than staying with the editor: every handler here is about the thing that was clicked, dragged or
/// right-clicked, and the drawer beside the grid has none of those. See <see cref="HostDrawer"/>.
/// </para>
/// <para>
/// Its data context is the <c>VaultViewModel</c>, as <see cref="VaultScreen"/>'s is, so every binding in the
/// markup is a property of the vault. The window hands it over; see <see cref="MainWindow"/>. The drawer
/// beside the grid inherits the same one.
/// </para>
/// </remarks>
internal sealed partial class HostsScreen : UserControl
{
public HostsScreen() => InitializeComponent();
/// <summary>Where the keyboard lands when this screen is the one showing.</summary>
/// <summary>
/// How a host travels from the card it was picked up on to the heading it is dropped on.
/// </summary>
/// <remarks>
/// Forwarded to the sidebar, which answers for itself: the host list can be folded away, and
/// <c>Focus()</c> on a collapsed control is measurably a no-op that is not replayed when the control is
/// revealed. Nothing in the right column can take the keyboard — it is a heading and three sentences.
/// An in-process format carrying the row itself, rather than text carrying an id. The drag never leaves
/// this window — there is nothing outside it that could accept a host — and the row is what the drop
/// needs: it knows which vault the edit has to return to, which an id on its own does not.
/// </remarks>
internal IInputElement KeyboardTarget => Sidebar.KeyboardTarget;
private static readonly DataFormat<HostRowViewModel> HostFormat =
DataFormat.CreateInProcessFormat<HostRowViewModel>("dodossh-host-row");
/// <summary>How far the pointer has to travel before a press becomes a drag.</summary>
/// <remarks>
/// A threshold, because a press on this grid is nearly always a click: selecting a host, or the first
/// half of the double-click that connects. Starting a drag on the press itself would turn every one of
/// those into a drag gesture the user never asked for.
/// </remarks>
private const double DragThreshold = 5;
/// <summary>The press a drag would start from, or null once it has become one or been let go of.</summary>
/// <remarks>
/// Held because <see cref="DragDrop.DoDragDropAsync"/> takes the press rather than the movement: the
/// gesture belongs to the pointer that went down, and the platform needs that event to hand the drag
/// over to the operating system.
/// </remarks>
private PointerPressedEventArgs? press;
private HostRowViewModel? pickedUp;
private Point origin;
/// <summary>The card or heading the pointer is currently over, while a drag is in flight.</summary>
private ListBoxItem? marked;
public HostsScreen()
{
InitializeComponent();
// Wired here rather than in the markup because it is a gesture rather than a binding, which is how
// the transfers screen opens a directory too. Double-clicking a machine to get a shell on it is what
// every other client of this kind does, and CONNECT stays: it is the one in the drawer with the
// password box above it, and a host that asks for a password still needs it typed first.
HostGrid.DoubleTapped += OnHostActivated;
// Tunnelled, so the card under the pointer is read before the ListBox has answered the press itself.
// Bubbling would work for the drag but not for the menu: by then the control has already decided
// what is selected, and the menu is about to open against it.
HostGrid.AddHandler(PointerPressedEvent, OnPointerPressed, RoutingStrategies.Tunnel);
HostGrid.AddHandler(ContextRequestedEvent, OnContextRequested, RoutingStrategies.Tunnel);
HostGrid.PointerMoved += OnPointerMoved;
HostGrid.PointerReleased += OnPointerReleased;
HostGrid.PointerCaptureLost += OnPointerCaptureLost;
DragDrop.AddDragOverHandler(HostGrid, OnDragOver);
DragDrop.AddDragLeaveHandler(HostGrid, OnDragLeave);
DragDrop.AddDropHandler(HostGrid, OnDrop);
}
/// <remarks>
/// Null before the window has handed one over, and while the previewer is showing this control with no
/// data context at all. Every handler below checks rather than assuming.
/// </remarks>
private VaultViewModel? Vault => DataContext as VaultViewModel;
/// <summary>
/// Where the keyboard should land when the terminal hands it back.
/// </summary>
/// <remarks>
/// <para>
/// Exposed as a property rather than left for the window to find by name, because the name is inside
/// this control's template and the window cannot see it.
/// </para>
/// <para>
/// It has to be a control the keyboard can actually go to. <c>Focus()</c> on a collapsed control is
/// measurably a no-op and is not replayed when the control is revealed, so handing the keyboard to
/// something that is not there would swallow it: the terminal would let go and nothing would take it.
/// The grid no longer folds away as the sidebar's list could, but an empty grid is still a
/// <c>ListBox</c> with no item to take focus — and an empty grid is exactly what a filter that matches
/// nothing produces, which is a state somebody typing is very likely to be in. The find box is the
/// answer then, and it is a good one: it is where they were typing.
/// </para>
/// </remarks>
internal IInputElement KeyboardTarget =>
Vault is { HasVisibleHosts: true } ? HostGrid : HostFilter;
/// <remarks>
/// Fire-and-forget, as the transfers screen's is: the command reports its own failures onto the status
/// line — an unknown host key, a refused password — and awaiting it here would mean an event handler
/// returning a task nothing observes.
/// </remarks>
private void OnHostActivated(object? sender, TappedEventArgs e)
{
// Only over a card. A double-tap on a group heading folds it and unfolds it again, and must not also
// connect to whichever host was selected before — which is what an unguarded handler would do, on a
// machine the user is not even pointing at.
if (Vault is { } vault && RowUnder(e.Source) is HostRowViewModel)
{
_ = vault.ConnectCommand.ExecuteAsync(null);
}
}
/// <summary>
/// Points the menu at whatever was right-clicked.
/// </summary>
/// <remarks>
/// <para>
/// The menu's three commands all read the vault's host selection, and a right click does not move it —
/// which would mean a menu that quietly acted on whichever host happened to be selected instead of the
/// one under the pointer. Deleting the wrong machine is the version of that mistake worth designing
/// against.
/// </para>
/// <para>
/// Cancelled outright over a group heading and over the space around the cards. Neither is a host, and a
/// menu offering Connect, Edit and Delete over one would be three buttons that either do nothing or act
/// on something else entirely.
/// </para>
/// </remarks>
private void OnContextRequested(object? sender, ContextRequestedEventArgs e)
{
if (Vault is not { } vault || RowUnder(e.Source) is not HostRowViewModel row)
{
e.Handled = true;
return;
}
vault.SelectedSidebarRow = row;
}
/// <remarks>
/// Remembered rather than acted on. Whether this press is a click or the start of a drag is not known
/// until the pointer moves, so this is the point at which both are still possible.
/// </remarks>
private void OnPointerPressed(object? sender, PointerPressedEventArgs e)
{
press = null;
pickedUp = null;
if (!e.GetCurrentPoint(HostGrid).Properties.IsLeftButtonPressed
|| RowUnder(e.Source) is not HostRowViewModel row)
{
return;
}
press = e;
pickedUp = row;
origin = e.GetPosition(HostGrid);
}
/// <remarks>
/// The drag is started from the remembered press once the pointer has travelled far enough — see
/// <see cref="DragThreshold"/>. Fire-and-forget, because the drag loop runs for as long as the user holds
/// the button and an event handler cannot wait on that; what happens after it is only clearing the mark.
/// </remarks>
private void OnPointerMoved(object? sender, PointerEventArgs e)
{
if (press is not { } pressed || pickedUp is not { } row)
{
return;
}
if (!e.GetCurrentPoint(HostGrid).Properties.IsLeftButtonPressed)
{
Forget();
return;
}
var moved = e.GetPosition(HostGrid) - origin;
if (Math.Abs(moved.X) < DragThreshold && Math.Abs(moved.Y) < DragThreshold)
{
return;
}
Forget();
_ = DragAsync(pressed, row);
}
private void OnPointerReleased(object? sender, PointerReleasedEventArgs e) => Forget();
private void OnPointerCaptureLost(object? sender, PointerCaptureLostEventArgs e) => Forget();
/// <summary>Carries one host for as long as the user holds it.</summary>
private async Task DragAsync(PointerPressedEventArgs pressed, HostRowViewModel row)
{
var carried = new DataTransfer();
carried.Add(DataTransferItem.Create(HostFormat, row));
try
{
// ConfigureAwait(true): what follows touches the grid's own containers, and those are the UI
// thread's.
await DragDrop
.DoDragDropAsync(pressed, carried, DragDropEffects.Move)
.ConfigureAwait(true);
}
finally
{
// Whatever the drop did or did not do. A mark left behind would be a card that looks like a
// target for a drag that ended somewhere else entirely.
Unmark();
}
}
/// <summary>
/// Says whether what is under the pointer would take this host, and marks it if it would.
/// </summary>
/// <remarks>
/// A host over its own group's heading is refused, which is not pedantry: <c>DragDropEffects.None</c> is
/// what turns the cursor into the "no" one, and a drag that looks like it would do something and then
/// does nothing is worse than one that says so while it is still in the air.
/// </remarks>
private void OnDragOver(object? sender, DragEventArgs e)
{
e.Handled = true;
if (Target(e) is not { } target)
{
e.DragEffects = DragDropEffects.None;
Unmark();
return;
}
e.DragEffects = DragDropEffects.Move;
Mark(target.Container);
}
private void OnDragLeave(object? sender, DragEventArgs e) => Unmark();
/// <remarks>
/// Fire-and-forget, like every other command this control runs: the move writes to the vault and reports
/// itself onto the status line, and a drop handler that awaited it would be an event handler returning a
/// task nothing observes.
/// </remarks>
private void OnDrop(object? sender, DragEventArgs e)
{
e.Handled = true;
Unmark();
if (Vault is not { } vault || Target(e) is not { } target)
{
e.DragEffects = DragDropEffects.None;
return;
}
e.DragEffects = DragDropEffects.Move;
vault.MoveHostToGroupCommand.Execute(new HostGroupMove(target.Host, target.GroupId));
}
/// <summary>
/// Where a drag currently is, or null if it is over nothing that would take it.
/// </summary>
/// <remarks>
/// <para>
/// A heading is the obvious target and a card is the useful one: dropping onto a machine files the
/// dragged host beside it, which means the whole band of cards under a heading is a target rather than
/// one line of text. The ungrouped heading is a target like any other, and it is how a host is taken out
/// of a group without opening the editor.
/// </para>
/// <para>
/// A group the vault no longer has is read as no group at all, which is what the grid already does with
/// a dangling reference — see <c>VaultViewModel.RebuildSidebarRows</c>. That is decided in the command
/// rather than here, so the rule has one home.
/// </para>
/// </remarks>
private static DropTarget? Target(DragEventArgs e)
{
if (e.DataTransfer.TryGetValue(HostFormat) is not { } dragged
|| Container(e.Source) is not { } container)
{
return null;
}
Guid? group = container.DataContext switch
{
SidebarGroupHeader header => header.GroupId,
HostRowViewModel row => row.Host.GroupId,
_ => null,
};
if (container.DataContext is not (SidebarGroupHeader or HostRowViewModel)
|| dragged.Host.GroupId == group)
{
return null;
}
return new DropTarget(dragged, group, container);
}
private void Mark(ListBoxItem container)
{
if (ReferenceEquals(marked, container))
{
return;
}
Unmark();
marked = container;
marked.Classes.Add("droptarget");
}
private void Unmark()
{
marked?.Classes.Remove("droptarget");
marked = null;
}
/// <summary>Lets go of a press that turned out not to be a drag, or has become one.</summary>
private void Forget()
{
press = null;
pickedUp = null;
}
/// <summary>The view model of the grid item an event happened on, if it happened on one.</summary>
private static object? RowUnder(object? source) => Container(source)?.DataContext;
/// <remarks>
/// Walks up from whatever was actually hit — a text block, a border, the card's own grid — because that
/// is what an event's source is. Anything not inside an item, which is the space around the cards,
/// yields null.
/// </remarks>
private static ListBoxItem? Container(object? source) => source is Visual visual
? visual.FindAncestorOfType<ListBoxItem>(includeSelf: true)
: null;
/// <summary>A drag in flight, and where it would land.</summary>
private sealed record DropTarget(HostRowViewModel Host, Guid? GroupId, ListBoxItem Container);
}