Cleanup. Localization. Advanced Settings

App.xaml.cs

@@ -21,17 +21,27 @@
  *  
  */
 
+using LunaDraw.Logic.Utils;
+
 namespace LunaDraw;
 
 public partial class App : Application
 {
-	public App()
-	{
-		InitializeComponent();
-	}
+  public App(IPreferencesFacade preferencesFacade)
+  {
+    InitializeComponent();
+
+    var theme = preferencesFacade.Get(AppPreference.AppTheme);
+    UserAppTheme = theme switch
+    {
+      "Light" => AppTheme.Light,
+      "Dark" => AppTheme.Dark,
+      _ => AppTheme.Unspecified
+    };
+  }
 
-	protected override Window CreateWindow(IActivationState? activationState)
-	{
-		return new Window(new AppShell());
-	}
+  protected override Window CreateWindow(IActivationState? activationState)
+  {
+    return new Window(new AppShell());
+  }
 }

Components/AdvancedSettingsPopup.xaml

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<toolkit:Popup xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+               xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+               xmlns:viewModels="clr-namespace:LunaDraw.Logic.ViewModels"
+               xmlns:strings="clr-namespace:LunaDraw.Resources.Strings"
+               x:Class="LunaDraw.Components.AdvancedSettingsPopup"
+               x:DataType="viewModels:MainViewModel"
+               CanBeDismissedByTappingOutsideOfPopup="True"
+               BackgroundColor="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray900}}">
+  <VerticalStackLayout Spacing="15">
+    <Grid ColumnDefinitions="*, Auto"
+          RowDefinitions="Auto, Auto, Auto"
+          RowSpacing="15">
+      <Label Grid.Row="0"
+             TextColor="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}"
+             Grid.Column="0"
+             Text="{x:Static strings:AppResources.Label_ShowLayersPanel}"
+             VerticalOptions="Center"/>
+      <Switch Grid.Row="0"
+              Grid.Column="1"
+              IsToggled="{Binding ShowLayersPanel}"/>
+
+      <Label Grid.Row="1"
+             TextColor="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}"
+             Grid.Column="0"
+             Text="{x:Static strings:AppResources.Label_ShowButtonLabels}"
+             VerticalOptions="Center"/>
+      <Switch Grid.Row="1"
+              Grid.Column="1"
+              IsToggled="{Binding ShowButtonLabels}"/>
+
+      <Label Grid.Row="2"
+             TextColor="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}"
+             Grid.Column="0"
+             Text="Theme"
+             VerticalOptions="Center"/>
+      <Picker Grid.Row="2"
+              Grid.Column="1"
+              ItemsSource="{Binding AvailableThemes}"
+              SelectedItem="{Binding SelectedTheme}"
+              TextColor="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}"
+              Title="Select Theme"/>
+    </Grid>
+
+    <Button Text="{x:Static strings:AppResources.Label_Close}"
+            Clicked="OnCloseClicked"
+            Margin="0,10,0,0"/>
+  </VerticalStackLayout>
+</toolkit:Popup>

Platforms/Windows/TransparentBackdrop.cs.cs → Components/AdvancedSettingsPopup.xaml.cs

@@ -21,20 +21,21 @@
  *  
  */
 
-using WinComp = Windows.UI.Composition;
+using CommunityToolkit.Maui.Views;
+using LunaDraw.Logic.ViewModels;
 
-namespace LunaDraw.WinUI;
+namespace LunaDraw.Components;
 
-/// <summary>
-/// Transparent or tinted backdrop for .NET 10
-/// </summary>
-public partial class TransparentBackdrop : CompositionBrushBackdrop
+public partial class AdvancedSettingsPopup : Popup
 {
-  protected override WinComp.CompositionBrush CreateBrush(WinComp.Compositor compositor)
+  public AdvancedSettingsPopup(MainViewModel viewModel)
   {
-    // Use HostBackdropBrush to sample the area behind the window.
-    // This allows the user to see through the window (typically with blur).
-    // The TintColor property is unused here; apply tint via XAML.
-    return compositor.CreateHostBackdropBrush();
+    InitializeComponent();
+    BindingContext = viewModel;
   }
-}
+
+  private void OnCloseClicked(object sender, EventArgs e)
+  {
+    this.CloseAsync();
+  }
+}

Components/BrushPreviewControl.cs

