Demo contacts page.

Wino.Mail.WinUI/App.xaml.cs

@@ -59,6 +59,7 @@ public partial class App : WinoApplication, IRecipient<NewMailSynchronizationReq
         services.AddTransient(typeof(LanguageTimePageViewModel));
         services.AddTransient(typeof(AppPreferencesPageViewModel));
         services.AddTransient(typeof(AliasManagementPageViewModel));
+        services.AddTransient(typeof(ContactsPageViewModel));
     }
 
     #endregion

Wino.Mail.WinUI/AppShell.xaml

@@ -340,6 +340,7 @@
             x:Key="NavigationMenuTemplateSelector"
             AccountManagementTemplate="{StaticResource ManageAccountsTemplate}"
             ClickableAccountMenuTemplate="{StaticResource ClickableAccountMenuTemplate}"
+            ContactsMenuItemTemplate="{StaticResource ContactsTemplate}"
             FixAuthenticationIssueTemplate="{StaticResource FixAuthenticationIssueTemplate}"
             FixMissingFolderConfigTemplate="{StaticResource FixMissingFolderConfig}"
             FolderMenuTemplate="{StaticResource FolderMenuTemplate}"

Wino.Mail.WinUI/Dialogs/ContactEditDialog.xaml

@@ -0,0 +1,98 @@
+<ContentDialog
+    x:Class="Wino.Dialogs.ContactEditDialog"
+    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:domain="using:Wino.Core.Domain"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    Title="Edit Contact"
+    HorizontalContentAlignment="Stretch"
+    DefaultButton="Primary"
+    IsPrimaryButtonEnabled="True"
+    PrimaryButtonClick="SaveClicked"
+    PrimaryButtonText="Save"
+    SecondaryButtonClick="CancelClicked"
+    SecondaryButtonText="Cancel"
+    Style="{StaticResource WinoDialogStyle}"
+    mc:Ignorable="d">
+
+    <ContentDialog.Resources>
+        <x:Double x:Key="ContentDialogMaxWidth">400</x:Double>
+    </ContentDialog.Resources>
+
+    <StackPanel Spacing="16">
+        <!--  Contact Name  -->
+        <TextBox
+            x:Name="ContactNameTextBox"
+            Header="Name"
+            PlaceholderText="Contact name"
+            TextChanged="ValidateInput" />
+
+        <!--  Email Address  -->
+        <TextBox
+            x:Name="EmailAddressTextBox"
+            Header="Email Address"
+            PlaceholderText="contact@example.com"
+            TextChanged="ValidateInput" />
+
+        <!--  Contact Photo  -->
+        <StackPanel>
+            <TextBlock
+                Margin="0,0,0,8"
+                FontWeight="SemiBold"
+                Text="Photo" />
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+
+                <PersonPicture
+                    x:Name="ContactPhotoPersonPicture"
+                    Grid.Column="0"
+                    Width="64"
+                    Height="64"
+                    Margin="0,0,16,0" />
+
+                <StackPanel
+                    Grid.Column="1"
+                    VerticalAlignment="Center"
+                    Spacing="8">
+                    <Button
+                        x:Name="ChoosePhotoButton"
+                        Click="ChoosePhotoClicked"
+                        Content="Choose Photo" />
+                    <Button
+                        x:Name="RemovePhotoButton"
+                        Click="RemovePhotoClicked"
+                        Content="Remove Photo" />
+                </StackPanel>
+            </Grid>
+        </StackPanel>
+
+        <!--  Contact Status Info  -->
+        <Border
+            x:Name="RootContactInfoBorder"
+            Padding="12,8"
+            Background="{ThemeResource AccentFillColorDefaultBrush}"
+            CornerRadius="4"
+            Visibility="Collapsed">
+            <TextBlock
+                Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                Text="This is a root contact and cannot be deleted."
+                TextWrapping="Wrap" />
+        </Border>
+
+        <Border
+            x:Name="OverriddenContactInfoBorder"
+            Padding="12,8"
+            Background="{ThemeResource SystemFillColorCautionBrush}"
+            CornerRadius="4"
+            Visibility="Collapsed">
+            <TextBlock
+                Foreground="{ThemeResource TextFillColorPrimaryBrush}"
+                Text="This contact has been manually modified."
+                TextWrapping="Wrap" />
+        </Border>
+    </StackPanel>
+</ContentDialog>

