Merge pull request #335 from bkaankose/code-quality/tabbed-commandbar

Code Quality: TabbedCommandBar
2024-08-26 01:14:29 +02:00
parent 31c7c8b46f 10c94efa57
commit 1b51982551
13 changed files with 270 additions and 471 deletions
--- a/Wino.Core.Domain/Enums/EditorToolbarSectionType.cs
+++ b/Wino.Core.Domain/Enums/EditorToolbarSectionType.cs
@@ -1,11 +0,0 @@
-namespace Wino.Core.Domain.Enums
-{
-    public enum EditorToolbarSectionType
-    {
-        None,
-        Format,
-        Insert,
-        Draw,
-        Options
-    }
-}
--- a/Wino.Core.Domain/Enums/MenuPaneMode.cs
+++ b/Wino.Core.Domain/Enums/MenuPaneMode.cs
@@ -1,8 +0,0 @@
-namespace Wino.Core.Domain.Enums
-{
-    public enum MenuPaneMode
-    {
-        Visible,
-        Hidden
-    }
-}
--- a/Wino.Core.Domain/Models/Reader/EditorToolbarSection.cs
+++ b/Wino.Core.Domain/Models/Reader/EditorToolbarSection.cs
@@ -1,30 +0,0 @@
-using Wino.Core.Domain.Enums;
-
-namespace Wino.Core.Domain.Models.Reader
-{
-    public class EditorToolbarSection
-    {
-        public EditorToolbarSectionType SectionType { get; set; }
-        public string Title
-        {
-            get
-            {
-                switch (SectionType)
-                {
-                    case EditorToolbarSectionType.None:
-                        return Translator.EditorToolbarOption_None;
-                    case EditorToolbarSectionType.Format:
-                        return Translator.EditorToolbarOption_Format;
-                    case EditorToolbarSectionType.Insert:
-                        return Translator.EditorToolbarOption_Insert;
-                    case EditorToolbarSectionType.Draw:
-                        return Translator.EditorToolbarOption_Draw;
-                    case EditorToolbarSectionType.Options:
-                        return Translator.EditorToolbarOption_Options;
-                    default:
-                        return "Unknown Editor Option";
-                }
-            }
-        }
-    }
-}
--- a/Wino.Core.Domain/Translations/en_US/resources.json
+++ b/Wino.Core.Domain/Translations/en_US/resources.json
@@ -53,6 +53,7 @@
    "Buttons_TryAgain": "Try Again",
    "Buttons_Yes": "Yes",
    "Buttons_Reset": "Reset",
+    "Buttons_Send": "Send",
    "Center": "Center",
    "ComingSoon": "Coming soon...",
    "ComposerFrom": "From: ",
--- a/Wino.Core.Domain/Translator.Designer.cs
+++ b/Wino.Core.Domain/Translator.Designer.cs
@@ -288,6 +288,11 @@ namespace Wino.Core.Domain
 		/// </summary>
 		public static string Buttons_Reset => Resources.GetTranslatedString(@"Buttons_Reset");	
 	
+        /// <summary>
+		/// Send
+		/// </summary>
+		public static string Buttons_Send => Resources.GetTranslatedString(@"Buttons_Send");	
+	
        /// <summary>
 		/// Center
 		/// </summary>
--- a/Wino.Mail.ViewModels/ComposePageViewModel.cs
+++ b/Wino.Mail.ViewModels/ComposePageViewModel.cs
@@ -15,7 +15,6 @@ using Wino.Core.Domain.Exceptions;
 using Wino.Core.Domain.Interfaces;
 using Wino.Core.Domain.Models.MailItem;
 using Wino.Core.Domain.Models.Navigation;
-using Wino.Core.Domain.Models.Reader;
 using Wino.Core.Extensions;
 using Wino.Core.Services;
 using Wino.Mail.ViewModels.Data;
@@ -89,29 +88,11 @@ namespace Wino.Mail.ViewModels
        public ObservableCollection<AccountContact> CCItems { get; set; } = [];
        public ObservableCollection<AccountContact> BCCItems { get; set; } = [];

-
-        public List<EditorToolbarSection> ToolbarSections { get; set; } =
-        [
-            new EditorToolbarSection(){ SectionType = EditorToolbarSectionType.Format },
-            new EditorToolbarSection(){ SectionType = EditorToolbarSectionType.Insert },
-            new EditorToolbarSection(){ SectionType = EditorToolbarSectionType.Draw },
-            new EditorToolbarSection(){ SectionType = EditorToolbarSectionType.Options }
-        ];
-
-        private EditorToolbarSection selectedToolbarSection;
-
-        public EditorToolbarSection SelectedToolbarSection
-        {
-            get => selectedToolbarSection;
-            set => SetProperty(ref selectedToolbarSection, value);
-        }
-
        #endregion

        public INativeAppService NativeAppService { get; }

        private readonly IMailService _mailService;
