From dccf55d57a11485069108b4b34f76352ae9684a0 Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Sun, 23 Jun 2024 13:32:06 +0200
Subject: [PATCH 1/8] Added separated zones

---
 Wino.Mail/AppShell.xaml                |   55 +-
 Wino.Mail/Styles/Colors.xaml           |   12 +-
 Wino.Mail/Views/ComposePage.xaml       | 1198 ++++++++++++------------
 Wino.Mail/Views/MailListPage.xaml      |  759 +++++++--------
 Wino.Mail/Views/MailListPage.xaml.cs   |    3 +-
 Wino.Mail/Views/MailRenderingPage.xaml |  460 ++++-----
 6 files changed, 1269 insertions(+), 1218 deletions(-)

diff --git a/Wino.Mail/AppShell.xaml b/Wino.Mail/AppShell.xaml
index 1cc75798..f870c256 100644
--- a/Wino.Mail/AppShell.xaml
+++ b/Wino.Mail/AppShell.xaml
@@ -2,26 +2,29 @@
     x:Class="Wino.Views.AppShell"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    x:Name="Root"
     xmlns:abstract="using:Wino.Views.Abstract"
     xmlns:advanced="using:Wino.Controls.Advanced"
     xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
+    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
     xmlns:controls="using:Wino.Controls"
     xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
-    xmlns:domain="using:Wino.Core.Domain"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:domain="using:Wino.Core.Domain"
+    xmlns:enums="using:Wino.Core.Domain.Enums"
     xmlns:helpers="using:Wino.Helpers"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:enums="using:Wino.Core.Domain.Enums"
     xmlns:menu="using:Wino.Core.MenuItems"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:animations="using:CommunityToolkit.WinUI.Animations"
     xmlns:selectors="using:Wino.Selectors"
+    x:Name="Root"
     muxc:BackdropMaterial.ApplyToRootOrPageBackground="{ThemeResource UseMica}"
     mc:Ignorable="d">
 
     <Page.Resources>
 
+        <!--  Removes default styles for content of navigation view  -->
+        <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
+        <SolidColorBrush x:Key="NavigationViewContentGridBorderBrush" Color="Transparent" />
 
         <DataTemplate x:Key="SeperatorTemplate">
             <muxc:NavigationViewItemSeparator Margin="-20,0" />
@@ -110,15 +113,15 @@
         <!--  Clickable New Style Account Template  -->
         <DataTemplate x:Key="ClickableAccountMenuTemplate" x:DataType="menu:AccountMenuItem">
             <controls:AccountNavigationItem
-                Style="{StaticResource SingleAccountNavigationViewItemTemplate}"
                 x:Name="AccountItem"
-                IsActiveAccount="{x:Bind IsSelected, Mode=OneWay}"
                 HorizontalContentAlignment="Stretch"
                 VerticalContentAlignment="Stretch"
+                DataContext="{x:Bind}"
+                IsActiveAccount="{x:Bind IsSelected, Mode=OneWay}"
                 IsChildSelected="{x:Bind IsChildSelected, Mode=TwoWay}"
                 IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
-                DataContext="{x:Bind}"
-                SelectsOnInvoked="False">
+                SelectsOnInvoked="False"
+                Style="{StaticResource SingleAccountNavigationViewItemTemplate}">
                 <controls:WinoNavigationViewItem.ContentTransitions>
                     <TransitionCollection>
                         <EdgeUIThemeTransition Edge="Top" />
@@ -159,8 +162,8 @@
 
                         <TextBlock
                             FontSize="13"
-                            MaxLines="1"
                             FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightByChildSelectedState(IsSelected), Mode=OneWay}"
+                            MaxLines="1"
                             Style="{StaticResource CaptionTextBlockStyle}"
                             Text="{x:Bind Parameter.Address, Mode=OneWay}"
                             TextTrimming="CharacterEllipsis" />
@@ -239,8 +242,8 @@
         <DataTemplate x:Key="CreateNewMailTemplate" x:DataType="menu:NewMailMenuItem">
             <controls:WinoNavigationViewItem
                 Height="50"
-                SelectsOnInvoked="False"
-                DataContext="{x:Bind}">
+                DataContext="{x:Bind}"
+                SelectsOnInvoked="False">
                 <muxc:NavigationViewItem.Icon>
                     <controls:WinoFontIcon Icon="NewMail" />
                 </muxc:NavigationViewItem.Icon>
@@ -258,16 +261,16 @@
                 MinHeight="30"
                 AllowDrop="True"
                 ContextRequested="MenuItemContextRequested"
+                DataContext="{x:Bind}"
                 DragEnter="ItemDragEnterOnFolder"
                 DragLeave="ItemDragLeaveFromFolder"
                 Drop="ItemDroppedOnFolder"
-                DataContext="{x:Bind}"
                 FontSize="50"
                 FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightByChildSelectedState(IsSelected), Mode=OneWay}"
                 IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
                 IsSelected="{x:Bind IsSelected, Mode=TwoWay}"
-                SelectsOnInvoked="{x:Bind IsMoveTarget, Mode=OneWay}"
-                MenuItemsSource="{x:Bind SubMenuItems, Mode=OneWay}">
+                MenuItemsSource="{x:Bind SubMenuItems, Mode=OneWay}"
+                SelectsOnInvoked="{x:Bind IsMoveTarget, Mode=OneWay}">
                 <animations:Implicit.Animations>
                     <animations:ScaleAnimation Duration="0:0:0.5" />
                 </animations:Implicit.Animations>
@@ -329,8 +332,8 @@
                 IsActiveAccount="{x:Bind IsSelected, Mode=OneWay}"
                 IsChildSelected="{x:Bind IsChildSelected, Mode=TwoWay}"
                 IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
-                Style="{StaticResource SingleAccountNavigationViewItemTemplate}"
-                SelectsOnInvoked="False">
+                SelectsOnInvoked="False"
+                Style="{StaticResource SingleAccountNavigationViewItemTemplate}">
                 <muxc:NavigationViewItem.InfoBadge>
                     <muxc:InfoBadge
                         x:Name="FolderInfoBadge"
@@ -376,9 +379,9 @@
                 MinHeight="30"
                 AllowDrop="True"
                 ContextRequested="MenuItemContextRequested"
+                DataContext="{x:Bind}"
                 DragEnter="ItemDragEnterOnFolder"
                 DragLeave="ItemDragLeaveFromFolder"
-                DataContext="{x:Bind}"
                 Drop="ItemDroppedOnFolder"
                 FontSize="50"
                 FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightByChildSelectedState(IsSelected), Mode=OneWay}"
@@ -421,10 +424,10 @@
         <DataTemplate x:Key="MergedAccountMoreFolderItemTemplate" x:DataType="menu:MergedAccountMoreFolderMenuItem">
             <controls:WinoNavigationViewItem
                 MinHeight="30"
+                Content="{x:Bind domain:Translator.More}"
                 FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightByChildSelectedState(IsSelected), Mode=OneWay}"
                 IsExpanded="{x:Bind IsExpanded, Mode=TwoWay}"
                 IsSelected="{x:Bind IsSelected, Mode=TwoWay}"
-                Content="{x:Bind domain:Translator.More}"
                 MenuItemsSource="{x:Bind SubMenuItems, Mode=OneWay}"
                 SelectsOnInvoked="True">
                 <animations:Implicit.Animations>
@@ -469,15 +472,15 @@
 
         <selectors:NavigationMenuTemplateSelector
             x:Key="NavigationMenuTemplateSelector"
-            MergedAccountMoreExpansionItemTemplate="{StaticResource MergedAccountMoreFolderItemTemplate}"
-            ClickableAccountMenuTemplate="{StaticResource ClickableAccountMenuTemplate}"
             AccountManagementTemplate="{StaticResource ManageAccountsTemplate}"
-            NestedAccountMenuTemplate="{StaticResource NestedAccountMenuTemplate}"
+            ClickableAccountMenuTemplate="{StaticResource ClickableAccountMenuTemplate}"
             FixAuthenticationIssueTemplate="{StaticResource FixAuthenticationIssueTemplate}"
             FixMissingFolderConfigTemplate="{StaticResource FixMissingFolderConfig}"
             FolderMenuTemplate="{StaticResource FolderMenuTemplate}"
             MergedAccountFolderTemplate="{StaticResource MergedAccountFolderMenuItemTemplate}"
+            MergedAccountMoreExpansionItemTemplate="{StaticResource MergedAccountMoreFolderItemTemplate}"
             MergedAccountTemplate="{StaticResource MergedAccountTemplate}"
+            NestedAccountMenuTemplate="{StaticResource NestedAccountMenuTemplate}"
             NewMailTemplate="{StaticResource CreateNewMailTemplate}"
             RatingItemTemplate="{StaticResource RatingItemTemplate}"
             SeperatorTemplate="{StaticResource SeperatorTemplate}"
@@ -507,7 +510,6 @@
             IsHitTestVisible="False" />
 
         <muxc:NavigationView
-            IsTabStop="True"
             x:Name="navigationView"
             Grid.Row="1"
             Grid.ColumnSpan="3"
@@ -519,6 +521,7 @@
             IsPaneOpen="{x:Bind ViewModel.PreferencesService.IsNavigationPaneOpened, Mode=TwoWay}"
             IsPaneToggleButtonVisible="False"
             IsSettingsVisible="False"
+            IsTabStop="True"
             IsTitleBarAutoPaddingEnabled="False"
             ItemInvoked="NavigationViewItemInvoked"
             MenuItemTemplateSelector="{StaticResource NavigationMenuTemplateSelector}"
@@ -579,19 +582,19 @@
                     x:Name="ShellInfoBar"
                     Grid.Column="1"
                     MaxWidth="700"
-                    IsOpen="False"
                     Margin="0,60,25,0"
                     HorizontalAlignment="Right"
                     VerticalAlignment="Top"
-                    IsClosable="False" />
+                    IsClosable="False"
+                    IsOpen="False" />
 
                 <!--  Teaching Tip  -->
                 <muxc:TeachingTip
                     x:Name="ShellTip"
-                    Target="{x:Bind ShellInfoBar}"
                     Grid.Column="1"
                     IsOpen="False"
-                    PreferredPlacement="Bottom" />
+                    PreferredPlacement="Bottom"
+                    Target="{x:Bind ShellInfoBar}" />
             </Grid>
         </muxc:NavigationView>
 
diff --git a/Wino.Mail/Styles/Colors.xaml b/Wino.Mail/Styles/Colors.xaml
index f33c0dba..6d8d9bab 100644
--- a/Wino.Mail/Styles/Colors.xaml
+++ b/Wino.Mail/Styles/Colors.xaml
@@ -1,4 +1,7 @@
-<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+<ResourceDictionary
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.UI.Xaml.Media">
 
     <SolidColorBrush x:Key="FlaggedBrush">#e74c3c</SolidColorBrush>
     <SolidColorBrush x:Key="DeleteBrush">#e74c3c</SolidColorBrush>
@@ -10,10 +13,17 @@
         <ResourceDictionary x:Name="Light">
             <SolidColorBrush x:Key="AttachmentBrush">#fdcb6e</SolidColorBrush>
             <SolidColorBrush x:Key="SettingsPaneBorderBrush">#636e72</SolidColorBrush>
+            <SolidColorBrush x:Key="WorkZoneBackground" Color="White" />
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
             <SolidColorBrush x:Key="AttachmentBrush">#fdcb6e</SolidColorBrush>
             <SolidColorBrush x:Key="SettingsPaneBorderBrush">#2d3436</SolidColorBrush>
+            <local:AcrylicBrush
+                x:Key="WorkZoneBackground"
+                BackgroundSource="Backdrop"
+                FallbackColor="#2C2C2C"
+                TintColor="#2C2C2C"
+                TintOpacity="0.30" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/Wino.Mail/Views/ComposePage.xaml b/Wino.Mail/Views/ComposePage.xaml
index 7faf05df..2c21d4f6 100644
--- a/Wino.Mail/Views/ComposePage.xaml
+++ b/Wino.Mail/Views/ComposePage.xaml
@@ -3,17 +3,17 @@
     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:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:controls="using:Wino.Controls"
-    xmlns:helpers="using:Wino.Helpers"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:mailkit="using:MimeKit"
-    xmlns:entities="using:Wino.Core.Domain.Entities"
     xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:data="using:Wino.Mail.ViewModels.Data"
-    xmlns:reader="using:Wino.Core.Domain.Models.Reader"
     xmlns:domain="using:Wino.Core.Domain"
+    xmlns:entities="using:Wino.Core.Domain.Entities"
+    xmlns:helpers="using:Wino.Helpers"
+    xmlns:mailkit="using:MimeKit"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:reader="using:Wino.Core.Domain.Models.Reader"
     x:Name="root"
     d:Background="White"
     Loaded="ComposerLoaded"
@@ -48,7 +48,7 @@
                     FromName="{x:Bind Name}"
                     IsKnown="False" />
                 <TextBlock Grid.Column="1">
-                    <Run Text="{x:Bind Name}" FontWeight="SemiBold" /><LineBreak /><Run Text="{x:Bind Address}" />
+                    <Run FontWeight="SemiBold" Text="{x:Bind Name}" /><LineBreak /><Run Text="{x:Bind Address}" />
                 </TextBlock>
             </Grid>
         </DataTemplate>
@@ -58,9 +58,9 @@
         <DataTemplate x:Key="ComposerFileAttachmentTemplate" x:DataType="data:MailAttachmentViewModel">
             <Grid
                 Height="50"
+                Margin="-8,0,0,0"
                 Background="Transparent"
-                ColumnSpacing="3"
-                Margin="-8,0,0,0">
+                ColumnSpacing="3">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="36" />
                     <ColumnDefinition Width="*" />
@@ -85,8 +85,8 @@
 
                     <TextBlock
                         FontSize="13"
-                        Text="{x:Bind FileName}"
                         MaxLines="2"
+                        Text="{x:Bind FileName}"
                         TextTrimming="CharacterEllipsis" />
 
                     <TextBlock
@@ -101,600 +101,620 @@
                 <SymbolIcon
                     Grid.Column="2"
                     VerticalAlignment="Center"
-                    Symbol="Cancel"
-                    Foreground="{StaticResource DeleteBrush}" />
+                    Foreground="{StaticResource DeleteBrush}"
+                    Symbol="Cancel" />
             </Grid>
         </DataTemplate>
     </Page.Resources>
 
-    <Grid
-        Background="{ThemeResource AppBarBackgroundColor}"
-        AllowDrop="True"
-        DragOver="OnComposeGridDragOver"
-        DragLeave="OnComposeGridDragLeave">
-        <Grid.Resources>
-            <SolidColorBrush x:Key="AutoSuggestBoxBorderThemeBrush">Transparent</SolidColorBrush>
-        </Grid.Resources>
-
+    <Grid Padding="7,0,7,7">
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="56" />
-            <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <Grid
-            x:Name="TopPanelGrid"
-            Padding="16,6,6,6"
-            RowSpacing="6">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="*" />
-            </Grid.RowDefinitions>
-            <CommandBar
-                Grid.Row="1"
-                DefaultLabelPosition="Right"
-                OverflowButtonVisibility="Collapsed"
-                DynamicOverflowItemsChanging="BarDynamicOverflowChanging"
-                IsDynamicOverflowEnabled="True">
-                <CommandBar.PrimaryCommands>
-                    <AppBarButton
-                        x:Name="ComposerThemeToggleButton"
-                        LabelPosition="Collapsed"
-                        Click="InvertComposerThemeClicked">
-                        <AppBarButton.Icon>
-                            <controls:WinoFontIcon Icon="DarkEditor" />
-                        </AppBarButton.Icon>
-                    </AppBarButton>
-                    <AppBarButton Label="Discard" Command="{x:Bind ViewModel.DiscardCommand}">
-                        <AppBarButton.Icon>
-                            <controls:WinoFontIcon Icon="Delete" />
-                        </AppBarButton.Icon>
-                    </AppBarButton>
-                    <AppBarButton Label="Send" Command="{x:Bind ViewModel.SendCommand}">
-                        <AppBarButton.Icon>
-                            <controls:WinoFontIcon Icon="Send" />
-                        </AppBarButton.Icon>
-                    </AppBarButton>
-                </CommandBar.PrimaryCommands>
-                <CommandBar.Content>
-                    <!--  Wino Pivot  -->
-                    <controls:WinoPivotControl
-                        ItemsSource="{x:Bind ViewModel.ToolbarSections}"
-                        SelectedItem="{x:Bind ViewModel.SelectedToolbarSection, Mode=TwoWay}"
-                        SelectorPipeColor="{ThemeResource NavigationViewSelectionIndicatorForeground}">
-                        <controls:WinoPivotControl.DataTemplate>
-                            <DataTemplate x:DataType="reader:EditorToolbarSection">
-                                <TextBlock Text="{x:Bind Title}" />
-                            </DataTemplate>
-                        </controls:WinoPivotControl.DataTemplate>
-                    </controls:WinoPivotControl>
-                </CommandBar.Content>
-            </CommandBar>
-        </Grid>
-
-        <!--  Editor Options  -->
-        <ScrollViewer
-            Grid.Row="1"
-            Margin="0,6"
-            VerticalAlignment="Top"
-            VerticalScrollMode="Disabled"
-            VerticalScrollBarVisibility="Hidden"
-            HorizontalScrollBarVisibility="Hidden"
-            HorizontalScrollMode="Enabled">
-            <Grid Margin="16,0,16,20" Padding="8,0">
-                <!--  Format Panel  -->
-                <Grid x:Name="FormatPanel" Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
-                    <StackPanel Orientation="Horizontal" Spacing="12">
-                        <ToggleButton
-                            x:Name="BoldButton"
-                            Height="32"
-                            Click="BoldButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource BoldPathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-                        <ToggleButton
-                            x:Name="ItalicButton"
-                            Height="32"
-                            Click="ItalicButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource ItalicPathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-                        <ToggleButton
-                            x:Name="UnderlineButton"
-                            Height="32"
-                            Click="UnderlineButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource UnderlinePathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-                        <ToggleButton
-                            x:Name="StrokeButton"
-                            Height="32"
-                            Click="StrokeButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource StrikePathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-
-                        <AppBarSeparator />
-
-                        <ToggleButton
-                            x:Name="BulletListButton"
-                            Height="32"
-                            Click="BulletListButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource BulletedListPathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-
-                        <ToggleButton
-                            x:Name="OrderedListButton"
-                            Height="32"
-                            Click="OrderedListButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource OrderedListPathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-
-                        <Button
-                            x:Name="DecreaseIndentButton"
-                            Height="32"
-                            Click="DecreaseIndentClicked">
-                            <Button.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
-                                </Viewbox>
-                            </Button.Content>
-                        </Button>
-
-                        <Button
-                            x:Name="IncreaseIndentButton"
-                            Height="32"
-                            Click="IncreaseIndentClicked">
-                            <Button.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
-                                </Viewbox>
-                            </Button.Content>
-                        </Button>
-
-                        <AppBarSeparator />
-
-                        <ToggleButton
-                            x:Name="DirectionButton"
-                            Height="32"
-                            Click="DirectionButtonClicked">
-                            <ToggleButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource ParagraphPathIcon}" />
-                                </Viewbox>
-                            </ToggleButton.Content>
-                        </ToggleButton>
-
-                        <ComboBox
-                            x:Name="AlignmentListView"
-                            Width="120"
-                            Height="32"
-                            VerticalAlignment="Center"
-                            SelectionChanged="AlignmentChanged">
-                            <ComboBoxItem Tag="left">
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16">
-                                        <PathIcon Data="{StaticResource AlignLeftPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Left}" />
-                                </StackPanel>
-                            </ComboBoxItem>
-
-                            <ComboBoxItem Tag="center">
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16">
-                                        <PathIcon Data="{StaticResource AlignCenterPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Center}" />
-                                </StackPanel>
-                            </ComboBoxItem>
-
-                            <ComboBoxItem Tag="right">
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16">
-                                        <PathIcon Data="{StaticResource AlignRightPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Right}" />
-                                </StackPanel>
-                            </ComboBoxItem>
-
-                            <ComboBoxItem Tag="justify">
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16">
-                                        <PathIcon Data="{StaticResource AlignJustifyPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Justify}" />
-                                </StackPanel>
-                            </ComboBoxItem>
-                        </ComboBox>
-                    </StackPanel>
-                </Grid>
-
-                <!--  Insert Panel  -->
-                <Grid x:Name="InsertPanel" Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
-                    <StackPanel Orientation="Horizontal" Spacing="12">
-                        <Button
-                            x:Name="FilesButton"
-                            Height="32"
-                            Click="AddFilesClicked">
-                            <Button.Content>
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16" VerticalAlignment="Center">
-                                        <PathIcon Data="{StaticResource AttachPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock Text="{x:Bind domain:Translator.Files}" />
-                                </StackPanel>
-                            </Button.Content>
-                        </Button>
-
-                        <Button
-                            x:Name="AddImageButton"
-                            Height="32"
-                            Click="AddImageClicked">
-                            <Button.Content>
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16" VerticalAlignment="Center">
-                                        <PathIcon Data="{StaticResource AddPhotoPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock Text="{x:Bind domain:Translator.Photos}" />
-                                </StackPanel>
-                            </Button.Content>
-                        </Button>
-
-                        <Button
-                            x:Name="EmojiButton"
-                            Height="32"
-                            Click="EmojiButtonClicked">
-                            <Button.Content>
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16" VerticalAlignment="Center">
-                                        <PathIcon Data="{StaticResource EmojiPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock Text="{x:Bind domain:Translator.Emoji}" />
-                                </StackPanel>
-                            </Button.Content>
-                        </Button>
-
-                        <Button
-                            x:Name="LinkButton"
-                            Height="32"
-                            Click="LinkButtonClicked">
-                            <Button.Flyout>
-                                <Flyout x:Name="HyperlinkFlyout">
-                                    <StackPanel Width="250" Spacing="6">
-                                        <TextBox x:Name="HyperlinkTextBox" Header="Text" />
-                                        <TextBox
-                                            x:Name="LinkUrlTextBox"
-                                            Header="Link"
-                                            PlaceholderText="https://" />
-                                        <Button
-                                            x:Name="AddHyperlinkButton"
-                                            Margin="0,6"
-                                            HorizontalAlignment="Stretch"
-                                            Click="HyperlinkAddClicked"
-                                            Content="{x:Bind domain:Translator.AddHyperlink}" />
-                                    </StackPanel>
-                                </Flyout>
-                            </Button.Flyout>
-                            <Button.Content>
-                                <StackPanel Orientation="Horizontal" Spacing="8">
-                                    <Viewbox Width="16" VerticalAlignment="Center">
-                                        <PathIcon Data="{StaticResource AddLinkPathIcon}" />
-                                    </Viewbox>
-                                    <TextBlock Text="Link" />
-                                </StackPanel>
-                            </Button.Content>
-                        </Button>
-                    </StackPanel>
-                </Grid>
-
-                <!--  Draw Panel  -->
-                <Grid x:Name="DrawPanel" Visibility="{x:Bind helpers:XamlHelpers.IsDrawSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
-                    <TextBlock Text="{x:Bind domain:Translator.ComingSoon}" />
-                </Grid>
-
-                <!--  Options Panel  -->
-                <Grid x:Name="OptionsPanel" Visibility="{x:Bind helpers:XamlHelpers.IsOptionsSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
-                    <muxc:ToggleSplitButton x:Name="ImportanceSplitButton" IsChecked="{x:Bind ViewModel.IsImportanceSelected, Mode=TwoWay}">
-                        <SymbolIcon x:Name="ImportanceSplitButtonContent" Symbol="Important" />
-                        <muxc:ToggleSplitButton.Flyout>
-                            <Flyout x:Name="ImportanceFlyout" Placement="Bottom">
-                                <StackPanel Orientation="Horizontal">
-                                    <StackPanel.Resources>
-                                        <Style TargetType="Button">
-                                            <Setter Property="Padding" Value="4" />
-                                            <Setter Property="MinWidth" Value="0" />
-                                            <Setter Property="MinHeight" Value="0" />
-                                            <Setter Property="Margin" Value="6" />
-                                            <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
-                                        </Style>
-                                    </StackPanel.Resources>
-                                    <Button Click="ImportanceClicked">
-                                        <Button.Tag>
-                                            <mailkit:MessageImportance>High</mailkit:MessageImportance>
-                                        </Button.Tag>
-                                        <SymbolIcon Symbol="Important" />
-                                    </Button>
-                                    <Button Click="ImportanceClicked">
-                                        <Button.Tag>
-                                            <mailkit:MessageImportance>Low</mailkit:MessageImportance>
-                                        </Button.Tag>
-                                        <SymbolIcon Symbol="Download" />
-                                    </Button>
-                                </StackPanel>
-                            </Flyout>
-                        </muxc:ToggleSplitButton.Flyout>
-                    </muxc:ToggleSplitButton>
-                </Grid>
-            </Grid>
-        </ScrollViewer>
-
-        <!--  Mime Info  -->
-        <Grid
-            Grid.Row="2"
-            Padding="16,0"
-            RowSpacing="3"
-            ColumnSpacing="12">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-            </Grid.RowDefinitions>
-
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="Auto" />
-                <ColumnDefinition Width="*" />
-            </Grid.ColumnDefinitions>
-
-            <!--  From  -->
-            <TextBlock
-                HorizontalAlignment="Right"
-                VerticalAlignment="Center"
-                Text="{x:Bind domain:Translator.ComposerFrom}" />
-
-            <ComboBox
-                x:Name="AccountsComboBox"
-                Grid.Column="1"
-                IsEditable="False"
-                IsEnabled="False"
-                ItemsSource="{x:Bind ViewModel.Accounts}"
-                SelectedItem="{x:Bind ViewModel.ComposingAccount, Mode=TwoWay}">
-                <ComboBox.ItemTemplate>
-                    <DataTemplate x:DataType="entities:MailAccount">
-                        <TextBlock>
-                            <Run Text="{x:Bind Name}" /><Run Text=" (" /><Run Text="{x:Bind Address}" /><Run Text=")" />
-                        </TextBlock>
-                    </DataTemplate>
-                </ComboBox.ItemTemplate>
-            </ComboBox>
-
-            <!--  To  -->
-            <TextBlock
-                Grid.Row="2"
-                Margin="0,4,0,0"
-                HorizontalAlignment="Right"
-                VerticalAlignment="Center"
-                Text="{x:Bind domain:Translator.ComposerTo}" />
-
+        <Border
+            Grid.Row="0"
+            Margin="0,0,0,7"
+            Background="{ThemeResource WorkZoneBackground}"
+            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="7">
             <Grid
-                Grid.Row="2"
-                Grid.Column="1"
-                VerticalAlignment="Center">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="Auto" />
-                </Grid.ColumnDefinitions>
+                Grid.Row="0"
+                AllowDrop="True"
+                Background="{ThemeResource AppBarBackgroundColor}"
+                DragLeave="OnComposeGridDragLeave"
+                DragOver="OnComposeGridDragOver">
+                <Grid.Resources>
+                    <SolidColorBrush x:Key="AutoSuggestBoxBorderThemeBrush">Transparent</SolidColorBrush>
+                </Grid.Resources>
 
