From 45758c8057326284996df5583495ee6d1b39d2a6 Mon Sep 17 00:00:00 2001
From: ahmdkaml <ahmdkaml2006@gmail.com>
Date: Fri, 28 Aug 2026 04:05:39 +0300
Subject: [PATCH] feat(ui): convert color picker to flyout popover and add
 marker highlight UI in toolbar

---
 .../Components/PropertiesToolbarView.axaml    | 134 ++++++++++++------
 1 file changed, 92 insertions(+), 42 deletions(-)

diff --git a/src/TextForge.Desktop/Views/Components/PropertiesToolbarView.axaml b/src/TextForge.Desktop/Views/Components/PropertiesToolbarView.axaml
index 3392a3c..5aac8d5 100644
--- a/src/TextForge.Desktop/Views/Components/PropertiesToolbarView.axaml
+++ b/src/TextForge.Desktop/Views/Components/PropertiesToolbarView.axaml
@@ -1,7 +1,6 @@
 <UserControl xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:cp="using:Avalonia.Controls"
-             xmlns:fonts="using:TextForge.Core.Fonts"
              x:Class="TextForge.Desktop.Views.Components.PropertiesToolbarView">
     <Border Background="#F9FAFB"
             BorderBrush="#E5E7EB"
@@ -9,23 +8,27 @@
             CornerRadius="6"
             Padding="8,6"
             Margin="0,0,0,10">
-        <StackPanel Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
+        <StackPanel Orientation="Horizontal" Spacing="6" VerticalAlignment="Center">
 
-            <!-- Global Font Dropdown -->
-            <StackPanel Orientation="Horizontal" Spacing="4" VerticalAlignment="Center">
-                <TextBlock Text="Font:" FontSize="12" Foreground="#4B5563" VerticalAlignment="Center" />
-                <ComboBox Name="FontSelector"
-                          ItemsSource="{x:Static fonts:FontRegistry.AvailableFonts}"
-                          SelectedIndex="0"
-                          Width="130"
-                          Height="28"
-                          FontSize="12" />
-            </StackPanel>
+            <!-- Font Selection Dropdown (No Label, Placeholder as First Item) -->
+            <ComboBox Name="FontSelector"
+                      Width="130"
+                      Height="28"
+                      SelectedIndex="0"
+                      FontSize="12">
+                <ComboBoxItem Content="Font" IsEnabled="False" />
+                <ComboBoxItem Content="Segoe UI" FontFamily="Segoe UI" />
+                <ComboBoxItem Content="Inter" FontFamily="Inter" />
+                <ComboBoxItem Content="Arial" FontFamily="Arial" />
+                <ComboBoxItem Content="Calibri" FontFamily="Calibri" />
+                <ComboBoxItem Content="Times New Roman" FontFamily="Times New Roman" />
+                <ComboBoxItem Content="Consolas" FontFamily="Consolas" />
+            </ComboBox>
 
             <!-- Section Divider -->
             <Border Width="1" Height="16" Background="#E5E7EB" Margin="2,0" />
 
-            <!-- Text Formatting Features (Strikethrough UI) -->
+            <!-- Strikethrough Toggle -->
             <ToggleButton Name="StrikethroughToggle"
                           Width="28"
                           Height="28"
@@ -41,42 +44,89 @@
                            VerticalAlignment="Center" />
             </ToggleButton>
 
-            <!-- Section Divider -->
-            <Border Width="1" Height="16" Background="#E5E7EB" Margin="2,0" />
+            <!-- Highlight Marker Flyout Button -->
+            <Button Name="HighlightMarkerButton"
+                    Width="28"
+                    Height="28"
+                    Padding="0"
+                    HorizontalContentAlignment="Center"
+                    VerticalContentAlignment="Center"
+                    Background="#FFFFFF"
+                    BorderBrush="#D1D5DB"
+                    BorderThickness="1"
+                    CornerRadius="4"
+                    ToolTip.Tip="Highlight Marker">
+                <TextBlock Text="🖍️" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" />
+                <Button.Flyout>
+                    <Flyout Placement="BottomEdgeAlignedLeft">
+                        <StackPanel Spacing="6" Margin="4">
+                            <TextBlock Text="Highlight Color" FontSize="11" FontWeight="SemiBold" Foreground="#4B5563" />
+
+                            <WrapPanel MaxWidth="140">
+                                <Button Width="22" Height="22" Margin="2" Background="#FEF08A" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Yellow" Tag="#FEF08A" />
+                                <Button Width="22" Height="22" Margin="2" Background="#BBF7D0" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Green" Tag="#BBF7D0" />
+                                <Button Width="22" Height="22" Margin="2" Background="#FBCFE8" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Pink" Tag="#FBCFE8" />
+                                <Button Width="22" Height="22" Margin="2" Background="#BAE6FD" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Blue" Tag="#BAE6FD" />
+                                <Button Width="22" Height="22" Margin="2" Background="#FED7AA" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Orange" Tag="#FED7AA" />
+                                <Button Width="22" Height="22" Margin="2" Background="#E5E7EB" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Gray" Tag="#E5E7EB" />
+                            </WrapPanel>
+
+                            <Border Height="1" Background="#E5E7EB" Margin="0,2" />
+
+                            <Button Content="None"
+                                    FontSize="11"
+                                    Height="24"
+                                    HorizontalAlignment="Stretch"
+                                    HorizontalContentAlignment="Center"
+                                    Background="Transparent"
+                                    Foreground="#6B7280"
+                                    Tag="None" />
+                        </StackPanel>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
 