Wino.Mail.WinUI/Dialogs/ContactEditDialog.xaml.cs

@@ -0,0 +1,97 @@
+using System;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Wino.Core.Domain.Entities.Shared;
+using Wino.Core.Domain.Interfaces;
+
+namespace Wino.Dialogs;
+
+public sealed partial class ContactEditDialog : ContentDialog
+{
+    private AccountContact _contact;
+    private IDialogServiceBase? _dialogService;
+
+    public AccountContact Contact => _contact;
+
+    public ContactEditDialog(AccountContact? contact = null, IDialogServiceBase? dialogService = null)
+    {
+        InitializeComponent();
+        
+        _contact = contact ?? new AccountContact();
+        _dialogService = dialogService;
+        
+        LoadContactData();
+        ValidateInput();
+    }
+
+    private void LoadContactData()
+    {
+        if (_contact != null)
+        {
+            ContactNameTextBox.Text = _contact.Name ?? string.Empty;
+            EmailAddressTextBox.Text = _contact.Address ?? string.Empty;
+
+            // Show info badges
+            if (_contact.IsRootContact)
+            {
+                RootContactInfoBorder.Visibility = Visibility.Visible;
+            }
+
+            if (_contact.IsOverridden)
+            {
+                OverriddenContactInfoBorder.Visibility = Visibility.Visible;
+            }
+        }
+    }
+
+    private void ChoosePhotoClicked(object sender, RoutedEventArgs e)
+    {
+        // TODO: Implement photo picker
+    }
+
+    private void RemovePhotoClicked(object sender, RoutedEventArgs e)
+    {
+        ContactPhotoPersonPicture.ProfilePicture = null;
+        RemovePhotoButton.Visibility = Visibility.Collapsed;
+    }
+
+    private void ValidateInput(object? sender = null, TextChangedEventArgs? e = null)
+    {
+        var hasName = !string.IsNullOrWhiteSpace(ContactNameTextBox.Text);
+        var hasEmail = !string.IsNullOrWhiteSpace(EmailAddressTextBox.Text);
+        var isValidEmail = hasEmail && IsValidEmail(EmailAddressTextBox.Text);
+
+        IsPrimaryButtonEnabled = hasName && isValidEmail;
+    }
+
+    private bool IsValidEmail(string email)
+    {
+        try
+        {
+            var addr = new System.Net.Mail.MailAddress(email);
+            return addr.Address == email;
+        }
+        catch
+        {
+            return false;
+        }
+    }
+
+    private void SaveClicked(ContentDialog sender, ContentDialogButtonClickEventArgs args)
+    {
+        // Update contact data
+        _contact.Name = ContactNameTextBox.Text?.Trim();
+        _contact.Address = EmailAddressTextBox.Text?.Trim();
+
+        // Mark as overridden if this was a user edit
+        if (!string.IsNullOrEmpty(_contact.Address))
+        {
+            _contact.IsOverridden = true;
+        }
+    }
+
+    private void CancelClicked(ContentDialog sender, ContentDialogButtonClickEventArgs args)
+    {
+        // Nothing to do, dialog will close
+    }
+}

Wino.Mail.WinUI/Services/DialogService.cs

@@ -209,4 +209,21 @@ public class DialogService : DialogServiceBase, IMailDialogService
 
         return dialog.Result;
     }
+
+    public async Task<Core.Domain.Entities.Shared.AccountContact?> ShowEditContactDialogAsync(Core.Domain.Entities.Shared.AccountContact? contact = null)
+    {
+        var dialog = new ContactEditDialog(contact, this)
+        {
+            RequestedTheme = ThemeService.RootTheme.ToWindowsElementTheme()
+        };
+
+        var result = await HandleDialogPresentationAsync(dialog);
+
+        if (result == ContentDialogResult.Primary)
+        {
+            return dialog.Contact;
+        }
+
+        return null;
+    }
 }

Wino.Mail.WinUI/Services/NavigationService.cs

@@ -34,7 +34,7 @@ public class NavigationService : NavigationServiceBase, INavigationService
         _statePersistanceService = statePersistanceService;
     }
 
