The rest of dockables

src/PixiEditor.AvaloniaUI/Data/Localization/Languages/en.json

@@ -587,5 +587,9 @@
   "ADD_PRIMARY_COLOR_TO_PALETTE_DESCRIPTIVE": "Add primary color to current palette",
 
   "EXPORT_SAVE_TITLE": "Choose a location to save the image",
-  "COLOR_PICKER_DOCKABLE_TITLE": "Color Picker"
+  "COLOR_PICKER_DOCKABLE_TITLE": "Color Picker",
+  "LAYERS_DOCKABLE_TITLE": "Layers",
+  "NAVIGATOR_DOCKABLE_TITLE": "Navigator",
+  "SWATCHES_DOCKABLE_TITLE": "Swatches",
+    "PALETTE_DOCKABLE_TITLE": "Palette",
 }

src/PixiEditor.AvaloniaUI/Helpers/Converters/ImagePathToBitmapConverter.cs

@@ -4,6 +4,7 @@ using System.Reflection;
 using Avalonia;
 using Avalonia.Media.Imaging;
 using Avalonia.Platform;
+using Avalonia.Svg.Skia;
 
 namespace PixiEditor.AvaloniaUI.Helpers.Converters;
 

src/PixiEditor.AvaloniaUI/ViewModels/Dock/ColorPickerDockViewModel.cs

@@ -13,7 +13,6 @@ internal class ColorPickerDockViewModel : DockableViewModel
     public override string Title => new LocalizedString("COLOR_PICKER_DOCKABLE_TITLE");
     public override bool CanFloat => true;
     public override bool CanClose => true;
-    public override IImage? Icon { get; } = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/ColorPicker.png");
 
     private ColorsViewModel colorsSubViewModel;
 