@@ -138,14 +138,14 @@ protected override void OnPaintSurface(SKPaintSurfaceEventArgs e)
     // Draw Glow if enabled
     if (IsGlowEnabled)
     {
-        using var glowPaint = new SKPaint
-        {
-            Style = SKPaintStyle.StrokeAndFill,
-            Color = GlowColor,
-            IsAntialias = true,
-            MaskFilter = SKMaskFilter.CreateBlur(SKBlurStyle.Normal, GlowRadius)
-        };
-        canvas.DrawPath(BrushShape.Path, glowPaint);
+      using var glowPaint = new SKPaint
+      {
+        Style = SKPaintStyle.StrokeAndFill,
+        Color = GlowColor,
+        IsAntialias = true,
+        MaskFilter = SKMaskFilter.CreateBlur(SKBlurStyle.Normal, GlowRadius)
+      };
+      canvas.DrawPath(BrushShape.Path, glowPaint);
     }
 
     using var paint = new SKPaint

Components/BrushesFlyoutPanel.xaml

@@ -5,7 +5,8 @@
              xmlns:models="clr-namespace:LunaDraw.Logic.Models"
              xmlns:components="clr-namespace:LunaDraw.Components"
              x:Class="LunaDraw.Components.BrushesFlyoutPanel"
-             x:DataType="viewModels:ToolbarViewModel">
+             x:DataType="viewModels:ToolbarViewModel"
+             x:Name="Root">
   <Border Background="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray800}}"
           Padding="12"
           StrokeShape="RoundRectangle"
@@ -21,7 +22,7 @@
       <BoxView HeightRequest="1"
                Color="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}"
                Margin="0,5"/>
-               
+
       <CollectionView ItemsSource="{Binding AvailableBrushShapes}"
                       HeightRequest="420"
                       HorizontalOptions="Fill"
@@ -30,7 +31,7 @@
           <GridItemsLayout Orientation="Vertical"
                            Span="4"
                            VerticalItemSpacing="10"
-                           HorizontalItemSpacing="10" />
+                           HorizontalItemSpacing="10"/>
         </CollectionView.ItemsLayout>
         <CollectionView.ItemTemplate>
           <DataTemplate x:DataType="models:BrushShape">
@@ -43,23 +44,23 @@
                       Padding="4"
                       Margin="1">
                 <Border.GestureRecognizers>
-                  <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ToolbarViewModel}}, Path=SelectBrushShapeCommand}"
-                                        CommandParameter="{Binding .}" />
+                  <TapGestureRecognizer Command="{Binding Source={x:Reference Root}, Path=ViewModel.SelectBrushShapeCommand, x:DataType=components:BrushesFlyoutPanel}"
+                                        CommandParameter="{Binding .}"/>
                 </Border.GestureRecognizers>
                 <components:BrushPreviewControl BrushShape="{Binding .}"
-                                                StrokeColor="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ToolbarViewModel}}, Path=StrokeColor}"
-                                                FillColor="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ToolbarViewModel}}, Path=FillColor}"
-                                                IsGlowEnabled="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ToolbarViewModel}}, Path=IsGlowEnabled}"
-                                                GlowColor="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ToolbarViewModel}}, Path=GlowColor}"
-                                                GlowRadius="{Binding Source={RelativeSource AncestorType={x:Type viewModels:ToolbarViewModel}}, Path=GlowRadius}"
+                                                StrokeColor="{Binding Source={x:Reference Root}, Path=ViewModel.StrokeColor, x:DataType=components:BrushesFlyoutPanel}"
+                                                FillColor="{Binding Source={x:Reference Root}, Path=ViewModel.FillColor, x:DataType=components:BrushesFlyoutPanel}"
+                                                IsGlowEnabled="{Binding Source={x:Reference Root}, Path=ViewModel.IsGlowEnabled, x:DataType=components:BrushesFlyoutPanel}"
+                                                GlowColor="{Binding Source={x:Reference Root}, Path=ViewModel.GlowColor, x:DataType=components:BrushesFlyoutPanel}"
+                                                GlowRadius="{Binding Source={x:Reference Root}, Path=ViewModel.GlowRadius, x:DataType=components:BrushesFlyoutPanel}"
                                                 Color="{AppThemeBinding Light=Black, Dark=White}"
                                                 HorizontalOptions="Fill"
-                                                VerticalOptions="Fill" />
+                                                VerticalOptions="Fill"/>
               </Border>
               <Label Text="{Binding Name}"
                      FontSize="12"
                      HorizontalTextAlignment="Center"
