DodoSSH/src/DodoSSH.Client.App/Views/TitleBar.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DodoSSH.Client.Shell.ViewModels"
             x:Class="DodoSSH.Client.App.Views.TitleBar"
             x:DataType="vm:MainWindowViewModel">

  <!--
    The window's own titlebar, because the design draws one.

    The window asks Windows for no chrome at all, so everything a titlebar does has to be here: dragging,
    the double-click to maximise, and three buttons. That is a real cost, and the reason it is worth paying
    is that a 53-pixel grey system bar above a near-black application is the one part of the window that
    would look borrowed.

    It sits above the terminal rather than over it, which matters more than it looks: the terminal is a
    native child window that composites above anything Avalonia draws in the same rectangle, so a titlebar
    overlapping it would be painted underneath and its close button would not be clickable.

    ── v5b ──────────────────────────────────────────────────────────────────────────────────────────────
    Redrawn against TitleBar.dc.html rather than the v3 mock this replaced, and three things left with the
    redraw. The vault chip and the account name are gone from here — both now live on the rail's user chip,
    which is where the design's own "who is signed in" lives too, one destination lower than the window's
    own name. 44 pixels became 53, which is the design's own height and not a number this file chose; see
    <c>LayoutHarness.TitleBarHeight</c> and the matching 9-pixel rise in <c>MainWindow.axaml</c>'s own
    <c>MinHeight</c>, which is what keeps every screen the exact height it was designed against despite the
    bar above it growing.

    The design's kbd chip reads ⌘K; this one reads CTRL K, because a Windows build is not where the ⌘ key
    lives — the same substitution the search box's own tooltip already made before this pass touched it.
    SYNCED stays, on the right, past the window buttons' own left edge: a documented deviation from a design
    whose titlebar has no home for it at all — see design-notes/v5b-fidelity-notes.md.
  -->

  <Border Height="53" Background="{StaticResource DeepChrome}"
          PointerPressed="OnDrag" DoubleTapped="OnToggleMaximised">

    <Grid ColumnDefinitions="Auto,*,Auto" Margin="24,0,20,0">

      <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
        <!--
          24 pixels and radius 7, the design's own tile — up from v3's 20/6, which was this bar's own
          approximation before there was a mock to measure against. Filled rather than outlined, and the
          same mark the phone's header draws and the launcher icon carries, so the three cannot drift.
        -->
        <Border Width="24" Height="24" CornerRadius="7" Background="{StaticResource Accent}">
          <TextBlock Classes="mono" Text="&gt;_" FontSize="10" FontWeight="Bold"
                     Foreground="{StaticResource AccentInk}"
                     HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <!--
          19 bold at -0.2 tracking, the design's own numbers. Named, because a nightly says so here — see
          the code-behind, where the release build is exactly what this markup says and nothing changes
          for it.
        -->
        <TextBlock x:Name="ProductName" Text="DodoSSH" FontSize="19" FontWeight="Bold"
                   LetterSpacing="-0.2" Foreground="{StaticResource Text}" VerticalAlignment="Center" />
      </StackPanel>

      <!--
        The quick-connect box. It searches hosts and nothing else — the design's box also promises "run
        command", and there is no snippet or saved-command item type for it to run. Clicking it is the same
        as Ctrl+K, which is what the window binds; the design says ⌘K, and this is a Windows build.

        514 wide and centred, which is what the design states for this box specifically — MaxWidth rather
        than Width, so the button is free to shrink at the window's minimum instead of arranging outside its
        own parent when there is no room for all 514 of it.
      -->
      <Button Grid.Column="1" Classes="flat search" MaxWidth="514" Height="35"
              HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
              Command="{Binding ToggleSearchCommand}" IsEnabled="{Binding IsUnlocked}">
        <Border Classes="searchpill" CornerRadius="10" Padding="16,0,8,0">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <TextBlock Grid.Column="0" FontFamily="{StaticResource IconFont}" Text="&#xE8B6;"
                       FontSize="15" Foreground="{StaticResource TextGhost}" VerticalAlignment="Center" />
            <!--
              "Search or connect…", which is what it does: the palette connects on Enter. Not the design's
              wider promise of running a command — a snippet is inserted from its own screen, and a box that
              offered to run one would be offering something this palette does not do.
            -->
            <TextBlock Grid.Column="1" Text="Search or connect…" FontSize="13.5" Margin="10,0"
                       Foreground="{StaticResource TextGhost}" VerticalAlignment="Center" />
            <!-- CTRL K, not the design's ⌘K — see the remark at the top of this file. -->
            <Border Grid.Column="2" Width="34" Height="18" CornerRadius="5"
                    Background="{StaticResource KbdChip}"
                    HorizontalAlignment="Center" VerticalAlignment="Center">
              <TextBlock Classes="mono" Text="CTRL K" FontSize="10.5" FontWeight="Medium"
                         Foreground="{StaticResource TextFaint}"
                         HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Border>
          </Grid>
        </Border>
      </Button>

      <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">

        <!--
          The design's dot is always green and always says SYNCED. This one says what is true: green only
          while a connection is held and this machine's outbox is empty, and the word changes to the number
          of changes still waiting, or to OFFLINE. A permanently green light is the same thing as no light.
        -->
        <StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center"
                    IsVisible="{Binding IsUnlocked}"
                    ToolTip.Tip="Green means a connection is held and nothing this machine changed is still waiting to be sent. It does not mean a colleague's change has arrived — that is pulled on a timer.">
          <Ellipse Classes="dot" Classes.live="{Binding IsFullySynced}" VerticalAlignment="Center" />
          <TextBlock Classes="mono" Text="{Binding SyncLabel}" FontSize="9.5" FontWeight="SemiBold"
                     LetterSpacing="1" Foreground="{StaticResource TextDim}" VerticalAlignment="Center" />
        </StackPanel>

        <Border Width="1" Height="16" Background="{StaticResource Border}"
                IsVisible="{Binding IsUnlocked}" />

        <!--
          The window controls, restyled to the design's own quiet Material glyphs: remove, crop_square,
          close, rather than the dashes and box this bar drew before there was a mock to measure them
          against. What each does is unchanged — see the code-behind.
        -->
        <StackPanel Orientation="Horizontal" Spacing="2">
          <Button Classes="flat" Width="26" Height="24" Click="OnMinimise"
                  ToolTip.Tip="Minimise">
            <TextBlock FontFamily="{StaticResource IconFont}" Text="&#xE15B;" FontSize="14"
                       Foreground="{StaticResource TextFaint}"
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
          </Button>
          <Button Classes="flat" Width="26" Height="24" Click="OnToggleMaximised"
                  ToolTip.Tip="Maximise">
            <TextBlock FontFamily="{StaticResource IconFont}" Text="&#xE3C6;" FontSize="13"
                       Foreground="{StaticResource TextFaint}"
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
          </Button>
          <Button Classes="flat close" Width="26" Height="24" Click="OnClose"
                  ToolTip.Tip="Close DodoSSH. This ends every shell it has open.">
            <TextBlock FontFamily="{StaticResource IconFont}" Text="&#xE5CD;" FontSize="14"
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
          </Button>
        </StackPanel>

      </StackPanel>

    </Grid>

  </Border>

</UserControl>