-    public Type GetPageType(WinoPage winoPage)
+    public Type? GetPageType(WinoPage winoPage)
     {
         return winoPage switch
         {
@@ -60,6 +60,7 @@ public class NavigationService : NavigationServiceBase, INavigationService
             WinoPage.LanguageTimePage => typeof(LanguageTimePage),
             WinoPage.EditAccountDetailsPage => typeof(EditAccountDetailsPage),
             WinoPage.KeyboardShortcutsPage => typeof(KeyboardShortcutsPage),
+            WinoPage.ContactsPage => typeof(ContactsPage),
             _ => null,
         };
     }

Wino.Mail.WinUI/Views/Abstract/ContactsPageAbstract.cs

@@ -0,0 +1,6 @@
+using Wino.Core.WinUI;
+using Wino.Mail.ViewModels;
+
+namespace Wino.Views.Abstract;
+
+public abstract class ContactsPageAbstract : BasePage<ContactsPageViewModel> { }

Wino.Mail.WinUI/Views/Settings/ContactsPage.xaml

@@ -0,0 +1,241 @@
+<abstract:ContactsPageAbstract
+    x:Class="Wino.Views.Settings.ContactsPage"
+    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:Wino.Controls"
+    xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:domain="using:Wino.Core.Domain"
+    xmlns:entities="using:Wino.Core.Domain.Entities.Shared"
+    xmlns:helpers="using:Wino.Helpers"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    x:Name="root"
+    mc:Ignorable="d">
+
+    <Page.Resources>
+        <DataTemplate x:Key="ContactTemplate" x:DataType="entities:AccountContact">
+            <Grid Margin="0,4" Padding="16,12">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="Auto" />
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="Auto" />
+                </Grid.ColumnDefinitions>
+
+                <!--  Contact Picture  -->
+                <PersonPicture
+                    Grid.Column="0"
+                    Width="48"
+                    Height="48"
+                    Margin="0,0,16,0"
+                    DisplayName="{x:Bind Name}"
+                    ProfilePicture="{x:Bind helpers:XamlHelpers.Base64ToBitmapImage(Base64ContactPicture), Mode=OneWay}" />
+
+                <!--  Contact Info  -->
+                <StackPanel Grid.Column="1" VerticalAlignment="Center">
+                    <TextBlock
+                        FontWeight="SemiBold"
+                        Text="{x:Bind Name}"
+                        TextTrimming="CharacterEllipsis" />
+                    <TextBlock
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                        Style="{StaticResource CaptionTextBlockStyle}"
+                        Text="{x:Bind Address}"
+                        TextTrimming="CharacterEllipsis" />
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <Border
+                            Padding="4,2"
+                            Background="{ThemeResource AccentFillColorDefaultBrush}"
+                            CornerRadius="2"
+                            Visibility="{x:Bind IsRootContact, Mode=OneWay}">
+                            <TextBlock
+                                FontSize="10"
+                                Foreground="{ThemeResource TextOnAccentFillColorPrimaryBrush}"
+                                Text="{x:Bind domain:Translator.ContactStatus_Account, Mode=OneTime}" />
+                        </Border>
+                        <Border
+                            Padding="4,2"
+                            CornerRadius="2"
+                            Visibility="{x:Bind IsOverridden, Mode=OneWay}">
+                            <TextBlock FontSize="10" Text="{x:Bind domain:Translator.ContactStatus_Modified, Mode=OneTime}" />
+                        </Border>
+                    </StackPanel>
+                </StackPanel>
+
+                <!--  Actions  -->
+                <StackPanel
+                    Grid.Column="2"
+                    Orientation="Horizontal"
+                    Spacing="8">
+                    <Button
+                        Command="{Binding ViewModel.EditContactCommand, ElementName=root}"
+                        CommandParameter="{Binding}"
+                        Style="{StaticResource SubtleButtonStyle}"
+                        ToolTipService.ToolTip="{x:Bind domain:Translator.ContactAction_Edit, Mode=OneTime}">
+                        <FontIcon FontSize="16" Glyph="&#xE70F;" />
+                    </Button>
+                    <Button
+                        Command="{Binding ViewModel.PickContactPhotoCommand, ElementName=root}"
+                        CommandParameter="{Binding}"
+                        Style="{StaticResource SubtleButtonStyle}"
+                        ToolTipService.ToolTip="{x:Bind domain:Translator.ContactAction_ChangePhoto, Mode=OneTime}">
+                        <FontIcon FontSize="16" Glyph="&#xE91B;" />
+                    </Button>
+                    <Button
+                        Command="{Binding ViewModel.DeleteContactCommand, ElementName=root}"
+                        CommandParameter="{Binding}"
+                        IsEnabled="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(IsRootContact), Mode=OneWay}"
+                        Style="{StaticResource SubtleButtonStyle}"
+                        ToolTipService.ToolTip="{x:Bind domain:Translator.ContactAction_Delete, Mode=OneTime}">
+                        <FontIcon FontSize="16" Glyph="&#xE74D;" />
+                    </Button>
+                </StackPanel>
+            </Grid>
+        </DataTemplate>
+    </Page.Resources>
+
+    <Grid>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+
+        <!--  Header  -->
+        <Grid Grid.Row="0" Padding="24,16">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <StackPanel Grid.Column="0">
+                <TextBlock
+                    FontSize="28"
+                    FontWeight="SemiBold"
+                    Text="{x:Bind domain:Translator.ContactsPage_Title, Mode=OneTime}" />
+                <TextBlock Foreground="{ThemeResource TextFillColorSecondaryBrush}" Text="{x:Bind domain:Translator.ContactsPage_Subtitle, Mode=OneTime}" />
+            </StackPanel>
+
+            <StackPanel
+                Grid.Column="1"
+                Orientation="Horizontal"
+                Spacing="8">
+                <Button Command="{x:Bind ViewModel.AddContactCommand}" Style="{StaticResource AccentButtonStyle}">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <FontIcon FontSize="16" Glyph="&#xE710;" />
+                        <TextBlock Text="{x:Bind domain:Translator.ContactAction_Add, Mode=OneTime}" />
+                    </StackPanel>
+                </Button>
+                <Button Command="{x:Bind ViewModel.ToggleSelectionCommand}" Style="{StaticResource DefaultButtonStyle}">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <FontIcon FontSize="16" Glyph="&#xE762;" />
+                        <TextBlock Text="{x:Bind helpers:XamlHelpers.BoolToSelectionModeText(ViewModel.IsSelectionMode), Mode=OneWay}" />
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+        </Grid>
+
+        <!--  Search and Selection Bar  -->
+        <Grid
+            Grid.Row="2"
+            Padding="24,0,24,16"
+            Visibility="{x:Bind ViewModel.IsSelectionMode, Mode=OneWay}">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+
+            <StackPanel Orientation="Horizontal" Spacing="16">
+                <TextBlock
+                    VerticalAlignment="Center"
+                    Text="{x:Bind ViewModel.SelectedContactsCount, Mode=OneWay}"
+                    TextWrapping="Wrap">
+                    <Run Text="{x:Bind ViewModel.SelectedContactsCount, Mode=OneWay}" />
+                    <Run Text="{x:Bind domain:Translator.ContactSelection_Selected, Mode=OneTime}" />
+                </TextBlock>
+            </StackPanel>
+
+            <StackPanel
+                Grid.Column="1"
+                Orientation="Horizontal"
+                Spacing="8">
+                <Button Command="{x:Bind ViewModel.SelectAllContactsCommand}" Style="{StaticResource SubtleButtonStyle}">
+                    <TextBlock Text="{x:Bind domain:Translator.ContactSelection_SelectAll, Mode=OneTime}" />
+                </Button>
+                <Button Command="{x:Bind ViewModel.ClearSelectionCommand}" Style="{StaticResource SubtleButtonStyle}">
+                    <TextBlock Text="{x:Bind domain:Translator.ContactSelection_Clear, Mode=OneTime}" />
+                </Button>
+                <Button
+                    Command="{x:Bind ViewModel.DeleteSelectedContactsCommand}"
+                    IsEnabled="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.SelectedContactsCount), Mode=OneWay}"
+                    Style="{StaticResource SubtleButtonStyle}">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <FontIcon FontSize="16" Glyph="&#xE74D;" />
+                        <TextBlock Text="{x:Bind domain:Translator.ContactAction_Delete, Mode=OneTime}" />
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+        </Grid>
+
+        <!--  Search Box  -->
+        <AutoSuggestBox
+            Grid.Row="1"
+            Margin="24,0,24,16"
+            PlaceholderText="{x:Bind domain:Translator.ContactsPage_SearchPlaceholder, Mode=OneTime}"
+            QueryIcon="Find"
+            Text="{x:Bind ViewModel.SearchQuery, Mode=TwoWay}"
+            Visibility="{x:Bind ViewModel.IsSelectionMode, Mode=OneWay}" />
+
+        <!--  Content  -->
+        <Grid Grid.Row="3" Padding="24,0">
+            <!--  Loading Indicator  -->
+            <ProgressRing
+                Width="48"
+                Height="48"
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                IsActive="{x:Bind ViewModel.IsLoading, Mode=OneWay}"
+                Visibility="{x:Bind ViewModel.IsLoading, Mode=OneWay}" />
+
+            <!--  Contacts List  -->
+            <ListView
+                ItemTemplate="{StaticResource ContactTemplate}"
+                ItemsSource="{x:Bind ViewModel.Contacts, Mode=OneWay}"
+                SelectionMode="{x:Bind helpers:XamlHelpers.BoolToSelectionMode(ViewModel.IsSelectionMode), Mode=OneWay}">
+                <ListView.ItemContainerTransitions>
+                    <TransitionCollection>
+                        <AddDeleteThemeTransition />
+                        <ContentThemeTransition />
+                        <ReorderThemeTransition />
+                        <EntranceThemeTransition IsStaggeringEnabled="True" />
+                    </TransitionCollection>
+                </ListView.ItemContainerTransitions>
+            </ListView>
+
+            <!--  Empty State  -->
+            <StackPanel
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                Spacing="16"
+                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.SelectedContactsCount), Mode=OneWay}">
+                <FontIcon
+                    FontSize="48"
+                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
+                    Glyph="&#xE716;" />
+                <TextBlock
+                    HorizontalAlignment="Center"
+                    Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                    Text="{x:Bind domain:Translator.ContactsPage_EmptyState, Mode=OneTime}"
+                    TextAlignment="Center" />
+                <Button Command="{x:Bind ViewModel.AddContactCommand}" Style="{StaticResource AccentButtonStyle}">
+                    <StackPanel Orientation="Horizontal" Spacing="8">
+                        <FontIcon FontSize="16" Glyph="&#xE710;" />
+                        <TextBlock Text="{x:Bind domain:Translator.ContactsPage_AddFirstContact, Mode=OneTime}" />
+                    </StackPanel>
+                </Button>
+            </StackPanel>
+        </Grid>
+    </Grid>
+</abstract:ContactsPageAbstract>