-                     LineBreakMode="TailTruncation" />
+                     LineBreakMode="TailTruncation"/>
             </StackLayout>
           </DataTemplate>
         </CollectionView.ItemTemplate>

Components/BrushesFlyoutPanel.xaml.cs

@@ -27,6 +27,8 @@ namespace LunaDraw.Components;
 
 public partial class BrushesFlyoutPanel : ContentView
 {
+  public ToolbarViewModel? ViewModel => BindingContext as ToolbarViewModel;
+
   public BrushesFlyoutPanel()
   {
     InitializeComponent();
@@ -37,7 +39,7 @@ private void OnBrushesFlyoutPanelLoaded(object? sender, EventArgs e)
   {
     if (BindingContext is ToolbarViewModel toolbarViewModel)
     {
-        // No settings to load here anymore, just brush shapes which are data bound
+      // No settings to load here anymore, just brush shapes which are data bound
     }
   }
 }

Components/FlyoutPanel.xaml

@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:components="clr-namespace:LunaDraw.Components"
              x:Class="LunaDraw.Components.FlyoutPanel"
              x:Name="flyoutRoot">
   <Border x:Name="FlyoutContainer"
           Style="{StaticResource FlyoutBorderStyle}">
-    <ContentPresenter Content="{Binding Source={x:Reference flyoutRoot}, Path=FlyoutContent}"/>
+    <ContentPresenter Content="{Binding Source={x:Reference flyoutRoot}, Path=FlyoutContent, x:DataType=components:FlyoutPanel}"/>
   </Border>
 </ContentView>
 

Components/FlyoutPanel.xaml.cs

@@ -72,7 +72,6 @@ public FlyoutPanel()
     AbsoluteLayout.SetLayoutBounds(this, new Rect(-1000, -1000, -1, -1));
   }
 
-
   public View FlyoutContent
   {
     get => (View)GetValue(FlyoutContentProperty);
@@ -236,47 +235,47 @@ private async Task PositionFlyout()
     // 1. Try positioning to the right of the target (preferred)
     if (flyoutBounds.Right > screenWidth - margin)
     {
-        // It overflows right. Try positioning to the left of the target.
-        double leftX = targetBounds.Left - flyoutBounds.Width - 10;
-        if (leftX >= margin)
-        {
-            finalX = leftX;
-        }
-        else
+      // It overflows right. Try positioning to the left of the target.
+      double leftX = targetBounds.Left - flyoutBounds.Width - 10;
+      if (leftX >= margin)
+      {
+        finalX = leftX;
+      }
+      else
+      {
+        // Neither side fits perfectly.
+        // Position at the left-most valid position or right-most valid position?
+        // Let's constrain to the screen width.
+        finalX = Math.Max(margin, Math.Min(x, screenWidth - flyoutBounds.Width - margin));
+
+        // If the flyout is wider than the screen (minus margins), constrain width.
+        if (flyoutBounds.Width > screenWidth - 2 * margin)
         {
-            // Neither side fits perfectly.
-            // Position at the left-most valid position or right-most valid position?
-            // Let's constrain to the screen width.
-            finalX = Math.Max(margin, Math.Min(x, screenWidth - flyoutBounds.Width - margin));
-
-            // If the flyout is wider than the screen (minus margins), constrain width.
-            if (flyoutBounds.Width > screenWidth - 2 * margin)
-            {
-                finalX = margin;
-                finalWidth = screenWidth - 2 * margin;
-            }
+          finalX = margin;
+          finalWidth = screenWidth - 2 * margin;
         }
+      }
     }
 
     // --- Vertical Positioning Strategy ---
-    
+
     // If the flyout overflows the bottom edge
     if (flyoutBounds.Bottom > screenHeight - margin)
     {
-        // Try moving it up
-        double diff = flyoutBounds.Bottom - (screenHeight - margin);
-        double newY = y - diff;
+      // Try moving it up
+      double diff = flyoutBounds.Bottom - (screenHeight - margin);
+      double newY = y - diff;
 
-        if (newY >= margin)
-        {
-            finalY = newY;
-        }
-        else
-        {
-            // Moving up hits the top edge. Constrain Height.
-            finalY = margin;
-            finalHeight = screenHeight - 2 * margin;
-        }
+      if (newY >= margin)
+      {
+        finalY = newY;
+      }
+      else
+      {
+        // Moving up hits the top edge. Constrain Height.
+        finalY = margin;
+        finalHeight = screenHeight - 2 * margin;
+      }
     }
 
     // Re-apply the adjusted bounds