-            <!-- Template Color Palette & Custom Picker -->
-            <StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center">
-                <TextBlock Text="Color:" FontSize="12" Foreground="#4B5563" VerticalAlignment="Center" Margin="0,0,2,0" />
+            <!-- Text Color Flyout Popover -->
+            <Button Name="TextColorButton"
+                    Width="28"
+                    Height="28"
+                    Padding="0"
+                    HorizontalContentAlignment="Center"
+                    VerticalContentAlignment="Center"
+                    Background="#FFFFFF"
+                    BorderBrush="#D1D5DB"
+                    BorderThickness="1"
+                    CornerRadius="4"
+                    ToolTip.Tip="Text Color">
+                <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Spacing="1">
+                    <TextBlock Text="A" FontSize="12" FontWeight="Bold" Foreground="#111827" HorizontalAlignment="Center" />
+                    <Border Width="12" Height="2" Background="#2563EB" CornerRadius="1" />
+                </StackPanel>
+                <Button.Flyout>
+                    <Flyout Placement="BottomEdgeAlignedLeft">
+                        <StackPanel Spacing="6" Margin="4">
+                            <TextBlock Text="Template Colors" FontSize="11" FontWeight="SemiBold" Foreground="#4B5563" />
 
-                <!-- 5 Default Template Swatches -->
-                <Button Width="22" Height="22" CornerRadius="4" Padding="0" Background="#2563EB" BorderThickness="0" ToolTip.Tip="Primary Blue (#2563EB)" Tag="#2563EB" />
-                <Button Width="22" Height="22" CornerRadius="4" Padding="0" Background="#1E40AF" BorderThickness="0" ToolTip.Tip="Deep Navy (#1E40AF)" Tag="#1E40AF" />
-                <Button Width="22" Height="22" CornerRadius="4" Padding="0" Background="#0D9488" BorderThickness="0" ToolTip.Tip="Teal Accent (#0D9488)" Tag="#0D9488" />
-                <Button Width="22" Height="22" CornerRadius="4" Padding="0" Background="#4B5563" BorderThickness="0" ToolTip.Tip="Slate Gray (#4B5563)" Tag="#4B5563" />
-                <Button Width="22" Height="22" CornerRadius="4" Padding="0" Background="#DC2626" BorderThickness="0" ToolTip.Tip="Alert Red (#DC2626)" Tag="#DC2626" />
+                            <!-- Template Palette Swatches -->
+                            <WrapPanel MaxWidth="140">
+                                <Button Width="22" Height="22" Margin="2" Background="#2563EB" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Primary Blue" Tag="#2563EB" />
+                                <Button Width="22" Height="22" Margin="2" Background="#1E40AF" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Deep Navy" Tag="#1E40AF" />
+                                <Button Width="22" Height="22" Margin="2" Background="#0D9488" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Teal" Tag="#0D9488" />
+                                <Button Width="22" Height="22" Margin="2" Background="#4B5563" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Slate Gray" Tag="#4B5563" />
+                                <Button Width="22" Height="22" Margin="2" Background="#DC2626" CornerRadius="3" BorderThickness="0" ToolTip.Tip="Alert Red" Tag="#DC2626" />
+                            </WrapPanel>
 
-                <!-- Color Divider -->
-                <Border Width="1" Height="14" Background="#E5E7EB" Margin="3,0" />
+                            <Border Height="1" Background="#E5E7EB" Margin="0,2" />
 
-                <!-- Pop-up Color Picker Trigger -->
-                <Button Width="24"
-                        Height="24"
-                        CornerRadius="4"
-                        Padding="0"
-                        Background="#FFFFFF"
-                        BorderBrush="#D1D5DB"
-                        BorderThickness="1"
-                        ToolTip.Tip="Choose Custom Color">
-                    <TextBlock Text="🎨" FontSize="11" HorizontalAlignment="Center" VerticalAlignment="Center" />
-                    <Button.Flyout>
-                        <Flyout Placement="BottomEdgeAlignedLeft">
+                            <!-- Custom Color Picker Control -->
+                            <TextBlock Text="Custom Color" FontSize="11" FontWeight="SemiBold" Foreground="#4B5563" />
                             <cp:ColorPicker Name="CustomColorPicker"
                                             Color="#2563EB"
                                             IsAlphaEnabled="False" />
-                        </Flyout>
-                    </Button.Flyout>
-                </Button>
-            </StackPanel>
+                        </StackPanel>
+                    </Flyout>
+                </Button.Flyout>
+            </Button>
 
         </StackPanel>
     </Border>