Wino.Mail.WinUI/Views/Settings/ContactsPage.xaml.cs

@@ -0,0 +1,11 @@
+using Wino.Views.Abstract;
+
+namespace Wino.Views.Settings;
+
+public sealed partial class ContactsPage : ContactsPageAbstract
+{
+    public ContactsPage()
+    {
+        this.InitializeComponent();
+    }
+}

Wino.Mail.WinUI/Wino.Mail.WinUI.csproj

@@ -68,6 +68,7 @@
   <ItemGroup>
     <None Remove="Controls\ListView\WinoListViewStyles.xaml" />
     <None Remove="ShellWindow.xaml" />
+    <None Remove="Views\Settings\ContactsPage.xaml" />
   </ItemGroup>
 
   <ItemGroup>
@@ -124,6 +125,11 @@
 	<ProjectReference Include="..\Wino.Mail.ViewModels\Wino.Mail.ViewModels.csproj" />
 	<ProjectReference Include="..\Wino.Services\Wino.Services.csproj" />
   </ItemGroup>
+  <ItemGroup>
+    <Page Update="Views\Settings\ContactsPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+  </ItemGroup>
   <ItemGroup>
     <Page Update="Controls\ListView\WinoListViewStyles.xaml">
       <Generator>MSBuild:Compile</Generator>