-        private readonly ILaunchProtocolService _launchProtocolService;
        private readonly IMimeFileService _mimeFileService;
        private readonly IFolderService _folderService;
        private readonly IAccountService _accountService;
@@ -123,7 +104,6 @@ namespace Wino.Mail.ViewModels

        public ComposePageViewModel(IDialogService dialogService,
                                    IMailService mailService,
-                                    ILaunchProtocolService launchProtocolService,
                                    IMimeFileService mimeFileService,
                                    INativeAppService nativeAppService,
                                    IFolderService folderService,
@@ -141,13 +121,10 @@ namespace Wino.Mail.ViewModels

            _folderService = folderService;
            _mailService = mailService;
-            _launchProtocolService = launchProtocolService;
            _mimeFileService = mimeFileService;
            _accountService = accountService;
            _worker = worker;
            _winoServerConnectionManager = winoServerConnectionManager;
-
-            SelectedToolbarSection = ToolbarSections[0];
        }

        [RelayCommand]
@@ -263,31 +240,6 @@ namespace Wino.Mail.ViewModels
            }
        }

-        private void ClearCurrentMimeAttachments()
-        {
-            var attachments = new List<MimePart>();
-            var multiparts = new List<Multipart>();
-            var iter = new MimeIterator(CurrentMimeMessage);
-
-            // collect our list of attachments and their parent multiparts
-            while (iter.MoveNext())
-            {
-                var multipart = iter.Parent as Multipart;
-                var part = iter.Current as MimePart;
-
-                if (multipart != null && part != null && part.IsAttachment)
-                {
-                    // keep track of each attachment's parent multipart
-                    multiparts.Add(multipart);
-                    attachments.Add(part);
-                }
-            }
-
-            // now remove each attachment from its parent multipart...
-            for (int i = 0; i < attachments.Count; i++)
-                multiparts[i].Remove(attachments[i]);
-        }
-
        private async Task SaveBodyAsync()
        {
            if (GetHTMLBodyFunction != null)
--- a/Wino.Mail/Helpers/XamlHelpers.cs
+++ b/Wino.Mail/Helpers/XamlHelpers.cs
@@ -12,7 +12,6 @@ using Wino.Controls;
 using Wino.Core.Domain;
 using Wino.Core.Domain.Enums;
 using Wino.Core.Domain.Models.MailItem;
-using Wino.Core.Domain.Models.Reader;

 namespace Wino.Helpers
 {
@@ -284,109 +283,60 @@ namespace Wino.Helpers

        #endregion

-        #region Toolbar Section Initialization
-
-        public static Visibility IsFormatSection(EditorToolbarSection section) => section?.SectionType == EditorToolbarSectionType.Format ? Visibility.Visible : Visibility.Collapsed;
-        public static Visibility IsInsertSection(EditorToolbarSection section) => section?.SectionType == EditorToolbarSectionType.Insert ? Visibility.Visible : Visibility.Collapsed;
-        public static Visibility IsDrawSection(EditorToolbarSection section) => section?.SectionType == EditorToolbarSectionType.Draw ? Visibility.Visible : Visibility.Collapsed;
-        public static Visibility IsOptionsSection(EditorToolbarSection section) => section?.SectionType == EditorToolbarSectionType.Options ? Visibility.Visible : Visibility.Collapsed;
-
-        #endregion
-
        #region Internationalization

        public static string GetOperationString(MailOperation operation)
        {
-            switch (operation)
+            return operation switch
            {
-                case MailOperation.None:
-                    return "unknown";
-                case MailOperation.Archive:
-                    return Translator.MailOperation_Archive;
-                case MailOperation.UnArchive:
-                    return Translator.MailOperation_Unarchive;
-                case MailOperation.SoftDelete:
-                    return Translator.MailOperation_Delete;
-                case MailOperation.HardDelete:
-                    return Translator.MailOperation_Delete;
-                case MailOperation.Move:
-                    return Translator.MailOperation_Move;
-                case MailOperation.MoveToJunk:
-                    return Translator.MailOperation_MoveJunk;
-                case MailOperation.MoveToFocused:
-                    return Translator.MailOperation_MoveFocused;
-                case MailOperation.MoveToOther:
-                    return Translator.MailOperation_MoveOther;
-                case MailOperation.AlwaysMoveToOther:
-                    return Translator.MailOperation_AlwaysMoveOther;
-                case MailOperation.AlwaysMoveToFocused:
-                    return Translator.MailOperation_AlwaysMoveFocused;
-                case MailOperation.SetFlag:
-                    return Translator.MailOperation_SetFlag;
-                case MailOperation.ClearFlag:
-                    return Translator.MailOperation_ClearFlag;
-                case MailOperation.MarkAsRead:
-                    return Translator.MailOperation_MarkAsRead;
-                case MailOperation.MarkAsUnread:
-                    return Translator.MailOperation_MarkAsUnread;
-                case MailOperation.MarkAsNotJunk:
-                    return Translator.MailOperation_MarkNotJunk;
-                case MailOperation.Seperator:
-                    return string.Empty;
-                case MailOperation.Ignore:
-                    return Translator.MailOperation_Ignore;
-                case MailOperation.Reply:
-                    return Translator.MailOperation_Reply;
-                case MailOperation.ReplyAll:
-                    return Translator.MailOperation_ReplyAll;
-                case MailOperation.Zoom:
-                    return Translator.MailOperation_Zoom;
-                case MailOperation.SaveAs:
-                    return Translator.MailOperation_SaveAs;
-                case MailOperation.Find:
-                    return Translator.MailOperation_Find;
-                case MailOperation.Forward:
-                    return Translator.MailOperation_Forward;
-                case MailOperation.DarkEditor:
-                    return string.Empty;
-                case MailOperation.LightEditor:
-                    return string.Empty;
-                case MailOperation.Print:
-                    return Translator.MailOperation_Print;
-                case MailOperation.Navigate:
-                    return Translator.MailOperation_Navigate;
-                default:
-                    return "unknown";
-            }
+                MailOperation.None => "unknown",
+                MailOperation.Archive => Translator.MailOperation_Archive,
+                MailOperation.UnArchive => Translator.MailOperation_Unarchive,
+                MailOperation.SoftDelete => Translator.MailOperation_Delete,
+                MailOperation.HardDelete => Translator.MailOperation_Delete,
+                MailOperation.Move => Translator.MailOperation_Move,
+                MailOperation.MoveToJunk => Translator.MailOperation_MoveJunk,
+                MailOperation.MoveToFocused => Translator.MailOperation_MoveFocused,
+                MailOperation.MoveToOther => Translator.MailOperation_MoveOther,
+                MailOperation.AlwaysMoveToOther => Translator.MailOperation_AlwaysMoveOther,
+                MailOperation.AlwaysMoveToFocused => Translator.MailOperation_AlwaysMoveFocused,
+                MailOperation.SetFlag => Translator.MailOperation_SetFlag,
+                MailOperation.ClearFlag => Translator.MailOperation_ClearFlag,
+                MailOperation.MarkAsRead => Translator.MailOperation_MarkAsRead,
+                MailOperation.MarkAsUnread => Translator.MailOperation_MarkAsUnread,
+                MailOperation.MarkAsNotJunk => Translator.MailOperation_MarkNotJunk,
+                MailOperation.Seperator => string.Empty,
+                MailOperation.Ignore => Translator.MailOperation_Ignore,
+                MailOperation.Reply => Translator.MailOperation_Reply,
+                MailOperation.ReplyAll => Translator.MailOperation_ReplyAll,
+                MailOperation.Zoom => Translator.MailOperation_Zoom,
+                MailOperation.SaveAs => Translator.MailOperation_SaveAs,
+                MailOperation.Find => Translator.MailOperation_Find,
+                MailOperation.Forward => Translator.MailOperation_Forward,
+                MailOperation.DarkEditor => string.Empty,
+                MailOperation.LightEditor => string.Empty,
+                MailOperation.Print => Translator.MailOperation_Print,
+                MailOperation.Navigate => Translator.MailOperation_Navigate,
+                _ => "unknown",
+            };
        }

        public static string GetOperationString(FolderOperation operation)
        {
-            switch (operation)
+            return operation switch
            {
-                case FolderOperation.None:
-                    break;
-                case FolderOperation.Pin:
-                    return Translator.FolderOperation_Pin;
-                case FolderOperation.Unpin:
-                    return Translator.FolderOperation_Unpin;
-                case FolderOperation.MarkAllAsRead:
-                    return Translator.FolderOperation_MarkAllAsRead;
-                case FolderOperation.DontSync:
-                    return Translator.FolderOperation_DontSync;
-                case FolderOperation.Empty:
-                    return Translator.FolderOperation_Empty;
-                case FolderOperation.Rename:
-                    return Translator.FolderOperation_Rename;
-                case FolderOperation.Delete:
-                    return Translator.FolderOperation_Delete;
-                case FolderOperation.Move:
-                    return Translator.FolderOperation_Move;
-                case FolderOperation.CreateSubFolder:
-                    return Translator.FolderOperation_CreateSubFolder;
-            }
-
-            return string.Empty;
+                FolderOperation.None => string.Empty,
+                FolderOperation.Pin => Translator.FolderOperation_Pin,
+                FolderOperation.Unpin => Translator.FolderOperation_Unpin,
+                FolderOperation.MarkAllAsRead => Translator.FolderOperation_MarkAllAsRead,
+                FolderOperation.DontSync => Translator.FolderOperation_DontSync,
+                FolderOperation.Empty => Translator.FolderOperation_Empty,
+                FolderOperation.Rename => Translator.FolderOperation_Rename,
+                FolderOperation.Delete => Translator.FolderOperation_Delete,
+                FolderOperation.Move => Translator.FolderOperation_Move,
+                FolderOperation.CreateSubFolder => Translator.FolderOperation_CreateSubFolder,
+                _ => string.Empty,
+            };
        }

        #endregion
