Sidebar - Put all options under the cogwheel button and right-mouse-menu

Sidebar - Hide the cogwheel button when not hoving over category/profile
Sidebar - Made it easier to drag profiles into an empty category

src/Artemis.UI/Screens/Sidebar/ContentDialogs/SidebarCategoryEditView.axaml

@@ -2,12 +2,14 @@
              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:sidebar="clr-namespace:Artemis.UI.Screens.Sidebar"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-             x:Class="Artemis.UI.Screens.Sidebar.SidebarCategoryEditView">
+             x:Class="Artemis.UI.Screens.Sidebar.SidebarCategoryEditView"
+             x:DataType="sidebar:SidebarCategoryEditViewModel">
     <StackPanel>
         <StackPanel.KeyBindings>
-            <KeyBinding Gesture="Enter" Command="{Binding Confirm}" />
+            <KeyBinding Gesture="Enter" Command="{CompiledBinding Confirm}" />
         </StackPanel.KeyBindings>
-        <TextBox Text="{Binding CategoryName}" Watermark="Category name"/>
+        <TextBox Text="{CompiledBinding CategoryName}" Watermark="Category name"/>
     </StackPanel>
 </UserControl>

src/Artemis.UI/Screens/Sidebar/ContentDialogs/SidebarCategoryEditViewModel.cs

@@ -23,13 +23,9 @@ public class SidebarCategoryEditViewModel : ContentDialogViewModelBase
             _categoryName = _category.Name;
 
         Confirm = ReactiveCommand.Create(ExecuteConfirm, ValidationContext.Valid);
-        Delete = ReactiveCommand.Create(ExecuteDelete);
-
         this.ValidationRule(vm => vm.CategoryName, categoryName => !string.IsNullOrWhiteSpace(categoryName), "You must specify a valid name");
     }
 
-    public ReactiveCommand<Unit, Unit> Delete { get; set; }
-
     public string? CategoryName
     {
         get => _categoryName;
@@ -52,10 +48,4 @@ public class SidebarCategoryEditViewModel : ContentDialogViewModelBase
 
         ContentDialog?.Hide(ContentDialogResult.Primary);
     }
-
-    private void ExecuteDelete()
-    {
-        if (_category != null)
-            _profileService.DeleteProfileCategory(_category);
-    }
 }

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditView.axaml

@@ -76,18 +76,20 @@
 
                         <StackPanel Orientation="Horizontal"
                                     IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.BitmapImage}}">
-                                                       
+
-                            <Border IsVisible="{CompiledBinding ProfileConfiguration.Icon.Fill}" Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}" Width="78" Height="78">
+                            <Border IsVisible="{CompiledBinding ProfileConfiguration.Icon.Fill}" Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}"
+                                    Width="78" Height="78">
                                 <Border Name="FillPreview" Background="{DynamicResource TextFillColorPrimary}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="10">
                                     <Border.OpacityMask>
                                         <ImageBrush Source="{CompiledBinding SelectedBitmapSource}" BitmapInterpolationMode="HighQuality" />
                                     </Border.OpacityMask>
                                 </Border>
                             </Border>
-                            <Border IsVisible="{CompiledBinding !ProfileConfiguration.Icon.Fill}" Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}" Width="78" Height="78">
+                            <Border IsVisible="{CompiledBinding !ProfileConfiguration.Icon.Fill}" Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}"
+                                    Width="78" Height="78">
                                 <Image Source="{CompiledBinding SelectedBitmapSource}" Margin="10" />
                             </Border>
-                            
+
                             <Button Command="{CompiledBinding BrowseBitmapFile}"
                                     VerticalAlignment="Bottom"
                                     Margin="10 0"
@@ -96,7 +98,7 @@
                             </Button>
                             <CheckBox VerticalAlignment="Bottom" IsChecked="{CompiledBinding ProfileConfiguration.Icon.Fill}">Fill</CheckBox>
                         </StackPanel>
-                        
+
                         <StackPanel Orientation="Horizontal"
                                     IsVisible="{CompiledBinding IconType, Converter={StaticResource EnumBoolConverter}, ConverterParameter={x:Static core:ProfileConfigurationIconType.MaterialIcon}}">
                             <Border Background="{DynamicResource CheckerboardBrush}" CornerRadius="{DynamicResource CardCornerRadius}" Width="78" Height="78">
