Wino-Mail/Wino.Mail.WinUI/Controls/AiActionsPanel.xaml

<UserControl
    x:Class="Wino.Mail.WinUI.Controls.AiActionsPanel"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:models="using:Wino.Core.Domain.Models.Ai"
    x:Name="root"
    Loaded="OnLoaded"
    Unloaded="OnUnloaded"
    mc:Ignorable="d">

    <Border
        Padding="14"
        Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
        BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
        BorderThickness="1"
        CornerRadius="10">
        <Grid>
            <StackPanel Spacing="14">
                <ProgressBar
                    x:Name="BusyProgressBar"
                    IsIndeterminate="True"
                    Visibility="Collapsed" />

                <StackPanel x:Name="LoadingPanel" Spacing="12">
                    <StackPanel Orientation="Horizontal" Spacing="10">
                        <ProgressRing
                            Width="20"
                            Height="20"
                            IsActive="True" />
                        <TextBlock
                            VerticalAlignment="Center"
                            Style="{StaticResource BodyStrongTextBlockStyle}"
                            Text="{x:Bind domain:Translator.AiActions_CheckingStatus, Mode=OneWay}" />
                    </StackPanel>
                </StackPanel>

                <StackPanel
                    x:Name="SignedOutPanel"
                    Spacing="14"
                    Visibility="Collapsed">
                    <Border
                        Height="120"
                        Padding="18"
                        CornerRadius="12">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Offset="0" Color="#1A6EE7B7" />
                                <GradientStop Offset="0.55" Color="#2038BDF8" />
                                <GradientStop Offset="1" Color="#1A818CF8" />
                            </LinearGradientBrush>
                        </Border.Background>
                        <Grid ColumnSpacing="14">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Border
                                Width="56"
                                Height="56"
                                VerticalAlignment="Top"
                                Background="#22FFFFFF"
                                CornerRadius="28">
                                <FontIcon
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    FontSize="26"
                                    Foreground="White"
                                    Glyph="&#xE945;" />
                            </Border>

                            <StackPanel Grid.Column="1" Spacing="6">
                                <TextBlock
                                    Style="{StaticResource SubtitleTextBlockStyle}"
                                    Text="{x:Bind domain:Translator.AiActions_SignedOutTitle, Mode=OneWay}"
                                    TextWrapping="WrapWholeWords" />
                                <TextBlock
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Style="{StaticResource CaptionTextBlockStyle}"
                                    Text="{x:Bind domain:Translator.AiActions_SignedOutDescription, Mode=OneWay}"
                                    TextWrapping="WrapWholeWords" />
                            </StackPanel>
                        </Grid>
                    </Border>

                    <Grid ColumnSpacing="8">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Button
                            Click="SignInButton_Click"
                            Content="{x:Bind domain:Translator.Buttons_SignIn, Mode=OneWay}"
                            Style="{StaticResource AccentButtonStyle}" />
                        <Button
                            Grid.Column="1"
                            Click="CreateAccountButton_Click"
                            Content="{x:Bind domain:Translator.Buttons_CreateAccount, Mode=OneWay}" />
                    </Grid>
                </StackPanel>

                <StackPanel
                    x:Name="PurchasePanel"
                    Spacing="14"
                    Visibility="Collapsed">
                    <Border
                        Padding="16"
                        Background="{ThemeResource CardBackgroundFillColorTertiaryBrush}"
                        CornerRadius="12">
                        <StackPanel Spacing="8">
                            <TextBlock Style="{StaticResource BodyStrongTextBlockStyle}" Text="{x:Bind domain:Translator.AiActions_NoPackTitle, Mode=OneWay}" />
                            <TextBlock
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource BodyTextBlockStyle}"
                                Text="{x:Bind domain:Translator.AiActions_NoPackDescription, Mode=OneWay}"
                                TextWrapping="WrapWholeWords" />
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <Border
                                    Padding="8,2"
                                    Background="{ThemeResource AccentFillColorDefaultBrush}"
                                    CornerRadius="8">
                                    <TextBlock Foreground="White" Text="{x:Bind domain:Translator.WinoAccount_Management_AiPackPromoPrice, Mode=OneWay}" />
                                </Border>
                                <Border
                                    Padding="8,2"
                                    Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                                    CornerRadius="8">
                                    <TextBlock Text="{x:Bind domain:Translator.WinoAccount_Management_AiPackPromoRequests, Mode=OneWay}" />
                                </Border>
                            </StackPanel>
                        </StackPanel>
                    </Border>

                    <Button
                        HorizontalAlignment="Left"
                        Click="PurchaseButton_Click"
                        Content="{x:Bind domain:Translator.WinoAccount_Management_AiPackGetButton, Mode=OneWay}"
                        Style="{StaticResource AccentButtonStyle}" />
                </StackPanel>

                <Grid
                    x:Name="ReadyPanel"
                    ColumnSpacing="12"
                    Visibility="Collapsed">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <!--  Column 1: Action tabs  -->
                    <controls:Segmented
                        x:Name="ActionSelector"
                        Height="30"
                        VerticalAlignment="Center"
                        SelectionChanged="ActionSelector_SelectionChanged"
                        Style="{StaticResource ButtonSegmentedStyle}">
                        <controls:SegmentedItem
                            x:Name="TranslateSegment"
                            Padding="12,6"
                            Content="{x:Bind domain:Translator.WinoAccount_Management_AiPackFeatureTranslate, Mode=OneWay}">
                            <controls:SegmentedItem.Icon>
                                <SymbolIcon Symbol="Switch" />
                            </controls:SegmentedItem.Icon>
                        </controls:SegmentedItem>
                        <controls:SegmentedItem
                            x:Name="RewriteSegment"
                            Padding="12,6"
                            Content="{x:Bind domain:Translator.WinoAccount_Management_AiPackFeatureRewrite, Mode=OneWay}">
                            <controls:SegmentedItem.Icon>
                                <SymbolIcon Symbol="Edit" />
                            </controls:SegmentedItem.Icon>
                        </controls:SegmentedItem>
                        <controls:SegmentedItem
                            x:Name="SummarizeSegment"
                            Padding="12,6"
                            Content="{x:Bind domain:Translator.WinoAccount_Management_AiPackFeatureSummarize, Mode=OneWay}">
                            <controls:SegmentedItem.Icon>
                                <SymbolIcon Symbol="Bullets" />
                            </controls:SegmentedItem.Icon>
                        </controls:SegmentedItem>
                    </controls:Segmented>

                    <!--  Column 2: Action-specific options  -->
                    <Grid Grid.Column="1" ColumnSpacing="8">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <!--  Translate options  -->
                        <StackPanel
                            x:Name="TranslateOptionsPanel"
                            Orientation="Horizontal"
                            Spacing="8"
                            Visibility="Collapsed">
                            <TextBlock
                                VerticalAlignment="Center"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                Text="{x:Bind domain:Translator.Composer_AiTranslateLanguage, Mode=OneWay}" />
                            <ComboBox
                                x:Name="TranslateLanguageComboBox"
                                MinWidth="120"
                                SelectionChanged="TranslateLanguageComboBox_SelectionChanged">
                                <ComboBox.ItemTemplate>
                                    <DataTemplate x:DataType="models:AiTranslateLanguageOption">
                                        <TextBlock Text="{x:Bind Label}" />
                                    </DataTemplate>
                                </ComboBox.ItemTemplate>
                            </ComboBox>
                            <Button
                                x:Name="RunTranslateButton"
                                Click="RunTranslateButton_Click"
                                Content="{x:Bind domain:Translator.Composer_AiTranslateApply, Mode=OneWay}"
                                Style="{StaticResource AccentButtonStyle}" />
                        </StackPanel>

                        <!--  Rewrite options  -->
                        <StackPanel
                            x:Name="RewriteOptionsPanel"
                            Spacing="8"
                            Visibility="Collapsed">
                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <TextBlock
                                    VerticalAlignment="Center"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Style="{StaticResource CaptionTextBlockStyle}"
                                    Text="{x:Bind domain:Translator.Composer_AiRewriteMode, Mode=OneWay}" />
                                <ComboBox
                                    x:Name="RewriteModeComboBox"
                                    MinWidth="140"
                                    SelectionChanged="RewriteModeComboBox_SelectionChanged">
                                    <ComboBox.ItemTemplate>
                                        <DataTemplate x:DataType="models:AiRewriteModeOption">
                                            <TextBlock Text="{x:Bind Label}" />
                                        </DataTemplate>
                                    </ComboBox.ItemTemplate>
                                </ComboBox>
                                <Button
                                    x:Name="RunRewriteButton"
                                    Click="RunRewriteButton_Click"
                                    Content="{x:Bind domain:Translator.Composer_AiRewriteApply, Mode=OneWay}"
                                    Style="{StaticResource AccentButtonStyle}" />
                            </StackPanel>
                            <TextBlock
                                x:Name="RewriteDescriptionTextBlock"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Style="{StaticResource CaptionTextBlockStyle}"
                                TextWrapping="WrapWholeWords" />
                            <TextBox
                                x:Name="CustomRewriteTextBox"
                                PlaceholderText="{x:Bind domain:Translator.Composer_AiRewriteCustomPlaceholder, Mode=OneWay}"
                                Visibility="Collapsed" />
                        </StackPanel>

                        <!--  Summarize options  -->
                        <StackPanel
                            x:Name="SummarizeOptionsPanel"
                            Spacing="8"
                            Visibility="Collapsed">

                            <StackPanel Orientation="Horizontal" Spacing="8">
                                <TextBlock
                                    VerticalAlignment="Center"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Style="{StaticResource CaptionTextBlockStyle}"
                                    Text="{x:Bind domain:Translator.Composer_AiTranslateLanguage, Mode=OneWay}" />
                                <ComboBox
                                    x:Name="SummarizeLanguageComboBox"
                                    MinWidth="120"
                                    SelectionChanged="SummarizeLanguageComboBox_SelectionChanged">
                                    <ComboBox.ItemTemplate>
                                        <DataTemplate x:DataType="models:AiTranslateLanguageOption">
                                            <TextBlock Text="{x:Bind Label}" />
                                        </DataTemplate>
                                    </ComboBox.ItemTemplate>
                                </ComboBox>

                                <Button
                                    x:Name="RunSummarizeButton"
                                    HorizontalAlignment="Left"
                                    Click="RunSummarizeButton_Click"
                                    Content="{x:Bind domain:Translator.WinoAccount_Management_AiPackFeatureSummarize, Mode=OneWay}"
                                    Style="{StaticResource AccentButtonStyle}" />
                                <FontIcon
                                    x:Name="SummarizeCachedIndicator"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    FontFamily="{StaticResource SymbolThemeFontFamily}"
                                    FontSize="16"
                                    Foreground="#2AA84A"
                                    Glyph="&#xE73E;"
                                    ToolTipService.ToolTip="{x:Bind domain:Translator.Composer_AiSummarize, Mode=OneWay}"
                                    Visibility="Collapsed" />
                            </StackPanel>

                        </StackPanel>

                    </Grid>

                    <!--  Column 3: Progress  -->
                    <StackPanel
                        Grid.Column="2"
                        VerticalAlignment="Center"
                        Orientation="Horizontal"
                        Spacing="8">
                        <ProgressBar
                            x:Name="UsageProgressBar"
                            Width="100"
                            VerticalAlignment="Center"
                            Maximum="1000"
                            Value="0" />
                        <TextBlock
                            x:Name="UsageSummaryTextBlock"
                            VerticalAlignment="Center"
                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                            Style="{StaticResource CaptionTextBlockStyle}" />
                    </StackPanel>
                </Grid>
            </StackPanel>
        </Grid>
    </Border>
</UserControl>