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="4">
            <StackPanel.ChildrenTransitions>
                <TransitionCollection>
                    <EntranceThemeTransition FromVerticalOffset="50" IsStaggeringEnabled="True" />
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>

            <!--  Hero Banner - Windows 11 style  -->
            <Grid
                Margin="0,0,0,12"
                Padding="24,28"
                Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                BorderThickness="1"
                CornerRadius="8">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Image
                    Width="96"
                    Height="96"
                    VerticalAlignment="Center"
                    Source="ms-appx:///Assets/AppEntries/MailAssets/Square150x150Logo.scale-100.png"
                    Stretch="Uniform" />

                <!--  App Info  -->
                <StackPanel
                    Grid.Column="1"
                    Margin="20,0,0,0"
                    VerticalAlignment="Center"
                    Spacing="4">
                    <TextBlock
                        Style="{StaticResource TitleTextBlockStyle}"
                        Text="Wino Mail" />
                    <TextBlock
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        Style="{StaticResource BodyTextBlockStyle}"
                        Text="{x:Bind domain:Translator.SettingsOptions_HeroDescription}" />
                    <TextBlock
                        Margin="0,2,0,0"
                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                        Style="{StaticResource CaptionTextBlockStyle}"
                        Text="{x:Bind ViewModel.VersionText, Mode=OneWay}" />
                    <StackPanel
                        Margin="0,8,0,0"
                        Orientation="Horizontal"
                        Spacing="8">
                        <HyperlinkButton
                            Content="{x:Bind ViewModel.WebsiteUrl, Mode=OneWay}"
                            NavigateUri="{x:Bind ViewModel.WebsiteUrl, Mode=OneWay}" />
                        <HyperlinkButton
                            Content="{x:Bind domain:Translator.SettingsPaypal_Title}"
                            NavigateUri="{x:Bind ViewModel.PaypalUrl, Mode=OneWay}" />
                    </StackPanel>
                </StackPanel>
            </Grid>

            <!--  Account Management Card  -->
            <controls:SettingsCard
                Margin="0,0,0,12"
                Click="SettingOptionClicked"
                Description="{x:Bind ViewModel.AccountSummaryText, Mode=OneWay}"
                Header="{x:Bind domain:Translator.SettingsManageAccountSettings_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.AccountManagementPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE77B;" />
                </controls:SettingsCard.HeaderIcon>
                <Button
                    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>
            </controls:SettingsCard>

            <!--  General Section  -->
            <TextBlock
                Margin="1,8,0,4"
                Style="{StaticResource BodyStrongTextBlockStyle}"
                Text="{x:Bind domain:Translator.SettingsOptions_GeneralSection}" />

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsAppPreferences_Description}"
                Header="{x:Bind domain:Translator.SettingsAppPreferences_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.AppPreferencesPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE770;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsLanguageTime_Description}"
                Header="{x:Bind domain:Translator.SettingsLanguageTime_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.LanguageTimePage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE775;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsPersonalization_Description}"
                Header="{x:Bind domain:Translator.SettingsPersonalization_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.PersonalizationPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE771;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsAbout_Description}"
                Header="{x:Bind domain:Translator.SettingsAbout_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.AboutPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE946;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <!--  Mail Section  -->
            <TextBlock
                Margin="1,16,0,4"
                Style="{StaticResource BodyStrongTextBlockStyle}"
                Text="{x:Bind domain:Translator.SettingsOptions_MailSection}" />

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Description}"
                Header="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.KeyboardShortcutsPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE765;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsMessageList_Description}"
                Header="{x:Bind domain:Translator.SettingsMessageList_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.MessageListPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE8C4;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsReadComposePane_Description}"
                Header="{x:Bind domain:Translator.SettingsReadComposePane_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.ReadComposePanePage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE8BD;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsSignatureAndEncryption_Description}"
                Header="{x:Bind domain:Translator.SettingsSignatureAndEncryption_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.SignatureAndEncryptionPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE8D7;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsStorage_Description}"
                Header="{x:Bind domain:Translator.SettingsStorage_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.StoragePage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE81C;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <!--  Calendar Section  -->
            <TextBlock
                Margin="1,16,0,4"
                Style="{StaticResource BodyStrongTextBlockStyle}"
                Text="{x:Bind domain:Translator.SettingsOptions_CalendarSection}" />

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.SettingsCalendarSettings_Description}"
                Header="{x:Bind domain:Translator.SettingsCalendarSettings_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.CalendarSettingsPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE787;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>

            <controls:SettingsCard
                Click="SettingOptionClicked"
                Description="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Description}"
                Header="{x:Bind domain:Translator.Settings_KeyboardShortcuts_Title}"
                IsClickEnabled="True"
                Tag="{x:Bind enums:WinoPage.KeyboardShortcutsPage}">
                <controls:SettingsCard.HeaderIcon>
                    <FontIcon Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}" Glyph="&#xE765;" />
                </controls:SettingsCard.HeaderIcon>
            </controls:SettingsCard>
        </StackPanel>
    </ScrollViewer>
</abstract:SettingOptionsPageAbstract>