@@ -169,8 +171,8 @@
                         <Border CornerRadius="5" ClipToBounds="True">
                             <ContentControl Content="{CompiledBinding VisualEditorViewModel}" Height="150" />
                         </Border>
-                        <Border Background="Black" Opacity="0.5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" CornerRadius="5"/>
+                        <Border Background="Black" Opacity="0.5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" CornerRadius="5" />
-                        
+
                         <Button DockPanel.Dock="Bottom"
                                 ToolTip.Tip="Open editor"
                                 HorizontalAlignment="Center"
@@ -185,12 +187,11 @@
             </StackPanel>
         </ScrollViewer>
 
-        <Grid Grid.Row="1" ColumnDefinitions="Auto,Auto,Auto" HorizontalAlignment="Right">
+        <StackPanel Grid.Row="1" Spacing="5" HorizontalAlignment="Right" Orientation="Horizontal">
-            <Button Grid.Column="0" Classes="accent" Command="{CompiledBinding Confirm}">Confirm</Button>
+            <Button Command="{CompiledBinding Confirm}" Classes="accent">Confirm</Button>
-            <Button Grid.Column="1" Margin="5" Command="{CompiledBinding Import}" IsVisible="{CompiledBinding IsNew}">Import</Button>
+            <Button Command="{CompiledBinding Delete}" IsVisible="{CompiledBinding !IsNew}">Delete</Button>
-            <Button Grid.Column="1" Margin="5" Command="{CompiledBinding Delete}" IsVisible="{CompiledBinding !IsNew}">Delete</Button>
+            <Button Command="{CompiledBinding Cancel}">Cancel</Button>
-            <Button Grid.Column="2" Command="{CompiledBinding Cancel}">Cancel</Button>
+        </StackPanel>
-        </Grid>
     </Grid>
 
 </controls1:CoreWindow>

src/Artemis.UI/Screens/Sidebar/Dialogs/ProfileConfigurationEditViewModel.cs

@@ -63,7 +63,7 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
             _disableHotkey = new Hotkey {Key = _profileConfiguration.DisableHotkey.Key, Modifiers = _profileConfiguration.DisableHotkey.Modifiers};
 
         IsNew = profileConfiguration == null;
-        DisplayName = IsNew ? "Artemis | Add profile" : "Artemis | Edit profile";
+        DisplayName = IsNew ? "Artemis | Add profile" : "Artemis | Edit profile properties";
         Modules = new ObservableCollection<ProfileModuleViewModel?>(
             pluginManagementService.GetFeaturesOfType<Module>().Where(m => !m.IsAlwaysAvailable).Select(m => new ProfileModuleViewModel(m))
         );
@@ -75,7 +75,6 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
         BrowseBitmapFile = ReactiveCommand.CreateFromTask(ExecuteBrowseBitmapFile);
         OpenConditionEditor = ReactiveCommand.CreateFromTask(ExecuteOpenConditionEditor);
         Confirm = ReactiveCommand.CreateFromTask(ExecuteConfirm);
-        Import = ReactiveCommand.CreateFromTask(ExecuteImport);
         Delete = ReactiveCommand.CreateFromTask(ExecuteDelete);
         Cancel = ReactiveCommand.Create(ExecuteCancel);
 
@@ -135,51 +134,7 @@ public class ProfileConfigurationEditViewModel : DialogViewModelBase<ProfileConf
     public ReactiveCommand<Unit, Unit> Import { get; }
     public ReactiveCommand<Unit, Unit> Delete { get; }
     public ReactiveCommand<Unit, Unit> Cancel { get; }