--- a/Wino.Mail/Views/ComposePage.xaml
+++ b/Wino.Mail/Views/ComposePage.xaml
@@ -4,7 +4,6 @@
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:abstract="using:Wino.Views.Abstract"
    xmlns:controls="using:Wino.Controls"
-    xmlns:controls1="using:CommunityToolkit.WinUI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:data="using:Wino.Mail.ViewModels.Data"
    xmlns:domain="using:Wino.Core.Domain"
@@ -14,6 +13,7 @@
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:reader="using:Wino.Core.Domain.Models.Reader"
+    xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
    x:Name="root"
    d:Background="White"
    Loaded="ComposerLoaded"
@@ -144,26 +144,22 @@

                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
-                    <RowDefinition Height="56" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </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"
-                        DynamicOverflowItemsChanging="BarDynamicOverflowChanging"
-                        IsDynamicOverflowEnabled="True"
-                        OverflowButtonVisibility="Collapsed">
-                        <CommandBar.PrimaryCommands>
+                <!--  Format  -->
+                <toolkit:TabbedCommandBar>
+                    <toolkit:TabbedCommandBar.Resources>
+                        <SolidColorBrush x:Key="TabContentContentBorderBackground" Color="Transparent" />
+                        <SolidColorBrush x:Key="TabContentContentBorderBorderBrush" Color="Transparent" />
+                        <Thickness x:Key="TabContentBorderBorderThickness">0</Thickness>
+                    </toolkit:TabbedCommandBar.Resources>
+                    <toolkit:TabbedCommandBar.PaneCustomContent>
+                        <toolkit:TabbedCommandBarItem
+                            CommandAlignment="Right"
+                            IsDynamicOverflowEnabled="True"
+                            OverflowButtonAlignment="Left">
                            <AppBarButton
                                Click="InvertComposerThemeClicked"
                                LabelPosition="Collapsed"