-                <controls1:TokenizingTextBox
-                    x:Name="ToBox"
-                    Grid.Column="0"
-                    VerticalAlignment="Center"
-                    TokenDelimiter=";"
-                    Tag="ToBox"
-                    LostFocus="AddressBoxLostFocus"
-                    BorderThickness="0"
-                    ItemsSource="{x:Bind ViewModel.ToItems, Mode=OneTime}"
-                    TokenItemAdding="TokenItemAdding"
-                    PlaceholderText="{x:Bind domain:Translator.ComposerToPlaceholder}"
-                    TokenItemTemplate="{StaticResource TokenBoxTemplate}"
-                    SuggestedItemTemplate="{StaticResource SuggestionBoxTemplate}" />
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="56" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
 
-                <Button
-                    x:Name="CCBCCShowButton"
-                    Grid.Column="1"
-                    Margin="6,6,0,0"
-                    VerticalAlignment="Center"
-                    GotFocus="CCBBCGotFocus"
-                    Visibility="{x:Bind ViewModel.IsCCBCCVisible, Mode=OneWay}"
-                    Click="ShowCCBCCClicked">
-                    <StackPanel Orientation="Horizontal" Spacing="6">
-                        <PathIcon
+                <Grid
+                    x:Name="TopPanelGrid"
+                    Padding="16,6,6,6"
+                    RowSpacing="6">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
+                    </Grid.RowDefinitions>
+                    <CommandBar
+                        Grid.Row="1"
+                        DefaultLabelPosition="Right"
+                        DynamicOverflowItemsChanging="BarDynamicOverflowChanging"
+                        IsDynamicOverflowEnabled="True"
+                        OverflowButtonVisibility="Collapsed">
+                        <CommandBar.PrimaryCommands>
+                            <AppBarButton
+                                x:Name="ComposerThemeToggleButton"
+                                Click="InvertComposerThemeClicked"
+                                LabelPosition="Collapsed">
+                                <AppBarButton.Icon>
+                                    <controls:WinoFontIcon Icon="DarkEditor" />
+                                </AppBarButton.Icon>
+                            </AppBarButton>
+                            <AppBarButton Command="{x:Bind ViewModel.DiscardCommand}" Label="Discard">
+                                <AppBarButton.Icon>
+                                    <controls:WinoFontIcon Icon="Delete" />
+                                </AppBarButton.Icon>
+                            </AppBarButton>
+                            <AppBarButton Command="{x:Bind ViewModel.SendCommand}" Label="Send">
+                                <AppBarButton.Icon>
+                                    <controls:WinoFontIcon Icon="Send" />
+                                </AppBarButton.Icon>
+                            </AppBarButton>
+                        </CommandBar.PrimaryCommands>
+                        <CommandBar.Content>
+                            <!--  Wino Pivot  -->
+                            <controls:WinoPivotControl
+                                ItemsSource="{x:Bind ViewModel.ToolbarSections}"
+                                SelectedItem="{x:Bind ViewModel.SelectedToolbarSection, Mode=TwoWay}"
+                                SelectorPipeColor="{ThemeResource NavigationViewSelectionIndicatorForeground}">
+                                <controls:WinoPivotControl.DataTemplate>
+                                    <DataTemplate x:DataType="reader:EditorToolbarSection">
+                                        <TextBlock Text="{x:Bind Title}" />
+                                    </DataTemplate>
+                                </controls:WinoPivotControl.DataTemplate>
+                            </controls:WinoPivotControl>
+                        </CommandBar.Content>
+                    </CommandBar>
+                </Grid>
+
+                <!--  Editor Options  -->
+                <ScrollViewer
+                    Grid.Row="1"
+                    Margin="0,6"
+                    VerticalAlignment="Top"
+                    HorizontalScrollBarVisibility="Hidden"
+                    HorizontalScrollMode="Enabled"
+                    VerticalScrollBarVisibility="Hidden"
+                    VerticalScrollMode="Disabled">
+                    <Grid Margin="16,0,16,20" Padding="8,0">
+                        <!--  Format Panel  -->
+                        <Grid x:Name="FormatPanel" Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
+                            <StackPanel Orientation="Horizontal" Spacing="12">
+                                <ToggleButton
+                                    x:Name="BoldButton"
+                                    Height="32"
+                                    Click="BoldButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource BoldPathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+                                <ToggleButton
+                                    x:Name="ItalicButton"
+                                    Height="32"
+                                    Click="ItalicButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource ItalicPathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+                                <ToggleButton
+                                    x:Name="UnderlineButton"
+                                    Height="32"
+                                    Click="UnderlineButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource UnderlinePathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+                                <ToggleButton
+                                    x:Name="StrokeButton"
+                                    Height="32"
+                                    Click="StrokeButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource StrikePathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+
+                                <AppBarSeparator />
+
+                                <ToggleButton
+                                    x:Name="BulletListButton"
+                                    Height="32"
+                                    Click="BulletListButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource BulletedListPathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+
+                                <ToggleButton
+                                    x:Name="OrderedListButton"
+                                    Height="32"
+                                    Click="OrderedListButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource OrderedListPathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+
+                                <Button
+                                    x:Name="DecreaseIndentButton"
+                                    Height="32"
+                                    Click="DecreaseIndentClicked">
+                                    <Button.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
+                                        </Viewbox>
+                                    </Button.Content>
+                                </Button>
+
+                                <Button
+                                    x:Name="IncreaseIndentButton"
+                                    Height="32"
+                                    Click="IncreaseIndentClicked">
+                                    <Button.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
+                                        </Viewbox>
+                                    </Button.Content>
+                                </Button>
+
+                                <AppBarSeparator />
+
+                                <ToggleButton
+                                    x:Name="DirectionButton"
+                                    Height="32"
+                                    Click="DirectionButtonClicked">
+                                    <ToggleButton.Content>
+                                        <Viewbox Width="16">
+                                            <PathIcon Data="{StaticResource ParagraphPathIcon}" />
+                                        </Viewbox>
+                                    </ToggleButton.Content>
+                                </ToggleButton>
+
+                                <ComboBox
+                                    x:Name="AlignmentListView"
+                                    Width="120"
+                                    Height="32"
+                                    VerticalAlignment="Center"
+                                    SelectionChanged="AlignmentChanged">
+                                    <ComboBoxItem Tag="left">
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16">
+                                                <PathIcon Data="{StaticResource AlignLeftPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Left}" />
+                                        </StackPanel>
+                                    </ComboBoxItem>
+
+                                    <ComboBoxItem Tag="center">
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16">
+                                                <PathIcon Data="{StaticResource AlignCenterPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Center}" />
+                                        </StackPanel>
+                                    </ComboBoxItem>
+
+                                    <ComboBoxItem Tag="right">
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16">
+                                                <PathIcon Data="{StaticResource AlignRightPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Right}" />
+                                        </StackPanel>
+                                    </ComboBoxItem>
+
+                                    <ComboBoxItem Tag="justify">
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16">
+                                                <PathIcon Data="{StaticResource AlignJustifyPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Justify}" />
+                                        </StackPanel>
+                                    </ComboBoxItem>
+                                </ComboBox>
+                            </StackPanel>
+                        </Grid>
+
+                        <!--  Insert Panel  -->
+                        <Grid x:Name="InsertPanel" Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
+                            <StackPanel Orientation="Horizontal" Spacing="12">
+                                <Button
+                                    x:Name="FilesButton"
+                                    Height="32"
+                                    Click="AddFilesClicked">
+                                    <Button.Content>
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16" VerticalAlignment="Center">
+                                                <PathIcon Data="{StaticResource AttachPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock Text="{x:Bind domain:Translator.Files}" />
+                                        </StackPanel>
+                                    </Button.Content>
+                                </Button>
+
+                                <Button
+                                    x:Name="AddImageButton"
+                                    Height="32"
+                                    Click="AddImageClicked">
+                                    <Button.Content>
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16" VerticalAlignment="Center">
+                                                <PathIcon Data="{StaticResource AddPhotoPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock Text="{x:Bind domain:Translator.Photos}" />
+                                        </StackPanel>
+                                    </Button.Content>
+                                </Button>
+
+                                <Button
+                                    x:Name="EmojiButton"
+                                    Height="32"
+                                    Click="EmojiButtonClicked">
+                                    <Button.Content>
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16" VerticalAlignment="Center">
+                                                <PathIcon Data="{StaticResource EmojiPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock Text="{x:Bind domain:Translator.Emoji}" />
+                                        </StackPanel>
+                                    </Button.Content>
+                                </Button>
+
+                                <Button
+                                    x:Name="LinkButton"
+                                    Height="32"
+                                    Click="LinkButtonClicked">
+                                    <Button.Flyout>
+                                        <Flyout x:Name="HyperlinkFlyout">
+                                            <StackPanel Width="250" Spacing="6">
+                                                <TextBox x:Name="HyperlinkTextBox" Header="Text" />
+                                                <TextBox
+                                                    x:Name="LinkUrlTextBox"
+                                                    Header="Link"
+                                                    PlaceholderText="https://" />
+                                                <Button
+                                                    x:Name="AddHyperlinkButton"
+                                                    Margin="0,6"
+                                                    HorizontalAlignment="Stretch"
+                                                    Click="HyperlinkAddClicked"
+                                                    Content="{x:Bind domain:Translator.AddHyperlink}" />
+                                            </StackPanel>
+                                        </Flyout>
+                                    </Button.Flyout>
+                                    <Button.Content>
+                                        <StackPanel Orientation="Horizontal" Spacing="8">
+                                            <Viewbox Width="16" VerticalAlignment="Center">
+                                                <PathIcon Data="{StaticResource AddLinkPathIcon}" />
+                                            </Viewbox>
+                                            <TextBlock Text="Link" />
+                                        </StackPanel>
+                                    </Button.Content>
+                                </Button>
+                            </StackPanel>
+                        </Grid>
+
+                        <!--  Draw Panel  -->
+                        <Grid x:Name="DrawPanel" Visibility="{x:Bind helpers:XamlHelpers.IsDrawSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
+                            <TextBlock Text="{x:Bind domain:Translator.ComingSoon}" />
+                        </Grid>
+
+                        <!--  Options Panel  -->
+                        <Grid x:Name="OptionsPanel" Visibility="{x:Bind helpers:XamlHelpers.IsOptionsSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
+                            <muxc:ToggleSplitButton x:Name="ImportanceSplitButton" IsChecked="{x:Bind ViewModel.IsImportanceSelected, Mode=TwoWay}">
+                                <SymbolIcon x:Name="ImportanceSplitButtonContent" Symbol="Important" />
+                                <muxc:ToggleSplitButton.Flyout>
+                                    <Flyout x:Name="ImportanceFlyout" Placement="Bottom">
+                                        <StackPanel Orientation="Horizontal">
+                                            <StackPanel.Resources>
+                                                <Style TargetType="Button">
+                                                    <Setter Property="Padding" Value="4" />
+                                                    <Setter Property="MinWidth" Value="0" />
+                                                    <Setter Property="MinHeight" Value="0" />
+                                                    <Setter Property="Margin" Value="6" />
+                                                    <Setter Property="CornerRadius" Value="{StaticResource ControlCornerRadius}" />
+                                                </Style>
+                                            </StackPanel.Resources>
+                                            <Button Click="ImportanceClicked">
+                                                <Button.Tag>
+                                                    <mailkit:MessageImportance>High</mailkit:MessageImportance>
+                                                </Button.Tag>
+                                                <SymbolIcon Symbol="Important" />
+                                            </Button>
+                                            <Button Click="ImportanceClicked">
+                                                <Button.Tag>
+                                                    <mailkit:MessageImportance>Low</mailkit:MessageImportance>
+                                                </Button.Tag>
+                                                <SymbolIcon Symbol="Download" />
+                                            </Button>
+                                        </StackPanel>
+                                    </Flyout>
+                                </muxc:ToggleSplitButton.Flyout>
+                            </muxc:ToggleSplitButton>
+                        </Grid>
+                    </Grid>
+                </ScrollViewer>
+
+                <!--  Mime Info  -->
+                <Grid
+                    Grid.Row="2"
+                    Padding="16,0"
+                    ColumnSpacing="12"
+                    RowSpacing="3">
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
+
+                    <!--  From  -->
+                    <TextBlock
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Text="{x:Bind domain:Translator.ComposerFrom}" />
+
+                    <ComboBox
+                        x:Name="AccountsComboBox"
+                        Grid.Column="1"
+                        IsEditable="False"
+                        IsEnabled="False"
+                        ItemsSource="{x:Bind ViewModel.Accounts}"
+                        SelectedItem="{x:Bind ViewModel.ComposingAccount, Mode=TwoWay}">
+                        <ComboBox.ItemTemplate>
+                            <DataTemplate x:DataType="entities:MailAccount">
+                                <TextBlock>
+                                    <Run Text="{x:Bind Name}" /><Run Text=" (" /><Run Text="{x:Bind Address}" /><Run Text=")" />
+                                </TextBlock>
+                            </DataTemplate>
+                        </ComboBox.ItemTemplate>
+                    </ComboBox>
+
+                    <!--  To  -->
+                    <TextBlock
+                        Grid.Row="2"
+                        Margin="0,4,0,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Text="{x:Bind domain:Translator.ComposerTo}" />
+
+                    <Grid
+                        Grid.Row="2"
+                        Grid.Column="1"
+                        VerticalAlignment="Center">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+
+                        <controls1:TokenizingTextBox
+                            x:Name="ToBox"
+                            Grid.Column="0"
+                            VerticalAlignment="Center"
+                            BorderThickness="0"
+                            ItemsSource="{x:Bind ViewModel.ToItems, Mode=OneTime}"
+                            LostFocus="AddressBoxLostFocus"
+                            PlaceholderText="{x:Bind domain:Translator.ComposerToPlaceholder}"
+                            SuggestedItemTemplate="{StaticResource SuggestionBoxTemplate}"
+                            Tag="ToBox"
+                            TokenDelimiter=";"
+                            TokenItemAdding="TokenItemAdding"
+                            TokenItemTemplate="{StaticResource TokenBoxTemplate}" />
+
+                        <Button
+                            x:Name="CCBCCShowButton"
+                            Grid.Column="1"
+                            Margin="6,6,0,0"
+                            VerticalAlignment="Center"
+                            Click="ShowCCBCCClicked"
+                            GotFocus="CCBBCGotFocus"
+                            Visibility="{x:Bind ViewModel.IsCCBCCVisible, Mode=OneWay}">
+                            <StackPanel Orientation="Horizontal" Spacing="6">
+                                <PathIcon
+                                    HorizontalAlignment="Center"
+                                    VerticalAlignment="Center"
+                                    Data="F1 M 3.75 4.902344 C 3.75 4.225262 3.885091 3.588867 4.155273 2.993164 C 4.425456 2.397461 4.790039 1.878256 5.249023 1.435547 C 5.708008 0.99284 6.238606 0.642904 6.84082 0.385742 C 7.443034 0.128582 8.079427 0 8.75 0 C 9.420572 0 10.056966 0.128582 10.65918 0.385742 C 11.261393 0.642904 11.791992 0.99284 12.250977 1.435547 C 12.709961 1.878256 13.074544 2.397461 13.344727 2.993164 C 13.614908 3.588867 13.75 4.225262 13.75 4.902344 C 13.75 5.332031 13.707682 5.742188 13.623047 6.132812 C 13.538411 6.523438 13.395182 6.907553 13.193359 7.285156 C 12.307942 7.434896 11.484375 7.734375 10.722656 8.183594 C 11.295572 7.819012 11.735025 7.353517 12.041016 6.787109 C 12.347005 6.220704 12.5 5.598959 12.5 4.921875 C 12.5 4.414062 12.399088 3.937176 12.197266 3.491211 C 11.995442 3.045248 11.723633 2.65625 11.381836 2.324219 C 11.040039 1.992188 10.641275 1.730145 10.185547 1.538086 C 9.729817 1.346029 9.251302 1.25 8.75 1.25 C 8.229166 1.25 7.740885 1.347656 7.285156 1.542969 C 6.829427 1.738281 6.432292 2.005209 6.09375 2.34375 C 5.755208 2.682293 5.488281 3.079428 5.292969 3.535156 C 5.097656 3.990887 5 4.479167 5 5 C 5 5.501303 5.096028 5.979818 5.288086 6.435547 C 5.480143 6.891276 5.742188 7.290039 6.074219 7.631836 C 6.40625 7.973633 6.795247 8.245443 7.241211 8.447266 C 7.687174 8.649089 8.164062 8.75 8.671875 8.75 C 9.023438 8.75 9.360352 8.709311 9.682617 8.62793 C 10.004883 8.54655 10.322266 8.417969 10.634766 8.242188 C 9.873047 8.704428 9.222005 9.290365 8.681641 10 L 8.662109 10 C 8.011067 10 7.389323 9.868164 6.796875 9.604492 C 6.204427 9.34082 5.681966 8.984375 5.229492 8.535156 C 4.777018 8.085938 4.417317 7.565104 4.150391 6.972656 C 3.883463 6.380209 3.75 5.755209 3.75 5.097656 Z M 8.75 14.375 C 8.75 13.600261 8.898111 12.871094 9.194336 12.1875 C 9.49056 11.503906 9.892578 10.908203 10.400391 10.400391 C 10.908203 9.892578 11.503906 9.490561 12.1875 9.194336 C 12.871093 8.898112 13.60026 8.75 14.375 8.75 C 14.889322 8.75 15.385741 8.816732 15.864258 8.950195 C 16.342773 9.083659 16.790363 9.272461 17.207031 9.516602 C 17.623697 9.760742 18.004557 10.055339 18.349609 10.400391 C 18.69466 10.745443 18.989258 11.126303 19.233398 11.542969 C 19.477539 11.959636 19.66634 12.407227 19.799805 12.885742 C 19.933268 13.364258 20 13.860678 20 14.375 C 20 15.14974 19.851887 15.878906 19.555664 16.5625 C 19.259439 17.246094 18.857422 17.841797 18.349609 18.349609 C 17.841797 18.857422 17.246094 19.259439 16.5625 19.555664 C 15.878906 19.851889 15.149739 20 14.375 20 C 13.59375 20 12.861328 19.853516 12.177734 19.560547 C 11.494141 19.267578 10.898438 18.867188 10.390625 18.359375 C 9.882812 17.851562 9.482422 17.255859 9.189453 16.572266 C 8.896484 15.888672 8.75 15.15625 8.75 14.375 Z M 0 13.701172 C 0 13.375651 0.066732 13.064779 0.200195 12.768555 C 0.333659 12.472331 0.512695 12.211914 0.737305 11.987305 C 0.961914 11.762695 1.222331 11.583659 1.518555 11.450195 C 1.814779 11.316732 2.125651 11.25 2.451172 11.25 L 7.900391 11.25 C 7.809244 11.451823 7.722981 11.656901 7.641602 11.865234 C 7.560221 12.073568 7.490234 12.285156 7.431641 12.5 L 2.5 12.5 C 2.324219 12.5 2.161458 12.532553 2.011719 12.597656 C 1.861979 12.662761 1.730143 12.752279 1.616211 12.866211 C 1.502279 12.980144 1.41276 13.111979 1.347656 13.261719 C 1.282552 13.411459 1.25 13.574219 1.25 13.75 C 1.25 14.407553 1.359049 14.986979 1.577148 15.488281 C 1.795247 15.989584 2.091471 16.425781 2.46582 16.796875 C 2.840169 17.167969 3.273112 17.478842 3.764648 17.729492 C 4.256185 17.980143 4.777018 18.180338 5.327148 18.330078 C 5.877278 18.479818 6.438802 18.58724 7.011719 18.652344 C 7.584635 18.717447 8.138021 18.75 8.671875 18.75 C 8.847656 18.977865 9.033203 19.192709 9.228516 19.394531 C 9.423828 19.596354 9.635416 19.785156 9.863281 19.960938 C 9.674479 19.973959 9.488932 19.983725 9.306641 19.990234 C 9.124349 19.996744 8.938802 20 8.75 20 C 7.897135 20 7.042643 19.939779 6.186523 19.819336 C 5.330403 19.698893 4.511719 19.462891 3.730469 19.111328 C 3.157552 18.850912 2.641602 18.543295 2.182617 18.188477 C 1.723633 17.833658 1.333008 17.431641 1.010742 16.982422 C 0.688477 16.533203 0.439453 16.035156 0.263672 15.488281 C 0.087891 14.941406 0 14.345703 0 13.701172 Z M 15 15 L 16.875 15 C 17.04427 15 17.190754 14.938151 17.314453 14.814453 C 17.43815 14.690756 17.5 14.544271 17.5 14.375 C 17.5 14.205729 17.43815 14.059245 17.314453 13.935547 C 17.190754 13.81185 17.04427 13.75 16.875 13.75 L 15 13.75 L 15 11.875 C 14.999999 11.705729 14.93815 11.559245 14.814453 11.435547 C 14.690755 11.31185 14.544271 11.25 14.375 11.25 C 14.205729 11.25 14.059244 11.31185 13.935547 11.435547 C 13.811849 11.559245 13.75 11.705729 13.75 11.875 L 13.75 13.75 L 11.875 13.75 C 11.705729 13.75 11.559244 13.81185 11.435547 13.935547 C 11.311849 14.059245 11.25 14.205729 11.25 14.375 C 11.25 14.544271 11.311849 14.690756 11.435547 14.814453 C 11.559244 14.938151 11.705729 15 11.875 15 L 13.75 15 L 13.75 16.875 C 13.75 17.044271 13.811849 17.190756 13.935547 17.314453 C 14.059244 17.43815 14.205729 17.5 14.375 17.5 C 14.544271 17.5 14.690755 17.43815 14.814453 17.314453 C 14.93815 17.190756 14.999999 17.044271 15 16.875 Z " />
+                                <TextBlock VerticalAlignment="Center" Text="Cc &amp; Bcc" />
+                            </StackPanel>
+                        </Button>
+                    </Grid>
+
+                    <!--  CC BCC  -->
+                    <TextBlock
+                        x:Name="CCTextBlock"
+                        Grid.Row="3"
+                        Margin="0,4,0,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Text="Cc: "
+                        Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}" />
+
+                    <controls1:TokenizingTextBox
+                        x:Name="CCBox"
+                        Grid.Row="3"
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        LostFocus="AddressBoxLostFocus"
+                        PlaceholderText="{x:Bind domain:Translator.ComposerToPlaceholder}"
+                        SuggestedItemTemplate="{StaticResource SuggestionBoxTemplate}"
+                        Tag="CCBox"
+                        TokenDelimiter=";"
+                        TokenItemAdding="TokenItemAdding"
+                        TokenItemTemplate="{StaticResource TokenBoxTemplate}"
+                        Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}" />
+
+                    <TextBlock
+                        x:Name="BccTextBlock"
+                        Grid.Row="4"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Text="Bcc: "
+                        Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}" />
+
+                    <controls1:TokenizingTextBox
+                        x:Name="BccBox"
+                        Grid.Row="4"
+                        Grid.Column="1"
+                        VerticalAlignment="Center"
+                        LostFocus="AddressBoxLostFocus"
+                        PlaceholderText="{x:Bind domain:Translator.ComposerToPlaceholder}"
+                        SuggestedItemTemplate="{StaticResource SuggestionBoxTemplate}"
+                        Tag="BCCBox"
+                        TokenDelimiter=";"
+                        TokenItemAdding="TokenItemAdding"
+                        TokenItemTemplate="{StaticResource TokenBoxTemplate}"
+                        Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}" />
+
+                    <!--  Subject  -->
+                    <TextBlock
+                        Grid.Row="5"
+                        Margin="0,4,0,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Text="{x:Bind domain:Translator.ComposerSubject}" />
+
+                    <TextBox
+                        Grid.Row="5"
+                        Grid.Column="1"
+                        Margin="0,4,0,0"
+                        BorderThickness="0"
+                        Text="{x:Bind ViewModel.Subject, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
+
+                    <!--  Attachments  -->
+                    <ListView
+                        x:Name="AttachmentsListView"
+                        Grid.Row="6"
+                        Grid.ColumnSpan="2"
+                        x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.IncludedAttachments.Count), Mode=OneWay}"
+                        IsItemClickEnabled="True"
+                        ItemClick="AttachmentClicked"
+                        ItemTemplate="{StaticResource ComposerFileAttachmentTemplate}"
+                        ItemsSource="{x:Bind ViewModel.IncludedAttachments, Mode=OneWay}"
+                        SelectionMode="None">
+                        <ListView.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <controls1:WrapPanel Orientation="Horizontal" />
+                            </ItemsPanelTemplate>
+                        </ListView.ItemsPanel>
+                    </ListView>
+                </Grid>
+
+                <!--  Dropzone  -->
+                <Grid
+                    Grid.Row="0"
+                    Grid.RowSpan="3"
+                    AllowDrop="True"
+                    DragLeave="OnFileDropGridDragLeave"
+                    DragOver="OnFileDropGridDragOver"
+                    Drop="OnFileDropGridFileDropped"
+                    Visibility="{x:Bind ViewModel.IsDraggingOverComposerGrid, Mode=OneWay}">
+                    <Grid
+                        Margin="0,7,5,0"
+                        Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
+                        CornerRadius="9">
+                        <Rectangle
+                            x:Name="DropZoneBorder"
+                            Fill="Transparent"
+                            Opacity="0.5"
+                            RadiusX="9"
+                            RadiusY="9"
+                            Stroke="{ThemeResource TextFillColorPrimaryBrush}"
+                            StrokeDashArray="3,4"
+                            StrokeThickness="2" />
+                        <TextBlock
+                            x:Name="DropZoneText"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
-                            Data="F1 M 3.75 4.902344 C 3.75 4.225262 3.885091 3.588867 4.155273 2.993164 C 4.425456 2.397461 4.790039 1.878256 5.249023 1.435547 C 5.708008 0.99284 6.238606 0.642904 6.84082 0.385742 C 7.443034 0.128582 8.079427 0 8.75 0 C 9.420572 0 10.056966 0.128582 10.65918 0.385742 C 11.261393 0.642904 11.791992 0.99284 12.250977 1.435547 C 12.709961 1.878256 13.074544 2.397461 13.344727 2.993164 C 13.614908 3.588867 13.75 4.225262 13.75 4.902344 C 13.75 5.332031 13.707682 5.742188 13.623047 6.132812 C 13.538411 6.523438 13.395182 6.907553 13.193359 7.285156 C 12.307942 7.434896 11.484375 7.734375 10.722656 8.183594 C 11.295572 7.819012 11.735025 7.353517 12.041016 6.787109 C 12.347005 6.220704 12.5 5.598959 12.5 4.921875 C 12.5 4.414062 12.399088 3.937176 12.197266 3.491211 C 11.995442 3.045248 11.723633 2.65625 11.381836 2.324219 C 11.040039 1.992188 10.641275 1.730145 10.185547 1.538086 C 9.729817 1.346029 9.251302 1.25 8.75 1.25 C 8.229166 1.25 7.740885 1.347656 7.285156 1.542969 C 6.829427 1.738281 6.432292 2.005209 6.09375 2.34375 C 5.755208 2.682293 5.488281 3.079428 5.292969 3.535156 C 5.097656 3.990887 5 4.479167 5 5 C 5 5.501303 5.096028 5.979818 5.288086 6.435547 C 5.480143 6.891276 5.742188 7.290039 6.074219 7.631836 C 6.40625 7.973633 6.795247 8.245443 7.241211 8.447266 C 7.687174 8.649089 8.164062 8.75 8.671875 8.75 C 9.023438 8.75 9.360352 8.709311 9.682617 8.62793 C 10.004883 8.54655 10.322266 8.417969 10.634766 8.242188 C 9.873047 8.704428 9.222005 9.290365 8.681641 10 L 8.662109 10 C 8.011067 10 7.389323 9.868164 6.796875 9.604492 C 6.204427 9.34082 5.681966 8.984375 5.229492 8.535156 C 4.777018 8.085938 4.417317 7.565104 4.150391 6.972656 C 3.883463 6.380209 3.75 5.755209 3.75 5.097656 Z M 8.75 14.375 C 8.75 13.600261 8.898111 12.871094 9.194336 12.1875 C 9.49056 11.503906 9.892578 10.908203 10.400391 10.400391 C 10.908203 9.892578 11.503906 9.490561 12.1875 9.194336 C 12.871093 8.898112 13.60026 8.75 14.375 8.75 C 14.889322 8.75 15.385741 8.816732 15.864258 8.950195 C 16.342773 9.083659 16.790363 9.272461 17.207031 9.516602 C 17.623697 9.760742 18.004557 10.055339 18.349609 10.400391 C 18.69466 10.745443 18.989258 11.126303 19.233398 11.542969 C 19.477539 11.959636 19.66634 12.407227 19.799805 12.885742 C 19.933268 13.364258 20 13.860678 20 14.375 C 20 15.14974 19.851887 15.878906 19.555664 16.5625 C 19.259439 17.246094 18.857422 17.841797 18.349609 18.349609 C 17.841797 18.857422 17.246094 19.259439 16.5625 19.555664 C 15.878906 19.851889 15.149739 20 14.375 20 C 13.59375 20 12.861328 19.853516 12.177734 19.560547 C 11.494141 19.267578 10.898438 18.867188 10.390625 18.359375 C 9.882812 17.851562 9.482422 17.255859 9.189453 16.572266 C 8.896484 15.888672 8.75 15.15625 8.75 14.375 Z M 0 13.701172 C 0 13.375651 0.066732 13.064779 0.200195 12.768555 C 0.333659 12.472331 0.512695 12.211914 0.737305 11.987305 C 0.961914 11.762695 1.222331 11.583659 1.518555 11.450195 C 1.814779 11.316732 2.125651 11.25 2.451172 11.25 L 7.900391 11.25 C 7.809244 11.451823 7.722981 11.656901 7.641602 11.865234 C 7.560221 12.073568 7.490234 12.285156 7.431641 12.5 L 2.5 12.5 C 2.324219 12.5 2.161458 12.532553 2.011719 12.597656 C 1.861979 12.662761 1.730143 12.752279 1.616211 12.866211 C 1.502279 12.980144 1.41276 13.111979 1.347656 13.261719 C 1.282552 13.411459 1.25 13.574219 1.25 13.75 C 1.25 14.407553 1.359049 14.986979 1.577148 15.488281 C 1.795247 15.989584 2.091471 16.425781 2.46582 16.796875 C 2.840169 17.167969 3.273112 17.478842 3.764648 17.729492 C 4.256185 17.980143 4.777018 18.180338 5.327148 18.330078 C 5.877278 18.479818 6.438802 18.58724 7.011719 18.652344 C 7.584635 18.717447 8.138021 18.75 8.671875 18.75 C 8.847656 18.977865 9.033203 19.192709 9.228516 19.394531 C 9.423828 19.596354 9.635416 19.785156 9.863281 19.960938 C 9.674479 19.973959 9.488932 19.983725 9.306641 19.990234 C 9.124349 19.996744 8.938802 20 8.75 20 C 7.897135 20 7.042643 19.939779 6.186523 19.819336 C 5.330403 19.698893 4.511719 19.462891 3.730469 19.111328 C 3.157552 18.850912 2.641602 18.543295 2.182617 18.188477 C 1.723633 17.833658 1.333008 17.431641 1.010742 16.982422 C 0.688477 16.533203 0.439453 16.035156 0.263672 15.488281 C 0.087891 14.941406 0 14.345703 0 13.701172 Z M 15 15 L 16.875 15 C 17.04427 15 17.190754 14.938151 17.314453 14.814453 C 17.43815 14.690756 17.5 14.544271 17.5 14.375 C 17.5 14.205729 17.43815 14.059245 17.314453 13.935547 C 17.190754 13.81185 17.04427 13.75 16.875 13.75 L 15 13.75 L 15 11.875 C 14.999999 11.705729 14.93815 11.559245 14.814453 11.435547 C 14.690755 11.31185 14.544271 11.25 14.375 11.25 C 14.205729 11.25 14.059244 11.31185 13.935547 11.435547 C 13.811849 11.559245 13.75 11.705729 13.75 11.875 L 13.75 13.75 L 11.875 13.75 C 11.705729 13.75 11.559244 13.81185 11.435547 13.935547 C 11.311849 14.059245 11.25 14.205729 11.25 14.375 C 11.25 14.544271 11.311849 14.690756 11.435547 14.814453 C 11.559244 14.938151 11.705729 15 11.875 15 L 13.75 15 L 13.75 16.875 C 13.75 17.044271 13.811849 17.190756 13.935547 17.314453 C 14.059244 17.43815 14.205729 17.5 14.375 17.5 C 14.544271 17.5 14.690755 17.43815 14.814453 17.314453 C 14.93815 17.190756 14.999999 17.044271 15 16.875 Z " />
-                        <TextBlock VerticalAlignment="Center" Text="Cc &amp; Bcc" />
-                    </StackPanel>
-                </Button>
+                            FontSize="20"
+                            FontWeight="SemiBold"
+                            Opacity="0.5"
+                            Text="{x:Bind domain:Translator.ComposerAttachmentsDropZone_Message}" />
+                    </Grid>
+                </Grid>
+
+                <VisualStateManager.VisualStateGroups>
+                    <VisualStateGroup x:Name="ComposerThemeToggleButtonStates">
+                        <VisualState x:Name="DarkMode">
+                            <VisualState.StateTriggers>
+                                <StateTrigger IsActive="{x:Bind IsComposerDarkMode, Mode=OneWay}" />
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Target="ComposerThemeToggleButton.Label" Value="Light Reader" />
+                                <Setter Target="ComposerThemeToggleButton.Icon">
+                                    <Setter.Value>
+                                        <controls:WinoFontIcon Icon="LightEditor" />
+                                    </Setter.Value>
+                                </Setter>
+                            </VisualState.Setters>
+                        </VisualState>
+
+                        <VisualState x:Name="LightMode" />
+                    </VisualStateGroup>
+                    <VisualStateGroup x:Name="DropZoneState">
+                        <VisualState x:Name="Hovered">
+                            <VisualState.StateTriggers>
+                                <StateTrigger IsActive="{x:Bind ViewModel.IsDraggingOverDropZone, Mode=OneWay}" />
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Target="DropZoneText.Opacity" Value="1" />
+                                <Setter Target="DropZoneBorder.Opacity" Value="1" />
+                            </VisualState.Setters>
+                        </VisualState>
+                        <VisualState x:Name="NotHovered" />
+                    </VisualStateGroup>
+                </VisualStateManager.VisualStateGroups>
             </Grid>
