Add support for UTF-32 glyphs in icon components

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIButton.cs

@@ -57,7 +57,7 @@ public interface IUIButton : IUIElement
 }
 
 [DebuggerDisplay($"Id = {{{nameof(Id)}}}, Text = {{{nameof(Text)}}}")]
-internal sealed class UIButton : UIElement, IUIButton
+internal class UIButton : UIElement, IUIButton
 {
     private bool _isAccent;
     private bool _isHyperlink;

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIDropDownButton.cs

@@ -47,7 +47,7 @@ public interface IUIDropDownButton : IUIElement
 }
 
 [DebuggerDisplay($"Id = {{{nameof(Id)}}}, Text = {{{nameof(Text)}}}")]
-internal sealed class UIDropDownButton : UIElement, IUIDropDownButton
+internal class UIDropDownButton : UIElement, IUIDropDownButton
 {
     private IUIDropDownMenuItem[]? _menuItems;
     private string? _text;

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIDropDownMenuItem.cs

@@ -52,7 +52,7 @@ public interface IUIDropDownMenuItem
 }
 
 [DebuggerDisplay($"Text = {{{nameof(Text)}}}")]
-internal sealed class UIDropDownMenuItem : ViewModelBase, IUIDropDownMenuItem
+internal class UIDropDownMenuItem : ViewModelBase, IUIDropDownMenuItem
 {
     private bool _isEnabled = true;
     private string? _text;

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIIcon.cs

@@ -37,7 +37,7 @@ public interface IUIIcon : IUIElement
 }
 
 [DebuggerDisplay($"Id = {{{nameof(Id)}}}, Glyph = {{{nameof(Glyph)}}}")]
