Wino-Mail/Wino.Mail.WinUI/Views/SettingOptionsPage.xaml

<abstract:SettingOptionsPageAbstract
    x:Class="Wino.Views.Settings.SettingOptionsPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:abstract="using:Wino.Views.Abstract"
    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:domain="using:Wino.Core.Domain"
    xmlns:enums="using:Wino.Core.Domain.Enums"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Name="root"
    Title="{x:Bind domain:Translator.SettingsOptions_Title}"
    mc:Ignorable="d">

    <ScrollViewer Padding="0,0,16,0" VerticalScrollBarVisibility="Auto">
        <StackPanel Margin="0,8,0,24" Spacing="16">
            <StackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition FromVerticalOffset="50" IsStaggeringEnabled="True" />
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>

            <!--  Hero Account Card - Prominent at top  -->
            <Grid
                Padding="20"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <Border
                    Width="56"
                    Height="56"
                    CornerRadius="28">
                    <FontIcon
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        FontSize="24"
                        Foreground="{ThemeResource TextOnAccentAAFillColorDisabledBrush}"
                        Glyph="&#xE77B;" />
                </Border>

                <StackPanel
                    Grid.Column="1"
                    Margin="16,0,0,0"
                    VerticalAlignment="Center"
                    Spacing="2">
                    <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{x:Bind domain:Translator.SettingsManageAccountSettings_Title}" />
                    <TextBlock
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{x:Bind domain:Translator.SettingsManageAccountSettings_Description}" />
                </StackPanel>

                <Button
                    Grid.Column="2"
                    VerticalAlignment="Center"
                    Click="SettingOptionClicked"
                    Style="{StaticResource AccentButtonStyle}"
                    Tag="{x:Bind enums:WinoPage.AccountManagementPage}">
                    <StackPanel Orientation="Horizontal" Spacing="8">
                        <TextBlock Text="{x:Bind domain:Translator.Buttons_Manage}" />
                        <FontIcon FontSize="12" Glyph="&#xE76C;" />
                    </StackPanel>
                </Button>
            </Grid>

            <!--  General Settings Card  -->
            <Grid
                Padding="20"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <!--  General Header  -->
                <StackPanel
                    Margin="0,0,0,16"
                    Orientation="Horizontal"
                    Spacing="12">
                    <Border
                        Width="40"
                        Height="40"
                        Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
                        CornerRadius="8">
                        <FontIcon
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            FontSize="18"
                            Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                            Glyph="&#xE713;" />
                    </Border>
                    <TextBlock
                        VerticalAlignment="Center"
                        Style="{StaticResource SubtitleTextBlockStyle}"
                        Text="{x:Bind domain:Translator.SettingsOptions_GeneralSection}" />
                </StackPanel>

                <!--  General Options  -->
                <StackPanel Grid.Row="1" Spacing="2">
                    <Button
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        Background="Transparent"
                        BorderThickness="0"
                        Click="SettingOptionClicked"
                        CornerRadius="4"
                        Tag="{x:Bind enums:WinoPage.AppPreferencesPage}">
                        <Grid Padding="4,10" ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                VerticalAlignment="Center"
                                FontSize="16"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Glyph="&#xE770;" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.SettingsAppPreferences_Title}" />
                            <FontIcon
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                Glyph="&#xE76C;" />
                        </Grid>
                    </Button>

                    <Button
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        Background="Transparent"
                        BorderThickness="0"
                        Click="SettingOptionClicked"
                        CornerRadius="4"
                        Tag="{x:Bind enums:WinoPage.LanguageTimePage}">
                        <Grid Padding="4,10" ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                VerticalAlignment="Center"
                                FontSize="16"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Glyph="&#xE775;" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.SettingsLanguageTime_Title}" />
                            <FontIcon
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                Glyph="&#xE76C;" />
                        </Grid>
                    </Button>

                    <Button
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        Background="Transparent"
                        BorderThickness="0"
                        Click="SettingOptionClicked"
                        CornerRadius="4"
                        Tag="{x:Bind enums:WinoPage.PersonalizationPage}">
                        <Grid Padding="4,10" ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                VerticalAlignment="Center"
                                FontSize="16"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Glyph="&#xE771;" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.SettingsPersonalization_Title}" />
                            <FontIcon
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                Glyph="&#xE76C;" />
                        </Grid>
                    </Button>

                    <Button
                        HorizontalAlignment="Stretch"
                        HorizontalContentAlignment="Stretch"
                        Background="Transparent"
                        BorderThickness="0"
                        Click="SettingOptionClicked"
                        CornerRadius="4"
                        Tag="{x:Bind enums:WinoPage.AboutPage}">
                        <Grid Padding="4,10" ColumnSpacing="12">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <FontIcon
                                VerticalAlignment="Center"
                                FontSize="16"
                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                Glyph="&#xE946;" />
                            <TextBlock
                                Grid.Column="1"
                                VerticalAlignment="Center"
                                Text="{x:Bind domain:Translator.SettingsAbout_Title}" />
                            <FontIcon
                                Grid.Column="2"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                Glyph="&#xE76C;" />
                        </Grid>
                    </Button>
                </StackPanel>
            </Grid>

            <!--  Two-Column Layout for Mail & Calendar  -->
            <Grid ColumnSpacing="16">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!--  Mail Settings Card  -->
                <Grid
                    Grid.Column="0"
                    Padding="20"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    BorderThickness="1"
                    CornerRadius="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!--  Mail Header  -->
                    <StackPanel
                        Margin="0,0,0,16"
                        Orientation="Horizontal"
                        Spacing="12">
                        <Border
                            Width="40"
                            Height="40"
                            Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
                            CornerRadius="8">
                            <FontIcon
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                FontSize="18"
                                Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                                Glyph="&#xE715;" />
                        </Border>
                        <TextBlock
                            VerticalAlignment="Center"
                            Style="{StaticResource SubtitleTextBlockStyle}"
                            Text="{x:Bind domain:Translator.SettingsOptions_MailSection}" />
                    </StackPanel>

                    <!--  Mail Options  -->
                    <StackPanel Grid.Row="1" Spacing="2">
                        <Button
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="Transparent"
                            BorderThickness="0"
                            Click="SettingOptionClicked"
                            CornerRadius="4"
                            Tag="{x:Bind enums:WinoPage.KeyboardShortcutsPage}">
                            <Grid Padding="4,10" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <FontIcon
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Glyph="&#xE765;" />
                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Title}" />
                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                    Glyph="&#xE76C;" />
                            </Grid>
                        </Button>

                        <Button
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="Transparent"
                            BorderThickness="0"
                            Click="SettingOptionClicked"
                            CornerRadius="4"
                            Tag="{x:Bind enums:WinoPage.MessageListPage}">
                            <Grid Padding="4,10" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <FontIcon
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Glyph="&#xE8C4;" />
                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind domain:Translator.SettingsMessageList_Title}" />
                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                    Glyph="&#xE76C;" />
                            </Grid>
                        </Button>

                        <Button
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="Transparent"
                            BorderThickness="0"
                            Click="SettingOptionClicked"
                            CornerRadius="4"
                            Tag="{x:Bind enums:WinoPage.ReadComposePanePage}">
                            <Grid Padding="4,10" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <FontIcon
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Glyph="&#xE8BD;" />
                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind domain:Translator.SettingsReadComposePane_Title}" />
                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                    Glyph="&#xE76C;" />
                            </Grid>
                        </Button>

                        <Button
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="Transparent"
                            BorderThickness="0"
                            Click="SettingOptionClicked"
                            CornerRadius="4"
                            Tag="{x:Bind enums:WinoPage.SignatureAndEncryptionPage}">
                            <Grid Padding="4,10" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <FontIcon
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Glyph="&#xE8D7;" />
                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind domain:Translator.SettingsSignatureAndEncryption_Title}" />
                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                    Glyph="&#xE76C;" />
                            </Grid>
                        </Button>

                        <Button
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="Transparent"
                            BorderThickness="0"
                            Click="SettingOptionClicked"
                            CornerRadius="4"
                            Tag="{x:Bind enums:WinoPage.StoragePage}">
                            <Grid Padding="4,10" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <FontIcon
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Glyph="&#xE81C;" />
                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind domain:Translator.SettingsStorage_Title}" />
                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                    Glyph="&#xE76C;" />
                            </Grid>
                        </Button>
                    </StackPanel>
                </Grid>

                <!--  Calendar Settings Card  -->
                <Grid
                    Grid.Column="1"
                    Padding="20"
                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                    BorderThickness="1"
                    CornerRadius="8">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!--  Calendar Header  -->
                    <StackPanel
                        Margin="0,0,0,16"
                        Orientation="Horizontal"
                        Spacing="12">
                        <Border
                            Width="40"
                            Height="40"
                            Background="{ThemeResource SystemFillColorNeutralBackgroundBrush}"
                            CornerRadius="8">
                            <FontIcon
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                FontSize="18"
                                Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
                                Glyph="&#xE787;" />
                        </Border>
                        <TextBlock
                            VerticalAlignment="Center"
                            Style="{StaticResource SubtitleTextBlockStyle}"
                            Text="{x:Bind domain:Translator.SettingsOptions_CalendarSection}" />
                    </StackPanel>

                    <!--  Calendar Options  -->
                    <StackPanel Grid.Row="1" Spacing="2">
                        <Button
                            HorizontalAlignment="Stretch"
                            HorizontalContentAlignment="Stretch"
                            Background="Transparent"
                            BorderThickness="0"
                            Click="SettingOptionClicked"
                            CornerRadius="4"
                            Tag="{x:Bind enums:WinoPage.CalendarSettingsPage}">
                            <Grid Padding="4,10" ColumnSpacing="12">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <FontIcon
                                    VerticalAlignment="Center"
                                    FontSize="16"
                                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                                    Glyph="&#xE8BF;" />
                                <TextBlock
                                    Grid.Column="1"
                                    VerticalAlignment="Center"
                                    Text="{x:Bind domain:Translator.SettingsCalendarSettings_Title}" />
                                <FontIcon
                                    Grid.Column="2"
                                    VerticalAlignment="Center"
                                    FontSize="12"
                                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                                    Glyph="&#xE76C;" />
                            </Grid>
                        </Button>
                    </StackPanel>
                </Grid>
            </Grid>
        </StackPanel>
    </ScrollViewer>
</abstract:SettingOptionsPageAbstract>