DodoSSH/src/DodoSSH.Client.Android/Views/LogsScreen.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DodoSSH.Client.Shell.ViewModels"
             xmlns:views="using:DodoSSH.Client.Android.Views"
             x:Class="DodoSSH.Client.Android.Views.LogsScreen"
             x:DataType="vm:LogsViewModel"
             Background="{StaticResource Canvas}">

  <!--
    Design 07 — LOGS, under MORE.

    Three things on the mock-up are not drawn, and each is the same kind of omission.

    ◆ **FOLLOW.** The design's header carries a blinking green "FOLLOW" pill and the screen is described as
    a live tail over ssh. Nothing here tails anything: these are the keychain's own synced audit records,
    written once at close, and they are read when the screen is opened. A pill that blinked would be
    animation standing in for a feature. It is a REFRESH button, which is what actually happens.

    **The severity filter** — ALL / INFO / WARN / ERROR with counts — has nothing to count. A connection
    record is not a syslog line and carries no level. What this screen genuinely has two of is *logs*, so
    the design's chip row is spent on the real choice: what was connected to, and what was changed.

    **The host chips** are gone for the same reason: nothing filters either log by host.

    What is kept is the design's row shape — a quiet timestamp, a coloured word, a source, and the fact
    underneath — because that shape is why a log is readable at 10pt on a phone.
  -->

  <Grid RowDefinitions="Auto,Auto,Auto,*">

    <!-- ============ header ============ -->
    <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Height="56" Margin="8,0">
      <!--
        ◆ Gone on a wide surface, where the rail is how you leave and the hub it points at is not drawn at
        all. An arrow to a screen nothing else can reach would be the one control on this header that leads
        somewhere the layout has removed. See PhoneShell.IsWide.
      -->
      <Button Grid.Column="0" Classes="icon" Content="←"
              IsVisible="{Binding !$parent[views:PhoneShell].IsWide}"
              Command="{Binding $parent[views:PhoneShell].((vm:MainWindowViewModel)DataContext).ShowScreenCommand}"
              CommandParameter="{x:Static vm:ShellScreen.More}" />
      <TextBlock Grid.Column="1" Classes="heading" Text="Logs" Margin="4,0" />
      <Button Grid.Column="2" Classes="icon" Content="↻" Command="{Binding RefreshCommand}"
              IsEnabled="{Binding !IsBusy}" />
    </Grid>

    <!-- ============ which log ============ -->
    <!--
      Mode=OneWay is load-bearing on both of these, not a tidiness: a two-way selection binding moves the
      chip before the command it is paired with has had a chance to refuse, so the screen would show a
      section it is not on. The keychain's categories carry the same note.
    -->
    <StackPanel Grid.Row="1" Orientation="Horizontal" Spacing="6" Margin="14,0,14,4">
      <RadioButton GroupName="log" Classes="chip" IsChecked="{Binding ShowsConnections, Mode=OneWay}"
                   Command="{Binding ShowSectionCommand}"
                   CommandParameter="{x:Static vm:LogSection.Connections}"
                   Content="CONNECTIONS" />
      <RadioButton GroupName="log" Classes="chip" IsChecked="{Binding ShowsActivity, Mode=OneWay}"
                   Command="{Binding ShowSectionCommand}"
                   CommandParameter="{x:Static vm:LogSection.Activity}"
                   Content="KEYCHAIN" />
    </StackPanel>

    <TextBlock Grid.Row="2" Classes="detail" Margin="18,4,18,6" TextWrapping="Wrap"
               Text="{Binding Status}" />

    <!-- ============ the log ============ -->
    <Border Grid.Row="3" Classes="output" Margin="12,0,12,12">
      <Panel>

        <!-- ============ what was connected to ============ -->
        <!--
          One wrapper per section, each holding its own empty state, because "this section is empty" is a
          pair of facts — which section, and whether it has rows — and a binding cannot say `ShowsConnections
          && !HasConnections` without a converter. Two Panels are cheaper than a converter and they keep
          EmptyMessage, which is already written per section, pointing at the section it describes.
        -->
        <Panel IsVisible="{Binding ShowsConnections}">
          <TextBlock Classes="body" VerticalAlignment="Top" Text="{Binding EmptyMessage}"
                     IsVisible="{Binding !HasConnections}" />

          <ScrollViewer IsVisible="{Binding HasConnections}">
          <ItemsControl ItemsSource="{Binding Connections}">
            <ItemsControl.ItemTemplate>
              <DataTemplate x:DataType="vm:ConnectionLogRowViewModel">
                <StackPanel Spacing="1" Margin="0,5">
                  <StackPanel Orientation="Horizontal" Spacing="8">
                    <TextBlock Classes="detail code" FontSize="10" Text="{Binding Started}"
                               Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />

                    <!--
                      The kind sits where the design puts a severity, because it is the word that tells you
                      what the row is: a shell or a file transfer. Green while the session is still open —
                      the same green the host list uses, and the one thing on this screen that is about now
                      rather than about the past.
                    -->
                    <TextBlock Classes="detail" FontSize="10" FontWeight="SemiBold" Text="{Binding Kind}"
                               Foreground="{StaticResource Info}" VerticalAlignment="Center"
                               IsVisible="{Binding !IsLive}" />
                    <StackPanel Orientation="Horizontal" Spacing="5" IsVisible="{Binding IsLive}"
                                VerticalAlignment="Center">
                      <Ellipse Classes="dot live" Width="6" Height="6" VerticalAlignment="Center" />
                      <TextBlock Classes="detail" FontSize="10" FontWeight="SemiBold"
                                 Text="{Binding Kind}" Foreground="{StaticResource Live}" />
                    </StackPanel>

                    <TextBlock Classes="detail code" FontSize="10" Text="{Binding HostLabel}"
                               Foreground="{StaticResource TextDim}" VerticalAlignment="Center"
                               TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
                  </StackPanel>

                  <TextBlock Classes="detail" FontSize="10.5" Foreground="{StaticResource Text}"
                             Text="{Binding Address}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />

                  <!--
                    TextDim rather than the `detail` class's own faint step. This block is drawn on
                    TerminalSurface, which is lighter than the Canvas that step was chosen against, so the
                    same colour that reads as quiet on a screen background reads as barely there here.
                  -->
                  <StackPanel Orientation="Horizontal" Spacing="7">
                    <!-- "still open" rather than a dash, which the plan calls out by name. -->
                    <TextBlock Classes="detail" FontSize="9.5" Foreground="{StaticResource TextDim}"
                               Text="{Binding Duration}" />
                    <TextBlock Classes="detail" FontSize="9.5" Foreground="{StaticResource TextDim}"
                               Text="·" />
                    <TextBlock Classes="detail" FontSize="9.5" Foreground="{StaticResource TextDim}"
                               Text="{Binding DeviceName}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />
                  </StackPanel>

                  <!-- A refused host key is the one outcome worth a colour of its own. -->
                  <TextBlock Classes="detail" FontSize="9.5" IsVisible="{Binding HasOutcome}"
                             Foreground="{StaticResource DangerText}" Text="{Binding Outcome}" />
                </StackPanel>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
          </ScrollViewer>
        </Panel>

        <!-- ============ what was changed ============ -->
        <Panel IsVisible="{Binding ShowsActivity}">
          <TextBlock Classes="body" VerticalAlignment="Top" Text="{Binding EmptyMessage}"
                     IsVisible="{Binding !HasActivity}" />

          <ScrollViewer IsVisible="{Binding HasActivity}">
          <ItemsControl ItemsSource="{Binding Activity}">
            <ItemsControl.ItemTemplate>
              <DataTemplate x:DataType="vm:ActivityLogRowViewModel">
                <StackPanel Spacing="1" Margin="0,5">
                  <StackPanel Orientation="Horizontal" Spacing="8">
                    <TextBlock Classes="detail code" FontSize="10" Text="{Binding At}"
                               Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
                    <TextBlock Classes="detail" FontSize="10" FontWeight="SemiBold"
                               Text="{Binding Operation}" Foreground="{StaticResource Info}"
                               VerticalAlignment="Center" />
                    <TextBlock Classes="detail" FontSize="10" Text="{Binding ItemKind}"
                               Foreground="{StaticResource TextDim}" VerticalAlignment="Center" />
                  </StackPanel>

                  <TextBlock Classes="detail" FontSize="10.5" Foreground="{StaticResource Text}"
                             Text="{Binding ItemLabel}" TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" />

                  <!-- The names of the fields that changed, never their values. -->
                  <TextBlock Classes="detail" FontSize="9.5" IsVisible="{Binding HasChangedFields}"
                             Foreground="{StaticResource TextDim}"
                             Text="{Binding ChangedFields}" TextWrapping="Wrap" />
                </StackPanel>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
          </ItemsControl>
          </ScrollViewer>
        </Panel>

      </Panel>
    </Border>

  </Grid>

</UserControl>