-internal sealed class UIIcon : UIElement, IUIIcon
+internal class UIIcon : UIElement, IUIIcon
 {
     private string _fontName;
     private char _glyph;

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIUtf32GlyphProvider.cs

@@ -0,0 +1,12 @@
+namespace DevToys.Api;
+
+/// <summary>
+/// Provides an interface for UI components that support UTF-32 glyphs.
+/// </summary>
+public interface IUIUtf32GlyphProvider
+{
+    /// <summary>
+    /// Gets the UTF-32 code point of the glyph.
+    /// </summary>
+    int Utf32Glyph { get; }
+}

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIUtf32Icon.cs

@@ -0,0 +1,65 @@
+namespace DevToys.Api;
+
+/// <summary>
+/// A component that represents an icon with a UTF-32 glyph.
+/// </summary>
+public interface IUIUtf32Icon : IUIIcon, IUIUtf32GlyphProvider
+{
+}
+
+[DebuggerDisplay($"Id = {{{nameof(Id)}}}, Glyph = {{{nameof(Glyph)}}}")]
+internal sealed class UIUtf32Icon : UIIcon, IUIUtf32Icon
+{
+    private int _utf32Glyph;
+
+    internal UIUtf32Icon(string? id, string fontName, int glyph)
+        : base(id, fontName, (char)0)
+    {
+        _utf32Glyph = glyph;
+        Guard.IsNotNullOrWhiteSpace(FontName);
+    }
+
+    public int Utf32Glyph
+    {
+        get => _utf32Glyph;
+        internal set => SetPropertyValue(ref _utf32Glyph, value, Glyph32Changed);
+    }
+
+    public event EventHandler? Glyph32Changed;
+}
+
+public static partial class GUI
+{
+
+    /// <summary>
+    /// A component that represents an icon with a UTF-32 glyph.
+    /// </summary>
+    /// <param name="id">An optional unique identifier for this UI element.</param>
+    /// <param name="fontName">The name of the font containing the icon.</param>
+    /// <param name="glyph">The UTF-32 code point of the icon glyph.</param>
+    public static IUIUtf32Icon Icon(string? id, string fontName, int glyph)
+    {
+        return new UIUtf32Icon(id, fontName, glyph);
+    }
+
+    /// <summary>
+    /// A component that represents an icon with a UTF-32 glyph.
+    /// </summary>
+    /// <param name="fontName">The name of the font containing the icon.</param>
+    /// <param name="glyph">The UTF-32 code point of the icon glyph.</param>
+    public static IUIUtf32Icon Icon(string fontName, int glyph)
+    {
+        return new UIUtf32Icon(null, fontName, glyph);
+    }
+
+    /// <summary>
+    /// Sets the <see cref="UIUtf32Icon.Utf32Glyph"/> of the icon.
+    /// </summary>
+    /// <param name="element">The <see cref="UIUtf32Icon"/> instance.</param>
+    /// <param name="glyph">The UTF-32 code point of the icon glyph.</param>
+    public static IUIUtf32Icon Glyph(this IUIUtf32Icon element, int glyph)
+    {
+        ((UIUtf32Icon)element).Utf32Glyph = glyph;
+        return element;
+    }
+}

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIUtf32IconButton.cs

@@ -0,0 +1,93 @@
+namespace DevToys.Api;
+
+/// <summary>
+/// A component that represents a button, which reacts when clicking on it.
+/// </summary>
+public interface IUIUtf32IconButton : IUIButton, IUIUtf32IconProvider
+{
+}
+
+[DebuggerDisplay($"Id = {{{nameof(Id)}}}, Text = {{{nameof(Text)}}}")]
+internal sealed class UIUtf32IconButton : UIButton, IUIUtf32IconButton
+{
+    private int _iconGlyph;
+
+    internal UIUtf32IconButton(string? id)
+        : base(id)
+    {
+    }
+
+    public int Utf32IconGlyph
+    {
+        get => _iconGlyph;
+        internal set => SetPropertyValue(ref _iconGlyph, value, Utf32IconGlyphChanged);
+    }
+    public event EventHandler? Utf32IconGlyphChanged;
+}
+
+/// <summary>
+/// Provides a set of extension methods for various UI components.
+/// </summary>
+public static partial class GUI
+{
+    /// <summary>
+    /// Create a component that represents a button, which reacts when clicking on it.
+    /// </summary>
+    /// <returns>The created <see cref="IUIButton"/> instance.</returns>
+    public static IUIUtf32IconButton Button(string iconFontName, int iconGlyph)
+    {
+        return Button(null, iconFontName, iconGlyph);
+    }
+
+    /// <summary>
+    /// Create a component that represents a button, which reacts when clicking on it.
+    /// </summary>
+    /// <param name="id">An optional unique identifier for this UI element.</param>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    /// <returns>The created <see cref="IUIUtf32IconButton"/> instance.</returns>
+    public static IUIUtf32IconButton Button(string? id, string iconFontName, int iconGlyph)
+    {
+        return new UIUtf32IconButton(id).Icon(iconFontName, iconGlyph);
+    }
+
+    /// <summary>
+    /// Create a component that represents a button, which reacts when clicking on it.
+    /// </summary>
+    /// <param name="id">An optional unique identifier for this UI element.</param>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    /// <param name="text">The text to display in the button.</param>
+    /// <returns>The created <see cref="IUIUtf32IconButton"/> instance.</returns>
+    public static IUIUtf32IconButton Button(string? id, string iconFontName, int iconGlyph, string text)
+    {
+        return (IUIUtf32IconButton)new UIUtf32IconButton(id).Icon(iconFontName, iconGlyph).Text(text);
+    }
+
+    /// <summary>
+    /// Create a component that represents a button, which reacts when clicking on it.
+    /// </summary>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    /// <param name="text">The text to display in the button.</param>
+    /// <returns>The created <see cref="IUIUtf32IconButton"/> instance.</returns>
+    public static IUIUtf32IconButton Button(string iconFontName, int iconGlyph, string text)
+    {
+        return Button(null, iconFontName, iconGlyph, text);
+    }
+
+    /// <summary>
+    /// Sets the icon of the button.
+    /// </summary>
+    /// <param name="element">The <see cref="IUIUtf32IconButton"/> instance.</param>
+    /// <param name="fontName">The name of the font containing the icon.</param>
+    /// <param name="glyph">The UTF-32 glyph corresponding to the icon in the <paramref name="fontName"/>.</param>
+    /// <returns>The updated <see cref="IUIUtf32IconButton"/> instance.</returns>
+    public static IUIUtf32IconButton Icon(this IUIUtf32IconButton element, string fontName, int glyph)
+    {
+        var button = (UIUtf32IconButton)element;
+        button.IconFontName = fontName;
+        button.Utf32IconGlyph = glyph;
+        return button;
+    }
+}

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIUtf32IconDropDownButton.cs

@@ -0,0 +1,84 @@
+namespace DevToys.Api;
+
+/// <summary>
+/// A component that represents a drop down button where the user can click on a menu item.
+/// </summary>
+public interface IUIUtf32IconDropDownButton : IUIDropDownButton, IUIUtf32IconProvider
+{
+}
+
+[DebuggerDisplay($"Id = {{{nameof(Id)}}}, Text = {{{nameof(Text)}}}")]
+internal sealed class UIUtf32IconDropDownButton : UIDropDownButton, IUIUtf32IconDropDownButton
+{
+    private int _utf32IconGlyph;
+    internal UIUtf32IconDropDownButton(string? id)
+        : base(id)
+    {
+    }
+
+    public int Utf32IconGlyph
+    {
+        get => _utf32IconGlyph;
+        internal set => SetPropertyValue(ref _utf32IconGlyph, value, Utf32IconGlyphChanged);
+    }
+
+    public event EventHandler? Utf32IconGlyphChanged;
+}
+
+public static partial class GUI
+{
+    /// <summary>
+    /// Create a component that represents a drop down button where the user can click on a menu item.
+    /// </summary>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    public static IUIUtf32IconDropDownButton DropDownButton(string iconFontName, int iconGlyph)
+    {
+        return DropDownButton(null, iconFontName, iconGlyph);
+    }
+
+    /// <summary>
+    /// Create a component that represents a drop down button where the user can click on a menu item.
+    /// </summary>
+    /// <param name="id">An optional unique identifier for this UI element.</param>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    public static IUIUtf32IconDropDownButton DropDownButton(string? id, string iconFontName, int iconGlyph)
+    {
+        return new UIUtf32IconDropDownButton(id).Icon(iconFontName, iconGlyph);
+    }
+
+    /// <summary>
+    /// Create a component that represents a drop down button where the user can click on a menu item.
+    /// </summary>
+    /// <param name="id">An optional unique identifier for this UI element.</param>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    /// <param name="text">The text to display in the drop down button.</param>
+    public static IUIUtf32IconDropDownButton DropDownButton(string? id, string iconFontName, int iconGlyph, string text)
+    {
+        return (IUIUtf32IconDropDownButton)new UIUtf32IconDropDownButton(id).Icon(iconFontName, iconGlyph).Text(text);
+    }
+
+    /// <summary>
+    /// Create a component that represents a drop down button where the user can click on a menu item.
+    /// </summary>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    /// <param name="text">The text to display in the drop down button.</param>
+    public static IUIUtf32IconDropDownButton DropDownButton(string iconFontName, int iconGlyph, string text)
+    {
+        return DropDownButton(null, iconFontName, iconGlyph, text);
+    }
+
+    /// <summary>
+    /// Sets the icon of the drop down button.
+    /// </summary>
+    public static IUIUtf32IconDropDownButton Icon(this IUIUtf32IconDropDownButton element, string fontName, int glyph)
+    {
+        var button = (UIUtf32IconDropDownButton)element;
+        button.IconFontName = fontName;
+        button.Utf32IconGlyph = glyph;
+        return button;
+    }
+}

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIUtf32IconDropDownMenuItem.cs

@@ -0,0 +1,56 @@
+namespace DevToys.Api;
+
+/// <summary>
+/// A component that represents a menu item, which reacts when clicking on it.
+/// </summary>
+public interface IUIUtf32IconDropDownMenuItem : IUIDropDownMenuItem, IUIUtf32IconProvider
+{
+}
+
+[DebuggerDisplay($"Text = {{{nameof(Text)}}}")]
+internal sealed class UIUtf32IconDropDownMenuItem : UIDropDownMenuItem, IUIUtf32IconDropDownMenuItem
+{
+    private int _utf32IconGlyph;
+    public int Utf32IconGlyph
+    {
+        get => _utf32IconGlyph;
+        internal set => SetPropertyValue(ref _utf32IconGlyph, value, Utf32IconGlyphChanged);
+    }
+
+    public event EventHandler? Utf32IconGlyphChanged;
+}
+
+public static partial class GUI
+{
+    /// <summary>
+    /// Create a component that represents a menu item, which reacts when clicking on it.
+    /// </summary>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    public static IUIUtf32IconDropDownMenuItem DropDownMenuItem(string iconFontName, int iconGlyph)
+    {
+        return new UIUtf32IconDropDownMenuItem().Icon(iconFontName, iconGlyph);
+    }
+
+    /// <summary>
+    /// Create a component that represents a menu item, which reacts when clicking on it.
+    /// </summary>
+    /// <param name="iconFontName">The name of the font containing the icon.</param>
+    /// <param name="iconGlyph">The UTF-32 glyph corresponding to the icon in the <paramref name="iconFontName"/>.</param>
+    /// <param name="text">The text to display in the menu item.</param>
+    public static IUIUtf32IconDropDownMenuItem DropDownMenuItem(string iconFontName, int iconGlyph, string text)
+    {
+        return (IUIUtf32IconDropDownMenuItem)DropDownMenuItem(iconFontName, iconGlyph).Text(text);
+    }
+
+    /// <summary>
+    /// Sets the icon of the menu item.
+    /// </summary>
+    public static IUIUtf32IconDropDownMenuItem Icon(this IUIUtf32IconDropDownMenuItem element, string fontName, int glyph)
+    {
+        var menuItem = (UIUtf32IconDropDownMenuItem)element;
+        menuItem.IconFontName = fontName;
+        menuItem.Utf32IconGlyph = glyph;
+        return menuItem;
+    }
+}

src/app/dev/DevToys.Api/Tool/GUI/Components/IUIUtf32IconProvider.cs

@@ -0,0 +1,12 @@
+namespace DevToys.Api;
+
+/// <summary>
+/// Provides an interface for UI components that support UTF-32 icons.
+/// </summary>
+public interface IUIUtf32IconProvider
+{
+    /// <summary>
+    /// Gets the UTF-32 code point of the icon glyph.
+    /// </summary>
+    int Utf32IconGlyph { get; }
+}

src/app/dev/DevToys.Blazor/Components/BasicInput/DropDownButton/DropDownListItem.cs

@@ -4,7 +4,7 @@ public class DropDownListItem
 {
     internal string? Text { get; set; }
 
-    internal char IconGlyph { get; set; }
+    internal int IconGlyph { get; set; }
 
     internal string IconFontFamily { get; set; } = "FluentSystemIcons";
 

src/app/dev/DevToys.Blazor/Components/Feedback/FontIcon/FontIcon.razor

@@ -23,7 +23,7 @@
                style="@StyleValue"
                @ref=Element
                @attributes="AdditionalAttributes"
-               data-glyph='@Glyph'
+               data-glyph='@(char.ConvertFromUtf32(Glyph))'
                aria-hidden="true"
                role="presentation">
             </i>

src/app/dev/DevToys.Blazor/Components/Feedback/FontIcon/FontIcon.razor.cs

@@ -20,7 +20,7 @@ public FontIcon()
     }
 
     [Parameter]
-    public char Glyph { get; set; }
+    public int Glyph { get; set; }
 
     [Parameter]
     public string FontFamily { get; set; } = "FluentSystemIcons";