TrayWindowMainPage.xaml

<?xml version="1.0" encoding="utf-8"?>

<Page
    x:Class="Coder.Desktop.App.Views.Pages.TrayWindowMainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Coder.Desktop.App.Controls"
    xmlns:converters="using:Coder.Desktop.App.Converters"
    xmlns:viewModels="using:Coder.Desktop.App.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <converters:VpnLifecycleToBoolConverter x:Key="ConnectingBoolConverter" Unknown="true" Starting="true"
                                                Stopping="true" />
        <converters:VpnLifecycleToBoolConverter x:Key="NotConnectingBoolConverter" Started="true" Stopped="true" />
        <converters:VpnLifecycleToBoolConverter x:Key="StoppedBoolConverter" Stopped="true" />

        <converters:BoolToObjectConverter x:Key="ShowMoreLessTextConverter" TrueValue="Show less"
                                          FalseValue="Show more" />
    </Page.Resources>

    <StackPanel
        Orientation="Vertical"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Top"
        Padding="20,20,20,30"
        Spacing="10">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <TextBlock
                Grid.Column="0"
                Text="Coder Connect"
                FontSize="18"
                VerticalAlignment="Center" />
            <ProgressRing
                Grid.Column="1"
                IsActive="{x:Bind ViewModel.VpnLifecycle, Converter={StaticResource ConnectingBoolConverter}, Mode=OneWay}"
                Width="24"
                Height="24"
                Margin="10,0"
                HorizontalAlignment="Right" />
            <ToggleSwitch
                Grid.Column="2"
                OnContent=""
                OffContent=""
                IsOn="{x:Bind ViewModel.VpnSwitchActive, Mode=TwoWay}"
                IsEnabled="{x:Bind ViewModel.VpnLifecycle, Converter={StaticResource NotConnectingBoolConverter}, Mode=OneWay}"
                Toggled="{x:Bind ViewModel.VpnSwitch_Toggled}"
                Margin="0,0,-110,0"
                HorizontalAlignment="Right" />
        </Grid>

        <controls:HorizontalRule />

        <TextBlock
            Text="{x:Bind ViewModel.VpnFailedMessage, Mode=OneWay}"
            Foreground="Red"
            Margin="0,6,0,6"
            TextWrapping="Wrap"
            Visibility="{x:Bind ViewModel.ShowFailedSection, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />

        <TextBlock
            Text="Enable Coder Connect to view your workspaces."
            TextWrapping="Wrap"
            Margin="0,6,0,6"
            Visibility="{x:Bind ViewModel.ShowEnableSection, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"
            Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />

        <TextBlock
            Text="Workspaces"
            FontWeight="semibold"
            Visibility="{x:Bind ViewModel.ShowWorkspacesHeader, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"
            Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />

        <TextBlock
            Text="There are no workspace agents to display."
            TextWrapping="Wrap"
            Margin="0,0,0,6"
            Visibility="{x:Bind ViewModel.ShowNoAgentsSection, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"
            Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />

        <ItemsRepeater
            ItemsSource="{x:Bind ViewModel.VisibleAgents, Mode=OneWay}"
            Visibility="{x:Bind ViewModel.ShowAgentsSection, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">

            <ItemsRepeater.Layout>
                <StackLayout Orientation="Vertical" />
            </ItemsRepeater.Layout>

            <ItemsRepeater.ItemTemplate>
                <DataTemplate x:DataType="viewModels:AgentViewModel">
                    <StackPanel
                        Orientation="Vertical"
                        HorizontalAlignment="Stretch">

                        <Grid HorizontalAlignment="Stretch">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <HyperlinkButton
                                Grid.Column="0"
                                Command="{x:Bind ToggleExpandedCommand, Mode=OneWay}"
                                Margin="-12,0,0,0"
                                Padding="8,5,8,6"
                                HorizontalAlignment="Stretch"
                                HorizontalContentAlignment="Stretch">

                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="Auto" />
                                    </Grid.ColumnDefinitions>

                                    <Grid.Resources>
                                        <converters:StringToBrushSelector
                                            x:Key="StatusColor"
                                            SelectedKey="{x:Bind Path=ConnectionStatus, Mode=OneWay}">

                                            <converters:StringToBrushSelectorItem>
                                                <converters:StringToBrushSelectorItem.Value>
                                                    <SolidColorBrush Color="#8e8e93" />
                                                </converters:StringToBrushSelectorItem.Value>
                                            </converters:StringToBrushSelectorItem>
                                            <converters:StringToBrushSelectorItem Key="Red">
                                                <converters:StringToBrushSelectorItem.Value>
                                                    <SolidColorBrush Color="#ff3b30" />
                                                </converters:StringToBrushSelectorItem.Value>
                                            </converters:StringToBrushSelectorItem>
                                            <converters:StringToBrushSelectorItem Key="Yellow">
                                                <converters:StringToBrushSelectorItem.Value>
                                                    <SolidColorBrush Color="#ffcc01" />
                                                </converters:StringToBrushSelectorItem.Value>
                                            </converters:StringToBrushSelectorItem>
                                            <converters:StringToBrushSelectorItem Key="Green">
                                                <converters:StringToBrushSelectorItem.Value>
                                                    <SolidColorBrush Color="#34c759" />
                                                </converters:StringToBrushSelectorItem.Value>
                                            </converters:StringToBrushSelectorItem>
                                        </converters:StringToBrushSelector>
                                    </Grid.Resources>

                                    <controls:ExpandChevron
                                        Grid.Column="0"
                                        Width="24"
                                        Height="16"
                                        Margin="0,0,0,0"
                                        IsOpen="{x:Bind IsExpanded, Mode=OneWay}"
                                        Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />

                                    <!-- See .cs for why the Loaded event handler is needed -->
                                    <TextBlock
                                        Grid.Column="1"
                                        Loaded="AgentHostnameText_OnLoaded"
                                        VerticalAlignment="Center"
                                        HorizontalTextAlignment="Left"
                                        HorizontalAlignment="Stretch"
                                        TextTrimming="CharacterEllipsis"
                                        TextWrapping="NoWrap">

                                        <Run Text="{x:Bind ViewableHostname, Mode=OneWay}"
                                             Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
                                        <Run Text="{x:Bind ViewableHostnameSuffix, Mode=OneWay}"
                                             Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                                    </TextBlock>

                                    <Canvas
                                        Grid.Column="2"
                                        HorizontalAlignment="Right"
                                        VerticalAlignment="Center"
                                        Height="14" Width="14"
                                        Margin="0,1,0,0">

                                        <Ellipse
                                            Fill="{Binding Source={StaticResource StatusColor}, Path=SelectedObject}"
                                            Opacity="0.2"
                                            Width="14"
                                            Height="14"
                                            Canvas.Left="0"
                                            Canvas.Top="0" />

                                        <Ellipse
                                            Fill="{Binding Source={StaticResource StatusColor}, Path=SelectedObject}"
                                            Width="8"
                                            Height="8"
                                            VerticalAlignment="Center"
                                            Canvas.Left="3"
                                            Canvas.Top="3" />
                                    </Canvas>
                                </Grid>
                            </HyperlinkButton>

                            <HyperlinkButton
                                Grid.Column="1"
                                x:Name="AgentHostnameCopyButton"
                                Command="{x:Bind CopyHostnameCommand}"
                                CommandParameter="{Binding ElementName=AgentHostnameCopyButton}"
                                ToolTipService.ToolTip="Copy hostname to clipboard"
                                Padding="8,0"
                                VerticalAlignment="Stretch">

                                <FontIcon
                                    Glyph="&#xE8C8;"
                                    FontSize="16"
                                    Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                            </HyperlinkButton>

                            <HyperlinkButton
                                Grid.Column="2"
                                NavigateUri="{x:Bind DashboardUrl, Mode=OneWay}"
                                ToolTipService.ToolTip="Open in dashboard"
                                Margin="0,0,-12,0"
                                Padding="8,0"
                                VerticalAlignment="Stretch">

                                <FontIcon
                                    Glyph="&#xE774;"
                                    FontSize="16"
                                    Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
                            </HyperlinkButton>
                        </Grid>

                        <controls:ExpandContent IsOpen="{x:Bind IsExpanded, Mode=OneWay}">
                            <Grid
                                Height="34"
                                Visibility="{x:Bind ShowExpandAppsMessage, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">

                                <TextBlock
                                    Text="{x:Bind ExpandAppsMessage, Mode=OneWay}"
                                    Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}"
                                    TextAlignment="Center"
                                    VerticalAlignment="Center"
                                    Margin="0,-3,0,0" />
                            </Grid>

                            <ItemsRepeater
                                ItemsSource="{x:Bind VisibleApps, Mode=OneWay}"
                                Visibility="{x:Bind ShowExpandAppsMessage, Converter={StaticResource InverseBoolToVisibilityConverter}, Mode=OneWay}"
                                Height="34"
                                Margin="17,0">

                                <ItemsRepeater.Layout>
                                    <StackLayout Orientation="Horizontal" />
                                </ItemsRepeater.Layout>

                                <ItemsRepeater.ItemTemplate>
                                    <DataTemplate x:DataType="viewModels:AgentAppViewModel">
                                        <HyperlinkButton
                                            x:Name="AppButton"
                                            Padding="6"
                                            Margin="0"
                                            Command="{x:Bind OpenAppCommand}"
                                            CommandParameter="{Binding ElementName=AppButton}"
                                            Width="34"
                                            Height="34"
                                            ToolTipService.ToolTip="{x:Bind Details}">

                                            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                                                <Image
                                                    Source="{x:Bind IconImageSource, Mode=OneWay}"
                                                    ImageOpened="{x:Bind OnImageOpened}"
                                                    ImageFailed="{x:Bind OnImageFailed}"
                                                    Visibility="{x:Bind UseFallbackIcon, Converter={StaticResource InverseBoolToVisibilityConverter}, Mode=OneWay}"
                                                    Width="20"
                                                    Height="20"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center" />

                                                <FontIcon
                                                    Glyph="&#xECAA;"
                                                    FontSize="20"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    Visibility="{x:Bind UseFallbackIcon, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}" />
                                            </Grid>
                                        </HyperlinkButton>
                                    </DataTemplate>
                                </ItemsRepeater.ItemTemplate>
                            </ItemsRepeater>
                        </controls:ExpandContent>
                    </StackPanel>
                </DataTemplate>
            </ItemsRepeater.ItemTemplate>
        </ItemsRepeater>

        <HyperlinkButton
            Margin="-12,0,-12,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left"
            Visibility="{x:Bind ViewModel.ShowAgentOverflowButton, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"
            Command="{x:Bind ViewModel.ToggleShowAllAgentsCommand}">

            <TextBlock
                Text="{x:Bind ViewModel.ShowAllAgents, Converter={StaticResource ShowMoreLessTextConverter}, Mode=OneWay}"
                Foreground="{ThemeResource SystemControlForegroundBaseMediumBrush}" />
        </HyperlinkButton>

        <controls:HorizontalRule />

        <HyperlinkButton
            Command="{x:Bind ViewModel.ShowFileSyncListWindowCommand, Mode=OneWay}"
            Margin="-12,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left">

            <!-- TODO: status icon if there is a problem -->
            <TextBlock Text="File sync" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
        </HyperlinkButton>

        <controls:HorizontalRule />

        <HyperlinkButton
            NavigateUri="{x:Bind ViewModel.DashboardUrl, Mode=OneWay}"
            Margin="-12,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left">

            <TextBlock Text="Create workspace" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
        </HyperlinkButton>

        <controls:HorizontalRule />

        <HyperlinkButton
            Command="{x:Bind ViewModel.SignOutCommand, Mode=OneWay}"
            IsEnabled="{x:Bind ViewModel.VpnLifecycle, Converter={StaticResource StoppedBoolConverter}, Mode=OneWay}"
            Margin="-12,0"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left">

            <TextBlock Text="Sign out" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
        </HyperlinkButton>

        <HyperlinkButton
            Command="{x:Bind ViewModel.ExitCommand, Mode=OneWay}"
            Margin="-12,-8,-12,-5"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="Left">          

            <TextBlock Text="Exit" Foreground="{ThemeResource DefaultTextForegroundThemeBrush}" />
        </HyperlinkButton>
    </StackPanel>
</Page>