@@ -184,252 +180,229 @@
                                </AppBarButton.Icon>
                            </AppBarButton>

-                            <AppBarButton Command="{x:Bind ViewModel.DiscardCommand}" Label="Discard">
+                            <AppBarButton Command="{x:Bind ViewModel.DiscardCommand}" Label="{x:Bind domain:Translator.Buttons_Discard}">
                                <AppBarButton.Icon>
                                    <controls:WinoFontIcon Icon="Delete" />
                                </AppBarButton.Icon>
                            </AppBarButton>
-                            <AppBarButton Command="{x:Bind ViewModel.SendCommand}" Label="Send">
+                            <AppBarButton Command="{x:Bind ViewModel.SendCommand}" Label="{x:Bind domain:Translator.Buttons_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>
+                        </toolkit:TabbedCommandBarItem>
+                    </toolkit:TabbedCommandBar.PaneCustomContent>
+                    <toolkit:TabbedCommandBar.MenuItems>
+                        <toolkit:TabbedCommandBarItem DefaultLabelPosition="Collapsed" Header="{x:Bind domain:Translator.EditorToolbarOption_Format}">
+                            <AppBarToggleButton
+                                x:Name="BoldButton"
+                                Click="BoldButtonClicked"
+                                Label="Bold">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource BoldPathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>
+                            <AppBarToggleButton
+                                x:Name="ItalicButton"
+                                Click="ItalicButtonClicked"
+                                Label="Italic">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource ItalicPathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>
+                            <AppBarToggleButton
+                                x:Name="UnderlineButton"
+                                Click="UnderlineButtonClicked"
+                                Label="Underline">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource UnderlinePathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>
+                            <AppBarToggleButton
+                                x:Name="StrokeButton"
+                                Click="StrokeButtonClicked"
+                                Label="Stroke">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource StrikePathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>