-
+    
-    private async Task ExecuteImport()
-    {
-        if (!IsNew)
-            return;
-
-        string[]? result = await _windowService.CreateOpenFileDialog()
-            .HavingFilter(f => f.WithExtension("json").WithName("Artemis profile"))
-            .ShowAsync();
-
-        if (result == null)
-            return;
-
-        string json = await File.ReadAllTextAsync(result[0]);
-        ProfileConfigurationExportModel? profileConfigurationExportModel = null;
-        try
-        {
-            profileConfigurationExportModel = JsonConvert.DeserializeObject<ProfileConfigurationExportModel>(json, IProfileService.ExportSettings);
-        }
-        catch (JsonException e)
-        {
-            _windowService.ShowExceptionDialog("Import profile failed", e);
-        }
-
-        if (profileConfigurationExportModel == null)
-        {
-            await _windowService.ShowConfirmContentDialog("Import profile", "Failed to import this profile, make sure it is a valid Artemis profile.", "Confirm", null);
-            return;
-        }
-
-        try
-        {
-            ProfileConfiguration profileConfiguration = _profileService.ImportProfile(_profileCategory, profileConfigurationExportModel);
-
-            // Remove the temporary profile configuration
-            _profileService.RemoveProfileConfiguration(_profileConfiguration);
-
-            Close(profileConfiguration);
-        }
-        catch (Exception e)
-        {
-            _windowService.ShowExceptionDialog("Import profile failed", e);
-        }
-    }
-
     private async Task ExecuteDelete()
     {
         if (IsNew)

src/Artemis.UI/Screens/Sidebar/SidebarCategoryView.axaml

@@ -14,15 +14,58 @@
              x:DataType="local:SidebarCategoryViewModel">
     <UserControl.Resources>
         <converters:ColorOpacityConverter x:Key="ColorOpacityConverter" />
+        <MenuFlyout x:Key="CategoryMenuFlyout" Placement="Bottom">
+            <MenuItem Header="Rename" Command="{CompiledBinding RenameCategory}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="RenameBox" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="-" />
+            <MenuItem Header="Create profile" Command="{CompiledBinding AddProfile}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="Plus" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="Import profile" Command="{CompiledBinding ImportProfile}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="Import" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="-" />
+            <MenuItem Header="Suspend" Command="{CompiledBinding ToggleSuspended}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="Check" IsVisible="{CompiledBinding IsSuspended}" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="Move up" Command="{CompiledBinding MoveUp}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="ArrowUp" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="Move down" Command="{CompiledBinding MoveDown}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="ArrowDown" />
+                </MenuItem.Icon>
+            </MenuItem>
+            <MenuItem Header="-" />
+            <MenuItem Header="Delete" Command="{CompiledBinding DeleteCategory}">
+                <MenuItem.Icon>
+                    <avalonia:MaterialIcon Kind="TrashCan" />
+                </MenuItem.Icon>
+            </MenuItem>
+        </MenuFlyout>
     </UserControl.Resources>
     <UserControl.Styles>
-        <Style Selector=":is(Button).category-button">
+        <Style Selector=":is(Button).properties-button">
             <Setter Property="IsVisible" Value="False" />
         </Style>
-        <Style Selector="Grid#ContainerGrid:pointerover :is(Button).category-button">
+        <Style Selector="Grid#ContainerGrid:pointerover :is(Button).properties-button">
             <Setter Property="IsVisible" Value="True" />
         </Style>
-
+        <Style Selector="Grid#ContainerGrid.flyout-open :is(Button).properties-button">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        
         <Style Selector="avalonia|MaterialIcon.chevron-collapsed">
             <Setter Property="RenderTransform" Value="rotate(180deg)" />
         </Style>
@@ -89,33 +132,13 @@
             </Setter>
         </Style>
     </UserControl.Styles>
-    <Grid x:Name="ContainerGrid" Margin="0 8 0 0" RowDefinitions="Auto,*" >
+    
-        <Grid.ContextFlyout>
+    <Grid Name="ContainerGrid"
-            <MenuFlyout>
+          Margin="0 8 0 0" 
-                <MenuItem Header="View properties" Command="{CompiledBinding EditCategory}">
+          RowDefinitions="Auto,*" 
-                    <MenuItem.Icon>
+          ContextFlyout="{StaticResource CategoryMenuFlyout}"
-                        <avalonia:MaterialIcon Kind="Cog" />
+          Classes.flyout-open="{Binding IsOpen, Source={StaticResource CategoryMenuFlyout}}">
-                    </MenuItem.Icon>
+        <Grid Grid.Row="0" Background="Transparent" Margin="0 0 6 0" ColumnDefinitions="Auto,*,Auto,Auto,Auto">
-                </MenuItem>
-                <MenuItem Header="Suspend" Command="{CompiledBinding ToggleSuspended}">
-                    <MenuItem.Icon>
-                        <avalonia:MaterialIcon Kind="Check" IsVisible="{CompiledBinding IsSuspended}" />
-                    </MenuItem.Icon>
-                </MenuItem>
-                <MenuItem Header="-" />
-                <MenuItem Header="Move up" Command="{CompiledBinding MoveUp}">
-                    <MenuItem.Icon>
-                        <avalonia:MaterialIcon Kind="ArrowUp" />
-                    </MenuItem.Icon>
-                </MenuItem>
-                <MenuItem Header="Move down" Command="{CompiledBinding MoveDown}">
-                    <MenuItem.Icon>
-                        <avalonia:MaterialIcon Kind="ArrowDown" />
-                    </MenuItem.Icon>
-                </MenuItem>
-            </MenuFlyout>
-        </Grid.ContextFlyout>
-        <Grid Grid.Row="0" Background="Transparent" Margin="0 0 6 0" ColumnDefinitions="Auto,*,Auto,Auto,Auto,Auto">
             <avalonia:MaterialIcon Classes.chevron-collapsed="{CompiledBinding !IsCollapsed}"
                                    Kind="ChevronUp"
                                    Grid.Column="0"
@@ -162,43 +185,41 @@
                 </Border>
             </Panel>
 
-            <Button Classes="category-button icon-button icon-button-small"
+            <Button Classes="properties-button icon-button icon-button-small"
                     Grid.Column="2"
-                    ToolTip.Tip="Edit category"
                     HorizontalAlignment="Right"
-                    Command="{CompiledBinding EditCategory}"
+                    Flyout="{StaticResource CategoryMenuFlyout}"
                     Margin="0 0 2 0">
                 <avalonia:MaterialIcon Kind="Cog" />
             </Button>
             <Button Classes="icon-button icon-button-small"
                     Command="{CompiledBinding ToggleSuspended}"
                     Grid.Column="3"
-                    ToolTip.Tip="Suspend/resume profile"
+                    ToolTip.Tip="Suspend/resume category"
                     Margin="0 0 2 0">
                 <Panel>
                     <avalonia:MaterialIcon Kind="EyeOff" IsVisible="{CompiledBinding IsSuspended}" />
                     <avalonia:MaterialIcon Kind="Eye" IsVisible="{CompiledBinding !IsSuspended}" />
                 </Panel>
             </Button>
-            <Button Classes="category-button icon-button icon-button-small"
-                    Grid.Column="4"
-                    ToolTip.Tip="Add profile"
-                    HorizontalAlignment="Right"
-                    Command="{CompiledBinding AddProfile}"
-                    Margin="0 0 2 0">
-                <avalonia:MaterialIcon Kind="Plus" />
-            </Button>
         </Grid>
 
-        <Border Grid.Row="1">
+        <Panel Grid.Row="1">
             <ListBox Name="SidebarListBox"
                      Classes="sidebar-listbox"
                      Items="{CompiledBinding ProfileConfigurations}"
                      SelectedItem="{CompiledBinding SelectedProfileConfiguration}"
-                     MinHeight="10"
+                     MinHeight="35"
                      ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                      ScrollViewer.VerticalScrollBarVisibility="Disabled">
             </ListBox>
-        </Border>
+            <TextBlock IsVisible="{CompiledBinding !ProfileConfigurations.Count}" 
+                       Margin="12 0 0 0"
+                       FontSize="13"
+                       VerticalAlignment="Center" 
+                       HorizontalAlignment="Left"
+                       IsHitTestVisible="False"
+                       Classes="subtitle">Empty category</TextBlock>
+        </Panel>
     </Grid>
 </UserControl>

src/Artemis.UI/Screens/Sidebar/SidebarCategoryViewModel.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
+using System.IO;
 using System.Linq;
 using System.Reactive;
 using System.Reactive.Disposables;
@@ -15,6 +16,7 @@ using Artemis.UI.Shared.Services.Builders;
 using Artemis.UI.Shared.Services.ProfileEditor;
 using DynamicData;
 using DynamicData.Binding;
+using Newtonsoft.Json;
 using ReactiveUI;
 
 namespace Artemis.UI.Screens.Sidebar;
@@ -53,9 +55,11 @@ public class SidebarCategoryViewModel : ActivatableViewModelBase
         ToggleCollapsed = ReactiveCommand.Create(ExecuteToggleCollapsed);
         ToggleSuspended = ReactiveCommand.Create(ExecuteToggleSuspended);
         AddProfile = ReactiveCommand.CreateFromTask(ExecuteAddProfile);
-        EditCategory = ReactiveCommand.CreateFromTask(ExecuteEditCategory);
+        ImportProfile = ReactiveCommand.CreateFromTask(ExecuteImportProfile);
         MoveUp = ReactiveCommand.Create(ExecuteMoveUp);
         MoveDown = ReactiveCommand.Create(ExecuteMoveDown);
+        RenameCategory = ReactiveCommand.CreateFromTask(ExecuteRenameCategory);
+        DeleteCategory = ReactiveCommand.CreateFromTask(ExecuteDeleteCategory);
 
         this.WhenActivated(d =>
         {
@@ -84,12 +88,17 @@ public class SidebarCategoryViewModel : ActivatableViewModelBase
         });
     }
 
