feat: Add settings sidebar with tabbed pages

Redesign the Settings window: change size to 800x720 and replace the single DockPanel with a two-column Grid containing a left sidebar and a right content area. Implement a simple tab system (TabPageInfo, CreateTabButton, SelectTab) and create separate pages for General, Audio, Appearance and Editing with their respective controls and bindings. Add new SVG icons (Audio, General, Appearance, Editing) to Assets.cs and wire up styling for sidebar/content. Misc: resolve named controls, apply style backgrounds, and reorganize existing settings controls into the new pages.

Author: LiuYunPlayer

TuneLab/GUI/Assets.cs

@@ -42,6 +42,10 @@ internal static class Assets
     public static SvgIcon Author = new("<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n<circle cx=\"8\" cy=\"5\" r=\"3\" fill=\"white\"/>\r\n<path d=\"M3 14C3 12 4 10 6 9H10C12 10 13 12 13 14H3Z\" fill=\"white\"/>\r\n</svg>");
     public static SvgIcon Mono = new("<svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0 8C1.95122 8 2.92683 5 4.87805 5C6.82927 5 7.80488 8 8.78049 8C10.7317 8 13.6585 4 15.6098 4C17.561 4 18.5366 8 20 8C18.5366 8 17.561 12 15.6098 12C13.6585 12 10.7317 8 8.78049 8C7.80488 8 6.82927 11 4.87805 11C2.92683 11 1.95122 8 0 8Z\" fill=\"white\"/>\n</svg>");
     public static SvgIcon Stereo = new("<svg width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M0 12C1.95122 12 2.92683 10 4.87805 10C6.82927 10 7.80488 12 8.78049 12C10.7317 12 13.6585 9 15.6098 9C17.561 9 18.5366 12 20 12C18.5366 12 17.561 15 15.6098 15C13.6585 15 10.7317 12 8.78049 12C7.80488 12 6.82927 14 4.87805 14C2.92683 14 1.95122 12 0 12Z\" fill=\"white\"/>\n<path d=\"M0 4C1.95122 4 2.92683 2 4.87805 2C6.82927 2 7.80488 4 8.78049 4C10.7317 4 13.6585 1 15.6098 1C17.561 1 18.5366 4 20 4C18.5366 4 17.561 7 15.6098 7C13.6585 7 10.7317 4 8.78049 4C7.80488 4 6.82927 6 4.87805 6C2.92683 6 1.95122 4 0 4Z\" fill=\"white\"/>\n</svg>");
+    public static SvgIcon Audio = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10.6465 6.64648C10.7895 6.50349 11.0046 6.4607 11.1914 6.53809C11.3782 6.61549 11.5 6.79779 11.5 7V17C11.5 17.2022 11.3782 17.3845 11.1914 17.4619C11.0046 17.5393 10.7895 17.4965 10.6465 17.3535L7.79297 14.5H4C3.72386 14.5 3.5 14.2761 3.5 14V10C3.5 9.72386 3.72386 9.5 4 9.5H7.79297L10.6465 6.64648Z\" fill=\"white\" stroke=\"white\" stroke-linejoin=\"round\"/>\n<path d=\"M18 6C21 9 21 15 18 18\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M16 8C18 10 18 14 16 16\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M14 10C15 11 15 13 14 14\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>");
+    public static SvgIcon General = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M15.4227 5.07227C15.7799 5.07227 16.1102 5.26287 16.2889 5.57227L19.7117 11.5C19.8902 11.8093 19.8902 12.1907 19.7117 12.5L16.2889 18.4277C16.1102 18.7371 15.7799 18.9277 15.4227 18.9277H8.57697C8.21985 18.9276 7.8903 18.737 7.71173 18.4277L4.28888 12.5C4.11025 12.1906 4.11025 11.8094 4.28888 11.5L7.71173 5.57227C7.8903 5.26298 8.21985 5.0724 8.57697 5.07227H15.4227ZM11.9998 9C10.343 9.0001 8.99982 10.3432 8.99982 12C8.99982 13.6568 10.343 14.9999 11.9998 15C13.6567 15 14.9998 13.6569 14.9998 12C14.9998 10.3431 13.6567 9 11.9998 9Z\" fill=\"white\"/>\n</svg>");
+    public static SvgIcon Appearance = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12 21C15 21 11 17 12 15C13.5 12 20 18 20 11.9999C20 5.99985 15.5 3 12 3C8.5 3 4 6 4 11.9999C4 17 8 21 12 21Z\" stroke=\"white\" stroke-width=\"2\" stroke-miterlimit=\"1.01391\" stroke-linejoin=\"round\"/>\n<circle cx=\"8\" cy=\"10.5\" r=\"1.5\" fill=\"white\"/>\n<circle cx=\"10\" cy=\"7.5\" r=\"1.5\" fill=\"white\"/>\n<circle cx=\"14\" cy=\"7.5\" r=\"1.5\" fill=\"white\"/>\n<circle cx=\"16\" cy=\"10.5\" r=\"1.5\" fill=\"white\"/>\n</svg>");
+    public static SvgIcon Editing = new("<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"16\" height=\"1\" rx=\"0.5\" transform=\"matrix(1 0 0 -1 4 19)\" fill=\"white\"/>\n<path d=\"M16 6C16.6011 6 17.1422 6.20275 17.4697 6.53027C17.8087 6.86923 18.0098 7.41087 18.0078 8.00488C18.0058 8.59988 17.8005 9.13897 17.4697 9.46973L8.68945 18.25H5.75V15.3105L14.5303 6.53027C14.8578 6.20276 15.3989 6 16 6Z\" stroke=\"white\" stroke-width=\"1.5\"/>\n<line x1=\"13.5303\" y1=\"7.46967\" x2=\"16.5303\" y2=\"10.4697\" stroke=\"white\" stroke-width=\"1.5\"/>\n</svg>");
     public static SvgIcon None = new("");
 
     public static FontFamily NotoMono = new FontFamily("NotoMono");

TuneLab/UI/Settings/SettingsWindow.axaml

@@ -2,10 +2,10 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="284"
+        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="720"
         x:Class="TuneLab.UI.SettingsWindow"
         Title="Settings - TuneLab"
-		Width="600"
+		Width="800"
 		Height="720"
 		ExtendClientAreaChromeHints="NoChrome"
 		ExtendClientAreaTitleBarHeightHint="40"
@@ -26,8 +26,21 @@
 			<StackPanel Grid.Column="2" x:Name="WindowControl" HorizontalAlignment="Right" VerticalAlignment="Center" />
 		</Grid>
 
-		<DockPanel x:Name="Content">
-
-		</DockPanel>
+		<Grid x:Name="MainGrid">
+			<Grid.ColumnDefinitions>
+				<ColumnDefinition Width="220"/>
+				<ColumnDefinition Width="*"/>
+			</Grid.ColumnDefinitions>
+			
+			<!-- Left Sidebar -->
+			<Border Grid.Column="0" x:Name="SidebarBorder">
+				<StackPanel x:Name="SidebarPanel" Orientation="Vertical" Margin="0,8,0,0"/>
+			</Border>
+			
+			<!-- Right Content Area -->
+			<Border Grid.Column="1" x:Name="ContentBorder">
+				<DockPanel x:Name="ContentPanel"/>
+			</Border>
+		</Grid>
 	</DockPanel>
 </Window>