@@ -26,5 +25,7 @@ internal class ColorPickerDockViewModel : DockableViewModel
     public ColorPickerDockViewModel(ColorsViewModel colorsSubVm)
     {
         ColorsSubViewModel = colorsSubVm;
+        TabCustomizationSettings.Icon =
+            ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/ColorPicker.png");
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/LayersDockViewModel.cs

@@ -2,6 +2,7 @@
 using PixiDocks.Core.Docking;
 using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.Document;
+using PixiEditor.Extensions.Common.Localization;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -9,10 +10,9 @@ internal class LayersDockViewModel : DockableViewModel
 {
     public const string TabId = "Layers";
     public override string Id => TabId;
-    public override string Title => "Layers";
+    public override string Title => new LocalizedString("LAYERS_DOCKABLE_TITLE");
     public override bool CanFloat => true;
     public override bool CanClose => true;
-    public override IImage? Icon { get; } = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Layers.png");
 
     private DocumentManagerViewModel documentManager;
     private DocumentViewModel activeDocument;
@@ -33,6 +33,8 @@ internal class LayersDockViewModel : DockableViewModel
     {
         DocumentManager = documentManager;
         DocumentManager.ActiveDocumentChanged += DocumentManager_ActiveDocumentChanged;
+        TabCustomizationSettings.Icon =
+            ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Layers.png");
     }
 
     private void DocumentManager_ActiveDocumentChanged(object? sender, DocumentChangedEventArgs e)

src/PixiEditor.AvaloniaUI/ViewModels/Dock/LayoutManager.cs

@@ -32,9 +32,14 @@ internal class LayoutManager
         LayersDockViewModel layersDockViewModel = new(mainViewModel.DocumentManagerSubViewModel);
         ColorPickerDockViewModel colorPickerDockViewModel = new(mainViewModel.ColorsSubViewModel);
         NavigationDockViewModel navigationDockViewModel = new(mainViewModel.ColorsSubViewModel, mainViewModel.DocumentManagerSubViewModel);
+        SwatchesDockViewModel swatchesDockViewModel = new(mainViewModel.DocumentManagerSubViewModel);
+        PaletteViewerDockViewModel paletteViewerDockViewModel = new(mainViewModel.ColorsSubViewModel, mainViewModel.DocumentManagerSubViewModel);
+
         RegisterDockable(layersDockViewModel);
         RegisterDockable(colorPickerDockViewModel);
         RegisterDockable(navigationDockViewModel);
+        RegisterDockable(swatchesDockViewModel);
+        RegisterDockable(paletteViewerDockViewModel);
 
         DefaultLayout = new LayoutTree
         {
@@ -54,7 +59,12 @@ internal class LayoutManager
                         First = new DockableArea
                         {
                             Id = "ColorsArea",
-                            ActiveDockable = DockContext.CreateDockable(colorPickerDockViewModel),
+                            Dockables =
+                            [
+                                DockContext.CreateDockable(colorPickerDockViewModel),
+                                DockContext.CreateDockable(swatchesDockViewModel),
+                                DockContext.CreateDockable(paletteViewerDockViewModel)
+                            ]
                         },
                         FirstSize = 0.5,
                         SplitDirection = DockingDirection.Bottom,

src/PixiEditor.AvaloniaUI/ViewModels/Dock/NavigationDockViewModel.cs

@@ -2,6 +2,7 @@
 using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
+using PixiEditor.Extensions.Common.Localization;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
@@ -10,10 +11,9 @@ internal class NavigationDockViewModel : DockableViewModel
     public const string TabId = "Navigator";
 
     public override string Id => TabId;
-    public override string Title => "Navigator";
+    public override string Title => new LocalizedString("NAVIGATOR_DOCKABLE_TITLE");
     public override bool CanFloat => true;
     public override bool CanClose => true;
-    public override IImage? Icon { get; } = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Navigator.png");
 
     private ColorsViewModel colorsSubViewModel;
 
@@ -35,5 +35,6 @@ internal class NavigationDockViewModel : DockableViewModel
     {
         ColorsSubViewModel = colorsSubViewModel;
         DocumentManagerSubViewModel = documentManagerViewModel;
+        TabCustomizationSettings.Icon = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Navigator.png");
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/PaletteViewerDockViewModel.cs

@@ -1,10 +1,16 @@
-using PixiEditor.AvaloniaUI.ViewModels.Document;
+using PixiEditor.AvaloniaUI.Helpers.Converters;
+using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
-internal class PaletteViewerDockViewModel : ViewModelBase
+internal class PaletteViewerDockViewModel : DockableViewModel
 {
+    public override string Id => "PaletteViewer";
+    public override string Title => "Palettes";
+    public override bool CanFloat => true;
+    public override bool CanClose => true;
+
     private ColorsViewModel colorsSubViewModel;
     private DocumentManagerViewModel documentManagerSubViewModel;
 
@@ -24,5 +30,7 @@ internal class PaletteViewerDockViewModel : ViewModelBase
     {
         ColorsSubViewModel = colorsSubViewModel;
         DocumentManagerSubViewModel = documentManagerViewModel;
+
+        TabCustomizationSettings.Icon = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/PaletteViewer.png");
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Dock/SwatchesDockViewModel.cs

@@ -1,10 +1,17 @@
 using Avalonia;
+using PixiEditor.AvaloniaUI.Helpers.Converters;
 using PixiEditor.AvaloniaUI.ViewModels.Document;
+using PixiEditor.Extensions.Common.Localization;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
 
-internal class SwatchesDockViewModel : ViewModelBase
+internal class SwatchesDockViewModel : DockableViewModel
 {
+    public override string Id => "Swatches";
+    public override string Title => new LocalizedString("SWATCHES_DOCKABLE_TITLE");
+    public override bool CanFloat => true;
+    public override bool CanClose => true;
+
     private DocumentManagerViewModel documentManagerSubViewModel;
 
     public DocumentManagerViewModel DocumentManagerSubViewModel
@@ -16,5 +23,6 @@ internal class SwatchesDockViewModel : ViewModelBase
     public SwatchesDockViewModel(DocumentManagerViewModel documentManagerViewModel)
     {
         DocumentManagerSubViewModel = documentManagerViewModel;
+        TabCustomizationSettings.Icon = ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath("/Images/Dockables/Swatches.png");
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/DockableViewModel.cs

@@ -11,9 +11,7 @@ internal abstract class DockableViewModel : ViewModelBase, IDockableContent
     public abstract string Title { get; }
     public abstract bool CanFloat { get; }
     public abstract bool CanClose { get; }
-    public abstract IImage? Icon { get; }
-
-    object? IDockableContent.Icon => Icon;
+    public TabCustomizationSettings TabCustomizationSettings { get; protected set; } = new();
 
     public DockableViewModel()
     {

src/PixiEditor.AvaloniaUI/ViewModels/SubViewModels/ViewportWindowViewModel.cs

@@ -24,7 +24,7 @@ internal class ViewportWindowViewModel : SubViewModel<WindowViewModel>, IDockabl
     public string Title => $"{Document.FileName}{Index}";
     public bool CanFloat => true;
     public bool CanClose => true;
-    public object? Icon => new SurfaceImage(Document.PreviewSurface);
+    public TabCustomizationSettings TabCustomizationSettings { get; } = new(showCloseButton: true);
 
     private bool _closeRequested;
 
@@ -60,6 +60,7 @@ internal class ViewportWindowViewModel : SubViewModel<WindowViewModel>, IDockabl
     public ViewportWindowViewModel(WindowViewModel owner, DocumentViewModel document) : base(owner)
     {
         Document = document;
+        TabCustomizationSettings.Icon = new SurfaceImage(Document.PreviewSurface);
         RequestCloseCommand = new RelayCommand(() => Owner.OnViewportWindowCloseButtonPressed(this));
     }