+
+
+    public ReactiveCommand<Unit, Unit> ImportProfile { get; }
+
     public ReactiveCommand<Unit, Unit> ToggleCollapsed { get; }
     public ReactiveCommand<Unit, Unit> ToggleSuspended { get; }
     public ReactiveCommand<Unit, Unit> AddProfile { get; }
-    public ReactiveCommand<Unit, Unit> EditCategory { get; }
     public ReactiveCommand<Unit, Unit> MoveUp { get; }
     public ReactiveCommand<Unit, Unit> MoveDown { get; }
+    public ReactiveCommand<Unit, Unit> RenameCategory { get; }
+    public ReactiveCommand<Unit, Unit> DeleteCategory { get; }
 
     public ProfileCategory ProfileCategory { get; }
     public ReadOnlyObservableCollection<SidebarProfileConfigurationViewModel> ProfileConfigurations { get; }
@@ -114,13 +123,12 @@ public class SidebarCategoryViewModel : ActivatableViewModelBase
             _profileService.SaveProfileCategory(oldCategory);
     }
 
-    private async Task ExecuteEditCategory()
+    private async Task ExecuteRenameCategory()
     {
         await _windowService.CreateContentDialog()
             .WithTitle("Edit category")
             .WithViewModel(out SidebarCategoryEditViewModel vm, ("category", ProfileCategory))
             .HavingPrimaryButton(b => b.WithText("Confirm").WithCommand(vm.Confirm))
-            .HavingSecondaryButton(b => b.WithText("Delete").WithCommand(vm.Delete))
             .WithCloseButtonText("Cancel")
             .WithDefaultButton(ContentDialogButton.Primary)
             .ShowAsync();
@@ -128,6 +136,12 @@ public class SidebarCategoryViewModel : ActivatableViewModelBase
         _sidebarViewModel.UpdateProfileCategories();
     }
 