+        </Border>
+        <Border
+            Grid.Row="1"
+            Background="{ThemeResource WorkZoneBackground}"
+            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="10">
+            <Grid>
+                <Grid Background="White" Visibility="{x:Bind IsComposerDarkMode, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
 
-            <!--  CC BCC  -->
-            <TextBlock
-                x:Name="CCTextBlock"
-                Grid.Row="3"
-                Margin="0,4,0,0"
-                HorizontalAlignment="Right"
-                VerticalAlignment="Center"
-                Text="Cc: "
-                Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}" />
-
-            <controls1:TokenizingTextBox
-                x:Name="CCBox"
-                Grid.Row="3"
-                Grid.Column="1"
-                VerticalAlignment="Center"
-                LostFocus="AddressBoxLostFocus"
-                PlaceholderText="{x:Bind domain:Translator.ComposerToPlaceholder}"
-                SuggestedItemTemplate="{StaticResource SuggestionBoxTemplate}"
-                Tag="CCBox"
-                TokenItemAdding="TokenItemAdding"
-                TokenItemTemplate="{StaticResource TokenBoxTemplate}"
-                Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}"
-                TokenDelimiter=";" />
-
-            <TextBlock
-                x:Name="BccTextBlock"
-                Grid.Row="4"
-                HorizontalAlignment="Right"
-                VerticalAlignment="Center"
-                Text="Bcc: "
-                Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}" />
-
-            <controls1:TokenizingTextBox
-                x:Name="BccBox"
-                Grid.Row="4"
-                Grid.Column="1"
-                LostFocus="AddressBoxLostFocus"
-                VerticalAlignment="Center"
-                PlaceholderText="{x:Bind domain:Translator.ComposerToPlaceholder}"
-                Visibility="{x:Bind helpers:XamlHelpers.ReverseVisibilityConverter(CCBCCShowButton.Visibility), Mode=OneWay}"
-                SuggestedItemTemplate="{StaticResource SuggestionBoxTemplate}"
-                Tag="BCCBox"
-                TokenItemAdding="TokenItemAdding"
-                TokenItemTemplate="{StaticResource TokenBoxTemplate}"
-                TokenDelimiter=";" />
-
-            <!--  Subject  -->
-            <TextBlock
-                Grid.Row="5"
-                Margin="0,4,0,0"
-                HorizontalAlignment="Right"
-                VerticalAlignment="Center"
-                Text="{x:Bind domain:Translator.ComposerSubject}" />
-
-            <TextBox
-                Grid.Row="5"
-                Grid.Column="1"
-                Margin="0,4,0,0"
-                BorderThickness="0"
-                Text="{x:Bind ViewModel.Subject, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
-
-            <!--  Attachments  -->
-            <ListView
-                x:Name="AttachmentsListView"
-                Grid.Row="6"
-                Grid.ColumnSpan="2"
-                x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.IncludedAttachments.Count), Mode=OneWay}"
-                IsItemClickEnabled="True"
-                ItemTemplate="{StaticResource ComposerFileAttachmentTemplate}"
-                ItemsSource="{x:Bind ViewModel.IncludedAttachments, Mode=OneWay}"
-                ItemClick="AttachmentClicked"
-                SelectionMode="None">
-                <ListView.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <controls1:WrapPanel Orientation="Horizontal" />
-                    </ItemsPanelTemplate>
-                </ListView.ItemsPanel>
-            </ListView>
-        </Grid>
-
-        <!--  Dropzone  -->
-        <Grid
-            Grid.Row="0"
-            Grid.RowSpan="3"
-            Visibility="{x:Bind ViewModel.IsDraggingOverComposerGrid, Mode=OneWay}"
-            Drop="OnFileDropGridFileDropped"
-            DragOver="OnFileDropGridDragOver"
-            DragLeave="OnFileDropGridDragLeave"
-            AllowDrop="True">
-            <Grid
-                Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
-                CornerRadius="9"
-                Margin="0,7,5,0">
-                <Rectangle
-                    x:Name="DropZoneBorder"
-                    RadiusX="9"
-                    RadiusY="9"
-                    Fill="Transparent"
-                    Stroke="{ThemeResource TextFillColorPrimaryBrush}"
-                    Opacity="0.5"
-                    StrokeDashArray="3,4"
-                    StrokeThickness="2" />
-                <TextBlock
-                    x:Name="DropZoneText"
-                    HorizontalAlignment="Center"
-                    VerticalAlignment="Center"
-                    Opacity="0.5"
-                    FontSize="20"
-                    FontWeight="SemiBold"
-                    Text="{x:Bind domain:Translator.ComposerAttachmentsDropZone_Message}" />
+                <muxc:WebView2 x:Name="Chromium" />
             </Grid>
-        </Grid>
-
-        <Grid
-            Grid.Row="4"
-            CornerRadius="3"
-            Margin="0,6,0,0">
-            <Grid Background="White" Visibility="{x:Bind IsComposerDarkMode, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
-
-            <muxc:WebView2 x:Name="Chromium" />
-        </Grid>
-
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup x:Name="ComposerThemeToggleButtonStates">
-                <VisualState x:Name="DarkMode">
-                    <VisualState.StateTriggers>
-                        <StateTrigger IsActive="{x:Bind IsComposerDarkMode, Mode=OneWay}" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="ComposerThemeToggleButton.Label" Value="Light Reader" />
-                        <Setter Target="ComposerThemeToggleButton.Icon">
-                            <Setter.Value>
-                                <controls:WinoFontIcon Icon="LightEditor" />
-                            </Setter.Value>
-                        </Setter>
-                    </VisualState.Setters>
-                </VisualState>
-
-                <VisualState x:Name="LightMode" />
-            </VisualStateGroup>
-            <VisualStateGroup x:Name="DropZoneState">
-                <VisualState x:Name="Hovered">
-                    <VisualState.StateTriggers>
-                        <StateTrigger IsActive="{x:Bind ViewModel.IsDraggingOverDropZone, Mode=OneWay}" />
-                    </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="DropZoneText.Opacity" Value="1" />
-                        <Setter Target="DropZoneBorder.Opacity" Value="1" />
-                    </VisualState.Setters>
-                </VisualState>
-                <VisualState x:Name="NotHovered" />
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
+        </Border>
     </Grid>
+
+
 </abstract:ComposePageAbstract>
diff --git a/Wino.Mail/Views/MailListPage.xaml b/Wino.Mail/Views/MailListPage.xaml
index 91328aa4..b6dc7407 100644
--- a/Wino.Mail/Views/MailListPage.xaml
+++ b/Wino.Mail/Views/MailListPage.xaml
@@ -7,6 +7,7 @@
     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:enums="using:Wino.Core.Domain.Enums"
     xmlns:helpers="using:Wino.Helpers"
     xmlns:i="using:Microsoft.Xaml.Interactivity"
@@ -16,10 +17,9 @@
     xmlns:menuflyouts="using:Wino.MenuFlyouts"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:selectors="using:Wino.Selectors"
-    xmlns:domain="using:Wino.Core.Domain"
     xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
-    xmlns:wino="using:Wino"
     xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
+    xmlns:wino="using:Wino"
     x:Name="root"
     Loaded="MailListPageLoaded"
     mc:Ignorable="d">
@@ -66,8 +66,8 @@
                 CornerRadius="6">
                 <TextBlock
                     Padding="12"
-                    AllowFocusOnInteraction="False"
                     VerticalAlignment="Center"
+                    AllowFocusOnInteraction="False"
                     FontSize="13"
                     FontWeight="SemiBold"
                     Text="{x:Bind helpers:XamlHelpers.GetMailGroupDateString(Key)}" />
@@ -224,8 +224,6 @@
                 Tag="{x:Bind}">
                 <controls:MailItemDisplayInformationControl
                     x:DefaultBindMode="OneWay"
-                    MailItem="{Binding}"
-                    HoverActionExecutedCommand="{Binding ElementName=root, Path=ViewModel.ExecuteHoverActionCommand}"
                     CenterHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.CenterHoverAction, Mode=OneWay}"
                     ContextRequested="MailItemContextRequested"
                     DisplayMode="{Binding ElementName=root, Path=ViewModel.PreferencesService.MailItemDisplayMode, Mode=OneWay}"
@@ -237,15 +235,17 @@
                     FromAddress="{x:Bind FromAddress}"
                     FromName="{x:Bind FromName}"
                     HasAttachments="{x:Bind HasAttachments}"
+                    HoverActionExecutedCommand="{Binding ElementName=root, Path=ViewModel.ExecuteHoverActionCommand}"
                     IsAvatarVisible="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowSenderPicturesEnabled, Mode=OneWay}"
                     IsCustomFocused="{x:Bind IsCustomFocused, Mode=OneWay}"
                     IsDraft="{x:Bind IsDraft, Mode=OneWay}"
                     IsFlagged="{x:Bind IsFlagged, Mode=OneWay}"
+                    IsHoverActionsEnabled="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsHoverActionsEnabled, Mode=OneWay}"
                     IsRead="{x:Bind IsRead, Mode=OneWay}"
                     LeftHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.LeftHoverAction, Mode=OneWay}"
+                    MailItem="{Binding}"
                     Prefer24HourTimeFormat="{Binding ElementName=root, Path=ViewModel.PreferencesService.Prefer24HourTimeFormat, Mode=OneWay}"
                     ReceivedDate="{x:Bind CreationDate}"
-                    IsHoverActionsEnabled="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsHoverActionsEnabled, Mode=OneWay}"
                     RightHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.RightHoverAction, Mode=OneWay}"
                     ShowPreviewText="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowPreviewEnabled, Mode=OneWay}"
                     Snippet="{x:Bind PreviewText}"
@@ -261,13 +261,10 @@
                 Tag="{x:Bind}">
                 <controls:MailItemDisplayInformationControl
                     x:DefaultBindMode="OneWay"
-                    MailItem="{Binding}"
-                    HoverActionExecutedCommand="{Binding ElementName=root, Path=ViewModel.ExecuteHoverActionCommand}"
                     CenterHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.CenterHoverAction, Mode=OneWay}"
                     ContextRequested="MailItemContextRequested"
                     DisplayMode="{Binding ElementName=root, Path=ViewModel.PreferencesService.MailItemDisplayMode, Mode=OneWay}"
                     FocusVisualMargin="8"
-                    IsHoverActionsEnabled="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsHoverActionsEnabled, Mode=OneWay}"
                     FocusVisualPrimaryBrush="{StaticResource SystemControlRevealFocusVisualBrush}"
                     FocusVisualPrimaryThickness="2"
                     FocusVisualSecondaryBrush="{StaticResource SystemControlFocusVisualSecondaryBrush}"
@@ -275,13 +272,16 @@
                     FromAddress="{x:Bind FromAddress}"
                     FromName="{x:Bind FromName}"
                     HasAttachments="{x:Bind HasAttachments}"
+                    HoverActionExecutedCommand="{Binding ElementName=root, Path=ViewModel.ExecuteHoverActionCommand}"
                     IsAvatarVisible="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowSenderPicturesEnabled, Mode=OneWay}"
-                    Prefer24HourTimeFormat="{Binding ElementName=root, Path=ViewModel.PreferencesService.Prefer24HourTimeFormat, Mode=OneWay}"
                     IsCustomFocused="{x:Bind IsCustomFocused, Mode=OneWay}"
                     IsDraft="{x:Bind IsDraft, Mode=OneWay}"
                     IsFlagged="{x:Bind IsFlagged, Mode=OneWay}"
+                    IsHoverActionsEnabled="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsHoverActionsEnabled, Mode=OneWay}"
                     IsRead="{x:Bind IsRead, Mode=OneWay}"
                     LeftHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.LeftHoverAction, Mode=OneWay}"
+                    MailItem="{Binding}"
+                    Prefer24HourTimeFormat="{Binding ElementName=root, Path=ViewModel.PreferencesService.Prefer24HourTimeFormat, Mode=OneWay}"
                     ReceivedDate="{x:Bind CreationDate}"
                     RightHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.RightHoverAction, Mode=OneWay}"
                     ShowPreviewText="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowPreviewEnabled, Mode=OneWay}"
@@ -306,14 +306,8 @@
                                 x:DefaultBindMode="OneWay"
                                 Background="Transparent"
                                 BorderThickness="0"
-                                MailItem="{Binding}"
-                                Prefer24HourTimeFormat="{Binding ElementName=root, Path=ViewModel.PreferencesService.Prefer24HourTimeFormat, Mode=OneWay}"
                                 CanDrag="True"
-                                IsHoverActionsEnabled="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsHoverActionsEnabled, Mode=OneWay}"
-                                HoverActionExecutedCommand="{Binding ElementName=root, Path=ViewModel.ExecuteHoverActionCommand}"
-                                LeftHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.LeftHoverAction, Mode=OneWay}"
                                 CenterHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.CenterHoverAction, Mode=OneWay}"
-                                RightHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.RightHoverAction, Mode=OneWay}"
                                 ConnectedExpander="{Binding ElementName=ThreadExpander}"
                                 ContextRequested="MailItemContextRequested"
                                 DisplayMode="{Binding ElementName=root, Path=ViewModel.PreferencesService.MailItemDisplayMode, Mode=OneWay}"
@@ -321,13 +315,19 @@
                                 DropCompleted="ThreadHeaderDragFinished"
                                 FromAddress="{x:Bind FromAddress}"
                                 FromName="{x:Bind FromName}"
-                                IsHitTestVisible="True"
                                 HasAttachments="{x:Bind HasAttachments}"
+                                HoverActionExecutedCommand="{Binding ElementName=root, Path=ViewModel.ExecuteHoverActionCommand}"
                                 IsAvatarVisible="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowSenderPicturesEnabled, Mode=OneWay}"
                                 IsDraft="{x:Bind IsDraft}"
                                 IsFlagged="{x:Bind IsFlagged}"
+                                IsHitTestVisible="True"
+                                IsHoverActionsEnabled="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsHoverActionsEnabled, Mode=OneWay}"
                                 IsRead="{x:Bind IsRead}"
+                                LeftHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.LeftHoverAction, Mode=OneWay}"
+                                MailItem="{Binding}"
+                                Prefer24HourTimeFormat="{Binding ElementName=root, Path=ViewModel.PreferencesService.Prefer24HourTimeFormat, Mode=OneWay}"
                                 ReceivedDate="{x:Bind CreationDate}"
+                                RightHoverAction="{Binding ElementName=root, Path=ViewModel.PreferencesService.RightHoverAction, Mode=OneWay}"
                                 ShowPreviewText="{Binding ElementName=root, Path=ViewModel.PreferencesService.IsShowPreviewEnabled, Mode=OneWay}"
                                 Snippet="{x:Bind PreviewText}"
                                 Subject="{x:Bind Subject}" />
@@ -357,8 +357,8 @@
 
         <Style
             x:Key="TopCommandBarButtonStyle"
-            TargetType="Button"
-            BasedOn="{StaticResource DefaultButtonStyle}">
+            BasedOn="{StaticResource DefaultButtonStyle}"
+            TargetType="Button">
             <Setter Property="Background" Value="Transparent" />
             <Setter Property="BorderThickness" Value="0" />
             <Setter Property="VerticalAlignment" Value="Center" />
@@ -368,8 +368,8 @@
 
         <Style
             x:Key="TopCommandBarToggleButtonStyle"
-            TargetType="ToggleButton"
-            BasedOn="{StaticResource DefaultToggleButtonStyle}">
+            BasedOn="{StaticResource DefaultToggleButtonStyle}"
+            TargetType="ToggleButton">
             <Setter Property="Background" Value="Transparent" />
             <Setter Property="BorderThickness" Value="0" />
             <Setter Property="VerticalAlignment" Value="Center" />
@@ -381,7 +381,6 @@
     <wino:BasePage.ShellContent>
         <AutoSuggestBox
             x:Name="SearchBar"
-            Margin="0,0,8,0"
             VerticalAlignment="Center"
             BorderBrush="Transparent"
             GotFocus="SearchBoxFocused"
@@ -391,8 +390,8 @@
             PlaceholderText="{x:Bind domain:Translator.SearchBarPlaceholder}"
             QueryIcon="Find"
             TabIndex="1000"
-            TextChanged="SearchBar_TextChanged"
-            Text="{x:Bind ViewModel.SearchQuery, Mode=TwoWay}">
+            Text="{x:Bind ViewModel.SearchQuery, Mode=TwoWay}"
+            TextChanged="SearchBar_TextChanged">
             <i:Interaction.Behaviors>
                 <ic:EventTriggerBehavior EventName="QuerySubmitted">
                     <ic:InvokeCommandAction Command="{x:Bind ViewModel.PerformSearchCommand}" />
@@ -411,379 +410,383 @@
         </Grid.ColumnDefinitions>
 
         <!--  Mail Items  -->
-        <Grid
-            x:Name="ReaderGrid"
-            Margin="-1,0,0,0"
-            Padding="4,0,0,0"
-            HorizontalAlignment="Stretch"
-            Background="{ThemeResource ReadingPaneBackgroundColorBrush}"
-            CornerRadius="{ThemeResource MailListGridCornerRadius}">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="*" />
-            </Grid.RowDefinitions>
-
-            <!--  Top Area  -->
-            <Grid
-                Padding="6"
-                CornerRadius="8"
-                RowSpacing="4">
+        <Border
+            x:Name="ReaderGridContainer"
+            Grid.Column="0"
+            Margin="0,0,0,7"
+            Padding="5,0,0,0"
+            Background="{ThemeResource WorkZoneBackground}"
+            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="7">
+            <Grid x:Name="ReaderGrid">
                 <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="*" />
                 </Grid.RowDefinitions>
 
-                <!--  Top Commands  -->
+                <!--  Top Area  -->
                 <Grid
