DodoSSH/src/DodoSSH.Client.Android/Views/SnippetsScreen.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.SnippetsScreen"
             x:DataType="vm:SnippetsViewModel"
             Background="{StaticResource Canvas}">

  <!--
    Design 05 — SNIPPETS, under MORE.

    Two departures from the mock-up, both because of what a snippet actually is here.

    The design puts a ▶ Run button on every card. There are two operations rather than one — type the
    command at the prompt, and type it *and* press Enter — and which of them a snippet allows is a property
    of the snippet, set by a checkbox in its editor. ◆ That checkbox is the whole safety property: a
    snippet that does not run on insert leaves the command sitting at the prompt for a human to read before
    committing to it. Collapsing the two into one button called Run would throw that away, so the actions
    are a bar over the bottom of the list, they name the terminal they will type into, and RUN only appears
    for a snippet that is marked as running.

    And the design's per-card footer — the hosts it ran on, the time, `exit 0` — is not drawn. Nothing here
    records where a snippet was run, when, or what it returned; a snippet is a saved string, and the shell
    it is typed into never reports back. See docs/design-import-gaps.md.
  -->

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

    <!-- ============ header ============ -->
    <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Height="56" Margin="8,0">
      <Button Grid.Column="0" Classes="icon" Content="←"
              Command="{Binding $parent[views:PhoneShell].((vm:MainWindowViewModel)DataContext).ShowScreenCommand}"
              CommandParameter="{x:Static vm:ShellScreen.More}" />
      <TextBlock Grid.Column="1" Classes="heading" Text="Snippets" Margin="4,0" />
      <Button Grid.Column="2" Classes="icon accent" Content="+" Command="{Binding NewCommand}" />
    </Grid>

    <!-- ============ filter ============ -->
    <!-- Matches the command text as well as the name: the workflow is "the one that vacuums", not its label. -->
    <TextBox Grid.Row="1" Classes="field" Margin="14,2,14,8" Text="{Binding Filter}"
             PlaceholderText="search snippets" IsVisible="{Binding HasSnippets}" />

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

    <!-- ============ the editor ============ -->
    <!--
      In place, above the list, rather than as a screen of its own — the same decision the keychain's
      delete confirmation makes and for the same reason: a form stacked over the list hides what it is
      about.
    -->
    <Border Grid.Row="3" Classes="card" Margin="12,0" IsVisible="{Binding IsEditing}"
            VerticalAlignment="Top">
      <ScrollViewer>
        <StackPanel Spacing="10">
          <TextBlock Classes="label" Text="NEW SNIPPET" IsVisible="{Binding IsCreating}" />
          <TextBlock Classes="label" Text="EDIT SNIPPET" IsVisible="{Binding !IsCreating}" />

          <TextBox Classes="field" Text="{Binding EditorLabel}" PlaceholderText="name" />

          <TextBox Classes="field" Text="{Binding EditorCommand}" PlaceholderText="command"
                   Height="120" AcceptsReturn="True" TextWrapping="Wrap"
                   VerticalContentAlignment="Top" Padding="14,10" />

          <TextBox Classes="field" Text="{Binding EditorNotes}" PlaceholderText="notes" />

          <!--
            ◆ The checkbox the whole screen is arranged around, with the paragraph that says why leaving it
            off is the safe default. It is not a preference — it is the difference between a command a human
            reads before committing to it and one that has already run.
          -->
          <CheckBox IsChecked="{Binding EditorRunsOnInsert}" MinHeight="44">
            <TextBlock Classes="mono" FontSize="11.5" Text="Press Enter after inserting this"
                       TextWrapping="Wrap" />
          </CheckBox>
          <TextBlock Classes="body"
                     Text="Left off, inserting types the command at the prompt and stops, so it can be read and edited before it runs. Nothing here can tell whether the terminal is even at a prompt, which is why that is the default." />

          <Grid ColumnDefinitions="*,8,*">
            <Button Grid.Column="0" Classes="primary" Height="44" Content="SAVE"
                    Command="{Binding SaveCommand}" />
            <Button Grid.Column="2" Classes="secondary" Height="44" Content="CANCEL"
                    Command="{Binding CancelCommand}" />
          </Grid>
        </StackPanel>
      </ScrollViewer>
    </Border>

    <!-- ============ the list ============ -->
    <Panel Grid.Row="3" IsVisible="{Binding !IsEditing}">

      <!-- Written by the view model, and it says what a snippet is for rather than that there are none. -->
      <TextBlock Classes="body" IsVisible="{Binding !HasVisible}" Margin="24,20" VerticalAlignment="Top"
                 Text="{Binding EmptyMessage}" />

      <ListBox ItemsSource="{Binding Visible}" SelectedItem="{Binding Selected}"
               Background="Transparent" BorderThickness="0" IsVisible="{Binding HasVisible}">
        <ListBox.Styles>
          <Style Selector="ListBoxItem">
            <Setter Property="Padding" Value="0" />
            <Setter Property="MinHeight" Value="0" />
          </Style>
        </ListBox.Styles>
        <ListBox.ItemTemplate>
          <DataTemplate x:DataType="vm:SnippetRowViewModel">
            <Border Classes="card" Margin="12,5">
              <StackPanel Spacing="9">
                <StackPanel Orientation="Horizontal" Spacing="7">
                  <TextBlock Classes="mono" FontSize="13.5" FontWeight="SemiBold" Text="{Binding Label}"
                             TextTrimming="CharacterEllipsis" VerticalAlignment="Center" />

                  <!-- ◆ The chip that says this one does not wait to be read. -->
                  <Border Classes="tag" IsVisible="{Binding RunsOnInsert}"
                          Background="{StaticResource WarnWash}">
                    <TextBlock Text="RUNS" Foreground="{StaticResource Warn}" />
                  </Border>

                  <Border Classes="tag outline"
                          IsVisible="{Binding Badge, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
                    <TextBlock Text="{Binding Badge}" />
                  </Border>
                </StackPanel>

                <!-- The command, on the surface every block of monospace in this design is drawn on. -->
                <Border Classes="output" CornerRadius="9" Padding="11,9">
                  <TextBlock Classes="mono" FontSize="11" Text="{Binding Preview}"
                             Foreground="{StaticResource Text}" TextTrimming="CharacterEllipsis" />
                </Border>
              </StackPanel>
            </Border>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
    </Panel>

    <!-- ============ what to do with the chosen one ============ -->
    <!--
      Raised over the list, as the hosts screen raises its connect bar, and for the same reason: there is no
      second column to put it in. Both buttons name the terminal — "TYPE INTO pg-primary" — because on a
      phone the tab strip may be scrolled away and "whatever is in the terminal receives this" is not a
      sentence anybody should have to guess the subject of.
    -->
    <Border Grid.Row="4" IsVisible="{Binding HasSelection}" Background="{StaticResource Chrome}"
            BorderBrush="{StaticResource Border}" BorderThickness="0,1,0,0" Padding="14,12"
            IsEnabled="{Binding !IsEditing}">
      <StackPanel Spacing="9">

        <Button Classes="primary" Content="{Binding InsertLabel}" Command="{Binding InsertCommand}"
                IsEnabled="{Binding CanInsert}" />

        <!-- Only for a snippet marked as running. For every other one there is nothing this could mean. -->
        <Button Classes="secondary" Height="44" Content="{Binding RunLabel}"
                Command="{Binding RunCommand}" IsVisible="{Binding SelectionRuns}"
                IsEnabled="{Binding CanInsert}" />

        <Grid ColumnDefinitions="*,8,*">
          <Button Grid.Column="0" Classes="secondary" Height="44" Content="EDIT"
                  Command="{Binding EditCommand}" />
          <Button Grid.Column="2" Classes="danger" Height="44" Content="DELETE"
                  Command="{Binding DeleteCommand}" />
        </Grid>
      </StackPanel>
    </Border>

  </Grid>

</UserControl>