SettingsWindow.xaml

<Window x:Class="WorkNotes.Dialogs.SettingsWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Settings"
        Height="700"
        Width="800"
        WindowStartupLocation="CenterOwner"
        ResizeMode="CanResize"
        MinHeight="500"
        MinWidth="600"
        Background="{DynamicResource App.Background}">
    
    <Window.Resources>
        <!-- Settings Card Style -->
        <Style x:Key="SettingsCardStyle" TargetType="Border">
            <Setter Property="Background" Value="{DynamicResource App.Surface}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource App.Border}"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="CornerRadius" Value="4"/>
            <Setter Property="Padding" Value="16,12"/>
            <Setter Property="Margin" Value="0,0,0,8"/>
        </Style>

        <!-- Section Header Style -->
        <Style x:Key="SectionHeaderStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Foreground" Value="{DynamicResource App.TextPrimary}"/>
            <Setter Property="Margin" Value="0,20,0,12"/>
        </Style>

        <!-- Setting Title Style -->
        <Style x:Key="SettingTitleStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="14"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="Foreground" Value="{DynamicResource App.TextPrimary}"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
        </Style>

        <!-- Setting Description Style -->
        <Style x:Key="SettingDescriptionStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="Foreground" Value="{DynamicResource App.TextSecondary}"/>
            <Setter Property="TextWrapping" Value="Wrap"/>
            <Setter Property="Margin" Value="0,2,0,0"/>
        </Style>
    </Window.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- Page Title -->
        <Border Grid.Row="0" 
                Background="{DynamicResource App.Background}" 
                BorderBrush="{DynamicResource App.Border}" 
                BorderThickness="0,0,0,1"
                Padding="24,20">
            <TextBlock Text="Settings" 
                      FontSize="28" 
                      FontWeight="SemiBold"
                      Foreground="{DynamicResource App.TextPrimary}"/>
        </Border>

        <!-- Settings Content -->
        <ScrollViewer Grid.Row="1" 
                     VerticalScrollBarVisibility="Auto"
                     Padding="24,12,24,24">
            <StackPanel>
                
                <!-- APP THEME SECTION -->
                <TextBlock Text="App theme" Style="{StaticResource SectionHeaderStyle}"/>
                
                <Border Style="{StaticResource SettingsCardStyle}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="0">
                            <TextBlock Text="Theme" Style="{StaticResource SettingTitleStyle}"/>
                            <TextBlock Text="Choose your app appearance" Style="{StaticResource SettingDescriptionStyle}"/>
                        </StackPanel>

                        <StackPanel Grid.Column="1" Orientation="Vertical">
                            <RadioButton x:Name="ThemeLight" Content="Light" GroupName="Theme" 
                                       Checked="Theme_Changed" Foreground="{DynamicResource App.TextPrimary}"/>
                            <RadioButton x:Name="ThemeDark" Content="Dark" GroupName="Theme" 
                                       Checked="Theme_Changed" Foreground="{DynamicResource App.TextPrimary}" Margin="0,8,0,0"/>
                            <RadioButton x:Name="ThemeSystem" Content="Use system setting" GroupName="Theme" 
                                       Checked="Theme_Changed" Foreground="{DynamicResource App.TextPrimary}" Margin="0,8,0,0"/>
                        </StackPanel>
                    </Grid>
                </Border>

                <!-- GENERAL SECTION -->
                <TextBlock Text="General" Style="{StaticResource SectionHeaderStyle}"/>

                <!-- Restore open tabs -->
                <Border Style="{StaticResource SettingsCardStyle}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        
                        <StackPanel Grid.Column="0">
                            <TextBlock Text="Restore open tabs on startup" 
                                     Style="{StaticResource SettingTitleStyle}"/>
                            <TextBlock Text="Reopen your previous tabs when starting the app" 
                                     Style="{StaticResource SettingDescriptionStyle}"/>
                        </StackPanel>
                        
                        <CheckBox Grid.Column="1" 
                                x:Name="RestoreTabsCheckBox"
                                VerticalAlignment="Center"
                                Checked="RestoreTabs_Changed"
                                Unchecked="RestoreTabs_Changed"/>
                    </Grid>
                </Border>

                <!-- TEXT FORMATTING SECTION -->
                <TextBlock Text="Text formatting" Style="{StaticResource SectionHeaderStyle}"/>

                <!-- Font -->
                <Border Style="{StaticResource SettingsCardStyle}">
                    <Expander x:Name="FontExpander" Header="Font" 
                             IsExpanded="False"
                             Background="Transparent"
                             BorderThickness="0">
                        <Expander.HeaderTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <StackPanel Grid.Column="0">
                                        <TextBlock Text="Font" Style="{StaticResource SettingTitleStyle}"/>
                                        <TextBlock x:Name="FontPreview" 
                                                 Text="Consolas, 12pt"
                                                 Style="{StaticResource SettingDescriptionStyle}"/>
                                    </StackPanel>
                                </Grid>
                            </DataTemplate>
                        </Expander.HeaderTemplate>
                        
                        <StackPanel Margin="0,12,0,0">
                            <TextBlock Text="Font family" 
                                     Foreground="{DynamicResource App.TextSecondary}" 
                                     FontSize="12" Margin="0,0,0,4"/>
                            <ComboBox x:Name="FontFamilyComboBox" 
                                    SelectionChanged="FontFamily_Changed"
                                    Height="32"
                                    Background="{DynamicResource App.Surface2}"
                                    Foreground="{DynamicResource App.TextPrimary}"
                                    BorderBrush="{DynamicResource App.Border}"/>

                            <TextBlock Text="Font size" 
                                     Foreground="{DynamicResource App.TextSecondary}" 
                                     FontSize="12" Margin="0,12,0,4"/>
                            <ComboBox x:Name="FontSizeComboBox" 
                                    SelectionChanged="FontSize_Changed"
                                    Height="32"
                                    Background="{DynamicResource App.Surface2}"
                                    Foreground="{DynamicResource App.TextPrimary}"
                                    BorderBrush="{DynamicResource App.Border}"/>
                        </StackPanel>
                    </Expander>
                </Border>

                <!-- Word Wrap -->
                <Border Style="{StaticResource SettingsCardStyle}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="0">
                            <TextBlock Text="Word wrap" Style="{StaticResource SettingTitleStyle}"/>
                            <TextBlock Text="Wrap text to window width" Style="{StaticResource SettingDescriptionStyle}"/>
                        </StackPanel>

                        <CheckBox x:Name="WordWrapCheckBox" Grid.Column="1" 
                                VerticalAlignment="Center"
                                Checked="WordWrap_Changed"
                                Unchecked="WordWrap_Changed"/>
                    </Grid>
                </Border>

                <!-- Bionic Reading -->
                <Border Style="{StaticResource SettingsCardStyle}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="0">
                            <TextBlock Text="Bionic Reading" Style="{StaticResource SettingTitleStyle}"/>
                            <TextBlock Text="Enhance readability by bolding word prefixes" Style="{StaticResource SettingDescriptionStyle}"/>
                        </StackPanel>

                        <ComboBox x:Name="BionicStrengthComboBox" Grid.Column="1"
                                Width="150"
                                Height="32"
                                VerticalAlignment="Center"
                                SelectionChanged="BionicStrength_Changed"
                                Background="{DynamicResource App.Surface2}"
                                Foreground="{DynamicResource App.TextPrimary}"
                                BorderBrush="{DynamicResource App.Border}">
                            <ComboBoxItem Content="Off"/>
                            <ComboBoxItem Content="Light"/>
                            <ComboBoxItem Content="Medium"/>
                            <ComboBoxItem Content="Strong"/>
                        </ComboBox>
                    </Grid>
                </Border>

                <!-- SPELLING SECTION -->
                <TextBlock Text="Spelling" Style="{StaticResource SectionHeaderStyle}"/>

                <!-- Spell Check Toggle -->
                <Border Style="{StaticResource SettingsCardStyle}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <StackPanel Grid.Column="0">
                            <TextBlock Text="Spell check" Style="{StaticResource SettingTitleStyle}"/>
                            <TextBlock Text="Check spelling as you type (English)" Style="{StaticResource SettingDescriptionStyle}"/>
                        </StackPanel>

                        <CheckBox x:Name="SpellCheckCheckBox" Grid.Column="1"
                                VerticalAlignment="Center"
                                Checked="SpellCheck_Changed"
                                Unchecked="SpellCheck_Changed"/>
                    </Grid>
                </Border>

                <!-- Custom Dictionary -->
                <Border Style="{StaticResource SettingsCardStyle}">
                    <StackPanel>
                        <TextBlock Text="Custom dictionary" Style="{StaticResource SettingTitleStyle}" Margin="0,0,0,8"/>
                        
                        <Grid Margin="0,0,0,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            
                            <TextBox x:Name="AddWordTextBox" Grid.Column="0"
                                   Height="32"
                                   Margin="0,0,8,0"
                                   Background="{DynamicResource App.Surface2}"
                                   Foreground="{DynamicResource App.TextPrimary}"
                                   BorderBrush="{DynamicResource App.Border}"
                                   Padding="8,4"
                                   VerticalContentAlignment="Center"/>
                            
                            <Button x:Name="AddWordButton" Grid.Column="1"
                                  Content="Add"
                                  Click="AddWord_Click"
                                  Width="80"
                                  Height="32"/>
                        </Grid>

                        <ListBox x:Name="CustomWordsListBox"
                               Height="150"
                               Background="{DynamicResource App.Surface2}"
                               Foreground="{DynamicResource App.TextPrimary}"
                               BorderBrush="{DynamicResource App.Border}">
                            <ListBox.ItemTemplate>
                                <DataTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Grid.Column="0" Text="{Binding}" VerticalAlignment="Center"/>
                                        <Button Grid.Column="1" Content="Remove" 
                                              Click="RemoveWord_Click"
                                              Tag="{Binding}"
                                              Width="70"
                                              Height="24"
                                              Margin="8,0,0,0"/>
                                    </Grid>
                                </DataTemplate>
                            </ListBox.ItemTemplate>
                        </ListBox>
                    </StackPanel>
                </Border>

            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>