-                <!--  Editor Options  -->
-                <Grid Grid.Row="1" Padding="26,0,6,6">
-                    <CommandBar
-                        HorizontalAlignment="Left"
-                        DefaultLabelPosition="Collapsed"
-                        IsDynamicOverflowEnabled="True"
-                        Visibility="{x:Bind helpers:XamlHelpers.IsFormatSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
-                        <AppBarToggleButton
-                            x:Name="BoldButton"
-                            Click="BoldButtonClicked"
-                            Label="Bold">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource BoldPathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
-                        <AppBarToggleButton
-                            x:Name="ItalicButton"
-                            Click="ItalicButtonClicked"
-                            Label="Italic">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource ItalicPathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
-                        <AppBarToggleButton
-                            x:Name="UnderlineButton"
-                            Click="UnderlineButtonClicked"
-                            Label="Underline">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource UnderlinePathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
-                        <AppBarToggleButton
-                            x:Name="StrokeButton"
-                            Click="StrokeButtonClicked"
-                            Label="Stroke">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource StrikePathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
+                            <AppBarSeparator />

-                        <AppBarSeparator />
+                            <AppBarToggleButton
+                                x:Name="BulletListButton"
+                                Click="BulletListButtonClicked"
+                                Label="Bullet List">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource BulletedListPathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>

-                        <AppBarToggleButton
-                            x:Name="BulletListButton"
-                            Click="BulletListButtonClicked"
-                            Label="Bullet List">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource BulletedListPathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
+                            <AppBarToggleButton
+                                x:Name="OrderedListButton"
+                                Click="OrderedListButtonClicked"
+                                Label="Ordered List">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource OrderedListPathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>

-                        <AppBarToggleButton
-                            x:Name="OrderedListButton"
-                            Click="OrderedListButtonClicked"
-                            Label="Ordered List">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource OrderedListPathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
+                            <AppBarSeparator />

-                        <AppBarSeparator />
+                            <AppBarButton
+                                x:Name="DecreaseIndentButton"
+                                Click="DecreaseIndentClicked"
+                                Label="Outdent">
+                                <AppBarButton.Content>
+                                    <Viewbox Width="16">
+                                        <PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
+                                    </Viewbox>
+                                </AppBarButton.Content>
+                            </AppBarButton>

-                        <AppBarButton
-                            x:Name="DecreaseIndentButton"
-                            Click="DecreaseIndentClicked"
-                            Label="Outdent">
-                            <AppBarButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource DecreaseIndentPathIcon}" />
-                                </Viewbox>
-                            </AppBarButton.Content>
-                        </AppBarButton>
+                            <AppBarButton
+                                x:Name="IncreaseIndentButton"
+                                Click="IncreaseIndentClicked"
+                                Label="Indent">
+                                <AppBarButton.Content>
+                                    <Viewbox Width="16">
+                                        <PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
+                                    </Viewbox>
+                                </AppBarButton.Content>
+                            </AppBarButton>

-                        <AppBarButton
-                            x:Name="IncreaseIndentButton"
-                            Click="IncreaseIndentClicked"
-                            Label="Indent">
-                            <AppBarButton.Content>
-                                <Viewbox Width="16">
-                                    <PathIcon Data="{StaticResource IncreaseIndentPathIcon}" />
-                                </Viewbox>
-                            </AppBarButton.Content>
-                        </AppBarButton>
+                            <AppBarElementContainer HorizontalAlignment="Center" VerticalAlignment="Center">
+                                <ComboBox
+                                    x:Name="AlignmentListView"
+                                    VerticalAlignment="Center"
+                                    Background="Transparent"
+                                    BorderBrush="Transparent"
+                                    SelectionChanged="AlignmentChanged">
+                                    <ComboBoxItem IsSelected="True" 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>