-                    Grid.Row="0"
-                    Padding="4"
-                    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
-                    CornerRadius="8">
-                    <!--  Commands  -->
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="Auto" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="*" />
-                    </Grid.ColumnDefinitions>
-
-                    <Button
-                        Style="{StaticResource TopCommandBarButtonStyle}"
-                        Command="{x:Bind ViewModel.SyncFolderCommand}"
-                        IsEnabled="{x:Bind ViewModel.CanSynchronize, Mode=OneWay}">
-                        <Button.Content>
-                            <controls:WinoFontIcon Icon="Sync" FontSize="16" />
-                        </Button.Content>
-                    </Button>
-
-                    <ToggleButton
-                        x:Name="SelectionModeToggle"
-                        Grid.Column="1"
-                        Style="{StaticResource TopCommandBarToggleButtonStyle}"
-                        Checked="SelectionModeToggleChecked"
-                        Unchecked="SelectionModeToggleUnchecked">
-                        <ToggleButton.Content>
-                            <controls:WinoFontIcon FontSize="18" Icon="MultiSelect" />
-                        </ToggleButton.Content>
-                    </ToggleButton>
-
-                    <AppBarSeparator Grid.Column="2" Margin="2,0" />
-
-                    <Button
-                        x:Name="ArchiveAppBarButton"
-                        Grid.Column="3"
-                        x:Load="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(ViewModel.IsArchiveSpecialFolder), Mode=OneWay}"
-                        Style="{StaticResource TopCommandBarButtonStyle}"
-                        Command="{x:Bind ViewModel.MailOperationCommand}"
-                        IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
-                        ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Archive}">
-                        <Button.Content>
-                            <controls:WinoFontIcon FontSize="18" Icon="Archive" />
-                        </Button.Content>
-                        <Button.CommandParameter>
-                            <enums:MailOperation>Archive</enums:MailOperation>
-                        </Button.CommandParameter>
-                    </Button>
-
-                    <Button
-                        x:Name="UnarchiveAppBarButton"
-                        Grid.Column="3"
-                        x:Load="{x:Bind ViewModel.IsArchiveSpecialFolder, Mode=OneWay}"
-                        Style="{StaticResource TopCommandBarButtonStyle}"
-                        Command="{x:Bind ViewModel.MailOperationCommand}"
-                        IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
-                        ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Unarchive}">
-                        <Button.Content>
-                            <controls:WinoFontIcon FontSize="18" Icon="UnArchive" />
-                        </Button.Content>
-                        <Button.CommandParameter>
-                            <enums:MailOperation>UnArchive</enums:MailOperation>
-                        </Button.CommandParameter>
-                    </Button>
-
-                    <Button
-                        Grid.Column="4"
-                        Style="{StaticResource TopCommandBarButtonStyle}"
-                        Command="{x:Bind ViewModel.MailOperationCommand}"
-                        IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
-                        ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Delete}">
-                        <Button.CommandParameter>
-                            <enums:MailOperation>SoftDelete</enums:MailOperation>
-                        </Button.CommandParameter>
-                        <Button.Content>
-                            <controls:WinoFontIcon FontSize="18" Icon="Delete" />
-                        </Button.Content>
-                    </Button>
-
-                    <Button
-                        x:Name="MoveButtonAppBarButton"
-                        Grid.Column="5"
-                        Command="{x:Bind ViewModel.MailOperationCommand}"
-                        IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
-                        Style="{StaticResource TopCommandBarButtonStyle}"
-                        ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Move}">
-                        <Button.CommandParameter>
-                            <enums:MailOperation>Move</enums:MailOperation>
-                        </Button.CommandParameter>
-                        <Button.Content>
-                            <controls:WinoFontIcon FontSize="18" Icon="Move" />
-                        </Button.Content>
-                    </Button>
-
-                    <Button
-                        Grid.Column="6"
-                        Style="{StaticResource TopCommandBarButtonStyle}"
-                        IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}">
-                        <Button.Content>
-                            <controls:WinoFontIcon FontSize="20" Icon="More" />
-                        </Button.Content>
-                        <Button.Flyout>
-                            <MenuFlyout AreOpenCloseAnimationsEnabled="False" Placement="BottomEdgeAlignedLeft">
-                                <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_SetFlag}">
-                                    <MenuFlyoutItem.CommandParameter>
-                                        <enums:MailOperation>SetFlag</enums:MailOperation>
-                                    </MenuFlyoutItem.CommandParameter>
-                                    <MenuFlyoutItem.Icon>
-                                        <controls:WinoFontIcon Icon="Flag" />
-                                    </MenuFlyoutItem.Icon>
-                                </MenuFlyoutItem>
-                                <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_ClearFlag}">
-                                    <MenuFlyoutItem.CommandParameter>
-                                        <enums:MailOperation>ClearFlag</enums:MailOperation>
-                                    </MenuFlyoutItem.CommandParameter>
-                                    <MenuFlyoutItem.Icon>
-                                        <controls:WinoFontIcon Icon="ClearFlag" />
-                                    </MenuFlyoutItem.Icon>
-                                </MenuFlyoutItem>
-                                <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_MarkAsRead}">
-                                    <MenuFlyoutItem.CommandParameter>
-                                        <enums:MailOperation>MarkAsRead</enums:MailOperation>
-                                    </MenuFlyoutItem.CommandParameter>
-                                    <MenuFlyoutItem.Icon>
-                                        <controls:WinoFontIcon Icon="MarkRead" />
-                                    </MenuFlyoutItem.Icon>
-                                </MenuFlyoutItem>
-                                <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_MarkAsUnread}">
-                                    <MenuFlyoutItem.CommandParameter>
-                                        <enums:MailOperation>MarkAsUnread</enums:MailOperation>
-                                    </MenuFlyoutItem.CommandParameter>
-                                    <MenuFlyoutItem.Icon>
-                                        <controls:WinoFontIcon Icon="MarkUnread" />
-                                    </MenuFlyoutItem.Icon>
-                                </MenuFlyoutItem>
-                            </MenuFlyout>
-                        </Button.Flyout>
-                    </Button>
-                </Grid>
-
-                <!--  Pivot + Sync + Multi Select  -->
-                <Grid
-                    Grid.Row="1"
-                    Margin="0,0,0,5"
-                    Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsInSearchMode), Mode=OneWay}">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto" />
-                        <ColumnDefinition Width="*" />
-                        <ColumnDefinition Width="Auto" />
-                    </Grid.ColumnDefinitions>
+                    Padding="6"
+                    CornerRadius="8"
+                    RowSpacing="4">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
-                        <RowDefinition Height="Auto" />
+                        <RowDefinition Height="*" />
                     </Grid.RowDefinitions>
 
-                    <!--  Select All Checkbox  -->
-                    <CheckBox
-                        x:Name="SelectAllCheckbox"
-                        Grid.Row="1"
-                        MinWidth="0"
-                        Margin="8,0,0,0"
-                        VerticalAlignment="Center"
-                        Canvas.ZIndex="100"
-                        Checked="SelectAllCheckboxChecked"
-                        Unchecked="SelectAllCheckboxUnchecked"
-                        Visibility="{x:Bind helpers:XamlHelpers.IsSelectionModeMultiple(MailListView.SelectionMode), Mode=OneWay}" />
-
-                    <!--  Folders  -->
-                    <controls:WinoPivotControl
-                        x:Name="WinoPivot"
-                        Grid.Row="1"
-                        Grid.Column="1"
-                        HorizontalAlignment="Left"
-                        VerticalAlignment="Center"
-                        DataTemplate="{StaticResource FolderPivotTemplate}"
-                        ItemsSource="{x:Bind ViewModel.PivotFolders, Mode=OneWay}"
-                        SelectedItem="{x:Bind ViewModel.SelectedFolderPivot, Mode=TwoWay}"
-                        SelectionChanged="FolderPivotChanged"
-                        SelectorPipeColor="{ThemeResource NavigationViewSelectionIndicatorForeground}" />
-
-                    <!--  Filtering  -->
-                    <muxc:DropDownButton
-                        Grid.Row="1"
-                        Grid.Column="2"
-                        Content="{x:Bind ViewModel.SelectedFilterOption.Title, Mode=OneWay}"
-                        ToolTipService.ToolTip="Filter">
-                        <muxc:DropDownButton.Flyout>
-                            <menuflyouts:FilterMenuFlyout
-                                x:Name="FilterMenuFlyout"
-                                AreOpenCloseAnimationsEnabled="True"
-                                FilterOptions="{x:Bind ViewModel.FilterOptions, Mode=OneTime}"
-                                Placement="Bottom"
-                                SelectedFilterChangedCommand="{x:Bind ViewModel.SelectedFilterChangedCommand}"
-                                SelectedFilterOption="{x:Bind ViewModel.SelectedFilterOption, Mode=TwoWay}"
-                                SelectedSortingOption="{x:Bind ViewModel.SelectedSortingOption, Mode=TwoWay}"
-                                SelectedSortingOptionChangedCommand="{x:Bind ViewModel.SelectedSortingChangedCommand}"
-                                SortingOptions="{x:Bind ViewModel.SortingOptions, Mode=OneTime}" />
-                        </muxc:DropDownButton.Flyout>
-                    </muxc:DropDownButton>
-
-                    <muxc:InfoBar
-                        Title="{x:Bind domain:Translator.InfoBarTitle_SynchronizationDisabledFolder}"
+                    <!--  Top Commands  -->
+                    <Grid
                         Grid.Row="0"
-                        Grid.ColumnSpan="3"
-                        IsClosable="True"
-                        IsOpen="{x:Bind ViewModel.IsFolderSynchronizationEnabled, Converter={StaticResource ReverseBooleanConverter}, Mode=OneWay}"
-                        Message="{x:Bind domain:Translator.InfoBarMessage_SynchronizationDisabledFolder}"
-                        Severity="Informational">
-                        <muxc:InfoBar.ActionButton>
-                            <Button Command="{x:Bind ViewModel.EnableFolderSynchronizationCommand}" Content="Enable" />
-                        </muxc:InfoBar.ActionButton>
-                    </muxc:InfoBar>
+                        Padding="4"
+                        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+                        CornerRadius="8">
+                        <!--  Commands  -->
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="*" />
+                        </Grid.ColumnDefinitions>
+
+                        <Button
+                            Command="{x:Bind ViewModel.SyncFolderCommand}"
+                            IsEnabled="{x:Bind ViewModel.CanSynchronize, Mode=OneWay}"
+                            Style="{StaticResource TopCommandBarButtonStyle}">
+                            <Button.Content>
+                                <controls:WinoFontIcon FontSize="16" Icon="Sync" />
+                            </Button.Content>
+                        </Button>
+
+                        <ToggleButton
+                            x:Name="SelectionModeToggle"
+                            Grid.Column="1"
+                            Checked="SelectionModeToggleChecked"
+                            Style="{StaticResource TopCommandBarToggleButtonStyle}"
+                            Unchecked="SelectionModeToggleUnchecked">
+                            <ToggleButton.Content>
+                                <controls:WinoFontIcon FontSize="18" Icon="MultiSelect" />
+                            </ToggleButton.Content>
+                        </ToggleButton>
+
+                        <AppBarSeparator Grid.Column="2" Margin="2,0" />
+
+                        <Button
+                            x:Name="ArchiveAppBarButton"
+                            Grid.Column="3"
+                            x:Load="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(ViewModel.IsArchiveSpecialFolder), Mode=OneWay}"
+                            Command="{x:Bind ViewModel.MailOperationCommand}"
+                            IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
+                            Style="{StaticResource TopCommandBarButtonStyle}"
+                            ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Archive}">
+                            <Button.Content>
+                                <controls:WinoFontIcon FontSize="18" Icon="Archive" />
+                            </Button.Content>
+                            <Button.CommandParameter>
+                                <enums:MailOperation>Archive</enums:MailOperation>
+                            </Button.CommandParameter>
+                        </Button>
+
+                        <Button
+                            x:Name="UnarchiveAppBarButton"
+                            Grid.Column="3"
+                            x:Load="{x:Bind ViewModel.IsArchiveSpecialFolder, Mode=OneWay}"
+                            Command="{x:Bind ViewModel.MailOperationCommand}"
+                            IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
+                            Style="{StaticResource TopCommandBarButtonStyle}"
+                            ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Unarchive}">
+                            <Button.Content>
+                                <controls:WinoFontIcon FontSize="18" Icon="UnArchive" />
+                            </Button.Content>
+                            <Button.CommandParameter>
+                                <enums:MailOperation>UnArchive</enums:MailOperation>
+                            </Button.CommandParameter>
+                        </Button>
+
+                        <Button
+                            Grid.Column="4"
+                            Command="{x:Bind ViewModel.MailOperationCommand}"
+                            IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
+                            Style="{StaticResource TopCommandBarButtonStyle}"
+                            ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Delete}">
+                            <Button.CommandParameter>
+                                <enums:MailOperation>SoftDelete</enums:MailOperation>
+                            </Button.CommandParameter>
+                            <Button.Content>
+                                <controls:WinoFontIcon FontSize="18" Icon="Delete" />
+                            </Button.Content>
+                        </Button>
+
+                        <Button
+                            x:Name="MoveButtonAppBarButton"
+                            Grid.Column="5"
+                            Command="{x:Bind ViewModel.MailOperationCommand}"
+                            IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
+                            Style="{StaticResource TopCommandBarButtonStyle}"
+                            ToolTipService.ToolTip="{x:Bind domain:Translator.MailOperation_Move}">
+                            <Button.CommandParameter>
+                                <enums:MailOperation>Move</enums:MailOperation>
+                            </Button.CommandParameter>
+                            <Button.Content>
+                                <controls:WinoFontIcon FontSize="18" Icon="Move" />
+                            </Button.Content>
+                        </Button>
+
+                        <Button
+                            Grid.Column="6"
+                            IsEnabled="{x:Bind ViewModel.HasSelectedItems, Mode=OneWay}"
+                            Style="{StaticResource TopCommandBarButtonStyle}">
+                            <Button.Content>
+                                <controls:WinoFontIcon FontSize="20" Icon="More" />
+                            </Button.Content>
+                            <Button.Flyout>
+                                <MenuFlyout AreOpenCloseAnimationsEnabled="False" Placement="BottomEdgeAlignedLeft">
+                                    <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_SetFlag}">
+                                        <MenuFlyoutItem.CommandParameter>
+                                            <enums:MailOperation>SetFlag</enums:MailOperation>
+                                        </MenuFlyoutItem.CommandParameter>
+                                        <MenuFlyoutItem.Icon>
+                                            <controls:WinoFontIcon Icon="Flag" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_ClearFlag}">
+                                        <MenuFlyoutItem.CommandParameter>
+                                            <enums:MailOperation>ClearFlag</enums:MailOperation>
+                                        </MenuFlyoutItem.CommandParameter>
+                                        <MenuFlyoutItem.Icon>
+                                            <controls:WinoFontIcon Icon="ClearFlag" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_MarkAsRead}">
+                                        <MenuFlyoutItem.CommandParameter>
+                                            <enums:MailOperation>MarkAsRead</enums:MailOperation>
+                                        </MenuFlyoutItem.CommandParameter>
+                                        <MenuFlyoutItem.Icon>
+                                            <controls:WinoFontIcon Icon="MarkRead" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                    <MenuFlyoutItem Command="{x:Bind ViewModel.MailOperationCommand}" Text="{x:Bind domain:Translator.MailOperation_MarkAsUnread}">
+                                        <MenuFlyoutItem.CommandParameter>
+                                            <enums:MailOperation>MarkAsUnread</enums:MailOperation>
+                                        </MenuFlyoutItem.CommandParameter>
+                                        <MenuFlyoutItem.Icon>
+                                            <controls:WinoFontIcon Icon="MarkUnread" />
+                                        </MenuFlyoutItem.Icon>
+                                    </MenuFlyoutItem>
+                                </MenuFlyout>
+                            </Button.Flyout>
+                        </Button>
+                    </Grid>
+
+                    <!--  Pivot + Sync + Multi Select  -->
+                    <Grid
+                        Grid.Row="1"
+                        Margin="0,0,0,5"
+                        Visibility="{x:Bind helpers:XamlHelpers.ReverseBoolToVisibilityConverter(ViewModel.IsInSearchMode), Mode=OneWay}">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="Auto" />
+                            <RowDefinition Height="Auto" />
+                        </Grid.RowDefinitions>
+
+                        <!--  Select All Checkbox  -->
+                        <CheckBox
+                            x:Name="SelectAllCheckbox"
+                            Grid.Row="1"
+                            MinWidth="0"
+                            Margin="8,0,0,0"
+                            VerticalAlignment="Center"
+                            Canvas.ZIndex="100"
+                            Checked="SelectAllCheckboxChecked"
+                            Unchecked="SelectAllCheckboxUnchecked"
+                            Visibility="{x:Bind helpers:XamlHelpers.IsSelectionModeMultiple(MailListView.SelectionMode), Mode=OneWay}" />
+
+                        <!--  Folders  -->
+                        <controls:WinoPivotControl
+                            x:Name="WinoPivot"
+                            Grid.Row="1"
+                            Grid.Column="1"
+                            HorizontalAlignment="Left"
+                            VerticalAlignment="Center"
+                            DataTemplate="{StaticResource FolderPivotTemplate}"
+                            ItemsSource="{x:Bind ViewModel.PivotFolders, Mode=OneWay}"
+                            SelectedItem="{x:Bind ViewModel.SelectedFolderPivot, Mode=TwoWay}"
+                            SelectionChanged="FolderPivotChanged"
+                            SelectorPipeColor="{ThemeResource NavigationViewSelectionIndicatorForeground}" />
+
+                        <!--  Filtering  -->
+                        <muxc:DropDownButton
+                            Grid.Row="1"
+                            Grid.Column="2"
+                            Content="{x:Bind ViewModel.SelectedFilterOption.Title, Mode=OneWay}"
+                            ToolTipService.ToolTip="Filter">
+                            <muxc:DropDownButton.Flyout>
+                                <menuflyouts:FilterMenuFlyout
+                                    x:Name="FilterMenuFlyout"
+                                    AreOpenCloseAnimationsEnabled="True"
+                                    FilterOptions="{x:Bind ViewModel.FilterOptions, Mode=OneTime}"
+                                    Placement="Bottom"
+                                    SelectedFilterChangedCommand="{x:Bind ViewModel.SelectedFilterChangedCommand}"
+                                    SelectedFilterOption="{x:Bind ViewModel.SelectedFilterOption, Mode=TwoWay}"
+                                    SelectedSortingOption="{x:Bind ViewModel.SelectedSortingOption, Mode=TwoWay}"
+                                    SelectedSortingOptionChangedCommand="{x:Bind ViewModel.SelectedSortingChangedCommand}"
+                                    SortingOptions="{x:Bind ViewModel.SortingOptions, Mode=OneTime}" />
+                            </muxc:DropDownButton.Flyout>
+                        </muxc:DropDownButton>
+
+                        <muxc:InfoBar
+                            Title="{x:Bind domain:Translator.InfoBarTitle_SynchronizationDisabledFolder}"
+                            Grid.Row="0"
+                            Grid.ColumnSpan="3"
+                            IsClosable="True"
+                            IsOpen="{x:Bind ViewModel.IsFolderSynchronizationEnabled, Converter={StaticResource ReverseBooleanConverter}, Mode=OneWay}"
+                            Message="{x:Bind domain:Translator.InfoBarMessage_SynchronizationDisabledFolder}"
+                            Severity="Informational">
+                            <muxc:InfoBar.ActionButton>
+                                <Button Command="{x:Bind ViewModel.EnableFolderSynchronizationCommand}" Content="Enable" />
+                            </muxc:InfoBar.ActionButton>
+                        </muxc:InfoBar>
+                    </Grid>
                 </Grid>
-            </Grid>
 
-            <!--  No items createria  -->
-            <StackPanel
-                x:Name="NoItemsPanel"
-                Grid.Row="2"
-                Grid.RowSpan="3"
-                VerticalAlignment="Center"
-                HorizontalAlignment="Stretch"
-                Spacing="10">
-
-                <Viewbox
-                    Width="48"
-                    Visibility="{x:Bind ViewModel.IsEmpty, Mode=OneWay}"
-                    Opacity="0.4">
-                    <Path Data="M252,960C227,960 203.083,954.917 180.25,944.75C157.417,934.583 137.417,920.917 120.25,903.75C103.083,886.583 89.4167,866.583 79.25,843.75C69.0833,820.917 64,797 64,772L64,252C64,227 69.0833,203.083 79.25,180.25C89.4167,157.417 103.083,137.417 120.25,120.25C137.417,103.083 157.417,89.4167 180.25,79.25C203.083,69.0834 227,64.0001 252,64L772,64C797,64.0001 820.917,69.0834 843.75,79.25C866.583,89.4167 886.583,103.083 903.75,120.25C920.917,137.417 934.583,157.417 944.75,180.25C954.917,203.083 960,227 960,252L960,772C960,797 954.917,820.917 944.75,843.75C934.583,866.583 920.917,886.583 903.75,903.75C886.583,920.917 866.583,934.583 843.75,944.75C820.917,954.917 797,960 772,960ZM770.5,896C787.167,896 803.083,892.583 818.25,885.75C833.417,878.917 846.75,869.75 858.25,858.25C869.75,846.75 878.917,833.417 885.75,818.25C892.583,803.083 896,787.167 896,770.5L896,253.5C896,236.833 892.583,220.917 885.75,205.75C878.917,190.583 869.75,177.25 858.25,165.75C846.75,154.25 833.417,145.083 818.25,138.25C803.083,131.417 787.167,128 770.5,128L253.5,128C236.833,128 220.917,131.417 205.75,138.25C190.583,145.083 177.25,154.25 165.75,165.75C154.25,177.25 145.083,190.583 138.25,205.75C131.417,220.917 128,236.833 128,253.5L128,770.5C128,787.167 131.417,803.083 138.25,818.25C145.083,833.417 154.25,846.75 165.75,858.25C177.25,869.75 190.583,878.917 205.75,885.75C220.917,892.583 236.833,896 253.5,896ZM559,604.5C541.667,616.833 523.417,625.833 504.25,631.5C485.083,637.167 465,640 444,640C418,640 393.583,634.833 370.75,624.5C347.917,614.167 328,600.167 311,582.5C294,564.833 280.583,544.417 270.75,521.25C260.917,498.083 256,473.667 256,448C256,421.333 261,396.333 271,373C281,349.667 294.667,329.333 312,312C329.333,294.667 349.667,281 373,271C396.333,261 421.333,256 448,256C473.667,256 498.083,260.917 521.25,270.75C544.417,280.583 564.833,294 582.5,311C600.167,328 614.167,347.917 624.5,370.75C634.833,393.583 640,418 640,444C640,465 637.167,485.083 631.5,504.25C625.833,523.417 616.833,541.667 604.5,559L758.5,713.5C764.833,719.833 768,727.333 768,736C768,744.667 764.833,752.167 758.5,758.5C752.167,764.833 744.667,768 736,768C727.333,768 719.833,764.833 713.5,758.5ZM576,448L576,445.5C576,428.167 572.5,411.917 565.5,396.75C558.5,381.583 549.167,368.333 537.5,357C525.833,345.667 512.25,336.667 496.75,330C481.25,323.333 465,320 448,320C430.333,320 413.75,323.417 398.25,330.25C382.75,337.083 369.25,346.25 357.75,357.75C346.25,369.25 337.083,382.833 330.25,398.5C323.417,414.167 320,430.667 320,448C320,465.667 323.417,482.25 330.25,497.75C337.083,513.25 346.25,526.75 357.75,538.25C369.25,549.75 382.75,558.917 398.25,565.75C413.75,572.583 430.333,576 448,576C465.333,576 481.833,572.583 497.5,565.75C513.167,558.917 526.75,549.75 538.25,538.25C549.75,526.75 558.917,513.25 565.75,497.75C572.583,482.25 576,465.667 576,448Z" Fill="{ThemeResource InformationBrush}" />
-                </Viewbox>
-
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Opacity="0.4"
-                    FontSize="20"
-                    FontWeight="ExtraLight"
-                    Foreground="{ThemeResource InformationBrush}"
-                    Text="{x:Bind domain:Translator.NoMessageCrieteria}"
-                    Visibility="{x:Bind ViewModel.IsCriteriaFailed, Mode=OneWay}" />
-
-                <TextBlock
-                    HorizontalAlignment="Center"
-                    Opacity="0.4"
-                    FontSize="20"
-                    FontWeight="ExtraLight"
-                    Foreground="{ThemeResource InformationBrush}"
-                    Text="{x:Bind domain:Translator.NoMessageEmptyFolder}"
-                    Visibility="{x:Bind ViewModel.IsFolderEmpty, Mode=OneWay}" />
-
-                <muxc:ProgressRing
+                <!--  No items createria  -->
+                <StackPanel
+                    x:Name="NoItemsPanel"
                     Grid.Row="2"
-                    x:Name="LoadingProgressIndicator"
-                    HorizontalAlignment="Center"
+                    Grid.RowSpan="3"
+                    HorizontalAlignment="Stretch"
                     VerticalAlignment="Center"
-                    x:Load="{x:Bind ViewModel.IsProgressRing, Mode=OneWay}"
-                    Canvas.ZIndex="999" />
-            </StackPanel>
+                    Spacing="10">
 