+    private async Task ExecuteDeleteCategory()
+    {
+        if (await _windowService.ShowConfirmContentDialog($"Delete {ProfileCategory.Name}", "Do you want to delete this category and all its profiles?"))
+            _profileService.DeleteProfileCategory(ProfileCategory);
+    }
+
     private async Task ExecuteAddProfile()
     {
         ProfileConfiguration? result = await _windowService.ShowDialogAsync<ProfileConfigurationEditViewModel, ProfileConfiguration?>(
@@ -140,6 +154,42 @@ public class SidebarCategoryViewModel : ActivatableViewModelBase
             SelectedProfileConfiguration = viewModel;
         }
     }
+    
+    private async Task ExecuteImportProfile()
+    {
+        string[]? result = await _windowService.CreateOpenFileDialog()
+            .HavingFilter(f => f.WithExtension("json").WithName("Artemis profile"))
+            .ShowAsync();
+
+        if (result == null)
+            return;
+
+        string json = await File.ReadAllTextAsync(result[0]);
+        ProfileConfigurationExportModel? profileConfigurationExportModel = null;
+        try
+        {
+            profileConfigurationExportModel = JsonConvert.DeserializeObject<ProfileConfigurationExportModel>(json, IProfileService.ExportSettings);
+        }
+        catch (JsonException e)
+        {
+            _windowService.ShowExceptionDialog("Import profile failed", e);
+        }
+
+        if (profileConfigurationExportModel == null)
+        {
+            await _windowService.ShowConfirmContentDialog("Import profile", "Failed to import this profile, make sure it is a valid Artemis profile.", "Confirm", null);
+            return;
+        }
+
+        try
+        {
+            _profileService.ImportProfile(ProfileCategory, profileConfigurationExportModel);
+        }
+        catch (Exception e)
+        {
+            _windowService.ShowExceptionDialog("Import profile failed", e);
+        }
+    }
 
     private void ExecuteToggleCollapsed()
     {

src/Artemis.UI/Screens/Sidebar/SidebarProfileConfigurationView.axaml

@@ -9,13 +9,14 @@
              x:Class="Artemis.UI.Screens.Sidebar.SidebarProfileConfigurationView"
              x:DataType="sidebar:SidebarProfileConfigurationViewModel"
              Background="Transparent">
-    <UserControl.ContextFlyout>
+    <UserControl.Resources>
-        <MenuFlyout>
+        <MenuFlyout x:Key="ProfileMenuFlyout" Placement="Bottom">
-            <MenuItem Header="View properties" Command="{CompiledBinding EditProfile}">
+            <MenuItem Header="Edit properties" Command="{CompiledBinding EditProfile}">
                 <MenuItem.Icon>
                     <avalonia:MaterialIcon Kind="Cog" />
                 </MenuItem.Icon>
             </MenuItem>
+            <MenuItem Header="-" />
             <MenuItem Header="Suspend" Command="{CompiledBinding ToggleSuspended}">
                 <MenuItem.Icon>
                     <avalonia:MaterialIcon Kind="Check" IsVisible="{CompiledBinding ProfileConfiguration.IsSuspended}" />
@@ -53,8 +54,24 @@
                 </MenuItem.Icon>
             </MenuItem>
         </MenuFlyout>
-    </UserControl.ContextFlyout>
+    </UserControl.Resources>
-    <Grid ColumnDefinitions="Auto,*,Auto,Auto">
+    <UserControl.Styles>
+        <Style Selector=":is(Button).properties-button">
+            <Setter Property="IsVisible" Value="False" />
+        </Style>
+        <Style Selector="Grid#ProfileContainerGrid:pointerover :is(Button).properties-button">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+        <Style Selector="Grid#ProfileContainerGrid.flyout-open :is(Button).properties-button">
+            <Setter Property="IsVisible" Value="True" />
+        </Style>
+    </UserControl.Styles>
+    
+    <Grid Name="ProfileContainerGrid"
+          ColumnDefinitions="Auto,*,Auto,Auto" 
+          Background="Transparent" 
+          ContextFlyout="{StaticResource ProfileMenuFlyout}"
+          Classes.flyout-open="{Binding IsOpen, Source={StaticResource ProfileMenuFlyout}}">
         <shared:ProfileConfigurationIcon Grid.Column="0"
                                          x:Name="ProfileIcon"
                                          VerticalAlignment="Center"
@@ -101,11 +118,10 @@
             </Border>
         </Panel>
 
-        <Button Command="{CompiledBinding EditProfile}"
+        <Button Classes="properties-button icon-button icon-button-small"
-                Classes="icon-button icon-button-small"
                 Grid.Column="2"
-                ToolTip.Tip="View properties"
                 HorizontalAlignment="Right"
+                Flyout="{StaticResource ProfileMenuFlyout}"
                 Margin="0 0 2 0">
             <avalonia:MaterialIcon Kind="Cog" />
         </Button>