-                        <AppBarElementContainer HorizontalAlignment="Center" VerticalAlignment="Center">
-                            <ComboBox
-                                x:Name="AlignmentListView"
-                                VerticalAlignment="Center"
-                                Background="Transparent"
-                                BorderBrush="Transparent"
-                                SelectionChanged="AlignmentChanged">
-                                <ComboBoxItem IsSelected="True" 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="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="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>
+                            </AppBarElementContainer>

-                                <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>
-                        </AppBarElementContainer>
+                            <AppBarSeparator />

-                        <AppBarSeparator />
+                            <AppBarToggleButton
+                                x:Name="WebviewToolBarButton"
+                                Click="WebViewToggleButtonClicked"
+                                Label="{x:Bind domain:Translator.EditorTooltip_WebViewEditor}"
+                                ToolTipService.ToolTip="{x:Bind domain:Translator.EditorTooltip_WebViewEditor}">
+                                <AppBarToggleButton.Icon>
+                                    <PathIcon Data="{StaticResource WebviewToolBarPathIcon}" />
+                                </AppBarToggleButton.Icon>
+                            </AppBarToggleButton>
+                        </toolkit:TabbedCommandBarItem>

-                        <AppBarToggleButton
-                            x:Name="WebviewToolBarButton"
-                            Click="WebViewToggleButtonClicked"
-                            Label="{x:Bind domain:Translator.EditorTooltip_WebViewEditor}"
-                            ToolTipService.ToolTip="{x:Bind domain:Translator.EditorTooltip_WebViewEditor}">
-                            <AppBarToggleButton.Icon>
-                                <PathIcon Data="{StaticResource WebviewToolBarPathIcon}" />
-                            </AppBarToggleButton.Icon>
-                        </AppBarToggleButton>
-                    </CommandBar>
+                        <!--  Insert  -->
+                        <toolkit:TabbedCommandBarItem Header="{x:Bind domain:Translator.EditorToolbarOption_Insert}">
+                            <AppBarButton
+                                x:Name="FilesButton"
+                                Click="AddFilesClicked"
+                                Label="{x:Bind domain:Translator.Files}">
+                                <AppBarButton.Icon>
+                                    <PathIcon Data="{StaticResource AttachPathIcon}" />
+                                </AppBarButton.Icon>
+                            </AppBarButton>

-                    <!--  Insert Panel  -->
-                    <CommandBar
-                        HorizontalAlignment="Left"
-                        DefaultLabelPosition="Right"
-                        IsDynamicOverflowEnabled="True"
-                        Visibility="{x:Bind helpers:XamlHelpers.IsInsertSection(ViewModel.SelectedToolbarSection), Mode=OneWay}">
-                        <AppBarButton
-                            x:Name="FilesButton"
-                            Click="AddFilesClicked"
-                            Label="{x:Bind domain:Translator.Files}">
-                            <AppBarButton.Icon>
-                                <PathIcon Data="{StaticResource AttachPathIcon}" />
-                            </AppBarButton.Icon>
-                        </AppBarButton>
+                            <AppBarButton
+                                x:Name="AddImageButton"
+                                Click="AddImageClicked"
+                                Label="{x:Bind domain:Translator.Photos}">
+                                <AppBarButton.Icon>
+                                    <PathIcon Data="{StaticResource AddPhotoPathIcon}" />
+                                </AppBarButton.Icon>
+                            </AppBarButton>

-                        <AppBarButton
-                            x:Name="AddImageButton"
-                            Click="AddImageClicked"
-                            Label="{x:Bind domain:Translator.Photos}">
-                            <AppBarButton.Icon>
-                                <PathIcon Data="{StaticResource AddPhotoPathIcon}" />
-                            </AppBarButton.Icon>
-                        </AppBarButton>
+                            <AppBarButton
+                                x:Name="EmojiButton"
+                                Click="EmojiButtonClicked"
+                                Label="{x:Bind domain:Translator.Emoji}">
+                                <AppBarButton.Icon>
+                                    <PathIcon Data="{StaticResource EmojiPathIcon}" />
+                                </AppBarButton.Icon>
+                            </AppBarButton>
+                        </toolkit:TabbedCommandBarItem>