-            <!--  Mail Items  -->
-            <muxc:RefreshContainer
-                Grid.Row="2"
-                RefreshRequested="PullToRefreshRequested"
-                Visibility="{x:Bind ViewModel.IsEmpty, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}">
-                <SemanticZoom x:Name="SemanticZoomContainer" CanChangeViews="{x:Bind ViewModel.PreferencesService.IsSemanticZoomEnabled, Mode=OneWay}">
-                    <SemanticZoom.ZoomedInView>
-                        <listview:WinoListView
-                            x:Name="MailListView"
-                            HorizontalContentAlignment="Stretch"
-                            ui:ListViewExtensions.ItemContainerStretchDirection="Horizontal"
-                            LoadMoreCommand="{x:Bind ViewModel.LoadMoreItemsCommand}"
-                            ItemContainerStyleSelector="{StaticResource WinoContainerSelector}"
-                            ItemTemplateSelector="{StaticResource MailItemDisplaySelector}"
-                            ItemsSource="{x:Bind MailCollectionViewSource.View, Mode=OneWay}"
-                            ItemDeletedCommand="{x:Bind ViewModel.MailOperationCommand}"
-                            ProcessKeyboardAccelerators="ProcessMailItemKeyboardAccelerator"
-                            ScrollViewer.VerticalScrollBarVisibility="Auto">
-                            <ListView.ItemContainerTransitions>
-                                <TransitionCollection>
-                                    <AddDeleteThemeTransition />
-                                </TransitionCollection>
-                            </ListView.ItemContainerTransitions>
-                            <ListView.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <ItemsStackPanel AreStickyGroupHeadersEnabled="True" />
-                                </ItemsPanelTemplate>
-                            </ListView.ItemsPanel>
-                            <ListView.Resources>
-                                <ResourceDictionary>
-                                    <Style BasedOn="{StaticResource MailListHeaderStyle}" TargetType="ListViewHeaderItem" />
-                                </ResourceDictionary>
-                            </ListView.Resources>
-                            <ListView.GroupStyle>
-                                <GroupStyle HeaderTemplate="{StaticResource MailGroupHeaderDefaultTemplate}" HidesIfEmpty="True" />
-                            </ListView.GroupStyle>
-                        </listview:WinoListView>
-                    </SemanticZoom.ZoomedInView>
-                    <SemanticZoom.ZoomedOutView>
-                        <ListView
-                            x:Name="ZoomOutList"
-                            x:Load="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(SemanticZoomContainer.IsZoomedInViewActive), Mode=OneWay}"
-                            ItemsSource="{x:Bind MailCollectionViewSource.View.CollectionGroups}">
-                            <ListView.Resources>
-                                <Style TargetType="ListViewItem">
-                                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
-                                    <Setter Property="VerticalContentAlignment" Value="Stretch" />
-                                    <Setter Property="Margin" Value="0,12" />
-                                    <Setter Property="Padding" Value="0" />
-                                </Style>
-                            </ListView.Resources>
-                            <ListView.ItemTemplate>
-                                <DataTemplate x:DataType="ICollectionViewGroup">
-                                    <Grid
-                                        Margin="4,0"
-                                        Background="{ThemeResource MailListHeaderBackgroundColor}"
-                                        CornerRadius="4">
-                                        <TextBlock
-                                            Margin="12,0"
-                                            HorizontalAlignment="Center"
-                                            VerticalAlignment="Center"
-                                            FontWeight="SemiBold"
-                                            Text="{x:Bind helpers:XamlHelpers.GetMailGroupDateString(Group)}" />
-                                    </Grid>
-                                </DataTemplate>
-                            </ListView.ItemTemplate>
-                        </ListView>
-                    </SemanticZoom.ZoomedOutView>
-                </SemanticZoom>
-            </muxc:RefreshContainer>
+                    <Viewbox
+                        Width="48"
+                        Opacity="0.4"
+                        Visibility="{x:Bind ViewModel.IsEmpty, Mode=OneWay}">
+                        <Path Data="M252,960C227,960 203.083,954.917 180.25,944.75C157.417,934.583 137.417,920.917 120.25,903.75C103.083,886.583 89.4167,866.583 79.25,843.75C69.0833,820.917 64,797 64,772L64,252C64,227 69.0833,203.083 79.25,180.25C89.4167,157.417 103.083,137.417 120.25,120.25C137.417,103.083 157.417,89.4167 180.25,79.25C203.083,69.0834 227,64.0001 252,64L772,64C797,64.0001 820.917,69.0834 843.75,79.25C866.583,89.4167 886.583,103.083 903.75,120.25C920.917,137.417 934.583,157.417 944.75,180.25C954.917,203.083 960,227 960,252L960,772C960,797 954.917,820.917 944.75,843.75C934.583,866.583 920.917,886.583 903.75,903.75C886.583,920.917 866.583,934.583 843.75,944.75C820.917,954.917 797,960 772,960ZM770.5,896C787.167,896 803.083,892.583 818.25,885.75C833.417,878.917 846.75,869.75 858.25,858.25C869.75,846.75 878.917,833.417 885.75,818.25C892.583,803.083 896,787.167 896,770.5L896,253.5C896,236.833 892.583,220.917 885.75,205.75C878.917,190.583 869.75,177.25 858.25,165.75C846.75,154.25 833.417,145.083 818.25,138.25C803.083,131.417 787.167,128 770.5,128L253.5,128C236.833,128 220.917,131.417 205.75,138.25C190.583,145.083 177.25,154.25 165.75,165.75C154.25,177.25 145.083,190.583 138.25,205.75C131.417,220.917 128,236.833 128,253.5L128,770.5C128,787.167 131.417,803.083 138.25,818.25C145.083,833.417 154.25,846.75 165.75,858.25C177.25,869.75 190.583,878.917 205.75,885.75C220.917,892.583 236.833,896 253.5,896ZM559,604.5C541.667,616.833 523.417,625.833 504.25,631.5C485.083,637.167 465,640 444,640C418,640 393.583,634.833 370.75,624.5C347.917,614.167 328,600.167 311,582.5C294,564.833 280.583,544.417 270.75,521.25C260.917,498.083 256,473.667 256,448C256,421.333 261,396.333 271,373C281,349.667 294.667,329.333 312,312C329.333,294.667 349.667,281 373,271C396.333,261 421.333,256 448,256C473.667,256 498.083,260.917 521.25,270.75C544.417,280.583 564.833,294 582.5,311C600.167,328 614.167,347.917 624.5,370.75C634.833,393.583 640,418 640,444C640,465 637.167,485.083 631.5,504.25C625.833,523.417 616.833,541.667 604.5,559L758.5,713.5C764.833,719.833 768,727.333 768,736C768,744.667 764.833,752.167 758.5,758.5C752.167,764.833 744.667,768 736,768C727.333,768 719.833,764.833 713.5,758.5ZM576,448L576,445.5C576,428.167 572.5,411.917 565.5,396.75C558.5,381.583 549.167,368.333 537.5,357C525.833,345.667 512.25,336.667 496.75,330C481.25,323.333 465,320 448,320C430.333,320 413.75,323.417 398.25,330.25C382.75,337.083 369.25,346.25 357.75,357.75C346.25,369.25 337.083,382.833 330.25,398.5C323.417,414.167 320,430.667 320,448C320,465.667 323.417,482.25 330.25,497.75C337.083,513.25 346.25,526.75 357.75,538.25C369.25,549.75 382.75,558.917 398.25,565.75C413.75,572.583 430.333,576 448,576C465.333,576 481.833,572.583 497.5,565.75C513.167,558.917 526.75,549.75 538.25,538.25C549.75,526.75 558.917,513.25 565.75,497.75C572.583,482.25 576,465.667 576,448Z" Fill="{ThemeResource InformationBrush}" />
+                    </Viewbox>
+
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        FontSize="20"
+                        FontWeight="ExtraLight"
+                        Foreground="{ThemeResource InformationBrush}"
+                        Opacity="0.4"
+                        Text="{x:Bind domain:Translator.NoMessageCrieteria}"
+                        Visibility="{x:Bind ViewModel.IsCriteriaFailed, Mode=OneWay}" />
+
+                    <TextBlock
+                        HorizontalAlignment="Center"
+                        FontSize="20"
+                        FontWeight="ExtraLight"
+                        Foreground="{ThemeResource InformationBrush}"
+                        Opacity="0.4"
+                        Text="{x:Bind domain:Translator.NoMessageEmptyFolder}"
+                        Visibility="{x:Bind ViewModel.IsFolderEmpty, Mode=OneWay}" />
+
+                    <muxc:ProgressRing
+                        x:Name="LoadingProgressIndicator"
+                        Grid.Row="2"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        x:Load="{x:Bind ViewModel.IsProgressRing, Mode=OneWay}"
+                        Canvas.ZIndex="999" />
+                </StackPanel>
+
+                <!--  Mail Items  -->
+                <muxc:RefreshContainer
+                    Grid.Row="2"
+                    RefreshRequested="PullToRefreshRequested"
+                    Visibility="{x:Bind ViewModel.IsEmpty, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}">
+                    <SemanticZoom x:Name="SemanticZoomContainer" CanChangeViews="{x:Bind ViewModel.PreferencesService.IsSemanticZoomEnabled, Mode=OneWay}">
+                        <SemanticZoom.ZoomedInView>
+                            <listview:WinoListView
+                                x:Name="MailListView"
+                                HorizontalContentAlignment="Stretch"
+                                ui:ListViewExtensions.ItemContainerStretchDirection="Horizontal"
+                                ItemContainerStyleSelector="{StaticResource WinoContainerSelector}"
+                                ItemDeletedCommand="{x:Bind ViewModel.MailOperationCommand}"
+                                ItemTemplateSelector="{StaticResource MailItemDisplaySelector}"
+                                ItemsSource="{x:Bind MailCollectionViewSource.View, Mode=OneWay}"
+                                LoadMoreCommand="{x:Bind ViewModel.LoadMoreItemsCommand}"
+                                ProcessKeyboardAccelerators="ProcessMailItemKeyboardAccelerator"
+                                ScrollViewer.VerticalScrollBarVisibility="Auto">
+                                <ListView.ItemContainerTransitions>
+                                    <TransitionCollection>
+                                        <AddDeleteThemeTransition />
+                                    </TransitionCollection>
+                                </ListView.ItemContainerTransitions>
+                                <ListView.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <ItemsStackPanel AreStickyGroupHeadersEnabled="True" />
+                                    </ItemsPanelTemplate>
+                                </ListView.ItemsPanel>
+                                <ListView.Resources>
+                                    <ResourceDictionary>
+                                        <Style BasedOn="{StaticResource MailListHeaderStyle}" TargetType="ListViewHeaderItem" />
+                                    </ResourceDictionary>
+                                </ListView.Resources>
+                                <ListView.GroupStyle>
+                                    <GroupStyle HeaderTemplate="{StaticResource MailGroupHeaderDefaultTemplate}" HidesIfEmpty="True" />
+                                </ListView.GroupStyle>
+                            </listview:WinoListView>
+                        </SemanticZoom.ZoomedInView>
+                        <SemanticZoom.ZoomedOutView>
+                            <ListView
+                                x:Name="ZoomOutList"
+                                x:Load="{x:Bind helpers:XamlHelpers.ReverseBoolConverter(SemanticZoomContainer.IsZoomedInViewActive), Mode=OneWay}"
+                                ItemsSource="{x:Bind MailCollectionViewSource.View.CollectionGroups}">
+                                <ListView.Resources>
+                                    <Style TargetType="ListViewItem">
+                                        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
+                                        <Setter Property="VerticalContentAlignment" Value="Stretch" />
+                                        <Setter Property="Margin" Value="0,12" />
+                                        <Setter Property="Padding" Value="0" />
+                                    </Style>
+                                </ListView.Resources>
+                                <ListView.ItemTemplate>
+                                    <DataTemplate x:DataType="ICollectionViewGroup">
+                                        <Grid
+                                            Margin="4,0"
+                                            Background="{ThemeResource MailListHeaderBackgroundColor}"
+                                            CornerRadius="4">
+                                            <TextBlock
+                                                Margin="12,0"
+                                                HorizontalAlignment="Center"
+                                                VerticalAlignment="Center"
+                                                FontWeight="SemiBold"
+                                                Text="{x:Bind helpers:XamlHelpers.GetMailGroupDateString(Group)}" />
+                                        </Grid>
+                                    </DataTemplate>
+                                </ListView.ItemTemplate>
+                            </ListView>
+                        </SemanticZoom.ZoomedOutView>
+                    </SemanticZoom>
+                </muxc:RefreshContainer>
 
 
-            <!--  Update Info Bar  -->
-            <controls:WinoInfoBar
-                Title="{x:Bind ViewModel.BarTitle, Mode=OneWay}"
-                Grid.Row="2"
-                Margin="6,0,6,6"
-                VerticalAlignment="Bottom"
-                AnimationType="SlideFromBottomToTop"
-                DismissInterval="2"
-                IsClosable="False"
-                IsOpen="{x:Bind ViewModel.IsBarOpen, Mode=TwoWay}"
-                Message="{x:Bind ViewModel.BarMessage, Mode=OneWay}"
-                Severity="{x:Bind helpers:XamlHelpers.InfoBarSeverityConverter(ViewModel.BarSeverity), Mode=OneWay}" />
+                <!--  Update Info Bar  -->
+                <controls:WinoInfoBar
+                    Title="{x:Bind ViewModel.BarTitle, Mode=OneWay}"
+                    Grid.Row="2"
+                    Margin="6,0,6,6"
+                    VerticalAlignment="Bottom"
+                    AnimationType="SlideFromBottomToTop"
+                    DismissInterval="2"
+                    IsClosable="False"
+                    IsOpen="{x:Bind ViewModel.IsBarOpen, Mode=TwoWay}"
+                    Message="{x:Bind ViewModel.BarMessage, Mode=OneWay}"
+                    Severity="{x:Bind helpers:XamlHelpers.InfoBarSeverityConverter(ViewModel.BarSeverity), Mode=OneWay}" />
 
-        </Grid>
+            </Grid>
+        </Border>
 
         <!--  Mail Rendering Frame  -->
         <Frame
diff --git a/Wino.Mail/Views/MailListPage.xaml.cs b/Wino.Mail/Views/MailListPage.xaml.cs
index 33cea63a..f1b5680e 100644
--- a/Wino.Mail/Views/MailListPage.xaml.cs
+++ b/Wino.Mail/Views/MailListPage.xaml.cs
@@ -153,6 +153,7 @@ namespace Wino.Views
 
         private void UpdateAdaptiveness()
         {
+            ReaderGridContainer.Visibility = !(StatePersistanceService.IsReadingMail && StatePersistanceService.IsReaderNarrowed) ? Visibility.Visible : Visibility.Collapsed;
             ReaderGrid.Visibility = !(StatePersistanceService.IsReadingMail && StatePersistanceService.IsReaderNarrowed) ? Visibility.Visible : Visibility.Collapsed;
             RenderingFrame.Visibility = StatePersistanceService.IsReadingMail ? Visibility.Visible : (StatePersistanceService.IsReaderNarrowed ? Visibility.Collapsed : Visibility.Visible);
 
@@ -536,7 +537,7 @@ namespace Wino.Views
 
         private async void SearchBar_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
         {
-            if(args.Reason == AutoSuggestionBoxTextChangeReason.UserInput && string.IsNullOrWhiteSpace(sender.Text))
+            if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput && string.IsNullOrWhiteSpace(sender.Text))
             {
                 await ViewModel.PerformSearchAsync();
             }
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index b91faf81..9a1d5a4e 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -1,25 +1,25 @@
 <abstract:MailRenderingPageAbstract
-    xmlns:abstract="using:Wino.Views.Abstract"
     x:Class="Wino.Views.MailRenderingPage"
     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:abstract="using:Wino.Views.Abstract"
     xmlns:controls="using:Microsoft.UI.Xaml.Controls"
+    xmlns:controls1="using:Wino.Controls"
     xmlns:controls2="using:CommunityToolkit.WinUI.Controls"
-    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
-    xmlns:selectors="using:Wino.Selectors"
-    IsDarkEditor="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=TwoWay}"
-    xmlns:helpers="using:Wino.Helpers"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:domain="using:Wino.Core.Domain"
+    xmlns:entities="using:Wino.Core.Domain.Entities"
+    xmlns:helpers="using:Wino.Helpers"
+    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+    xmlns:local="using:Wino.Behaviors"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
+    xmlns:selectors="using:Wino.Selectors"
+    xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+    xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
     x:Name="root"
     muxc:BackdropMaterial.ApplyToRootOrPageBackground="{ThemeResource UseMica}"
-    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:controls1="using:Wino.Controls"
-    xmlns:local="using:Wino.Behaviors"
-    xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
-    xmlns:entities="using:Wino.Core.Domain.Entities"
-    xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
+    IsDarkEditor="{x:Bind ViewModel.IsDarkWebviewRenderer, Mode=TwoWay}"
     mc:Ignorable="d">
 
     <Page.Resources>
@@ -31,36 +31,36 @@
 
         <DataTemplate x:Key="InternetAddressTemplate" x:DataType="entities:AddressInformation">
             <HyperlinkButton
+                Padding="2"
                 Command="{Binding ElementName=root, Path=ViewModel.CopyClipboardCommand}"
                 CommandParameter="{x:Bind Address}"
-                Content="{x:Bind DisplayName}"
-                Padding="2" />
+                Content="{x:Bind DisplayName}" />
         </DataTemplate>
 
         <selectors:RendererCommandBarItemTemplateSelector
             x:Key="RendererCommandBarItemTemplateSelector"
-            Reply="{StaticResource CommandBarItemReplyTemplate}"
             Archive="{StaticResource CommandBarItemArchiveTemplate}"
-            Unarchive="{StaticResource CommandBarItemUnarchiveTemplate}"
-            SetFlag="{StaticResource CommandBarItemSetFlagTemplate}"
             ClearFlag="{StaticResource CommandBarItemClearFlagTemplate}"
+            DarkEditor="{StaticResource CommandBarItemDarkEditorTemplate}"
+            Delete="{StaticResource CommandBarItemDeleteTemplate}"
+            Find="{StaticResource CommandBarItemFindTemplate}"
+            Forward="{StaticResource CommandBarItemForwardTemplate}"
+            LightEditor="{StaticResource CommandBarItemLightEditorTemplate}"
             MarkAsRead="{StaticResource CommandBarItemMarkReadTemplate}"
             MarkAsUnread="{StaticResource CommandBarItemMarkUnreadTemplate}"
-            Delete="{StaticResource CommandBarItemDeleteTemplate}"
             Move="{StaticResource CommandBarItemMoveTemplate}"
             MoveToJunk="{StaticResource CommandBarItemMoveToJunkTemplate}"
-            SaveAs="{StaticResource CommandBarItemSaveTemplate}"
-            Zoom="{StaticResource CommandBarItemZoomTemplate}"
             Print="{StaticResource CommandBarItemPrintTemplate}"
-            Forward="{StaticResource CommandBarItemForwardTemplate}"
-            DarkEditor="{StaticResource CommandBarItemDarkEditorTemplate}"
-            LightEditor="{StaticResource CommandBarItemLightEditorTemplate}"
-            Find="{StaticResource CommandBarItemFindTemplate}"
+            Reply="{StaticResource CommandBarItemReplyTemplate}"
+            ReplyAll="{StaticResource CommandBarItemReplyAllTemplate}"
+            SaveAs="{StaticResource CommandBarItemSaveTemplate}"
             SeperatorTemplate="{StaticResource CommandBarItemSeperatorTemplate}"
-            ReplyAll="{StaticResource CommandBarItemReplyAllTemplate}" />
+            SetFlag="{StaticResource CommandBarItemSetFlagTemplate}"
+            Unarchive="{StaticResource CommandBarItemUnarchiveTemplate}"
+            Zoom="{StaticResource CommandBarItemZoomTemplate}" />
 
         <!--  Attachment Template  -->
-        <!--  Margin -8 0 is used to remove the padding from the ListViewItem-->
+        <!--  Margin -8 0 is used to remove the padding from the ListViewItem  -->
         <DataTemplate x:Key="FileAttachmentTemplate" x:DataType="viewModelData:MailAttachmentViewModel">
             <Grid Height="51">
                 <Grid.RowDefinitions>
@@ -70,26 +70,26 @@
                 <Grid
                     Grid.Row="0"
                     Height="50"
+                    Margin="-8,0,0,0"
                     Background="Transparent"
-                    ColumnSpacing="3"
-                    Margin="-8,0,0,0">
+                    ColumnSpacing="3">
                     <ToolTipService.ToolTip>
                         <ToolTip Content="{x:Bind FileName}" />
                     </ToolTipService.ToolTip>
                     <Grid.ContextFlyout>
                         <MenuFlyout Placement="Right">
                             <MenuFlyoutItem
-                                Text="{x:Bind domain:Translator.Buttons_Open}"
                                 Command="{Binding ElementName=root, Path=ViewModel.OpenAttachmentCommand}"
-                                CommandParameter="{x:Bind}">
+                                CommandParameter="{x:Bind}"
+                                Text="{x:Bind domain:Translator.Buttons_Open}">
                                 <MenuFlyoutItem.Icon>
                                     <PathIcon Data="{StaticResource OpenFilePathIcon}" />
                                 </MenuFlyoutItem.Icon>
                             </MenuFlyoutItem>
                             <MenuFlyoutItem
-                                Text="{x:Bind domain:Translator.Buttons_Save}"
                                 Command="{Binding ElementName=root, Path=ViewModel.SaveAttachmentCommand}"
-                                CommandParameter="{x:Bind}">
+                                CommandParameter="{x:Bind}"
+                                Text="{x:Bind domain:Translator.Buttons_Save}">
                                 <MenuFlyoutItem.Icon>
                                     <PathIcon Data="{StaticResource SaveAttachmentPathIcon}" />
                                 </MenuFlyoutItem.Icon>
@@ -108,9 +108,10 @@
                         ContentTemplateSelector="{StaticResource FileTypeIconSelector}" />
 
                     <!--  Name && Size  -->
-                    <Grid Grid.Column="1"
-                          VerticalAlignment="Center"
-                          MaxWidth="200">
+                    <Grid
+                        Grid.Column="1"
+                        MaxWidth="200"
+                        VerticalAlignment="Center">
                         <Grid.RowDefinitions>
                             <RowDefinition Height="Auto" />
                             <RowDefinition Height="*" />
@@ -118,10 +119,10 @@
 
                         <TextBlock
                             FontSize="13"
-                            Text="{x:Bind FileName}"
                             MaxLines="1"
-                            TextWrapping="Wrap"
-                            TextTrimming="CharacterEllipsis" />
+                            Text="{x:Bind FileName}"
+                            TextTrimming="CharacterEllipsis"
+                            TextWrapping="Wrap" />
 
                         <TextBlock
                             Grid.Row="1"
@@ -134,13 +135,13 @@
                 </Grid>
                 <muxc:ProgressBar
                     Grid.Row="1"
-                    VerticalAlignment="Top"
-                    HorizontalAlignment="Stretch"
                     Margin="0,-5,0,0"
-                    Visibility="{x:Bind IsBusy, Mode=OneWay}"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
                     IsIndeterminate="{x:Bind IsBusy, Mode=OneWay}"
+                    ShowError="False"
                     ShowPaused="False"
-                    ShowError="False"/>
+                    Visibility="{x:Bind IsBusy, Mode=OneWay}" />
             </Grid>
 
         </DataTemplate>
@@ -148,228 +149,241 @@
     </Page.Resources>
 
     <!--  Attachments and WebView2  -->
-    <Grid
-        x:Name="RendererGridFrame"
-        Margin="{ThemeResource RendererGridMargin}"
-        Background="{ThemeResource ReadingPaneBackgroundColorBrush}">
+    <Grid x:Name="RendererGridFrame" Padding="7,0,7,7">
         <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
-        <CommandBar
-            x:Name="RendererBar"
+        <Border
             Grid.Row="0"
-            Margin="8,6,0,0"
-            DefaultLabelPosition="Right"
-            HorizontalContentAlignment="Stretch"
-            OverflowButtonVisibility="Auto"
-            DynamicOverflowItemsChanging="BarDynamicOverflowChanging"
-            IsDynamicOverflowEnabled="True">
-            <interactivity:Interaction.Behaviors>
-                <local:BindableCommandBarBehavior
-                    ItemClickedCommand="{x:Bind ViewModel.OperationClickedCommand}"
-                    PrimaryCommands="{x:Bind ViewModel.MenuItems, Mode=OneWay}"
-                    ItemTemplateSelector="{StaticResource RendererCommandBarItemTemplateSelector}" />
-            </interactivity:Interaction.Behaviors>
-            <CommandBar.Content>
-                <Grid Margin="0,6" RowSpacing="4">
-                    <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="Auto" />
-                        <ColumnDefinition Width="*" />
-                    </Grid.ColumnDefinitions>
+            Margin="0,0,0,7"
+            Background="{ThemeResource WorkZoneBackground}"
+            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="7">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <CommandBar
+                    x:Name="RendererBar"
+                    Grid.Row="0"
+                    Margin="8,6,0,0"
+                    HorizontalContentAlignment="Stretch"
+                    DefaultLabelPosition="Right"
+                    DynamicOverflowItemsChanging="BarDynamicOverflowChanging"
+                    IsDynamicOverflowEnabled="True"
+                    OverflowButtonVisibility="Auto">
+                    <interactivity:Interaction.Behaviors>
+                        <local:BindableCommandBarBehavior
+                            ItemClickedCommand="{x:Bind ViewModel.OperationClickedCommand}"
+                            ItemTemplateSelector="{StaticResource RendererCommandBarItemTemplateSelector}"
+                            PrimaryCommands="{x:Bind ViewModel.MenuItems, Mode=OneWay}" />
+                    </interactivity:Interaction.Behaviors>
+                    <CommandBar.Content>
+                        <Grid Margin="0,6" RowSpacing="4">
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition Width="Auto" />
+                                <ColumnDefinition Width="*" />
+                            </Grid.ColumnDefinitions>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto" />
+                                <RowDefinition Height="Auto" />
+                            </Grid.RowDefinitions>
+
+                            <controls1:ImagePreviewControl
+                                x:Name="ContactImage"
+                                Width="36"
+                                Height="36"
+                                FontSize="16"
+                                FromAddress="{x:Bind ViewModel.FromAddress, Mode=OneWay}"
+                                FromName="{x:Bind ViewModel.FromName, Mode=OneWay}" />
+
+                            <Grid
+                                Grid.Column="1"
+                                Margin="12,0"
+                                VerticalAlignment="Center">
+                                <StackPanel Spacing="1">
+                                    <HyperlinkButton
+                                        Padding="-2,0"
+                                        Command="{Binding ElementName=root, Path=ViewModel.CopyClipboardCommand}"
+                                        CommandParameter="{x:Bind ViewModel.FromAddress, Mode=OneWay}"
+                                        FontWeight="SemiBold">
+                                        <TextBlock>
+                                            <Run Text="{x:Bind ViewModel.FromName, Mode=OneWay}" />
+                                            <Run Text="&lt;" /><Run Text="{x:Bind ViewModel.FromAddress, Mode=OneWay}" /><Run Text="&gt;" />
+                                        </TextBlock>
+                                    </HyperlinkButton>
+                                    <TextBlock FontSize="12" Text="{x:Bind helpers:XamlHelpers.GetCreationDateString(ViewModel.CreationDate, ViewModel.PreferencesService.Prefer24HourTimeFormat), Mode=OneWay}" />
+                                </StackPanel>
+                            </Grid>
+                        </Grid>
+                    </CommandBar.Content>
+                </CommandBar>
+                <Grid
+                    Grid.Row="1"
+                    Padding="12,4,16,12"
+                    RowSpacing="4">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
 
-                    <controls1:ImagePreviewControl
-                        x:Name="ContactImage"
-                        Width="36"
-                        FromName="{x:Bind ViewModel.FromName, Mode=OneWay}"
-                        FromAddress="{x:Bind ViewModel.FromAddress, Mode=OneWay}"
-                        Height="36"
-                        FontSize="16" />
 
-                    <Grid
-                        Grid.Column="1"
-                        Margin="12,0"
-                        VerticalAlignment="Center">
-                        <StackPanel Spacing="1">
-                            <HyperlinkButton
-                                FontWeight="SemiBold"
-                                Padding="-2,0"
-                                Command="{Binding ElementName=root, Path=ViewModel.CopyClipboardCommand}"
-                                CommandParameter="{x:Bind ViewModel.FromAddress, Mode=OneWay}">
-                                <TextBlock>
-                                    <Run Text="{x:Bind ViewModel.FromName, Mode=OneWay}" />
-                                    <Run Text="&lt;" /><Run Text="{x:Bind ViewModel.FromAddress, Mode=OneWay}" /><Run Text="&gt;" />
-                                </TextBlock>
-                            </HyperlinkButton>
-                            <TextBlock FontSize="12" Text="{x:Bind helpers:XamlHelpers.GetCreationDateString(ViewModel.CreationDate, ViewModel.PreferencesService.Prefer24HourTimeFormat), Mode=OneWay}" />
-                        </StackPanel>
+                    <StackPanel
+                        Margin="0,2,0,0"
+                        Orientation="Horizontal"
+                        Spacing="6">
+
+                        <TextBlock
+                            VerticalAlignment="Center"
+                            FontWeight="SemiBold"
+                            Text="To:"
+                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}" />
+                        <ItemsControl
+                            ItemTemplate="{StaticResource InternetAddressTemplate}"
+                            ItemsSource="{x:Bind ViewModel.ToItems, Mode=OneWay}"
+                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <ItemsStackPanel Orientation="Horizontal" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                        </ItemsControl>
+
+                        <TextBlock
+                            VerticalAlignment="Center"
+                            FontWeight="SemiBold"
+                            Text="Cc:"
+                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}" />
+                        <ItemsControl
+                            ItemTemplate="{StaticResource InternetAddressTemplate}"
+                            ItemsSource="{x:Bind ViewModel.CCItemsItems, Mode=OneWay}"
+                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <ItemsStackPanel Orientation="Horizontal" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                        </ItemsControl>
+
+                        <TextBlock
+                            VerticalAlignment="Center"
+                            FontWeight="SemiBold"
+                            Text="Bcc:"
+                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}" />
+                        <ItemsControl
+                            ItemTemplate="{StaticResource InternetAddressTemplate}"
+                            ItemsSource="{x:Bind ViewModel.BCCItems, Mode=OneWay}"
+                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}">
+                            <ItemsControl.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <ItemsStackPanel Orientation="Horizontal" />
+                                </ItemsPanelTemplate>
+                            </ItemsControl.ItemsPanel>
+                        </ItemsControl>
+
+                    </StackPanel>
+
+                    <Grid Grid.Row="1">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*" />
+                            <ColumnDefinition Width="Auto" />
+                        </Grid.ColumnDefinitions>
+
+                        <TextBlock
+                            VerticalAlignment="Center"
+                            FontSize="18"
+                            FontWeight="SemiBold"
+                            Text="{x:Bind ViewModel.Subject, Mode=OneWay}"
+                            TextWrapping="Wrap" />
+
+                        <HyperlinkButton
+                            Grid.Column="1"
+                            Command="{x:Bind ViewModel.UnsubscribeCommand}"
+                            Visibility="{x:Bind ViewModel.CanUnsubscribe, Mode=OneWay}">
+                            <StackPanel Orientation="Horizontal" Spacing="6">
+                                <PathIcon Data="F1 M 3.75 4.902344 C 3.75 4.225262 3.885091 3.588867 4.155273 2.993164 C 4.425456 2.397461 4.790039 1.878256 5.249023 1.435547 C 5.708008 0.99284 6.238606 0.642904 6.84082 0.385742 C 7.443034 0.128582 8.079427 0 8.75 0 C 9.420572 0 10.056966 0.128582 10.65918 0.385742 C 11.261393 0.642904 11.791992 0.99284 12.250977 1.435547 C 12.709961 1.878256 13.074544 2.397461 13.344727 2.993164 C 13.614908 3.588867 13.75 4.225262 13.75 4.902344 C 13.75 5.332031 13.707682 5.740561 13.623047 6.12793 C 13.538411 6.5153 13.395182 6.901042 13.193359 7.285156 C 12.307942 7.434896 11.484375 7.734375 10.722656 8.183594 C 11.295572 7.819012 11.735025 7.353517 12.041016 6.787109 C 12.347005 6.220704 12.5 5.598959 12.5 4.921875 C 12.5 4.414062 12.399088 3.937176 12.197266 3.491211 C 11.995442 3.045248 11.722005 2.65625 11.376953 2.324219 C 11.0319 1.992188 10.633138 1.730145 10.180664 1.538086 C 9.728189 1.346029 9.251302 1.25 8.75 1.25 C 8.229166 1.25 7.740885 1.347656 7.285156 1.542969 C 6.829427 1.738281 6.432292 2.005209 6.09375 2.34375 C 5.755208 2.682293 5.488281 3.079428 5.292969 3.535156 C 5.097656 3.990887 5 4.479167 5 5 C 5 5.501303 5.096028 5.97819 5.288086 6.430664 C 5.480143 6.883139 5.742188 7.281902 6.074219 7.626953 C 6.40625 7.972006 6.795247 8.245443 7.241211 8.447266 C 7.687174 8.649089 8.164062 8.75 8.671875 8.75 C 9.029947 8.75 9.368489 8.710938 9.6875 8.632812 C 10.00651 8.554688 10.322266 8.424479 10.634766 8.242188 C 9.873047 8.704428 9.222005 9.290365 8.681641 10 L 8.662109 10 C 8.011067 10 7.389323 9.868164 6.796875 9.604492 C 6.204427 9.34082 5.681966 8.984375 5.229492 8.535156 C 4.777018 8.085938 4.417317 7.565104 4.150391 6.972656 C 3.883463 6.380209 3.75 5.755209 3.75 5.097656 Z M 8.75 14.375 C 8.75 13.600261 8.898111 12.871094 9.194336 12.1875 C 9.49056 11.503906 9.892578 10.908203 10.400391 10.400391 C 10.908203 9.892578 11.503906 9.490561 12.1875 9.194336 C 12.871093 8.898112 13.60026 8.75 14.375 8.75 C 14.889322 8.75 15.385741 8.816732 15.864258 8.950195 C 16.342773 9.083659 16.790363 9.272461 17.207031 9.516602 C 17.623697 9.760742 18.004557 10.055339 18.349609 10.400391 C 18.69466 10.745443 18.989258 11.126303 19.233398 11.542969 C 19.477539 11.959636 19.66634 12.407227 19.799805 12.885742 C 19.933268 13.364258 20 13.860678 20 14.375 C 20 15.14974 19.851887 15.878906 19.555664 16.5625 C 19.259439 17.246094 18.857422 17.841797 18.349609 18.349609 C 17.841797 18.857422 17.246094 19.259439 16.5625 19.555664 C 15.878906 19.851889 15.149739 20 14.375 20 C 13.59375 20 12.861328 19.853516 12.177734 19.560547 C 11.494141 19.267578 10.898438 18.867188 10.390625 18.359375 C 9.882812 17.851562 9.482422 17.255859 9.189453 16.572266 C 8.896484 15.888672 8.75 15.15625 8.75 14.375 Z M 0 13.701172 C 0 13.375651 0.066732 13.064779 0.200195 12.768555 C 0.333659 12.472331 0.512695 12.211914 0.737305 11.987305 C 0.961914 11.762695 1.222331 11.583659 1.518555 11.450195 C 1.814779 11.316732 2.125651 11.25 2.451172 11.25 L 7.900391 11.25 C 7.809244 11.451823 7.722981 11.656901 7.641602 11.865234 C 7.560221 12.073568 7.490234 12.285156 7.431641 12.5 L 2.5 12.5 C 2.324219 12.5 2.161458 12.532553 2.011719 12.597656 C 1.861979 12.662761 1.730143 12.752279 1.616211 12.866211 C 1.502279 12.980144 1.41276 13.111979 1.347656 13.261719 C 1.282552 13.411459 1.25 13.574219 1.25 13.75 C 1.25 14.407553 1.359049 14.986979 1.577148 15.488281 C 1.795247 15.989584 2.091471 16.425781 2.46582 16.796875 C 2.840169 17.167969 3.273112 17.478842 3.764648 17.729492 C 4.256185 17.980143 4.777018 18.180338 5.327148 18.330078 C 5.877278 18.479818 6.438802 18.58724 7.011719 18.652344 C 7.584635 18.717447 8.138021 18.75 8.671875 18.75 C 8.847656 18.977865 9.033203 19.192709 9.228516 19.394531 C 9.423828 19.596354 9.635416 19.785156 9.863281 19.960938 C 9.674479 19.973959 9.488932 19.983725 9.306641 19.990234 C 9.124349 19.996744 8.938802 20 8.75 20 C 8.333333 20 7.908528 19.986979 7.475586 19.960938 C 7.042643 19.934896 6.612955 19.887695 6.186523 19.819336 C 5.760091 19.750977 5.340169 19.65983 4.926758 19.545898 C 4.513346 19.431967 4.114583 19.287109 3.730469 19.111328 C 3.157552 18.850912 2.641602 18.543295 2.182617 18.188477 C 1.723633 17.833658 1.333008 17.431641 1.010742 16.982422 C 0.688477 16.533203 0.439453 16.035156 0.263672 15.488281 C 0.087891 14.941406 0 14.345703 0 13.701172 Z M 14.375 15.253906 L 16.123047 17.001953 C 16.246744 17.12565 16.393229 17.1875 16.5625 17.1875 C 16.73177 17.1875 16.878254 17.12565 17.001953 17.001953 C 17.12565 16.878256 17.1875 16.731771 17.1875 16.5625 C 17.1875 16.39323 17.12565 16.246746 17.001953 16.123047 L 15.263672 14.375 L 17.001953 12.626953 C 17.12565 12.503256 17.1875 12.356771 17.1875 12.1875 C 17.1875 12.018229 17.12565 11.871745 17.001953 11.748047 C 16.878254 11.62435 16.73177 11.5625 16.5625 11.5625 C 16.393229 11.5625 16.246744 11.62435 16.123047 11.748047 L 14.375 13.486328 L 12.626953 11.748047 C 12.503255 11.62435 12.356771 11.5625 12.1875 11.5625 C 12.018229 11.5625 11.871744 11.62435 11.748047 11.748047 C 11.624349 11.871745 11.5625 12.018229 11.5625 12.1875 C 11.5625 12.356771 11.624349 12.503256 11.748047 12.626953 L 13.496094 14.375 L 11.748047 16.123047 C 11.624349 16.246746 11.5625 16.39323 11.5625 16.5625 C 11.5625 16.731771 11.624349 16.878256 11.748047 17.001953 C 11.871744 17.12565 12.018229 17.1875 12.1875 17.1875 C 12.356771 17.1875 12.503255 17.12565 12.626953 17.001953 Z " />
+                                <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Unsubscribe}" />
+                            </StackPanel>
+                        </HyperlinkButton>
                     </Grid>
                 </Grid>
