OwnCord/Client/OwnCord.Client/Controls/UserBarControl.xaml

<UserControl x:Class="OwnCord.Client.Controls.UserBarControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:controls="clr-namespace:OwnCord.Client.Controls">

    <UserControl.Resources>
        <Style x:Key="UserBarButton" TargetType="Button">
            <Setter Property="Width" Value="32"/>
            <Setter Property="Height" Value="32"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" CornerRadius="4" Background="Transparent"
                                Width="32" Height="32">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="#35373c"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Invisible button style for avatar click area -->
        <Style x:Key="AvatarButton" TargetType="Button">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <Border Height="52" Padding="8,0">
        <Border.Background>
            <SolidColorBrush Color="#111214" Opacity="0.6"/>
        </Border.Background>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <!-- Avatar with status dot — clickable to toggle status picker -->
            <Grid Grid.Column="0" Margin="0,0,8,0" VerticalAlignment="Center">
                <Button Style="{StaticResource AvatarButton}"
                        Command="{Binding ToggleStatusPickerCommand}"
                        ToolTip="Change status">
                    <Grid>
                        <!-- Avatar circle with initial -->
                        <Border Width="32" Height="32" CornerRadius="16" Background="#5865f2">
                            <TextBlock Text="{Binding CurrentUsername, Converter={StaticResource FirstLetter}}"
                                       Foreground="White" FontWeight="Bold" FontSize="14"
                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <!-- Status dot overlay -->
                        <Ellipse Width="12" Height="12" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                                 Fill="{Binding CurrentUserStatusEnum, Converter={StaticResource StatusToBrush}}"
                                 Stroke="#111214" StrokeThickness="3"/>
                    </Grid>
                </Button>

                <!-- Status picker popup -->
                <Popup IsOpen="{Binding ShowStatusPicker}"
                       Placement="Top"
                       PlacementTarget="{Binding RelativeSource={RelativeSource AncestorType=Grid}}"
                       StaysOpen="False"
                       AllowsTransparency="True"
                       PopupAnimation="Fade"
                       HorizontalOffset="-4"
                       VerticalOffset="-4">
                    <controls:StatusPickerControl
                        SelectedStatus="{Binding CurrentUserStatus}"
                        StatusChangedCommand="{Binding ChangeStatusCommand}"/>
                </Popup>
            </Grid>

            <!-- Username and status text -->
            <StackPanel Grid.Column="1" VerticalAlignment="Center" Margin="0,0,4,0">
                <TextBlock Text="{Binding CurrentUsername}" Foreground="White" FontSize="13" FontWeight="SemiBold"
                           TextTrimming="CharacterEllipsis"/>
                <TextBlock Text="{Binding CurrentUserStatus}" Foreground="#949ba4" FontSize="11"
                           TextTrimming="CharacterEllipsis"/>
            </StackPanel>

            <!-- Mic / Deafen / Settings buttons -->
            <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
                <Button Command="{Binding ToggleMuteCommand}" Style="{StaticResource UserBarButton}"
                        ToolTip="Toggle Mute">
                    <TextBlock FontSize="14" Foreground="{Binding IsMuted, Converter={StaticResource BoolToRedBrush}}">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Text" Value="&#x1F399;"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsMuted}" Value="True">
                                        <Setter Property="Text" Value="&#x1F507;"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </Button>
                <Button Command="{Binding ToggleDeafenCommand}" Style="{StaticResource UserBarButton}"
                        ToolTip="Toggle Deafen">
                    <TextBlock FontSize="14" Foreground="{Binding IsDeafened, Converter={StaticResource BoolToRedBrush}}">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Setter Property="Text" Value="&#x1F50A;"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IsDeafened}" Value="True">
                                        <Setter Property="Text" Value="&#x1F508;"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </Button>
                <Button Command="{Binding OpenSettingsCommand}"
                        Style="{StaticResource UserBarButton}" ToolTip="Settings">
                    <TextBlock Text="&#x2699;" FontSize="16" Foreground="#b5bac1"/>
                </Button>
            </StackPanel>
        </Grid>
    </Border>
</UserControl>