Lay the phone out like the desktop when the surface is not a phone
ci / build and test (push) Successful in 2m54s
ci / android head (push) Failing after 3m15s
ci / api image (push) Successful in 46s

Three destinations in a bar and everything else behind SETTINGS is the right
shape at 360dp, where a fourth entry costs the width of the three that are there.
On a tablet, an unfolded foldable or a landscape phone it is the wrong one: there
is room for every destination at once, and the hub becomes an extra tap between
somebody and a screen they can already see space for.

So at 600dp — Android's own boundary between a compact window and a medium one,
in the density-independent units Avalonia lays out in — the bar stands down and
PhoneRail takes the left edge with all nine on it. It is the desktop's NavRail
arrangement rather than its file: the two heads cannot share a view, and this one
draws the phone's destination set with the phone's palette and touch targets.

The flags are computed in code rather than assembled in the markup because none
of them is a single question any more, and Avalonia's bindings have no "and" —
and the header's condition is an "or", which not even a wrapper can express. That
header is the one worth reading twice: narrow it stands down behind SETTINGS, so
the hub's screens can draw their own; wide there is no hub to be behind, so it
stays up everywhere. Losing it on the keychain would be losing the only LOCK
button on the surface.

Removing the hub means removing the routes into it, and there were four kinds.
The rail has no SETTINGS entry, because that screen is a menu of the rail. The
five back arrows in the screens under it are hidden, since an arrow to a screen
the layout removed is the one control on a header that leads nowhere. The system
back gesture goes to Hosts instead. And unfolding while sitting on the hub moves
to Hosts, rather than leaving somebody on a list of things now visible beside it.

One bug fixed on the way: OnBodyResized returned early unless the keyboard was
open, so a foldable would have opened to a phone layout until somebody typed
something. The chrome is refreshed first and unconditionally; the early return
belongs to the older job below it.