-            </CommandBar.Content>
-        </CommandBar>
 
-        <Grid
-            Grid.Row="1"
-            Padding="12,4,16,12"
-            RowSpacing="4">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
-                <RowDefinition Height="Auto" />
-            </Grid.RowDefinitions>
-
-
-            <StackPanel
-                Orientation="Horizontal"
-                Margin="0,2,0,0"
-                Spacing="6">
-
-                <TextBlock
-                    Text="To:"
-                    FontWeight="SemiBold"
-                    VerticalAlignment="Center"
-                    Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}" />
-                <ItemsControl
-                    ItemsSource="{x:Bind ViewModel.ToItems, Mode=OneWay}"
-                    ItemTemplate="{StaticResource InternetAddressTemplate}"
-                    Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}">
+                <!--  Attachments  -->
+                <ListView
+                    x:Name="AttachmentsListView"
+                    Grid.Row="2"
+                    Height="55"
+                    x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.Attachments.Count), Mode=OneWay}"
+                    IsItemClickEnabled="True"
+                    ItemClick="AttachmentClicked"
+                    ItemTemplate="{StaticResource FileAttachmentTemplate}"
+                    ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
+                    SelectionMode="None">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <ItemsStackPanel Orientation="Horizontal" />
+                            <controls2:WrapPanel Orientation="Horizontal" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
-                </ItemsControl>
-
-                <TextBlock
-                    Text="Cc:"
-                    FontWeight="SemiBold"
-                    VerticalAlignment="Center"
-                    Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}" />
-                <ItemsControl
-                    ItemsSource="{x:Bind ViewModel.CCItemsItems, Mode=OneWay}"
-                    ItemTemplate="{StaticResource InternetAddressTemplate}"
-                    Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <ItemsStackPanel Orientation="Horizontal" />
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                </ItemsControl>
-
-                <TextBlock
-                    Text="Bcc:"
-                    FontWeight="SemiBold"
-                    VerticalAlignment="Center"
-                    Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}" />
-                <ItemsControl
-                    ItemsSource="{x:Bind ViewModel.BCCItems, Mode=OneWay}"
-                    ItemTemplate="{StaticResource InternetAddressTemplate}"
-                    Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}">
-                    <ItemsControl.ItemsPanel>
-                        <ItemsPanelTemplate>
-                            <ItemsStackPanel Orientation="Horizontal" />
-                        </ItemsPanelTemplate>
-                    </ItemsControl.ItemsPanel>
-                </ItemsControl>
-
-            </StackPanel>
-
-            <Grid Grid.Row="1">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="*" />
-                    <ColumnDefinition Width="Auto" />
-                </Grid.ColumnDefinitions>
-
-                <TextBlock
-                    FontSize="18"
-                    FontWeight="SemiBold"
-                    VerticalAlignment="Center"
-                    Text="{x:Bind ViewModel.Subject, Mode=OneWay}"
-                    TextWrapping="Wrap" />
-
-                <HyperlinkButton
-                    Grid.Column="1"
-                    Visibility="{x:Bind ViewModel.CanUnsubscribe, Mode=OneWay}"
-                    Command="{x:Bind ViewModel.UnsubscribeCommand}">
-                    <StackPanel Orientation="Horizontal" Spacing="6">
-                        <PathIcon Data="F1 M 3.75 4.902344 C 3.75 4.225262 3.885091 3.588867 4.155273 2.993164 C 4.425456 2.397461 4.790039 1.878256 5.249023 1.435547 C 5.708008 0.99284 6.238606 0.642904 6.84082 0.385742 C 7.443034 0.128582 8.079427 0 8.75 0 C 9.420572 0 10.056966 0.128582 10.65918 0.385742 C 11.261393 0.642904 11.791992 0.99284 12.250977 1.435547 C 12.709961 1.878256 13.074544 2.397461 13.344727 2.993164 C 13.614908 3.588867 13.75 4.225262 13.75 4.902344 C 13.75 5.332031 13.707682 5.740561 13.623047 6.12793 C 13.538411 6.5153 13.395182 6.901042 13.193359 7.285156 C 12.307942 7.434896 11.484375 7.734375 10.722656 8.183594 C 11.295572 7.819012 11.735025 7.353517 12.041016 6.787109 C 12.347005 6.220704 12.5 5.598959 12.5 4.921875 C 12.5 4.414062 12.399088 3.937176 12.197266 3.491211 C 11.995442 3.045248 11.722005 2.65625 11.376953 2.324219 C 11.0319 1.992188 10.633138 1.730145 10.180664 1.538086 C 9.728189 1.346029 9.251302 1.25 8.75 1.25 C 8.229166 1.25 7.740885 1.347656 7.285156 1.542969 C 6.829427 1.738281 6.432292 2.005209 6.09375 2.34375 C 5.755208 2.682293 5.488281 3.079428 5.292969 3.535156 C 5.097656 3.990887 5 4.479167 5 5 C 5 5.501303 5.096028 5.97819 5.288086 6.430664 C 5.480143 6.883139 5.742188 7.281902 6.074219 7.626953 C 6.40625 7.972006 6.795247 8.245443 7.241211 8.447266 C 7.687174 8.649089 8.164062 8.75 8.671875 8.75 C 9.029947 8.75 9.368489 8.710938 9.6875 8.632812 C 10.00651 8.554688 10.322266 8.424479 10.634766 8.242188 C 9.873047 8.704428 9.222005 9.290365 8.681641 10 L 8.662109 10 C 8.011067 10 7.389323 9.868164 6.796875 9.604492 C 6.204427 9.34082 5.681966 8.984375 5.229492 8.535156 C 4.777018 8.085938 4.417317 7.565104 4.150391 6.972656 C 3.883463 6.380209 3.75 5.755209 3.75 5.097656 Z M 8.75 14.375 C 8.75 13.600261 8.898111 12.871094 9.194336 12.1875 C 9.49056 11.503906 9.892578 10.908203 10.400391 10.400391 C 10.908203 9.892578 11.503906 9.490561 12.1875 9.194336 C 12.871093 8.898112 13.60026 8.75 14.375 8.75 C 14.889322 8.75 15.385741 8.816732 15.864258 8.950195 C 16.342773 9.083659 16.790363 9.272461 17.207031 9.516602 C 17.623697 9.760742 18.004557 10.055339 18.349609 10.400391 C 18.69466 10.745443 18.989258 11.126303 19.233398 11.542969 C 19.477539 11.959636 19.66634 12.407227 19.799805 12.885742 C 19.933268 13.364258 20 13.860678 20 14.375 C 20 15.14974 19.851887 15.878906 19.555664 16.5625 C 19.259439 17.246094 18.857422 17.841797 18.349609 18.349609 C 17.841797 18.857422 17.246094 19.259439 16.5625 19.555664 C 15.878906 19.851889 15.149739 20 14.375 20 C 13.59375 20 12.861328 19.853516 12.177734 19.560547 C 11.494141 19.267578 10.898438 18.867188 10.390625 18.359375 C 9.882812 17.851562 9.482422 17.255859 9.189453 16.572266 C 8.896484 15.888672 8.75 15.15625 8.75 14.375 Z M 0 13.701172 C 0 13.375651 0.066732 13.064779 0.200195 12.768555 C 0.333659 12.472331 0.512695 12.211914 0.737305 11.987305 C 0.961914 11.762695 1.222331 11.583659 1.518555 11.450195 C 1.814779 11.316732 2.125651 11.25 2.451172 11.25 L 7.900391 11.25 C 7.809244 11.451823 7.722981 11.656901 7.641602 11.865234 C 7.560221 12.073568 7.490234 12.285156 7.431641 12.5 L 2.5 12.5 C 2.324219 12.5 2.161458 12.532553 2.011719 12.597656 C 1.861979 12.662761 1.730143 12.752279 1.616211 12.866211 C 1.502279 12.980144 1.41276 13.111979 1.347656 13.261719 C 1.282552 13.411459 1.25 13.574219 1.25 13.75 C 1.25 14.407553 1.359049 14.986979 1.577148 15.488281 C 1.795247 15.989584 2.091471 16.425781 2.46582 16.796875 C 2.840169 17.167969 3.273112 17.478842 3.764648 17.729492 C 4.256185 17.980143 4.777018 18.180338 5.327148 18.330078 C 5.877278 18.479818 6.438802 18.58724 7.011719 18.652344 C 7.584635 18.717447 8.138021 18.75 8.671875 18.75 C 8.847656 18.977865 9.033203 19.192709 9.228516 19.394531 C 9.423828 19.596354 9.635416 19.785156 9.863281 19.960938 C 9.674479 19.973959 9.488932 19.983725 9.306641 19.990234 C 9.124349 19.996744 8.938802 20 8.75 20 C 8.333333 20 7.908528 19.986979 7.475586 19.960938 C 7.042643 19.934896 6.612955 19.887695 6.186523 19.819336 C 5.760091 19.750977 5.340169 19.65983 4.926758 19.545898 C 4.513346 19.431967 4.114583 19.287109 3.730469 19.111328 C 3.157552 18.850912 2.641602 18.543295 2.182617 18.188477 C 1.723633 17.833658 1.333008 17.431641 1.010742 16.982422 C 0.688477 16.533203 0.439453 16.035156 0.263672 15.488281 C 0.087891 14.941406 0 14.345703 0 13.701172 Z M 14.375 15.253906 L 16.123047 17.001953 C 16.246744 17.12565 16.393229 17.1875 16.5625 17.1875 C 16.73177 17.1875 16.878254 17.12565 17.001953 17.001953 C 17.12565 16.878256 17.1875 16.731771 17.1875 16.5625 C 17.1875 16.39323 17.12565 16.246746 17.001953 16.123047 L 15.263672 14.375 L 17.001953 12.626953 C 17.12565 12.503256 17.1875 12.356771 17.1875 12.1875 C 17.1875 12.018229 17.12565 11.871745 17.001953 11.748047 C 16.878254 11.62435 16.73177 11.5625 16.5625 11.5625 C 16.393229 11.5625 16.246744 11.62435 16.123047 11.748047 L 14.375 13.486328 L 12.626953 11.748047 C 12.503255 11.62435 12.356771 11.5625 12.1875 11.5625 C 12.018229 11.5625 11.871744 11.62435 11.748047 11.748047 C 11.624349 11.871745 11.5625 12.018229 11.5625 12.1875 C 11.5625 12.356771 11.624349 12.503256 11.748047 12.626953 L 13.496094 14.375 L 11.748047 16.123047 C 11.624349 16.246746 11.5625 16.39323 11.5625 16.5625 C 11.5625 16.731771 11.624349 16.878256 11.748047 17.001953 C 11.871744 17.12565 12.018229 17.1875 12.1875 17.1875 C 12.356771 17.1875 12.503255 17.12565 12.626953 17.001953 Z " />
-                        <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Unsubscribe}" />
-                    </StackPanel>
-                </HyperlinkButton>
+                </ListView>
             </Grid>
-        </Grid>
-
-        <!--  Attachments  -->
-        <ListView x:Name="AttachmentsListView"
-                  Grid.Row="2"
-                  x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.Attachments.Count), Mode=OneWay}"
-                  IsItemClickEnabled="True"
-                  ItemTemplate="{StaticResource FileAttachmentTemplate}"
-                  ItemsSource="{x:Bind ViewModel.Attachments, Mode=OneWay}"
-                  ItemClick="AttachmentClicked"
-                  SelectionMode="None"
-                  Height="55">
-            <ItemsControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <controls2:WrapPanel Orientation="Horizontal"/>
-                </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-        </ListView>
+        </Border>
 
         <muxc:ProgressBar
             x:Name="DownloadingProgressBar"
-            x:Load="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}"
-            IsIndeterminate="{x:Bind ViewModel.IsIndetermineProgress, Mode=OneWay}"
-            Value="{x:Bind ViewModel.CurrentDownloadPercentage, Mode=OneWay}"
             Grid.Row="3"
             Margin="12,1"
+            HorizontalAlignment="Stretch"
             VerticalAlignment="Top"
-            HorizontalAlignment="Stretch" />
+            x:Load="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}"
+            IsIndeterminate="{x:Bind ViewModel.IsIndetermineProgress, Mode=OneWay}"
+            Value="{x:Bind ViewModel.CurrentDownloadPercentage, Mode=OneWay}" />
 
         <muxc:InfoBar
             x:Name="ImageLoadingDisabledMessage"
-            Severity="Warning"
-            HorizontalContentAlignment="Stretch"
             Grid.Row="4"
             Margin="0,2"
+            HorizontalContentAlignment="Stretch"
             x:Load="{x:Bind ViewModel.IsImageRenderingDisabled, Mode=OneWay}"
+            IsOpen="True"
             Message="{x:Bind domain:Translator.ImageRenderingDisabled}"
-            IsOpen="True">
+            Severity="Warning">
             <muxc:InfoBar.ActionButton>
                 <Button
+                    HorizontalAlignment="Right"
                     Command="{x:Bind ViewModel.ForceImageLoadingCommand}"
-                    Content="{x:Bind domain:Translator.Buttons_EnableImageRendering}"
-                    HorizontalAlignment="Right" />
+                    Content="{x:Bind domain:Translator.Buttons_EnableImageRendering}" />
             </muxc:InfoBar.ActionButton>
         </muxc:InfoBar>
 
-        <Grid
-            Grid.Row="5"
-            CornerRadius="3"
-            Padding="0">
+        <Border
+            Grid.Row="1"
+            Background="{ThemeResource WorkZoneBackground}"
+            BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
+            CornerRadius="10">
+            <Grid Padding="0">
 
-            <Grid Background="White" Visibility="{x:Bind IsDarkEditor, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
+                <Grid Background="White" Visibility="{x:Bind IsDarkEditor, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
 
-            <controls:WebView2
-                x:Name="Chromium"
-                NavigationStarting="WebViewNavigationStarting"
-                FontFamily="Segoe UI" />
+                <controls:WebView2
+                    x:Name="Chromium"
+                    FontFamily="Segoe UI"
+                    NavigationStarting="WebViewNavigationStarting" />
 
-            <muxc:ProgressRing
-                IsActive="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}"
-                HorizontalAlignment="Center"
-                Width="50"
-                Height="50"
-                VerticalAlignment="Center" />
-        </Grid>
+                <muxc:ProgressRing
+                    Width="50"
+                    Height="50"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    IsActive="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}" />
+            </Grid>
+        </Border>
     </Grid>
 
 </abstract:MailRenderingPageAbstract>

From 1e12ddd8e210075bafb9f9293bbb7978d7d02eba Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Sun, 23 Jun 2024 23:04:42 +0200
Subject: [PATCH 2/8] Fix custom themes and drag/drop

---
 Wino.Mail/AppThemes/Acrylic.xaml       | 22 +++++--------
 Wino.Mail/AppThemes/Clouds.xaml        | 14 +++-----
 Wino.Mail/AppThemes/Custom.xaml        | 14 +++-----
 Wino.Mail/AppThemes/Forest.xaml        | 10 ++----
 Wino.Mail/AppThemes/Garden.xaml        | 14 +++-----
 Wino.Mail/AppThemes/Mica.xaml          |  6 ----
 Wino.Mail/AppThemes/Nighty.xaml        |  8 ++---
 Wino.Mail/AppThemes/Snowflake.xaml     | 12 +++----
 Wino.Mail/Styles/Colors.xaml           |  4 +--
 Wino.Mail/Views/ComposePage.xaml       | 45 ++++++++++++--------------
 Wino.Mail/Views/MailListPage.xaml      |  2 +-
 Wino.Mail/Views/MailRenderingPage.xaml |  4 +--
 12 files changed, 53 insertions(+), 102 deletions(-)

diff --git a/Wino.Mail/AppThemes/Acrylic.xaml b/Wino.Mail/AppThemes/Acrylic.xaml
index 5c833a97..fb84bf43 100644
--- a/Wino.Mail/AppThemes/Acrylic.xaml
+++ b/Wino.Mail/AppThemes/Acrylic.xaml
@@ -1,43 +1,37 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Microsoft.UI.Xaml.Media"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Acrylic</x:String>
     <x:Boolean x:Key="UseMica">False</x:Boolean>
 
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">0,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <!--  Acrylic Template  -->
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
-            <!--  Reading Pane Background  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">white</SolidColorBrush>
-
             <!--  Reading Page Date/Name Group Header Background  -->
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#ecf0f1</SolidColorBrush>
 
             <local:AcrylicBrush
                 x:Key="WinoApplicationBackgroundColor"
-                TintColor="#FCFCFC"
-                TintOpacity="0.75"
+                BackgroundSource="HostBackdrop"
                 FallbackColor="#F9F9F9"
-                BackgroundSource="HostBackdrop" />
+                TintColor="#FCFCFC"
+                TintOpacity="0.75" />
         </ResourceDictionary>
 
         <ResourceDictionary x:Name="Dark">
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">Transparent</SolidColorBrush>
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#2C2C2C</SolidColorBrush>
 
             <local:AcrylicBrush
                 x:Key="WinoApplicationBackgroundColor"
-                TintColor="#2C2C2C"
-                TintOpacity="0.30"
+                BackgroundSource="HostBackdrop"
                 FallbackColor="#2C2C2C"
-                BackgroundSource="HostBackdrop" />
+                TintColor="#2C2C2C"
+                TintOpacity="0.30" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/Wino.Mail/AppThemes/Clouds.xaml b/Wino.Mail/AppThemes/Clouds.xaml
index 93d3d314..6b443b7e 100644
--- a/Wino.Mail/AppThemes/Clouds.xaml
+++ b/Wino.Mail/AppThemes/Clouds.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Clouds</x:String>
     <x:String x:Key="ThemeBackgroundImage">ms-appx:///BackgroundImages/Clouds.jpg</x:String>
@@ -9,19 +9,13 @@
 
     <ImageBrush x:Key="WinoApplicationBackgroundColor" ImageSource="{StaticResource ThemeBackgroundImage}" />
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">4,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
-            <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3FFFFFF</SolidColorBrush>
-            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#FFFFFF</SolidColorBrush>
+            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#b2dffc</SolidColorBrush>
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
-            <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3262626</SolidColorBrush>
-            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#5413191F</SolidColorBrush>
+            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#b2dffc</SolidColorBrush>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/Wino.Mail/AppThemes/Custom.xaml b/Wino.Mail/AppThemes/Custom.xaml
index 0714844b..71bbf1a3 100644
--- a/Wino.Mail/AppThemes/Custom.xaml
+++ b/Wino.Mail/AppThemes/Custom.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Custom</x:String>
     <x:String x:Key="ThemeBackgroundImage">ms-appdata:///local/CustomWallpaper.jpg</x:String>
@@ -9,11 +9,8 @@
 
     <ImageBrush
         x:Key="WinoApplicationBackgroundColor"
-        Stretch="UniformToFill"
-        ImageSource="{StaticResource ThemeBackgroundImage}" />
-
-    <Thickness x:Key="RendererGridMargin">0,0,0,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">0,6,6,0</xaml:CornerRadius>
+        ImageSource="{StaticResource ThemeBackgroundImage}"
+        Stretch="UniformToFill" />
 
     <!--  Navigation View Settings  -->
     <xaml:CornerRadius x:Key="NavigationViewContentGridCornerRadius">0,0,0,0</xaml:CornerRadius>
@@ -27,9 +24,6 @@
 
             <Color x:Key="MainCustomThemeColor">#D9FFFFFF</Color>
 
-            <!--  Reading Pane Background  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush" Color="{StaticResource MainCustomThemeColor}" />
-
             <SolidColorBrush x:Key="AppBarBackgroundColor" Color="{StaticResource MainCustomThemeColor}" />
             <SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent" />
             <SolidColorBrush x:Key="NavigationViewExpandedPaneBackground" Color="{StaticResource MainCustomThemeColor}" />
diff --git a/Wino.Mail/AppThemes/Forest.xaml b/Wino.Mail/AppThemes/Forest.xaml
index 88afd2fe..b2654834 100644
--- a/Wino.Mail/AppThemes/Forest.xaml
+++ b/Wino.Mail/AppThemes/Forest.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Forest</x:String>
     <x:String x:Key="ThemeBackgroundImage">ms-appx:///BackgroundImages/Forest.jpg</x:String>
@@ -9,18 +9,12 @@
 
     <ImageBrush x:Key="WinoApplicationBackgroundColor" ImageSource="{StaticResource ThemeBackgroundImage}" />
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">4,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
-            <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#2900F00A</SolidColorBrush>
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#A800D608</SolidColorBrush>
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
-            <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3262626</SolidColorBrush>
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#59001C01</SolidColorBrush>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
diff --git a/Wino.Mail/AppThemes/Garden.xaml b/Wino.Mail/AppThemes/Garden.xaml
index 4f904bd1..ad852e61 100644
--- a/Wino.Mail/AppThemes/Garden.xaml
+++ b/Wino.Mail/AppThemes/Garden.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Garden</x:String>
     <x:String x:Key="ThemeBackgroundImage">ms-appx:///BackgroundImages/Garden.jpg</x:String>