-                        <AppBarButton
-                            x:Name="EmojiButton"
-                            Click="EmojiButtonClicked"
-                            Label="{x:Bind domain:Translator.Emoji}">
-                            <AppBarButton.Icon>
-                                <PathIcon Data="{StaticResource EmojiPathIcon}" />
-                            </AppBarButton.Icon>
-                        </AppBarButton>
-                    </CommandBar>
-
-                    <!--  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>
+                        <!--  Options  -->
+                        <toolkit:TabbedCommandBarItem Header="{x:Bind domain:Translator.EditorToolbarOption_Options}">
+                            <AppBarElementContainer>
+                                <muxc:ToggleSplitButton x:Name="ImportanceSplitButton" IsChecked="{x:Bind ViewModel.IsImportanceSelected, Mode=TwoWay}">
+                                    <FontIcon
+                                        FontFamily="Segoe Fluent Icons"
+                                        FontSize="16"
+                                        Glyph="&#xE8C9;" />
+                                    <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>
+                                                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE8C9;" />
+                                                </Button>
+                                                <Button Click="ImportanceClicked">
+                                                    <Button.Tag>
+                                                        <mailkit:MessageImportance>Low</mailkit:MessageImportance>
+                                                    </Button.Tag>
+                                                    <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE8D0;" />
+                                                </Button>
+                                            </StackPanel>
+                                        </Flyout>
+                                    </muxc:ToggleSplitButton.Flyout>
+                                </muxc:ToggleSplitButton>
+                            </AppBarElementContainer>
+                        </toolkit:TabbedCommandBarItem>
+                    </toolkit:TabbedCommandBar.MenuItems>
+                </toolkit:TabbedCommandBar>

                <!--  Mime Info  -->
                <Grid
-                    Grid.Row="2"
+                    Grid.Row="1"
                    Padding="16,0,16,10"
                    ColumnSpacing="12"
                    RowSpacing="3">
@@ -478,7 +451,7 @@
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

-                        <controls1:TokenizingTextBox
+                        <toolkit:TokenizingTextBox
                            x:Name="ToBox"
                            Grid.Column="0"
                            VerticalAlignment="Center"
@@ -520,7 +493,7 @@
                        Text="Cc: "
                        Visibility="{x:Bind ViewModel.IsCCBCCVisible, Mode=OneWay}" />

-                    <controls1:TokenizingTextBox
+                    <toolkit:TokenizingTextBox
                        x:Name="CCBox"
                        Grid.Row="2"
                        Grid.Column="1"
@@ -543,7 +516,7 @@
                        Text="Bcc: "
                        Visibility="{x:Bind ViewModel.IsCCBCCVisible, Mode=OneWay}" />

-                    <controls1:TokenizingTextBox
+                    <toolkit:TokenizingTextBox
                        x:Name="BccBox"
                        Grid.Row="3"
                        Grid.Column="1"
@@ -586,7 +559,7 @@
                        SelectionMode="None">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
-                                <controls1:WrapPanel Orientation="Horizontal" />
+                                <toolkit:WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                    </ListView>
@@ -595,7 +568,7 @@
                <!--  Dropzone  -->
                <Grid
                    Grid.Row="0"
-                    Grid.RowSpan="3"
+                    Grid.RowSpan="2"
                    AllowDrop="True"
                    DragLeave="OnFileDropGridDragLeave"
                    DragOver="OnFileDropGridDragOver"
--- a/Wino.Mail/Views/ComposePage.xaml.cs
+++ b/Wino.Mail/Views/ComposePage.xaml.cs
@@ -26,7 +26,6 @@ using Windows.UI.Xaml.Media.Animation;
 using Windows.UI.Xaml.Navigation;
 using Wino.Core.Domain;
 using Wino.Core.Domain.Entities;
-using Wino.Core.Domain.Enums;
 using Wino.Core.Domain.Interfaces;
 using Wino.Core.Domain.Models.Reader;
 using Wino.Extensions;
@@ -38,7 +37,6 @@ using Wino.Views.Abstract;
 namespace Wino.Views
 {
    public sealed partial class ComposePage : ComposePageAbstract,
-        IRecipient<NavigationPaneModeChanged>,
        IRecipient<CreateNewComposeMailRequested>,
        IRecipient<ApplicationThemeChanged>
    {
@@ -170,6 +168,7 @@ namespace Wino.Views
                ViewModel.IsDraggingOverFilesDropZone = false;
            }
        }
