MainWindow.xaml

<ui:FluentWindow x:Class="AmpUp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ui="http://schemas.lepo.co/wpfui/2022/xaml"
        xmlns:mi="clr-namespace:Material.Icons.WPF;assembly=Material.Icons.WPF"
        xmlns:views="clr-namespace:AmpUp.Views"
        xmlns:controls="clr-namespace:AmpUp.Controls"
        Title="Amp Up"
        Icon="Assets/icon/ampup-48.png"
        Width="1600" Height="1000"
        MinWidth="900" MinHeight="600"
        WindowStartupLocation="CenterScreen"
        ExtendsContentIntoTitleBar="True"
        WindowBackdropType="None"
        BorderThickness="0"
        BorderBrush="Transparent"
        Background="{DynamicResource BgBaseBrush}">

    <ui:FluentWindow.Resources>
        <FontFamily x:Key="MaterialSymbols">pack://application:,,,/Fonts/#Material Symbols Outlined</FontFamily>
        <!-- DesiredFrameRate=10: the dot carries a DropShadowEffect, so every animation
             frame forces an effect re-rasterization. 10 FPS is visually identical for a
             1s opacity fade and cuts the render cost to a sixth. -->
        <Storyboard x:Key="PulseAnimation" RepeatBehavior="Forever" Timeline.DesiredFrameRate="10">
            <DoubleAnimation Storyboard.TargetName="ConnectionDot"
                             Storyboard.TargetProperty="Opacity"
                             From="1.0" To="0.4" Duration="0:0:1"
                             AutoReverse="True"
                             Timeline.DesiredFrameRate="10" />
        </Storyboard>
    </ui:FluentWindow.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <!-- Title bar area -->
            <RowDefinition Height="48" />
            <!-- Content -->
            <RowDefinition Height="*" />
            <!-- Hardware preview strip (hidden) -->
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <!-- Header Bar (draggable) -->
        <Grid Grid.Row="0" Background="{DynamicResource BgBaseBrush}"
              MouseLeftButtonDown="HeaderBar_MouseLeftButtonDown">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <!-- Branding -->
            <StackPanel Grid.Column="0" Orientation="Horizontal" Margin="14,0,0,0" VerticalAlignment="Center">
                <Image Source="pack://application:,,,/Assets/icon/ampup-48.png" Height="38"
                       RenderOptions.BitmapScalingMode="HighQuality" VerticalAlignment="Center" />
                <TextBlock VerticalAlignment="Center" Margin="6,0,0,0">
                    <Run Text="AMP" FontFamily="Segoe UI Black" FontSize="16" FontWeight="Black"
                         Foreground="#2E8B38" />
                    <Run Text=" " FontSize="4" />
                    <Run Text="UP" FontFamily="Segoe UI Black" FontSize="16" FontWeight="Black"
                         Foreground="#4CAF50" />
                </TextBlock>
            </StackPanel>

            <!-- Connection Status + Window Controls -->
            <StackPanel Grid.Column="2" Orientation="Horizontal" Margin="0,0,12,0" VerticalAlignment="Center">
                <Ellipse x:Name="ConnectionDot" Width="8" Height="8" Fill="{StaticResource TextDimBrush}" Margin="0,0,8,0">
                    <Ellipse.Effect>
                        <DropShadowEffect x:Name="ConnectionDotGlow" Color="#00E676" BlurRadius="0" Opacity="0" ShadowDepth="0" />
                    </Ellipse.Effect>
                </Ellipse>
                <TextBlock x:Name="ConnectionLabel" Text="Disconnected" Style="{StaticResource SecondaryText}" VerticalAlignment="Center" />
                <TextBlock x:Name="VersionLabel" Text="v0.3-alpha" Foreground="{StaticResource TextDimBrush}" FontSize="10"
                           VerticalAlignment="Center" Margin="10,0,0,0" Cursor="Hand"
                           MouseLeftButtonDown="VersionLabel_Click"
                           ToolTip="Click to check for updates" />

                <!-- Traffic-light window buttons -->
                <StackPanel Orientation="Horizontal" Margin="16,0,0,0">
                    <!-- Minimize (yellow) -->
                    <Border x:Name="BtnMinimize" Width="14" Height="14" CornerRadius="7"
                            Background="#FFBD2E" Margin="0,0,8,0" Cursor="Hand"
                            MouseLeftButtonDown="BtnMinimize_Click"
                            ToolTip="Minimize">
                        <TextBlock Text="—" FontSize="8" FontWeight="Bold" Foreground="#995700"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   Margin="0,-2,0,0" Opacity="0" x:Name="MinIcon" />
                    </Border>
                    <!-- Maximize (green) -->
                    <Border x:Name="BtnMaximize" Width="14" Height="14" CornerRadius="7"
                            Background="#27C93F" Margin="0,0,8,0" Cursor="Hand"
                            MouseLeftButtonDown="BtnMaximize_Click"
                            ToolTip="Maximize">
                        <TextBlock Text="⤢" FontSize="9" FontWeight="Bold" Foreground="#0A6C15"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   Margin="0,-1,0,0" Opacity="0" x:Name="MaxIcon" />
                    </Border>
                    <!-- Close (red) -->
                    <Border x:Name="BtnClose" Width="14" Height="14" CornerRadius="7"
                            Background="#FF5F56" Cursor="Hand"
                            MouseLeftButtonDown="BtnClose_Click"
                            ToolTip="Close">
                        <TextBlock Text="✕" FontSize="8" FontWeight="Bold" Foreground="#990F04"
                                   HorizontalAlignment="Center" VerticalAlignment="Center"
                                   Margin="0,-1,0,0" Opacity="0" x:Name="CloseIcon" />
                    </Border>
                </StackPanel>
            </StackPanel>
        </Grid>

        <!-- Hardware Preview Strip (Row 2 — always visible, full width) -->
        <controls:HardwarePreview x:Name="HwPreview" Grid.Row="2"
            ToolTip="Live hardware status — click a knob to navigate to Mixer tab"
            Visibility="Collapsed" />

        <!-- Main Layout: Sidebar + Content -->
        <Grid Grid.Row="1" Background="{DynamicResource BgDarkBrush}">
            <Grid.ColumnDefinitions>
                <!-- Sidebar -->
                <ColumnDefinition Width="76" />
                <!-- Content -->
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- Sidebar Navigation -->
            <Border Grid.Column="0" Background="{DynamicResource BgBaseBrush}"
                    BorderBrush="{DynamicResource CardBorderBrush}" BorderThickness="0,0,1,0">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>

                    <!-- Profile button at top of sidebar -->
                    <StackPanel Grid.Row="0" Margin="0,12,0,0">
                        <Border x:Name="ProfileButton" Width="48" Height="48" CornerRadius="24"
                                Background="{DynamicResource CardBgBrush}"
                                BorderThickness="2" Cursor="Hand" ToolTip="Switch profile"
                                HorizontalAlignment="Center"
                                MouseLeftButtonUp="ProfileButton_Click">
                            <Border.BorderBrush>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                    <GradientStop Color="#8800E676" Offset="0" />
                                    <GradientStop Color="#4400E676" Offset="1" />
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border.Effect>
                                <DropShadowEffect Color="#00E676" BlurRadius="12" Opacity="0.25" ShadowDepth="0" />
                            </Border.Effect>
                            <mi:MaterialIcon x:Name="ProfileIcon" Kind="AccountCircleOutline"
                                       Width="22" Height="22" Foreground="{DynamicResource AccentBrush}"
                                       HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <TextBlock x:Name="ProfileLabel" Text="Default" FontSize="8" FontWeight="Medium"
                                   Foreground="{StaticResource TextSecBrush}"
                                   HorizontalAlignment="Center" Margin="0,5,0,0"
                                   TextTrimming="CharacterEllipsis" MaxWidth="60" TextAlignment="Center" />

                        <!-- Separator line under profile button -->
                        <Border Height="1" Margin="14,10,14,0"
                                Background="{DynamicResource AccentBorder22Brush}" />
                    </StackPanel>

                    <!-- ProfilePopupPanel is populated and shown via code-behind Window flyout -->
                    <StackPanel x:Name="ProfilePopupPanel" Visibility="Collapsed" />

                    <DockPanel Grid.Row="1" Margin="0,12,0,0" LastChildFill="True">
                        <!-- Settings at very bottom -->
                        <Button x:Name="NavSettings" Style="{StaticResource NavButton}" Click="NavSettings_Click"
                                DockPanel.Dock="Bottom">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Border x:Name="NavSettingsBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                        Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                        Visibility="Collapsed" Margin="0" />
                                <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                    <controls:PhosphorIcon x:Name="NavSettingsIcon" IconName="Gear" IconSize="22"
                                               IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                    <TextBlock x:Name="NavSettingsLabel" Text="Settings" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                               HorizontalAlignment="Center" Margin="0,3,0,0" />
                                </StackPanel>
                            </Grid>
                        </Button>
                        <Button x:Name="NavBindings" Style="{StaticResource NavButton}" Click="NavBindings_Click"
                                DockPanel.Dock="Bottom" ToolTip="Overview of all knob and button bindings across profiles">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0" />
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Border x:Name="NavBindingsBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                        Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                        Visibility="Collapsed" Margin="0" />
                                <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                    <controls:PhosphorIcon x:Name="NavBindingsIcon" IconName="AppWindow" IconSize="22"
                                               IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                    <TextBlock x:Name="NavBindingsLabel" Text="Overview" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                               HorizontalAlignment="Center" Margin="0,3,0,0" />
                                </StackPanel>
                            </Grid>
                        </Button>

                        <!-- Nav items -->
                        <StackPanel>
                            <Button x:Name="NavMixer" Style="{StaticResource NavButton}" Click="NavMixer_Click">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="NavMixerBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                            Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                            Visibility="Collapsed" Margin="0" />
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                        <controls:PhosphorIcon x:Name="NavMixerIcon" IconName="SlidersHorizontal" IconSize="22"
                                                   IconColor="#00E676" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="NavMixerLabel" Text="Mixer" FontSize="9" Foreground="{DynamicResource AccentBrush}"
                                                   HorizontalAlignment="Center" Margin="0,3,0,0" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                            <Button x:Name="NavButtons" Style="{StaticResource NavButton}" Click="NavButtons_Click">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="NavButtonsBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                            Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                            Visibility="Collapsed" Margin="0" />
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                        <controls:PhosphorIcon x:Name="NavButtonsIcon" IconName="Keyboard" IconSize="22"
                                                   IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="NavButtonsLabel" Text="Buttons" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                                   HorizontalAlignment="Center" Margin="0,3,0,0" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                            <Button x:Name="NavLights" Style="{StaticResource NavButton}" Click="NavLights_Click">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="NavLightsBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                            Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                            Visibility="Collapsed" Margin="0" />
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                        <controls:PhosphorIcon x:Name="NavLightsIcon" IconName="Lightbulb" IconSize="22"
                                                   IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="NavLightsLabel" Text="Lights" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                                   HorizontalAlignment="Center" Margin="0,3,0,0" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                            <Button x:Name="NavAmbience" Style="{StaticResource NavButton}" Click="NavAmbience_Click">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="NavAmbienceBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                            Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                            Visibility="Collapsed" Margin="0" />
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                        <controls:PhosphorIcon x:Name="NavAmbienceIcon" IconName="House" IconSize="22"
                                                   IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="NavAmbienceLabel" Text="Room" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                                   HorizontalAlignment="Center" Margin="0,3,0,0" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                            <Button x:Name="NavOsd" Style="{StaticResource NavButton}" Click="NavOsd_Click"
                                    ToolTip="OSD Overlay &amp; Quick Wheel settings">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="NavOsdBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                            Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                            Visibility="Collapsed" Margin="0" />
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                        <controls:PhosphorIcon x:Name="NavOsdIcon" IconName="Monitor" IconSize="22"
                                                   IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="NavOsdLabel" Text="OSD" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                                   HorizontalAlignment="Center" Margin="0,3,0,0" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                            <Button x:Name="NavGroups" Style="{StaticResource NavButton}" Click="NavGroups_Click"
                                    ToolTip="Device Groups — organize Govee, Corsair, and HA devices">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="0" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <Border x:Name="NavGroupsBar" Grid.Column="0" Width="6" Height="6" CornerRadius="3"
                                            Background="{DynamicResource AccentBrush}" VerticalAlignment="Center"
                                            Visibility="Collapsed" Margin="0" />
                                    <StackPanel Grid.Column="1" HorizontalAlignment="Center">
                                        <controls:PhosphorIcon x:Name="NavGroupsIcon" IconName="Link" IconSize="22"
                                                   IconColor="#9A9A9A" HorizontalAlignment="Center" />
                                        <TextBlock x:Name="NavGroupsLabel" Text="Groups" FontSize="9" Foreground="{StaticResource TextSecBrush}"
                                                   HorizontalAlignment="Center" Margin="0,3,0,0" />
                                    </StackPanel>
                                </Grid>
                            </Button>
                        </StackPanel>
                    </DockPanel>
                </Grid>
            </Border>

            <!-- Content Area -->
            <Border Grid.Column="1" Padding="24,16">
                <ContentControl x:Name="ContentArea" />
            </Border>
        </Grid>
    </Grid>
</ui:FluentWindow>