@@ -9,19 +9,13 @@
 
     <ImageBrush x:Key="WinoApplicationBackgroundColor" ImageSource="{StaticResource ThemeBackgroundImage}" />
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">4,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
-            <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3FFFFFF</SolidColorBrush>
-            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#FFFFFF</SolidColorBrush>
+            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#dcfad8</SolidColorBrush>
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
-            <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3262626</SolidColorBrush>
-            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#5413191F</SolidColorBrush>
+            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#dcfad8</SolidColorBrush>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/Wino.Mail/AppThemes/Mica.xaml b/Wino.Mail/AppThemes/Mica.xaml
index baa97183..302451b4 100644
--- a/Wino.Mail/AppThemes/Mica.xaml
+++ b/Wino.Mail/AppThemes/Mica.xaml
@@ -8,20 +8,14 @@
 
     <SolidColorBrush x:Key="WinoApplicationBackgroundColor">Transparent</SolidColorBrush>
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">0,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <!--  Mica Template  -->
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
-            <!--  Reading Pane Background  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">white</SolidColorBrush>
-
             <!--  Reading Page Date/Name Group Header Background  -->
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#ecf0f1</SolidColorBrush>
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">Transparent</SolidColorBrush>
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#1f1f1f</SolidColorBrush>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
diff --git a/Wino.Mail/AppThemes/Nighty.xaml b/Wino.Mail/AppThemes/Nighty.xaml
index 3644c954..721f7421 100644
--- a/Wino.Mail/AppThemes/Nighty.xaml
+++ b/Wino.Mail/AppThemes/Nighty.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Nighty</x:String>
     <x:String x:Key="ThemeBackgroundImage">ms-appx:///BackgroundImages/Nighty.jpg</x:String>
@@ -9,18 +9,14 @@
 
     <ImageBrush x:Key="WinoApplicationBackgroundColor" ImageSource="{StaticResource ThemeBackgroundImage}" />
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">4,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
             <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3FFFFFF</SolidColorBrush>
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#fdcb6e</SolidColorBrush>
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
             <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3262626</SolidColorBrush>
             <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#5413191F</SolidColorBrush>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
diff --git a/Wino.Mail/AppThemes/Snowflake.xaml b/Wino.Mail/AppThemes/Snowflake.xaml
index 54a0b247..fd3ee92a 100644
--- a/Wino.Mail/AppThemes/Snowflake.xaml
+++ b/Wino.Mail/AppThemes/Snowflake.xaml
@@ -1,7 +1,7 @@
 <ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:xaml="using:Windows.UI.Xaml"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:xaml="using:Windows.UI.Xaml">
 
     <x:String x:Key="ThemeName">Snowflake</x:String>
     <x:String x:Key="ThemeBackgroundImage">ms-appx:///BackgroundImages/Snowflake.jpg</x:String>
@@ -9,19 +9,15 @@
 
     <ImageBrush x:Key="WinoApplicationBackgroundColor" ImageSource="{StaticResource ThemeBackgroundImage}" />
     <SolidColorBrush x:Key="AppBarBackgroundColor">Transparent</SolidColorBrush>
-    <Thickness x:Key="RendererGridMargin">4,0,4,0</Thickness>
-    <xaml:CornerRadius x:Key="MailListGridCornerRadius">6,6,6,6</xaml:CornerRadius>
 
     <ResourceDictionary.ThemeDictionaries>
         <ResourceDictionary x:Name="Light">
             <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3FFFFFF</SolidColorBrush>
-            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#FFFFFF</SolidColorBrush>
+            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#b0c6dd</SolidColorBrush>
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
             <!--  Brushes  -->
-            <SolidColorBrush x:Key="ReadingPaneBackgroundColorBrush">#A3262626</SolidColorBrush>
-            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#5413191F</SolidColorBrush>
+            <SolidColorBrush x:Key="MailListHeaderBackgroundColor">#b0c6dd</SolidColorBrush>
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/Wino.Mail/Styles/Colors.xaml b/Wino.Mail/Styles/Colors.xaml
index 6d8d9bab..3a351702 100644
--- a/Wino.Mail/Styles/Colors.xaml
+++ b/Wino.Mail/Styles/Colors.xaml
@@ -13,13 +13,13 @@
         <ResourceDictionary x:Name="Light">
             <SolidColorBrush x:Key="AttachmentBrush">#fdcb6e</SolidColorBrush>
             <SolidColorBrush x:Key="SettingsPaneBorderBrush">#636e72</SolidColorBrush>
-            <SolidColorBrush x:Key="WorkZoneBackground" Color="White" />
+            <SolidColorBrush x:Key="WinoContentZoneBackgroud" Color="White" />
         </ResourceDictionary>
         <ResourceDictionary x:Name="Dark">
             <SolidColorBrush x:Key="AttachmentBrush">#fdcb6e</SolidColorBrush>
             <SolidColorBrush x:Key="SettingsPaneBorderBrush">#2d3436</SolidColorBrush>
             <local:AcrylicBrush
-                x:Key="WorkZoneBackground"
+                x:Key="WinoContentZoneBackgroud"
                 BackgroundSource="Backdrop"
                 FallbackColor="#2C2C2C"
                 TintColor="#2C2C2C"
diff --git a/Wino.Mail/Views/ComposePage.xaml b/Wino.Mail/Views/ComposePage.xaml
index 2c21d4f6..f9cb8879 100644
--- a/Wino.Mail/Views/ComposePage.xaml
+++ b/Wino.Mail/Views/ComposePage.xaml
@@ -107,7 +107,12 @@
         </DataTemplate>
     </Page.Resources>
 
-    <Grid Padding="7,0,7,7">
+    <Grid
+        Padding="7,0,7,7"
+        AllowDrop="True"
+        DragLeave="OnComposeGridDragLeave"
+        DragOver="OnComposeGridDragOver"
+        RowSpacing="7">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
@@ -115,17 +120,11 @@
 
         <Border
             Grid.Row="0"
-            Margin="0,0,0,7"
-            Background="{ThemeResource WorkZoneBackground}"
+            Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="7">
-            <Grid
-                Grid.Row="0"
-                AllowDrop="True"
-                Background="{ThemeResource AppBarBackgroundColor}"
-                DragLeave="OnComposeGridDragLeave"
-                DragOver="OnComposeGridDragOver">
+            <Grid>
                 <Grid.Resources>
                     <SolidColorBrush x:Key="AutoSuggestBoxBorderThemeBrush">Transparent</SolidColorBrush>
                 </Grid.Resources>
@@ -467,7 +466,7 @@
                 <!--  Mime Info  -->
                 <Grid
                     Grid.Row="2"
-                    Padding="16,0"
+                    Padding="16,0,16,10"
                     ColumnSpacing="12"
                     RowSpacing="3">
                     <Grid.RowDefinitions>
@@ -477,7 +476,6 @@
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
-                        <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
 
                     <Grid.ColumnDefinitions>
@@ -509,14 +507,14 @@
 
                     <!--  To  -->
                     <TextBlock
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Margin="0,4,0,0"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
                         Text="{x:Bind domain:Translator.ComposerTo}" />
 
                     <Grid
-                        Grid.Row="2"
+                        Grid.Row="1"
                         Grid.Column="1"
                         VerticalAlignment="Center">
                         <Grid.ColumnDefinitions>
@@ -559,7 +557,7 @@
                     <!--  CC BCC  -->
                     <TextBlock
                         x:Name="CCTextBlock"
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Margin="0,4,0,0"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
@@ -568,7 +566,7 @@
 
                     <controls1:TokenizingTextBox
                         x:Name="CCBox"
-                        Grid.Row="3"
+                        Grid.Row="2"
                         Grid.Column="1"
                         VerticalAlignment="Center"
                         LostFocus="AddressBoxLostFocus"
@@ -582,7 +580,7 @@
 
                     <TextBlock
                         x:Name="BccTextBlock"
-                        Grid.Row="4"
+                        Grid.Row="3"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
                         Text="Bcc: "
@@ -590,7 +588,7 @@
 
                     <controls1:TokenizingTextBox
                         x:Name="BccBox"
-                        Grid.Row="4"
+                        Grid.Row="3"
                         Grid.Column="1"
                         VerticalAlignment="Center"
                         LostFocus="AddressBoxLostFocus"
@@ -604,14 +602,14 @@
 
                     <!--  Subject  -->
                     <TextBlock
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Margin="0,4,0,0"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
                         Text="{x:Bind domain:Translator.ComposerSubject}" />
 
                     <TextBox
-                        Grid.Row="5"
+                        Grid.Row="4"
                         Grid.Column="1"
                         Margin="0,4,0,0"
                         BorderThickness="0"
@@ -620,7 +618,7 @@
                     <!--  Attachments  -->
                     <ListView
                         x:Name="AttachmentsListView"
-                        Grid.Row="6"
+                        Grid.Row="5"
                         Grid.ColumnSpan="2"
                         x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.IncludedAttachments.Count), Mode=OneWay}"
                         IsItemClickEnabled="True"
@@ -645,10 +643,7 @@
                     DragOver="OnFileDropGridDragOver"
                     Drop="OnFileDropGridFileDropped"
                     Visibility="{x:Bind ViewModel.IsDraggingOverComposerGrid, Mode=OneWay}">
-                    <Grid
-                        Margin="0,7,5,0"
-                        Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}"
-                        CornerRadius="9">
+                    <Grid Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}" CornerRadius="9">
                         <Rectangle
                             x:Name="DropZoneBorder"
                             Fill="Transparent"
@@ -704,7 +699,7 @@
         </Border>
         <Border
             Grid.Row="1"
-            Background="{ThemeResource WorkZoneBackground}"
+            Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="10">
diff --git a/Wino.Mail/Views/MailListPage.xaml b/Wino.Mail/Views/MailListPage.xaml
index b6dc7407..67cdfba2 100644
--- a/Wino.Mail/Views/MailListPage.xaml
+++ b/Wino.Mail/Views/MailListPage.xaml
@@ -415,7 +415,7 @@
             Grid.Column="0"
             Margin="0,0,0,7"
             Padding="5,0,0,0"
-            Background="{ThemeResource WorkZoneBackground}"
+            Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="7">
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index 9a1d5a4e..f384d872 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -158,7 +158,7 @@
         <Border
             Grid.Row="0"
             Margin="0,0,0,7"
-            Background="{ThemeResource WorkZoneBackground}"
+            Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="7">
@@ -363,7 +363,7 @@
 
         <Border
             Grid.Row="1"
-            Background="{ThemeResource WorkZoneBackground}"
+            Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="10">

From c598daab9b39b2e972ba6799c5589047b49a7446 Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Mon, 24 Jun 2024 00:20:54 +0200
Subject: [PATCH 3/8] Fixed command bar open state

---
 Wino.Mail/App.xaml                     | 6 ++++++
 Wino.Mail/Views/MailRenderingPage.xaml | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/Wino.Mail/App.xaml b/Wino.Mail/App.xaml
index 0ed8224f..33e6fcbc 100644
--- a/Wino.Mail/App.xaml
+++ b/Wino.Mail/App.xaml
@@ -209,6 +209,12 @@
                     <Style TargetType="ScrollViewer">
                         <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
                     </Style>
+
+                    <!--  Remove border/backgroud of command bar  -->
+                    <SolidColorBrush x:Key="CommandBarBackground" Color="Transparent" />
+                    <SolidColorBrush x:Key="CommandBarBackgroundOpen" Color="Transparent" />
+                    <SolidColorBrush x:Key="CommandBarBorderBrushOpen" Color="Transparent" />
+                    <Thickness x:Key="CommandBarBorderThicknessOpen">0</Thickness>
                 </ResourceDictionary>
 
                 <!--  Last item must always be the default theme.  -->
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index f384d872..a0841445 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -185,7 +185,7 @@
                             PrimaryCommands="{x:Bind ViewModel.MenuItems, Mode=OneWay}" />
                     </interactivity:Interaction.Behaviors>
                     <CommandBar.Content>
-                        <Grid Margin="0,6" RowSpacing="4">
+                        <Grid Padding="0,5">
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="Auto" />
                                 <ColumnDefinition Width="*" />
@@ -366,8 +366,8 @@
             Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
-            CornerRadius="10">
-            <Grid Padding="0">
+            CornerRadius="7">
+            <Grid Margin="1" CornerRadius="7">
 
                 <Grid Background="White" Visibility="{x:Bind IsDarkEditor, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
 

From f79559510744baaba53ffc599e6d0d5e8bd4754d Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Mon, 24 Jun 2024 00:57:23 +0200
Subject: [PATCH 4/8] Fix narrowed view bug

---
 Wino.Mail/Views/MailListPage.xaml.cs | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/Wino.Mail/Views/MailListPage.xaml.cs b/Wino.Mail/Views/MailListPage.xaml.cs
index f1b5680e..1ba6fb81 100644
--- a/Wino.Mail/Views/MailListPage.xaml.cs
+++ b/Wino.Mail/Views/MailListPage.xaml.cs
@@ -153,19 +153,24 @@ namespace Wino.Views
 
         private void UpdateAdaptiveness()
         {
-            ReaderGridContainer.Visibility = !(StatePersistanceService.IsReadingMail && StatePersistanceService.IsReaderNarrowed) ? Visibility.Visible : Visibility.Collapsed;
-            ReaderGrid.Visibility = !(StatePersistanceService.IsReadingMail && StatePersistanceService.IsReaderNarrowed) ? Visibility.Visible : Visibility.Collapsed;
+            var readerGridVisibility = !(StatePersistanceService.IsReadingMail && StatePersistanceService.IsReaderNarrowed) ? Visibility.Visible : Visibility.Collapsed;
+            ReaderGridContainer.Visibility = readerGridVisibility;
+            ReaderGrid.Visibility = readerGridVisibility;
             RenderingFrame.Visibility = StatePersistanceService.IsReadingMail ? Visibility.Visible : (StatePersistanceService.IsReaderNarrowed ? Visibility.Collapsed : Visibility.Visible);
 
             if (RenderingFrame.Visibility == Visibility.Collapsed)
             {
                 Grid.SetColumn(ReaderGrid, 0);
                 Grid.SetColumnSpan(ReaderGrid, 2);
+                Grid.SetColumn(ReaderGridContainer, 0);
+                Grid.SetColumnSpan(ReaderGridContainer, 2);
             }
             else
             {
                 Grid.SetColumn(ReaderGrid, 0);
                 Grid.SetColumnSpan(ReaderGrid, 1);
+                Grid.SetColumn(ReaderGridContainer, 0);
+                Grid.SetColumnSpan(ReaderGridContainer, 1);
             }
 
             if (ReaderGrid.Visibility == Visibility.Collapsed)

From 5fb23ab8bff3e7912f51eb34cf14cdf1471c7438 Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Mon, 24 Jun 2024 01:36:53 +0200
Subject: [PATCH 5/8] simplify xaml spacing

---
 Wino.Mail/Views/MailListPage.xaml      | 3 +--
 Wino.Mail/Views/MailRenderingPage.xaml | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/Wino.Mail/Views/MailListPage.xaml b/Wino.Mail/Views/MailListPage.xaml
index fd74c0bd..badaf85e 100644
--- a/Wino.Mail/Views/MailListPage.xaml
+++ b/Wino.Mail/Views/MailListPage.xaml
@@ -407,7 +407,7 @@
         </Grid>
     </wino:BasePage.ShellContent>
 
-    <Grid x:Name="RootGrid">
+    <Grid x:Name="RootGrid" Padding="0,0,0,7">
         <Grid.ColumnDefinitions>
             <ColumnDefinition
                 x:Name="ReaderColumn"
@@ -420,7 +420,6 @@
         <Border
             x:Name="ReaderGridContainer"
             Grid.Column="0"
-            Margin="0,0,0,7"
             Padding="5,0,0,0"
             Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index a0841445..05c2772d 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -149,15 +149,16 @@
     </Page.Resources>
 
     <!--  Attachments and WebView2  -->
-    <Grid x:Name="RendererGridFrame" Padding="7,0,7,7">
+    <Grid
+        x:Name="RendererGridFrame"
+        Padding="7,0"
+        RowSpacing="7">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
 
         <Border
-            Grid.Row="0"
-            Margin="0,0,0,7"
             Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
@@ -171,7 +172,6 @@
                 </Grid.RowDefinitions>
                 <CommandBar
                     x:Name="RendererBar"
-                    Grid.Row="0"
                     Margin="8,6,0,0"
                     HorizontalContentAlignment="Stretch"
                     DefaultLabelPosition="Right"

From bb418e51d4f37141724dcb73c60e4a6a60a83a9e Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Mon, 24 Jun 2024 01:38:50 +0200
Subject: [PATCH 6/8] fix compose page spacing

---
 Wino.Mail/Views/ComposePage.xaml | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/Wino.Mail/Views/ComposePage.xaml b/Wino.Mail/Views/ComposePage.xaml
index f9cb8879..6724d7ac 100644
--- a/Wino.Mail/Views/ComposePage.xaml
+++ b/Wino.Mail/Views/ComposePage.xaml
@@ -108,7 +108,7 @@
     </Page.Resources>
 
     <Grid
-        Padding="7,0,7,7"
+        Padding="7,0"
         AllowDrop="True"
         DragLeave="OnComposeGridDragLeave"
         DragOver="OnComposeGridDragOver"
@@ -119,7 +119,6 @@
         </Grid.RowDefinitions>
 
         <Border
-            Grid.Row="0"
             Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"

From 0b96f69a1dff2a007de5a19363994753c9e43572 Mon Sep 17 00:00:00 2001
From: Aleh Khantsevich <aleh.khantsevich@gmail.com>
Date: Tue, 25 Jun 2024 00:37:09 +0200
Subject: [PATCH 7/8] Fix backgrounds

---
 Wino.Mail/Styles/Colors.xaml                  |   7 +-
 Wino.Mail/Views/MailRenderingPage.xaml        | 124 +++++++++---------
 Wino.Mail/Views/NewAccountManagementPage.xaml |  73 ++++++-----
 Wino.Mail/Views/SettingsPage.xaml             |  73 ++++++-----
 Wino.Mail/Views/WelcomePage.xaml              |  45 ++++---
 5 files changed, 167 insertions(+), 155 deletions(-)

diff --git a/Wino.Mail/Styles/Colors.xaml b/Wino.Mail/Styles/Colors.xaml
index 3a351702..0da0285c 100644
--- a/Wino.Mail/Styles/Colors.xaml
+++ b/Wino.Mail/Styles/Colors.xaml
@@ -18,12 +18,7 @@
         <ResourceDictionary x:Name="Dark">
             <SolidColorBrush x:Key="AttachmentBrush">#fdcb6e</SolidColorBrush>
             <SolidColorBrush x:Key="SettingsPaneBorderBrush">#2d3436</SolidColorBrush>
-            <local:AcrylicBrush
-                x:Key="WinoContentZoneBackgroud"
-                BackgroundSource="Backdrop"
-                FallbackColor="#2C2C2C"
-                TintColor="#2C2C2C"
-                TintOpacity="0.30" />
+            <StaticResource x:Key="WinoContentZoneBackgroud" ResourceKey="LayerFillColorDefaultBrush" />
         </ResourceDictionary>
     </ResourceDictionary.ThemeDictionaries>
 </ResourceDictionary>
diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index 05c2772d..b8e642d4 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -163,16 +163,44 @@
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
             BorderThickness="1"
             CornerRadius="7">
-            <Grid>
+            <Grid Margin="8,8,8,0">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
                     <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
                 </Grid.RowDefinitions>
+                <Grid Grid.Row="0" Margin="5,0,0,0">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="Auto" />
+                    </Grid.ColumnDefinitions>
+
+                    <TextBlock
+                        VerticalAlignment="Center"
+                        FontSize="18"
+                        FontWeight="SemiBold"
+                        Text="{x:Bind ViewModel.Subject, Mode=OneWay}"
+                        TextWrapping="Wrap" />
+
+                    <HyperlinkButton
+                        Grid.Column="1"
+                        Margin="0,0,3,0"
+                        Command="{x:Bind ViewModel.UnsubscribeCommand}"
+                        Visibility="{x:Bind ViewModel.CanUnsubscribe, Mode=OneWay}">
+                        <StackPanel Orientation="Horizontal" Spacing="6">
+                            <PathIcon
+                                HorizontalAlignment="Center"
+                                VerticalAlignment="Center"
+                                Data="F1 M 3.75 4.902344 C 3.75 4.225262 3.885091 3.588867 4.155273 2.993164 C 4.425456 2.397461 4.790039 1.878256 5.249023 1.435547 C 5.708008 0.99284 6.238606 0.642904 6.84082 0.385742 C 7.443034 0.128582 8.079427 0 8.75 0 C 9.420572 0 10.056966 0.128582 10.65918 0.385742 C 11.261393 0.642904 11.791992 0.99284 12.250977 1.435547 C 12.709961 1.878256 13.074544 2.397461 13.344727 2.993164 C 13.614908 3.588867 13.75 4.225262 13.75 4.902344 C 13.75 5.332031 13.707682 5.740561 13.623047 6.12793 C 13.538411 6.5153 13.395182 6.901042 13.193359 7.285156 C 12.307942 7.434896 11.484375 7.734375 10.722656 8.183594 C 11.295572 7.819012 11.735025 7.353517 12.041016 6.787109 C 12.347005 6.220704 12.5 5.598959 12.5 4.921875 C 12.5 4.414062 12.399088 3.937176 12.197266 3.491211 C 11.995442 3.045248 11.722005 2.65625 11.376953 2.324219 C 11.0319 1.992188 10.633138 1.730145 10.180664 1.538086 C 9.728189 1.346029 9.251302 1.25 8.75 1.25 C 8.229166 1.25 7.740885 1.347656 7.285156 1.542969 C 6.829427 1.738281 6.432292 2.005209 6.09375 2.34375 C 5.755208 2.682293 5.488281 3.079428 5.292969 3.535156 C 5.097656 3.990887 5 4.479167 5 5 C 5 5.501303 5.096028 5.97819 5.288086 6.430664 C 5.480143 6.883139 5.742188 7.281902 6.074219 7.626953 C 6.40625 7.972006 6.795247 8.245443 7.241211 8.447266 C 7.687174 8.649089 8.164062 8.75 8.671875 8.75 C 9.029947 8.75 9.368489 8.710938 9.6875 8.632812 C 10.00651 8.554688 10.322266 8.424479 10.634766 8.242188 C 9.873047 8.704428 9.222005 9.290365 8.681641 10 L 8.662109 10 C 8.011067 10 7.389323 9.868164 6.796875 9.604492 C 6.204427 9.34082 5.681966 8.984375 5.229492 8.535156 C 4.777018 8.085938 4.417317 7.565104 4.150391 6.972656 C 3.883463 6.380209 3.75 5.755209 3.75 5.097656 Z M 8.75 14.375 C 8.75 13.600261 8.898111 12.871094 9.194336 12.1875 C 9.49056 11.503906 9.892578 10.908203 10.400391 10.400391 C 10.908203 9.892578 11.503906 9.490561 12.1875 9.194336 C 12.871093 8.898112 13.60026 8.75 14.375 8.75 C 14.889322 8.75 15.385741 8.816732 15.864258 8.950195 C 16.342773 9.083659 16.790363 9.272461 17.207031 9.516602 C 17.623697 9.760742 18.004557 10.055339 18.349609 10.400391 C 18.69466 10.745443 18.989258 11.126303 19.233398 11.542969 C 19.477539 11.959636 19.66634 12.407227 19.799805 12.885742 C 19.933268 13.364258 20 13.860678 20 14.375 C 20 15.14974 19.851887 15.878906 19.555664 16.5625 C 19.259439 17.246094 18.857422 17.841797 18.349609 18.349609 C 17.841797 18.857422 17.246094 19.259439 16.5625 19.555664 C 15.878906 19.851889 15.149739 20 14.375 20 C 13.59375 20 12.861328 19.853516 12.177734 19.560547 C 11.494141 19.267578 10.898438 18.867188 10.390625 18.359375 C 9.882812 17.851562 9.482422 17.255859 9.189453 16.572266 C 8.896484 15.888672 8.75 15.15625 8.75 14.375 Z M 0 13.701172 C 0 13.375651 0.066732 13.064779 0.200195 12.768555 C 0.333659 12.472331 0.512695 12.211914 0.737305 11.987305 C 0.961914 11.762695 1.222331 11.583659 1.518555 11.450195 C 1.814779 11.316732 2.125651 11.25 2.451172 11.25 L 7.900391 11.25 C 7.809244 11.451823 7.722981 11.656901 7.641602 11.865234 C 7.560221 12.073568 7.490234 12.285156 7.431641 12.5 L 2.5 12.5 C 2.324219 12.5 2.161458 12.532553 2.011719 12.597656 C 1.861979 12.662761 1.730143 12.752279 1.616211 12.866211 C 1.502279 12.980144 1.41276 13.111979 1.347656 13.261719 C 1.282552 13.411459 1.25 13.574219 1.25 13.75 C 1.25 14.407553 1.359049 14.986979 1.577148 15.488281 C 1.795247 15.989584 2.091471 16.425781 2.46582 16.796875 C 2.840169 17.167969 3.273112 17.478842 3.764648 17.729492 C 4.256185 17.980143 4.777018 18.180338 5.327148 18.330078 C 5.877278 18.479818 6.438802 18.58724 7.011719 18.652344 C 7.584635 18.717447 8.138021 18.75 8.671875 18.75 C 8.847656 18.977865 9.033203 19.192709 9.228516 19.394531 C 9.423828 19.596354 9.635416 19.785156 9.863281 19.960938 C 9.674479 19.973959 9.488932 19.983725 9.306641 19.990234 C 9.124349 19.996744 8.938802 20 8.75 20 C 8.333333 20 7.908528 19.986979 7.475586 19.960938 C 7.042643 19.934896 6.612955 19.887695 6.186523 19.819336 C 5.760091 19.750977 5.340169 19.65983 4.926758 19.545898 C 4.513346 19.431967 4.114583 19.287109 3.730469 19.111328 C 3.157552 18.850912 2.641602 18.543295 2.182617 18.188477 C 1.723633 17.833658 1.333008 17.431641 1.010742 16.982422 C 0.688477 16.533203 0.439453 16.035156 0.263672 15.488281 C 0.087891 14.941406 0 14.345703 0 13.701172 Z M 14.375 15.253906 L 16.123047 17.001953 C 16.246744 17.12565 16.393229 17.1875 16.5625 17.1875 C 16.73177 17.1875 16.878254 17.12565 17.001953 17.001953 C 17.12565 16.878256 17.1875 16.731771 17.1875 16.5625 C 17.1875 16.39323 17.12565 16.246746 17.001953 16.123047 L 15.263672 14.375 L 17.001953 12.626953 C 17.12565 12.503256 17.1875 12.356771 17.1875 12.1875 C 17.1875 12.018229 17.12565 11.871745 17.001953 11.748047 C 16.878254 11.62435 16.73177 11.5625 16.5625 11.5625 C 16.393229 11.5625 16.246744 11.62435 16.123047 11.748047 L 14.375 13.486328 L 12.626953 11.748047 C 12.503255 11.62435 12.356771 11.5625 12.1875 11.5625 C 12.018229 11.5625 11.871744 11.62435 11.748047 11.748047 C 11.624349 11.871745 11.5625 12.018229 11.5625 12.1875 C 11.5625 12.356771 11.624349 12.503256 11.748047 12.626953 L 13.496094 14.375 L 11.748047 16.123047 C 11.624349 16.246746 11.5625 16.39323 11.5625 16.5625 C 11.5625 16.731771 11.624349 16.878256 11.748047 17.001953 C 11.871744 17.12565 12.018229 17.1875 12.1875 17.1875 C 12.356771 17.1875 12.503255 17.12565 12.626953 17.001953 Z " />
+                            <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Unsubscribe}" />
+                        </StackPanel>
+                    </HyperlinkButton>
+                </Grid>
                 <CommandBar
                     x:Name="RendererBar"
