refactor: use SVG path icons for theme and locale buttons (#24)

- Replace emoji with PathGeometry icons (Sun/Moon/Globe)
- Theme: Moon icon in light mode, Sun icon in dark mode (toggled via IsDarkTheme)
- Locale: Globe icon overlay with EN/中 text label
- Remove ThemeButtonText emoji property from ViewModel

Author: JusterZhu

src/ViewModels/MainWindowViewModel.cs

@@ -12,7 +12,6 @@ public partial class MainWindowViewModel : ViewModelBase
 
     [ObservableProperty] private ViewModelBase _currentPage = new PatchViewModel();
     [ObservableProperty] private bool _isDarkTheme;
-    [ObservableProperty] private string _themeButtonText = "🌙";
     [ObservableProperty] private string _localeText = "EN";
 
     public ObservableCollection<NavItem> NavItems { get; } = new();
@@ -54,7 +53,6 @@ [RelayCommand] private void Navigate(NavItem item)
     private void ToggleTheme()
     {
         IsDarkTheme = !IsDarkTheme;
-        ThemeButtonText = IsDarkTheme ? "☀️" : "🌙";
         var app = Avalonia.Application.Current;
         if (app != null)
             app.RequestedThemeVariant = IsDarkTheme

src/Views/MainWindow.axaml

@@ -8,6 +8,34 @@
         Title="{Binding Source={x:Static svc:LocalizationService.Instance}, Path=[App.Title]}"
         Width="960" Height="640" MinWidth="780" MinHeight="540"
         WindowStartupLocation="CenterScreen">
+
+    <Window.Resources>
+        <!-- Sun icon (for dark mode → switch to light) -->
+        <PathGeometry x:Key="SunIcon">
+            M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41M12 6a6 6 0 100 12 6 6 0 000-12z
+        </PathGeometry>
+
+        <!-- Moon icon (for light mode → switch to dark) -->
+        <PathGeometry x:Key="MoonIcon">
+            M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z
+        </PathGeometry>
+
+        <!-- Globe icon -->
+        <PathGeometry x:Key="GlobeIcon">
+            M12 2a10 10 0 100 20 10 10 0 000-20zm-2 18.41A8.04 8.04 0 015.05 13H7.1a16.1 16.1 0 002.9 7.41zM12 20a14.2 14.2 0 01-2.7-7h5.4A14.2 14.2 0 0112 20zm-4.9-9A8.04 8.04 0 0110 3.59 8.04 8.04 0 015.05 11H7.1zm9.8 0h2.05a8.04 8.04 0 00-4.95-7.41A16.1 16.1 0 0116.9 11zm2.05 2h-2.05a16.1 16.1 0 01-2.9 7.41A8.04 8.04 0 0018.95 13zm-11.85 0a8.04 8.04 0 004.95 7.41A16.1 16.1 0 017.1 13z
+        </PathGeometry>
+
+        <!-- Theme toggle button template -->
+        <ControlTemplate x:Key="IconButton">
+            <Border Background="Transparent" CornerRadius="4">
+                <Panel Width="36" Height="36">
+                    <ContentPresenter Content="{TemplateBinding Content}"
+                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                </Panel>
+            </Border>
+        </ControlTemplate>
+    </Window.Resources>
+
     <DockPanel>
         <!-- Left Sidebar -->
         <Border DockPanel.Dock="Left" Width="200" Background="{DynamicResource SystemControlBackgroundChromeMediumLowBrush}">
@@ -38,16 +66,39 @@
 
                 <!-- Bottom controls: theme + locale -->
                 <StackPanel Grid.Row="2" Orientation="Horizontal"
-                            HorizontalAlignment="Center" Spacing="4" Margin="8,12">
-                    <Button Content="{Binding ThemeButtonText}"
-                            Command="{Binding ToggleThemeCommand}"
+                            HorizontalAlignment="Center" Spacing="0" Margin="4,8">
+                    <!-- Theme toggle -->
+                    <Button Command="{Binding ToggleThemeCommand}"
                             Background="Transparent" BorderThickness="0"
-                            FontSize="16" Width="40" Height="36"
-                            ToolTip.Tip="{Binding Source={x:Static svc:LocalizationService.Instance}, Path=[Theme.Toggle]}"/>
-                    <Button Content="{Binding LocaleText}"
-                            Command="{Binding ToggleLocaleCommand}"
+                            Width="44" Height="36"
+                            ToolTip.Tip="{Binding Source={x:Static svc:LocalizationService.Instance}, Path=[Theme.Toggle]}">
+                        <Panel>
+                            <Path Data="{StaticResource MoonIcon}" Stretch="Uniform"
+                                  Width="18" Height="18"
+                                  Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
+                                  IsVisible="{Binding !IsDarkTheme}"/>
+                            <Path Data="{StaticResource SunIcon}" Stretch="Uniform"
+                                  Width="18" Height="18"
+                                  Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
+                                  IsVisible="{Binding IsDarkTheme}"/>
+                        </Panel>
+                    </Button>
+
+                    <!-- Locale toggle -->
+                    <Button Command="{Binding ToggleLocaleCommand}"
                             Background="Transparent" BorderThickness="0"
-                            FontSize="14" Width="40" Height="36"/>
+                            Width="44" Height="36"
+                            ToolTip.Tip="{Binding Source={x:Static svc:LocalizationService.Instance}, Path=[Theme.Toggle]}">
+                        <Grid>
+                            <Path Data="{StaticResource GlobeIcon}" Stretch="Uniform"
+                                  Width="16" Height="16"
+                                  Fill="{DynamicResource SystemControlForegroundBaseHighBrush}"
+                                  Margin="0,0,0,0"/>
+                            <TextBlock Text="{Binding LocaleText}" FontSize="9" FontWeight="Bold"
+                                       HorizontalAlignment="Center" VerticalAlignment="Center"
+                                       Foreground="{DynamicResource SystemControlForegroundBaseHighBrush}"/>
+                        </Grid>
+                    </Button>
                 </StackPanel>
             </Grid>
         </Border>