MainPage.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Page
    x:Class="CodingWithCalvin.VSToolbox.Views.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:CodingWithCalvin.VSToolbox.Core.Models"
    Loaded="OnPageLoaded"
    mc:Ignorable="d">
    <Border BorderBrush="#68217A" BorderThickness="3,0,3,3">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Custom Title Bar -->
            <Grid x:Name="AppTitleBar" Grid.Row="0" Height="48" Background="#68217A">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <!-- App Title (drag region) -->
            <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="12" Margin="16,8,0,0" VerticalAlignment="Top">
                <Image Source="/Assets/vs2026_icon.ico" Width="20" Height="20"/>
                <TextBlock
                    Text="Visual Studio Toolbox"
                    FontSize="14"
                    FontWeight="SemiBold"
                    VerticalAlignment="Center"
                    Foreground="White"/>
            </StackPanel>

            <!-- Window Controls -->
            <StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0,0,0,0" VerticalAlignment="Top">
                <Button
                    x:Name="MinimizeButton"
                    Click="OnMinimizeClick"
                    Width="46" Height="40"
                    Background="Transparent"
                    BorderThickness="0"
                    CornerRadius="0">
                    <FontIcon Glyph="&#xE921;" FontSize="10" Foreground="White"/>
                </Button>
                <Button
                    x:Name="CloseButton"
                    Click="OnCloseClick"
                    Width="46" Height="40"
                    Background="Transparent"
                    BorderThickness="0"
                    CornerRadius="0">
                    <FontIcon Glyph="&#xE8BB;" FontSize="10" Foreground="White"/>
                </Button>
            </StackPanel>
        </Grid>

        <!-- Main Content -->
        <Grid Grid.Row="1" Padding="24,8,24,24">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Tab Header -->
            <Grid Grid.Row="0" Margin="0,0,0,16">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <!-- Tab Selector -->
                <Border
                    Grid.Column="0"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    CornerRadius="8"
                    Padding="4">
                    <StackPanel Orientation="Horizontal" Spacing="4">
                        <RadioButton
                            x:Name="InstalledTab"
                            GroupName="MainTabs"
                            IsChecked="True"
                            Checked="OnTabChanged"
                            Style="{StaticResource PillTabStyle}">
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <FontIcon Glyph="&#xE74C;" FontSize="14"/>
                                <TextBlock Text="Installed"/>
                            </StackPanel>
                        </RadioButton>
                        <RadioButton
                            x:Name="SettingsTab"
                            GroupName="MainTabs"
                            Checked="OnTabChanged"
                            Style="{StaticResource PillTabStyle}">
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <FontIcon Glyph="&#xE713;" FontSize="14"/>
                                <TextBlock Text="Settings"/>
                            </StackPanel>
                        </RadioButton>
                    </StackPanel>
                </Border>

                <!-- Refresh Button (only visible on Installations tab) -->
                <Button
                    x:Name="RefreshButton"
                    Grid.Column="2"
                    Command="{x:Bind ViewModel.RefreshCommand}"
                    ToolTipService.ToolTip="Refresh"
                    VerticalAlignment="Center"
                    Background="Transparent"
                    BorderThickness="0"
                    Padding="10">
                    <FontIcon Glyph="&#xE72C;" FontSize="16"/>
                </Button>
            </Grid>

            <!-- Installed Tab Content -->
            <Grid x:Name="InstalledContent" Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <ListView
                Grid.Row="0"
                ItemsSource="{x:Bind ViewModel.Instances}"
                SelectionMode="None">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Padding" Value="0"/>
                        <Setter Property="Margin" Value="0,2"/>
                        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="models:LaunchableInstance">
                        <Border
                            x:Name="RowBorder"
                            BorderThickness="3,0,0,0"
                            BorderBrush="Transparent"
                            CornerRadius="4"
                            Background="Transparent"
                            PointerEntered="OnRowPointerEntered"
                            PointerExited="OnRowPointerExited">
                            <Grid Padding="12,8" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>

                                <!-- Icon -->
                                <Image
                                    Grid.Column="0"
                                    Width="32" Height="32"
                                    VerticalAlignment="Center"
                                    Source="{x:Bind IconPath, Converter={StaticResource FilePathToImageConverter}}"/>

                                <!-- Info -->
                                <StackPanel Grid.Column="1" VerticalAlignment="Center" Spacing="2">
                                    <TextBlock
                                        Text="{x:Bind DisplayName}"
                                        FontSize="14"
                                        FontWeight="SemiBold"/>
                                    <TextBlock
                                        Text="{x:Bind BuildNumber}"
                                        FontSize="11"
                                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                                    <TextBlock
                                        Text="{x:Bind InstallationPath}"
                                        FontSize="10"
                                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                        TextTrimming="CharacterEllipsis"/>
                                </StackPanel>

                                <!-- Channel Type Badge -->
                                <Border
                                    Grid.Column="2"
                                    CornerRadius="4"
                                    Padding="8,4"
                                    VerticalAlignment="Center"
                                    Background="{x:Bind ChannelType, Converter={StaticResource ChannelTypeToBrushConverter}}">
                                    <TextBlock
                                        Text="{x:Bind ChannelType}"
                                        FontSize="10"
                                        FontWeight="SemiBold"
                                        Foreground="White"/>
                                </Border>

                                <!-- Action Buttons -->
                                <StackPanel Grid.Column="3" Orientation="Horizontal" Spacing="4" VerticalAlignment="Center">
                                    <!-- Fixed-width container to maintain alignment when Play button is hidden -->
                                    <Border Width="40">
                                        <Button
                                            Click="OnLaunchClick"
                                            ToolTipService.ToolTip="Launch"
                                            Visibility="{x:Bind CanLaunch, Converter={StaticResource BoolToVisibilityConverter}}"
                                            Padding="8"
                                            Background="Transparent"
                                            BorderThickness="0"
                                            Opacity="0.6"
                                            PointerEntered="OnButtonPointerEntered"
                                            PointerExited="OnButtonPointerExited">
                                            <SymbolIcon Symbol="Play" Foreground="#22C55E"/>
                                        </Button>
                                    </Border>
                                    <Button
                                        ToolTipService.ToolTip="Options"
                                        Padding="8"
                                        Background="Transparent"
                                        BorderThickness="0"
                                        Opacity="0.6"
                                        PointerEntered="OnButtonPointerEntered"
                                        PointerExited="OnButtonPointerExited">
                                        <Button.Flyout>
                                            <MenuFlyout Placement="Bottom" Opening="OnOptionsFlyoutOpening">
                                            </MenuFlyout>
                                        </Button.Flyout>
                                        <SymbolIcon Symbol="Setting" Foreground="#8A2BE2"/>
                                    </Button>
                                </StackPanel>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

            <!-- Status Bar -->
            <TextBlock
                Grid.Row="1"
                Margin="0,16,0,0"
                Text="{x:Bind ViewModel.StatusText, Mode=OneWay}"
                VerticalAlignment="Center"
                Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
        </Grid>

        <!-- Settings Tab Content -->
        <ScrollViewer x:Name="SettingsContent" Grid.Row="1" Visibility="Collapsed">
            <StackPanel Spacing="8" Padding="0,0,16,0">
                <!-- Startup Section -->
                <TextBlock
                    Text="Startup"
                    FontSize="14"
                    FontWeight="SemiBold"
                    Margin="0,0,0,4"/>

                <!-- Launch on startup -->
                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" CornerRadius="6" Padding="12,8">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" VerticalAlignment="Center">
                            <TextBlock Text="Launch on startup" FontWeight="SemiBold"/>
                            <TextBlock Text="Start Visual Studio Toolbox when Windows starts"
                                       FontSize="12"
                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                        </StackPanel>
                        <ToggleSwitch x:Name="LaunchOnStartupToggle"
                                      Grid.Column="1"
                                      Toggled="OnLaunchOnStartupToggled"
                                      OnContent="" OffContent=""/>
                    </Grid>
                </Border>

                <!-- Start minimized -->
                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" CornerRadius="6" Padding="12,8">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" VerticalAlignment="Center">
                            <TextBlock Text="Start minimized" FontWeight="SemiBold"/>
                            <TextBlock Text="Start the app minimized to the system tray"
                                       FontSize="12"
                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                        </StackPanel>
                        <ToggleSwitch x:Name="StartMinimizedToggle"
                                      Grid.Column="1"
                                      Toggled="OnStartMinimizedToggled"
                                      OnContent="" OffContent=""/>
                    </Grid>
                </Border>

                <!-- Behavior Section -->
                <TextBlock
                    Text="Behavior"
                    FontSize="14"
                    FontWeight="SemiBold"
                    Margin="0,8,0,4"/>

                <!-- Minimize to tray -->
                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" CornerRadius="6" Padding="12,8">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" VerticalAlignment="Center">
                            <TextBlock Text="Minimize to tray" FontWeight="SemiBold"/>
                            <TextBlock Text="Hide to system tray when minimizing"
                                       FontSize="12"
                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                        </StackPanel>
                        <ToggleSwitch x:Name="MinimizeToTrayToggle"
                                      Grid.Column="1"
                                      Toggled="OnMinimizeToTrayToggled"
                                      OnContent="" OffContent=""/>
                    </Grid>
                </Border>

                <!-- Close to tray -->
                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}" CornerRadius="6" Padding="12,8">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel Grid.Column="0" VerticalAlignment="Center">
                            <TextBlock Text="Close to tray" FontWeight="SemiBold"/>
                            <TextBlock Text="Hide to system tray instead of closing the app"
                                       FontSize="12"
                                       Foreground="{ThemeResource TextFillColorSecondaryBrush}"/>
                        </StackPanel>
                        <ToggleSwitch x:Name="CloseToTrayToggle"
                                      Grid.Column="1"
                                      Toggled="OnCloseToTrayToggled"
                                      OnContent="" OffContent=""/>
                    </Grid>
                </Border>
            </StackPanel>
        </ScrollViewer>

            <!-- Loading Overlay -->
            <Grid Grid.RowSpan="3"
                  Visibility="{x:Bind ViewModel.IsLoading, Mode=OneWay}"
                  Background="{ThemeResource LayerOnMicaBaseAltFillColorDefaultBrush}">
                <ProgressRing IsActive="{x:Bind ViewModel.IsLoading, Mode=OneWay}"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"/>
            </Grid>
        </Grid>
    </Grid>
    </Border>
</Page>