-                    Margin="8,6,0,0"
+                    Grid.Row="1"
                     HorizontalContentAlignment="Stretch"
                     DefaultLabelPosition="Right"
                     DynamicOverflowItemsChanging="BarDynamicOverflowChanging"
@@ -225,20 +253,15 @@
                     </CommandBar.Content>
                 </CommandBar>
                 <Grid
-                    Grid.Row="1"
-                    Padding="12,4,16,12"
+                    Grid.Row="2"
+                    Margin="5,2,0,0"
                     RowSpacing="4">
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto" />
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
 
-
-                    <StackPanel
-                        Margin="0,2,0,0"
-                        Orientation="Horizontal"
-                        Spacing="6">
-
+                    <StackPanel Orientation="Horizontal" Spacing="6">
                         <TextBlock
                             VerticalAlignment="Center"
                             FontWeight="SemiBold"
@@ -286,38 +309,13 @@
                                 </ItemsPanelTemplate>
                             </ItemsControl.ItemsPanel>
                         </ItemsControl>
-
                     </StackPanel>
-
-                    <Grid Grid.Row="1">
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="Auto" />
-                        </Grid.ColumnDefinitions>
-
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            FontSize="18"
-                            FontWeight="SemiBold"
-                            Text="{x:Bind ViewModel.Subject, Mode=OneWay}"
-                            TextWrapping="Wrap" />
-
-                        <HyperlinkButton
-                            Grid.Column="1"
-                            Command="{x:Bind ViewModel.UnsubscribeCommand}"
-                            Visibility="{x:Bind ViewModel.CanUnsubscribe, Mode=OneWay}">
-                            <StackPanel Orientation="Horizontal" Spacing="6">
-                                <PathIcon Data="F1 M 3.75 4.902344 C 3.75 4.225262 3.885091 3.588867 4.155273 2.993164 C 4.425456 2.397461 4.790039 1.878256 5.249023 1.435547 C 5.708008 0.99284 6.238606 0.642904 6.84082 0.385742 C 7.443034 0.128582 8.079427 0 8.75 0 C 9.420572 0 10.056966 0.128582 10.65918 0.385742 C 11.261393 0.642904 11.791992 0.99284 12.250977 1.435547 C 12.709961 1.878256 13.074544 2.397461 13.344727 2.993164 C 13.614908 3.588867 13.75 4.225262 13.75 4.902344 C 13.75 5.332031 13.707682 5.740561 13.623047 6.12793 C 13.538411 6.5153 13.395182 6.901042 13.193359 7.285156 C 12.307942 7.434896 11.484375 7.734375 10.722656 8.183594 C 11.295572 7.819012 11.735025 7.353517 12.041016 6.787109 C 12.347005 6.220704 12.5 5.598959 12.5 4.921875 C 12.5 4.414062 12.399088 3.937176 12.197266 3.491211 C 11.995442 3.045248 11.722005 2.65625 11.376953 2.324219 C 11.0319 1.992188 10.633138 1.730145 10.180664 1.538086 C 9.728189 1.346029 9.251302 1.25 8.75 1.25 C 8.229166 1.25 7.740885 1.347656 7.285156 1.542969 C 6.829427 1.738281 6.432292 2.005209 6.09375 2.34375 C 5.755208 2.682293 5.488281 3.079428 5.292969 3.535156 C 5.097656 3.990887 5 4.479167 5 5 C 5 5.501303 5.096028 5.97819 5.288086 6.430664 C 5.480143 6.883139 5.742188 7.281902 6.074219 7.626953 C 6.40625 7.972006 6.795247 8.245443 7.241211 8.447266 C 7.687174 8.649089 8.164062 8.75 8.671875 8.75 C 9.029947 8.75 9.368489 8.710938 9.6875 8.632812 C 10.00651 8.554688 10.322266 8.424479 10.634766 8.242188 C 9.873047 8.704428 9.222005 9.290365 8.681641 10 L 8.662109 10 C 8.011067 10 7.389323 9.868164 6.796875 9.604492 C 6.204427 9.34082 5.681966 8.984375 5.229492 8.535156 C 4.777018 8.085938 4.417317 7.565104 4.150391 6.972656 C 3.883463 6.380209 3.75 5.755209 3.75 5.097656 Z M 8.75 14.375 C 8.75 13.600261 8.898111 12.871094 9.194336 12.1875 C 9.49056 11.503906 9.892578 10.908203 10.400391 10.400391 C 10.908203 9.892578 11.503906 9.490561 12.1875 9.194336 C 12.871093 8.898112 13.60026 8.75 14.375 8.75 C 14.889322 8.75 15.385741 8.816732 15.864258 8.950195 C 16.342773 9.083659 16.790363 9.272461 17.207031 9.516602 C 17.623697 9.760742 18.004557 10.055339 18.349609 10.400391 C 18.69466 10.745443 18.989258 11.126303 19.233398 11.542969 C 19.477539 11.959636 19.66634 12.407227 19.799805 12.885742 C 19.933268 13.364258 20 13.860678 20 14.375 C 20 15.14974 19.851887 15.878906 19.555664 16.5625 C 19.259439 17.246094 18.857422 17.841797 18.349609 18.349609 C 17.841797 18.857422 17.246094 19.259439 16.5625 19.555664 C 15.878906 19.851889 15.149739 20 14.375 20 C 13.59375 20 12.861328 19.853516 12.177734 19.560547 C 11.494141 19.267578 10.898438 18.867188 10.390625 18.359375 C 9.882812 17.851562 9.482422 17.255859 9.189453 16.572266 C 8.896484 15.888672 8.75 15.15625 8.75 14.375 Z M 0 13.701172 C 0 13.375651 0.066732 13.064779 0.200195 12.768555 C 0.333659 12.472331 0.512695 12.211914 0.737305 11.987305 C 0.961914 11.762695 1.222331 11.583659 1.518555 11.450195 C 1.814779 11.316732 2.125651 11.25 2.451172 11.25 L 7.900391 11.25 C 7.809244 11.451823 7.722981 11.656901 7.641602 11.865234 C 7.560221 12.073568 7.490234 12.285156 7.431641 12.5 L 2.5 12.5 C 2.324219 12.5 2.161458 12.532553 2.011719 12.597656 C 1.861979 12.662761 1.730143 12.752279 1.616211 12.866211 C 1.502279 12.980144 1.41276 13.111979 1.347656 13.261719 C 1.282552 13.411459 1.25 13.574219 1.25 13.75 C 1.25 14.407553 1.359049 14.986979 1.577148 15.488281 C 1.795247 15.989584 2.091471 16.425781 2.46582 16.796875 C 2.840169 17.167969 3.273112 17.478842 3.764648 17.729492 C 4.256185 17.980143 4.777018 18.180338 5.327148 18.330078 C 5.877278 18.479818 6.438802 18.58724 7.011719 18.652344 C 7.584635 18.717447 8.138021 18.75 8.671875 18.75 C 8.847656 18.977865 9.033203 19.192709 9.228516 19.394531 C 9.423828 19.596354 9.635416 19.785156 9.863281 19.960938 C 9.674479 19.973959 9.488932 19.983725 9.306641 19.990234 C 9.124349 19.996744 8.938802 20 8.75 20 C 8.333333 20 7.908528 19.986979 7.475586 19.960938 C 7.042643 19.934896 6.612955 19.887695 6.186523 19.819336 C 5.760091 19.750977 5.340169 19.65983 4.926758 19.545898 C 4.513346 19.431967 4.114583 19.287109 3.730469 19.111328 C 3.157552 18.850912 2.641602 18.543295 2.182617 18.188477 C 1.723633 17.833658 1.333008 17.431641 1.010742 16.982422 C 0.688477 16.533203 0.439453 16.035156 0.263672 15.488281 C 0.087891 14.941406 0 14.345703 0 13.701172 Z M 14.375 15.253906 L 16.123047 17.001953 C 16.246744 17.12565 16.393229 17.1875 16.5625 17.1875 C 16.73177 17.1875 16.878254 17.12565 17.001953 17.001953 C 17.12565 16.878256 17.1875 16.731771 17.1875 16.5625 C 17.1875 16.39323 17.12565 16.246746 17.001953 16.123047 L 15.263672 14.375 L 17.001953 12.626953 C 17.12565 12.503256 17.1875 12.356771 17.1875 12.1875 C 17.1875 12.018229 17.12565 11.871745 17.001953 11.748047 C 16.878254 11.62435 16.73177 11.5625 16.5625 11.5625 C 16.393229 11.5625 16.246744 11.62435 16.123047 11.748047 L 14.375 13.486328 L 12.626953 11.748047 C 12.503255 11.62435 12.356771 11.5625 12.1875 11.5625 C 12.018229 11.5625 11.871744 11.62435 11.748047 11.748047 C 11.624349 11.871745 11.5625 12.018229 11.5625 12.1875 C 11.5625 12.356771 11.624349 12.503256 11.748047 12.626953 L 13.496094 14.375 L 11.748047 16.123047 C 11.624349 16.246746 11.5625 16.39323 11.5625 16.5625 C 11.5625 16.731771 11.624349 16.878256 11.748047 17.001953 C 11.871744 17.12565 12.018229 17.1875 12.1875 17.1875 C 12.356771 17.1875 12.503255 17.12565 12.626953 17.001953 Z " />
-                                <TextBlock VerticalAlignment="Center" Text="{x:Bind domain:Translator.Unsubscribe}" />
-                            </StackPanel>
-                        </HyperlinkButton>
-                    </Grid>
                 </Grid>
 
                 <!--  Attachments  -->
                 <ListView
                     x:Name="AttachmentsListView"
-                    Grid.Row="2"
+                    Grid.Row="3"
                     Height="55"
                     x:Load="{x:Bind helpers:XamlHelpers.CountToBooleanConverter(ViewModel.Attachments.Count), Mode=OneWay}"
                     IsItemClickEnabled="True"
@@ -331,36 +329,35 @@
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                 </ListView>
+                <muxc:InfoBar
+                    x:Name="ImageLoadingDisabledMessage"
+                    Grid.Row="4"
+                    Margin="0,2"
+                    HorizontalContentAlignment="Stretch"
+                    x:Load="{x:Bind ViewModel.IsImageRenderingDisabled, Mode=OneWay}"
+                    IsOpen="True"
+                    Message="{x:Bind domain:Translator.ImageRenderingDisabled}"
+                    Severity="Warning">
+                    <muxc:InfoBar.ActionButton>
+                        <Button
+                            HorizontalAlignment="Right"
+                            Command="{x:Bind ViewModel.ForceImageLoadingCommand}"
+                            Content="{x:Bind domain:Translator.Buttons_EnableImageRendering}" />
+                    </muxc:InfoBar.ActionButton>
+                </muxc:InfoBar>
+
+                <muxc:ProgressBar
+                    x:Name="DownloadingProgressBar"
+                    Grid.Row="3"
+                    Margin="12,1"
+                    HorizontalAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    x:Load="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}"
+                    IsIndeterminate="{x:Bind ViewModel.IsIndetermineProgress, Mode=OneWay}"
+                    Value="{x:Bind ViewModel.CurrentDownloadPercentage, Mode=OneWay}" />
             </Grid>
         </Border>
 
-        <muxc:ProgressBar
-            x:Name="DownloadingProgressBar"
-            Grid.Row="3"
-            Margin="12,1"
-            HorizontalAlignment="Stretch"
-            VerticalAlignment="Top"
-            x:Load="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}"
-            IsIndeterminate="{x:Bind ViewModel.IsIndetermineProgress, Mode=OneWay}"
-            Value="{x:Bind ViewModel.CurrentDownloadPercentage, Mode=OneWay}" />
-
-        <muxc:InfoBar
-            x:Name="ImageLoadingDisabledMessage"
-            Grid.Row="4"
-            Margin="0,2"
-            HorizontalContentAlignment="Stretch"
-            x:Load="{x:Bind ViewModel.IsImageRenderingDisabled, Mode=OneWay}"
-            IsOpen="True"
-            Message="{x:Bind domain:Translator.ImageRenderingDisabled}"
-            Severity="Warning">
-            <muxc:InfoBar.ActionButton>
-                <Button
-                    HorizontalAlignment="Right"
-                    Command="{x:Bind ViewModel.ForceImageLoadingCommand}"
-                    Content="{x:Bind domain:Translator.Buttons_EnableImageRendering}" />
-            </muxc:InfoBar.ActionButton>
-        </muxc:InfoBar>
-
         <Border
             Grid.Row="1"
             Background="{ThemeResource WinoContentZoneBackgroud}"
@@ -368,7 +365,6 @@
             BorderThickness="1"
             CornerRadius="7">
             <Grid Margin="1" CornerRadius="7">
-
                 <Grid Background="White" Visibility="{x:Bind IsDarkEditor, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
 
                 <controls:WebView2
diff --git a/Wino.Mail/Views/NewAccountManagementPage.xaml b/Wino.Mail/Views/NewAccountManagementPage.xaml
index fcb1b881..130be346 100644
--- a/Wino.Mail/Views/NewAccountManagementPage.xaml
+++ b/Wino.Mail/Views/NewAccountManagementPage.xaml
@@ -4,44 +4,51 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:abstract="using:Wino.Views.Abstract"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:winuiControls="using:Microsoft.UI.Xaml.Controls"
     xmlns:helpers="using:Wino.Helpers"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
+    xmlns:winuiControls="using:Microsoft.UI.Xaml.Controls"
     Style="{StaticResource PageStyle}"
     mc:Ignorable="d">
 
-    <Grid
-        MaxWidth="900"
-        Padding="20"
-        HorizontalAlignment="Stretch"
-        RowSpacing="20">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <Border
+        Margin="0,0,7,7"
+        Background="{ThemeResource WinoContentZoneBackgroud}"
+        BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+        BorderThickness="1"
+        CornerRadius="7">
+        <Grid
+            MaxWidth="900"
+            Padding="20"
+            HorizontalAlignment="Stretch"
+            RowSpacing="20">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
 
-        <winuiControls:BreadcrumbBar
-            x:Name="Breadcrumb"
-            ItemsSource="{x:Bind PageHistory, Mode=OneWay}"
-            ItemClicked="BreadItemClicked">
-            <winuiControls:BreadcrumbBar.ItemTemplate>
-                <DataTemplate>
-                    <winuiControls:BreadcrumbBarItem Margin="0,0,8,0">
-                        <winuiControls:BreadcrumbBarItem.ContentTemplate>
-                            <DataTemplate x:DataType="viewModelData:BreadcrumbNavigationItemViewModel">
-                                <TextBlock
-                                    Margin="0,0,8,10"
-                                    Text="{Binding Title, Mode=OneWay}"
-                                    FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightBySyncState(IsActive), Mode=OneWay}"
-                                    Style="{StaticResource TitleTextBlockStyle}" />
-                            </DataTemplate>
-                        </winuiControls:BreadcrumbBarItem.ContentTemplate>
-                    </winuiControls:BreadcrumbBarItem>
-                </DataTemplate>
-            </winuiControls:BreadcrumbBar.ItemTemplate>
-        </winuiControls:BreadcrumbBar>
+            <winuiControls:BreadcrumbBar
+                x:Name="Breadcrumb"
+                ItemClicked="BreadItemClicked"
+                ItemsSource="{x:Bind PageHistory, Mode=OneWay}">
+                <winuiControls:BreadcrumbBar.ItemTemplate>
+                    <DataTemplate>
+                        <winuiControls:BreadcrumbBarItem Margin="0,0,8,0">
+                            <winuiControls:BreadcrumbBarItem.ContentTemplate>
+                                <DataTemplate x:DataType="viewModelData:BreadcrumbNavigationItemViewModel">
+                                    <TextBlock
+                                        Margin="0,0,8,10"
+                                        FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightBySyncState(IsActive), Mode=OneWay}"
+                                        Style="{StaticResource TitleTextBlockStyle}"
+                                        Text="{Binding Title, Mode=OneWay}" />
+                                </DataTemplate>
+                            </winuiControls:BreadcrumbBarItem.ContentTemplate>
+                        </winuiControls:BreadcrumbBarItem>
+                    </DataTemplate>
+                </winuiControls:BreadcrumbBar.ItemTemplate>
+            </winuiControls:BreadcrumbBar>
 
-        <Frame x:Name="AccountPagesFrame" Grid.Row="1" />
-    </Grid>
+            <Frame x:Name="AccountPagesFrame" Grid.Row="1" />
+        </Grid>
+    </Border>
 </abstract:NewAccountManagementPageAbstract>
diff --git a/Wino.Mail/Views/SettingsPage.xaml b/Wino.Mail/Views/SettingsPage.xaml
index 7ab40b63..4bacc22b 100644
--- a/Wino.Mail/Views/SettingsPage.xaml
+++ b/Wino.Mail/Views/SettingsPage.xaml
@@ -4,44 +4,51 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:abstract="using:Wino.Views.Abstract"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    xmlns:winuiControls="using:Microsoft.UI.Xaml.Controls"
     xmlns:helpers="using:Wino.Helpers"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:viewModelData="using:Wino.Mail.ViewModels.Data"
+    xmlns:winuiControls="using:Microsoft.UI.Xaml.Controls"
     Style="{StaticResource PageStyle}"
     mc:Ignorable="d">
 
-    <Grid
-        MaxWidth="900"
-        Padding="20"
-        HorizontalAlignment="Stretch"
-        RowSpacing="20">
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
+    <Border
+        Margin="0,0,7,7"
+        Background="{ThemeResource WinoContentZoneBackgroud}"
+        BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+        BorderThickness="1"
+        CornerRadius="7">
+        <Grid
+            MaxWidth="900"
+            Padding="20"
+            HorizontalAlignment="Stretch"
+            RowSpacing="20">
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
 
-        <winuiControls:BreadcrumbBar
-            x:Name="Breadcrumb"
-            ItemsSource="{x:Bind PageHistory, Mode=OneWay}"
-            ItemClicked="BreadItemClicked">
-            <winuiControls:BreadcrumbBar.ItemTemplate>
-                <DataTemplate>
-                    <winuiControls:BreadcrumbBarItem Margin="0,0,8,0">
-                        <winuiControls:BreadcrumbBarItem.ContentTemplate>
-                            <DataTemplate x:DataType="viewModelData:BreadcrumbNavigationItemViewModel">
-                                <TextBlock
-                                    Margin="0,0,8,10"
-                                    Text="{Binding Title}"
-                                    FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightBySyncState(IsActive), Mode=OneWay}"
-                                    Style="{StaticResource TitleTextBlockStyle}" />
-                            </DataTemplate>
-                        </winuiControls:BreadcrumbBarItem.ContentTemplate>
-                    </winuiControls:BreadcrumbBarItem>
-                </DataTemplate>
-            </winuiControls:BreadcrumbBar.ItemTemplate>
-        </winuiControls:BreadcrumbBar>
+            <winuiControls:BreadcrumbBar
+                x:Name="Breadcrumb"
+                ItemClicked="BreadItemClicked"
+                ItemsSource="{x:Bind PageHistory, Mode=OneWay}">
+                <winuiControls:BreadcrumbBar.ItemTemplate>
+                    <DataTemplate>
+                        <winuiControls:BreadcrumbBarItem Margin="0,0,8,0">
+                            <winuiControls:BreadcrumbBarItem.ContentTemplate>
+                                <DataTemplate x:DataType="viewModelData:BreadcrumbNavigationItemViewModel">
+                                    <TextBlock
+                                        Margin="0,0,8,10"
+                                        FontWeight="{x:Bind helpers:XamlHelpers.GetFontWeightBySyncState(IsActive), Mode=OneWay}"
+                                        Style="{StaticResource TitleTextBlockStyle}"
+                                        Text="{Binding Title}" />
+                                </DataTemplate>
+                            </winuiControls:BreadcrumbBarItem.ContentTemplate>
+                        </winuiControls:BreadcrumbBarItem>
+                    </DataTemplate>
+                </winuiControls:BreadcrumbBar.ItemTemplate>
+            </winuiControls:BreadcrumbBar>
 
-        <Frame x:Name="SettingsFrame" Grid.Row="1" />
-    </Grid>
+            <Frame x:Name="SettingsFrame" Grid.Row="1" />
+        </Grid>
+    </Border>
 </abstract:SettingsPageAbstract>
diff --git a/Wino.Mail/Views/WelcomePage.xaml b/Wino.Mail/Views/WelcomePage.xaml
index 25f28769..7d6c45cd 100644
--- a/Wino.Mail/Views/WelcomePage.xaml
+++ b/Wino.Mail/Views/WelcomePage.xaml
@@ -1,28 +1,35 @@
 <abstract:WelcomePageAbstract
-    xmlns:abstract="using:Wino.Views.Abstract"
     x:Class="Wino.Views.WelcomePage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Wino.Views"
-    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:abstract="using:Wino.Views.Abstract"
     xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Wino.Views"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid Padding="24">
-        <ScrollViewer>
-            <controls:MarkdownTextBlock
-                x:Name="MarkdownControl"
-                LinkClicked="HyperlinkClicked"
-                Background="Transparent"
-                ImageStretch="UniformToFill"
-                Text="{x:Bind ViewModel.CurrentVersionNotes, Mode=OneWay}"
-                ListBulletSpacing="10"
-                Header1FontSize="30"
-                CharacterSpacing="12"
-                FontSize="16"
-                Header2FontSize="22" />
-        </ScrollViewer>
-    </Grid>
+    <Border
+        Margin="0,0,7,7"
+        Background="{ThemeResource WinoContentZoneBackgroud}"
+        BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
+        BorderThickness="1"
+        CornerRadius="7">
+        <Grid Padding="24">
+            <ScrollViewer>
+                <controls:MarkdownTextBlock
+                    x:Name="MarkdownControl"
+                    Background="Transparent"
+                    CharacterSpacing="12"
+                    FontSize="16"
+                    Header1FontSize="30"
+                    Header2FontSize="22"
+                    ImageStretch="UniformToFill"
+                    LinkClicked="HyperlinkClicked"
+                    ListBulletSpacing="10"
+                    Text="{x:Bind ViewModel.CurrentVersionNotes, Mode=OneWay}" />
+            </ScrollViewer>
+        </Grid>
+    </Border>
 
 </abstract:WelcomePageAbstract>

From 4158e196d61326400b0b3dfed90ee06a8dff96a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Burak=20Kaan=20K=C3=B6se?= <bkaankose@outlook.com>
Date: Tue, 25 Jun 2024 22:39:35 +0200
Subject: [PATCH 8/8] Add visual state for moving To,CC and BCC to vertical
 line when the page is small enough.

---
 Wino.Mail/Views/MailRenderingPage.xaml | 115 +++++++++++++++----------
 1 file changed, 68 insertions(+), 47 deletions(-)

diff --git a/Wino.Mail/Views/MailRenderingPage.xaml b/Wino.Mail/Views/MailRenderingPage.xaml
index b8e642d4..159697cd 100644
--- a/Wino.Mail/Views/MailRenderingPage.xaml
+++ b/Wino.Mail/Views/MailRenderingPage.xaml
@@ -261,54 +261,63 @@
                         <RowDefinition Height="Auto" />
                     </Grid.RowDefinitions>
 
-                    <StackPanel Orientation="Horizontal" Spacing="6">
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            FontWeight="SemiBold"
-                            Text="To:"
-                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}" />
-                        <ItemsControl
-                            ItemTemplate="{StaticResource InternetAddressTemplate}"
-                            ItemsSource="{x:Bind ViewModel.ToItems, Mode=OneWay}"
-                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <ItemsStackPanel Orientation="Horizontal" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                        </ItemsControl>
+                    <StackPanel
+                        x:Name="ToFromInformationPanel"
+                        Orientation="Vertical"
+                        Spacing="6">
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock
+                                VerticalAlignment="Center"
+                                FontWeight="SemiBold"
+                                Text="{x:Bind domain:Translator.ComposerTo}"
+                                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}" />
+                            <ItemsControl
+                                ItemTemplate="{StaticResource InternetAddressTemplate}"
+                                ItemsSource="{x:Bind ViewModel.ToItems, Mode=OneWay}"
+                                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.ToItems.Count), Mode=OneWay}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <ItemsStackPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                            </ItemsControl>
+                        </StackPanel>
 
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            FontWeight="SemiBold"
-                            Text="Cc:"
-                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}" />
-                        <ItemsControl
-                            ItemTemplate="{StaticResource InternetAddressTemplate}"
-                            ItemsSource="{x:Bind ViewModel.CCItemsItems, Mode=OneWay}"
-                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <ItemsStackPanel Orientation="Horizontal" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                        </ItemsControl>
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock
+                                VerticalAlignment="Center"
+                                FontWeight="SemiBold"
+                                Text="Cc:"
+                                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}" />
+                            <ItemsControl
+                                ItemTemplate="{StaticResource InternetAddressTemplate}"
+                                ItemsSource="{x:Bind ViewModel.CCItemsItems, Mode=OneWay}"
+                                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.CCItemsItems.Count), Mode=OneWay}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <ItemsStackPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                            </ItemsControl>
+                        </StackPanel>
 
-                        <TextBlock
-                            VerticalAlignment="Center"
-                            FontWeight="SemiBold"
-                            Text="Bcc:"
-                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}" />
-                        <ItemsControl
-                            ItemTemplate="{StaticResource InternetAddressTemplate}"
-                            ItemsSource="{x:Bind ViewModel.BCCItems, Mode=OneWay}"
-                            Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}">
-                            <ItemsControl.ItemsPanel>
-                                <ItemsPanelTemplate>
-                                    <ItemsStackPanel Orientation="Horizontal" />
-                                </ItemsPanelTemplate>
-                            </ItemsControl.ItemsPanel>
-                        </ItemsControl>
+                        <StackPanel Orientation="Horizontal">
+                            <TextBlock
+                                VerticalAlignment="Center"
+                                FontWeight="SemiBold"
+                                Text="Bcc:"
+                                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}" />
+                            <ItemsControl
+                                ItemTemplate="{StaticResource InternetAddressTemplate}"
+                                ItemsSource="{x:Bind ViewModel.BCCItems, Mode=OneWay}"
+                                Visibility="{x:Bind helpers:XamlHelpers.CountToVisibilityConverter(ViewModel.BCCItems.Count), Mode=OneWay}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <ItemsStackPanel Orientation="Horizontal" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                            </ItemsControl>
+                        </StackPanel>
                     </StackPanel>
                 </Grid>
 
@@ -362,7 +371,7 @@
             Grid.Row="1"
             Background="{ThemeResource WinoContentZoneBackgroud}"
             BorderBrush="{StaticResource CardStrokeColorDefaultBrush}"
-            BorderThickness="1"
+            BorderThickness="0"
             CornerRadius="7">
             <Grid Margin="1" CornerRadius="7">
                 <Grid Background="White" Visibility="{x:Bind IsDarkEditor, Converter={StaticResource ReverseBooleanToVisibilityConverter}, Mode=OneWay}" />
@@ -380,6 +389,18 @@
                     IsActive="{x:Bind ViewModel.ShouldDisplayDownloadProgress, Mode=OneWay}" />
             </Grid>
         </Border>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="AdaptiveStates">
+                <VisualState x:Name="NarrowedState">
+                    <VisualState.Setters>
+                        <Setter Target="ToFromInformationPanel.Orientation" Value="Horizontal" />
+                    </VisualState.Setters>
+                    <VisualState.StateTriggers>
+                        <AdaptiveTrigger MinWindowWidth="1200" />
+                    </VisualState.StateTriggers>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
     </Grid>
 
 </abstract:MailRenderingPageAbstract>