+
        private void OnImageDropGridDragEnter(object sender, DragEventArgs e)
        {
            bool isValid = false;
@@ -557,27 +556,11 @@ namespace Wino.Views

        private void DOMLoaded(CoreWebView2 sender, CoreWebView2DOMContentLoadedEventArgs args) => DOMLoadedTask.TrySetResult(true);

-        void IRecipient<NavigationPaneModeChanged>.Receive(NavigationPaneModeChanged message)
-        {
-            if (message.NewMode == MenuPaneMode.Hidden)
-                TopPanelGrid.Padding = new Thickness(48, 6, 6, 6);
-            else
-                TopPanelGrid.Padding = new Thickness(16, 6, 6, 6);
-        }
-
        async void IRecipient<CreateNewComposeMailRequested>.Receive(CreateNewComposeMailRequested message)
        {
            await RenderInternalAsync(message.RenderModel.RenderHtml);
        }

-        private void BarDynamicOverflowChanging(CommandBar sender, DynamicOverflowItemsChangingEventArgs args)
-        {
-            if (args.Action == CommandBarDynamicOverflowAction.AddingToOverflow)
-                sender.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Visible;
-            else
-                sender.OverflowButtonVisibility = CommandBarOverflowButtonVisibility.Collapsed;
-        }
-
        private void ShowCCBCCClicked(object sender, RoutedEventArgs e)
        {
            ViewModel.IsCCBCCVisible = true;
@@ -641,7 +624,7 @@ namespace Wino.Views
                var selectedImportance = (MessageImportance)senderButton.Tag;

                ViewModel.SelectedMessageImportance = selectedImportance;
-                (ImportanceSplitButton.Content as SymbolIcon).Symbol = (senderButton.Content as SymbolIcon).Symbol;
+                (ImportanceSplitButton.Content as FontIcon).Glyph = (senderButton.Content as FontIcon).Glyph;
            }
        }

--- a/Wino.Mail/Views/MailListPage.xaml.cs
+++ b/Wino.Mail/Views/MailListPage.xaml.cs
@@ -39,7 +39,7 @@ namespace Wino.Views
        IRecipient<ShellStateUpdated>,
        IRecipient<DisposeRenderingFrameRequested>
    {
-        private const double RENDERING_COLUMN_MIN_WIDTH = 300;
+        private const double RENDERING_COLUMN_MIN_WIDTH = 375;

        private IStatePersistanceService StatePersistenceService { get; } = App.Current.Services.GetService<IStatePersistanceService>();
        private IKeyPressService KeyPressService { get; } = App.Current.Services.GetService<IKeyPressService>();
--- a/Wino.Mail/Views/MailRenderingPage.xaml.cs
+++ b/Wino.Mail/Views/MailRenderingPage.xaml.cs
@@ -25,7 +25,6 @@ namespace Wino.Views
    public sealed partial class MailRenderingPage : MailRenderingPageAbstract,
        IRecipient<HtmlRenderingRequested>,
        IRecipient<CancelRenderingContentRequested>,
-        IRecipient<NavigationPaneModeChanged>,
        IRecipient<ApplicationThemeChanged>,
        IRecipient<SaveAsPDFRequested>
    {
@@ -208,14 +207,6 @@ namespace Wino.Views
            }
        }

-        void IRecipient<NavigationPaneModeChanged>.Receive(NavigationPaneModeChanged message)
-        {
-            if (message.NewMode == MenuPaneMode.Hidden)
-                RendererBar.Margin = new Thickness(48, 6, 6, 6);
-            else
-                RendererBar.Margin = new Thickness(16, 6, 6, 6);
-        }
-
        private async void WebViewNavigationStarting(WebView2 sender, CoreWebView2NavigationStartingEventArgs args)
        {
            // This is our reader.
--- a/Wino.Mail/Wino.Mail.csproj
+++ b/Wino.Mail/Wino.Mail.csproj
@@ -147,6 +147,9 @@
    <PackageReference Include="CommunityToolkit.Uwp.Controls.Sizers">
      <Version>8.0.240109</Version>
    </PackageReference>
+    <PackageReference Include="CommunityToolkit.Uwp.Controls.TabbedCommandBar">
+      <Version>8.1.240821</Version>
+    </PackageReference>
    <PackageReference Include="CommunityToolkit.Uwp.Controls.TokenizingTextBox">
      <Version>8.0.240109</Version>
    </PackageReference>
--- a/Wino.Messages/Client/Shell/NavigationPaneModeChanged.cs
+++ b/Wino.Messages/Client/Shell/NavigationPaneModeChanged.cs
@@ -1,10 +0,0 @@
-using Wino.Core.Domain.Enums;
-
-namespace Wino.Messaging.Client.Shell
-{
-    /// <summary>
-    /// When navigation pane mode is changed.
-    /// </summary>
-    /// <param name="NewMode">New navigation mode.</param>
-    public record NavigationPaneModeChanged(MenuPaneMode NewMode);
-}