What this does not do is use the width *inside* a screen — the host list is one
column at any size. Two columns needs the row model to change, because that list
is headings and hosts in one sequence and a heading has to span, and that model
is shared with the desktop. Check 8.1 walks the rail; nothing here is covered by
a test, for the reason 8.0 exists.
This commit is contained in:
2026-08-05 20:50:18 +02:00
parent 0c61ea3a97
commit 5cb361ea13
11 changed files with 500 additions and 38 deletions
@@ -52,26 +52,52 @@
<views:LockedScreen IsVisible="{Binding IsLocked}" />
<!-- ============ unlocked ============ -->
<Grid IsVisible="{Binding IsUnlocked}" RowDefinitions="Auto,*,Auto,Auto">
<!--
◆ TWO LAYOUTS, AND THE WIDTH DECIDES WHICH.
Below 600dp this is the phone it always was: a header, the screen, the shells strip and a three-entry
bar across the bottom, with everything else one tap deeper behind SETTINGS. That is right at 360dp,
where a fourth bar entry costs the width of the three that are there.
At or above it — a tablet, an unfolded foldable, a landscape phone, a freeform window — the bar stands
down and PhoneRail takes the left edge with every destination on it at once, which is the desktop
head's arrangement. The hub is not one of them: it is a menu of the rail.
The three flags are computed in code rather than assembled here, because none of them is a single
question any more and Avalonia's bindings have no "and" — and the header's is an "or", which not even
a wrapper can express. See PhoneShell.RefreshChrome, which is also where the one behavioural
consequence lives: unfolding while sitting on the hub moves to Hosts, rather than leaving somebody on
a list of things they can now see beside it.
An outer Grid of two columns rather than a DockPanel, so the rail's width is the rail's own business
and the content takes what is left.
-->
<Grid IsVisible="{Binding IsUnlocked}" ColumnDefinitions="Auto,*">
<views:PhoneRail Grid.Column="0"
IsVisible="{Binding $parent[views:PhoneShell].ShowsRail}" />
<Grid Grid.Column="1" RowDefinitions="Auto,*,Auto,Auto">
<!--
The header: which vault, and whether it is synced.
Hidden behind SETTINGS, and that is the design's arrangement rather than a saving. v2 gives every
screen one header carrying that screen's own name and its own actions — a back arrow, an add, a
refresh — so the hub's screens draw their own and this one stands down rather than stacking a second
row of chrome above theirs. What is left is HOSTS, which is the screen the application opens on and
the one where the vault's name and the sync light are the most useful thing a header could say.
Hidden behind SETTINGS on a narrow surface, and that is the design's arrangement rather than a
saving. v2 gives every screen one header carrying that screen's own name and its own actions — a
back arrow, an add, a refresh — so the hub's screens draw their own and this one stands down rather
than stacking a second row of chrome above theirs. What is left is HOSTS, which is the screen the
application opens on and the one where the vault's name and the sync light are the most useful thing
a header could say.
Wrapped rather than given a second condition, because Avalonia's bindings have no "and": the wrapper
collapses it over a terminal, where the surface draws its own bar and the vault's name is not what
the user is looking at. That is one of three rows this Grid stands down while a shell is showing —
see the strip and the bottom bar below.
◆ One flag where there were two nested conditions, and it gained a third meaning with the rail. It
still stands down over a terminal, and still stands down behind SETTINGS on a narrow surface — but
on a wide one it stays up everywhere, because there is no hub to be behind and the screens on the
rail draw no header of their own. Losing it on the keychain would be losing the only LOCK button on
the surface. See PhoneShell.ShowsVaultHeader.
-->
<Panel Grid.Row="0" IsVisible="{Binding IsShowingPages}">
<Panel Grid.Row="0" IsVisible="{Binding $parent[views:PhoneShell].ShowsVaultHeader}">
<Border Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
BorderThickness="0,0,0,1" Padding="14,0" Height="56"
IsVisible="{Binding !IsMoreSurface}">
BorderThickness="0,0,0,1" Padding="14,0" Height="56">
<Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto">
<!--
@@ -211,7 +237,10 @@
-->
<Grid IsVisible="{Binding IsPreferencesShowing}" RowDefinitions="Auto,*">
<Grid Grid.Row="0" ColumnDefinitions="Auto,*" Height="56" Margin="8,0">
<!-- Gone on a wide surface, with the five on the screens under the hub and for the reason
written there. -->
<Button Grid.Column="0" Classes="icon" Content="←" Command="{Binding ShowScreenCommand}"
IsVisible="{Binding !$parent[views:PhoneShell].IsWide}"
CommandParameter="{x:Static vm:ShellScreen.More}" />
<TextBlock Grid.Column="1" Classes="heading" Text="Preferences" Margin="4,0" />
</Grid>
@@ -283,8 +312,8 @@
destinations are replaced by a back arrow and a + that leads to all of them, both in the terminal's
own bar. See TerminalScreen.axaml.
This one is bound directly rather than wrapped — its visibility is a single question and it has no
second condition of its own to keep separate.
◆ It is no longer a single question — a wide surface takes the rail instead — so it reads one flag
the control computes rather than a condition here. See PhoneShell.ShowsBottomBar.
── three rather than four ─────────────────────────────────────────────────────────────────────────
The keychain moved behind SETTINGS. A bottom bar is for the places a session moves between, and keys,
@@ -292,7 +321,7 @@
shape of everything else already behind the hub. What is left is the two halves of using this
application, and the drawer holding the rest.
-->
<Border Grid.Row="3" IsVisible="{Binding IsShowingPages}"
<Border Grid.Row="3" IsVisible="{Binding $parent[views:PhoneShell].ShowsBottomBar}"
Background="{StaticResource Chrome}" BorderBrush="{StaticResource Border}"
BorderThickness="0,1,0,0" Height="64">
<Grid ColumnDefinitions="*,*,*">
@@ -336,6 +365,8 @@
</Grid>
</Border>
</Grid>
</Grid>
</Panel>