OwnCord/Client/OwnCord.Client/Controls/DmSidebarControl.xaml

<UserControl x:Class="OwnCord.Client.Controls.DmSidebarControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="240"
             Background="{StaticResource BgSecondary}">

    <UserControl.Resources>
        <!-- DM item hover button -->
        <Style x:Key="DmItemButton" TargetType="Button">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" CornerRadius="4" Padding="8,6" Background="Transparent">
                            <ContentPresenter/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Close DM button (visible on hover via parent) -->
        <Style x:Key="CloseDmButton" TargetType="Button">
            <Setter Property="Width" Value="16"/>
            <Setter Property="Height" Value="16"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Visibility" Value="Hidden"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" Background="Transparent" CornerRadius="4">
                            <TextBlock Text="&#x2715;" FontSize="10" Foreground="{StaticResource TextMuted}"
                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgActive}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Nav item button (Friends, Nitro) -->
        <Style x:Key="NavItemButton" TargetType="Button">
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" CornerRadius="4" Padding="10,8" Background="Transparent" Margin="8,1">
                            <ContentPresenter/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

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

        <!-- Search header -->
        <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22" Padding="10,8">
            <Border Background="{StaticResource BgTertiary}" CornerRadius="4" Padding="8,5">
                <TextBlock Text="Find or start a conversation"
                           Foreground="{StaticResource TextMuted}" FontSize="13"
                           VerticalAlignment="Center"/>
            </Border>
        </Border>

        <!-- Navigation items -->
        <StackPanel Grid.Row="1" Margin="0,8,0,0">
            <!-- Friends -->
            <Button Style="{StaticResource NavItemButton}"
                    Command="{Binding FriendsCommand, RelativeSource={RelativeSource AncestorType=UserControl}}">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="&#x1F465;" FontSize="16" Margin="0,0,10,0" VerticalAlignment="Center"/>
                    <TextBlock Text="Friends" Foreground="{StaticResource TextNormal}" FontSize="14"
                               FontWeight="Medium" VerticalAlignment="Center"/>
                </StackPanel>
            </Button>

            <!-- Nitro placeholder -->
            <Button Style="{StaticResource NavItemButton}" IsEnabled="False">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="&#x2728;" FontSize="16" Margin="0,0,10,0" VerticalAlignment="Center"/>
                    <TextBlock Text="Nitro" Foreground="{StaticResource TextMuted}" FontSize="14"
                               FontWeight="Medium" VerticalAlignment="Center"/>
                </StackPanel>
            </Button>
        </StackPanel>

        <!-- DM list -->
        <Grid Grid.Row="2" Margin="0,8,0,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- DM list header -->
            <Grid Grid.Row="0" Margin="16,8,8,4">
                <TextBlock Text="DIRECT MESSAGES" Foreground="{StaticResource TextMicro}"
                           FontSize="11" FontWeight="Bold" VerticalAlignment="Center"/>
                <Button HorizontalAlignment="Right" Cursor="Hand" ToolTip="Create DM">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <TextBlock x:Name="Txt" Text="+" Foreground="{StaticResource TextMuted}"
                                       FontSize="16" FontWeight="Bold"/>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Txt" Property="Foreground" Value="{StaticResource TextNormal}"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Button.Template>
                </Button>
            </Grid>

            <!-- DM conversation items -->
            <ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto">
                <ItemsControl ItemsSource="{Binding DirectMessages, RelativeSource={RelativeSource AncestorType=UserControl}}"
                              Margin="8,0">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Style="{StaticResource DmItemButton}"
                                    Command="{Binding DataContext.SelectDmCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                    CommandParameter="{Binding}"
                                    HorizontalContentAlignment="Stretch"
                                    Margin="0,1">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <!-- Avatar with status dot -->
                                    <Grid Grid.Column="0" Width="32" Height="32" Margin="0,0,10,0">
                                        <Border Width="32" Height="32" CornerRadius="16" Background="#5865f2">
                                            <TextBlock Text="{Binding Username, Converter={StaticResource FirstLetter}}"
                                                       Foreground="White" FontWeight="Bold" FontSize="12"
                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </Border>
                                        <Ellipse Width="10" Height="10"
                                                 HorizontalAlignment="Right" VerticalAlignment="Bottom"
                                                 Fill="{Binding Status, Converter={StaticResource StatusToBrush}}"
                                                 Stroke="{StaticResource BgSecondary}" StrokeThickness="2"/>
                                    </Grid>

                                    <!-- Username -->
                                    <TextBlock Grid.Column="1" Text="{Binding Username}" FontSize="14"
                                               Foreground="{StaticResource TextMuted}"
                                               VerticalAlignment="Center"
                                               TextTrimming="CharacterEllipsis"/>

                                    <!-- Close button (shows on hover) -->
                                    <Button Grid.Column="2"
                                            Command="{Binding DataContext.CloseDmCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                            CommandParameter="{Binding}"
                                            VerticalAlignment="Center"
                                            Width="16" Height="16" Cursor="Hand">
                                        <Button.Style>
                                            <Style TargetType="Button" BasedOn="{StaticResource CloseDmButton}">
                                                <Setter Property="Visibility" Value="Hidden"/>
                                                <Style.Triggers>
                                                    <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button, AncestorLevel=2}}" Value="True">
                                                        <Setter Property="Visibility" Value="Visible"/>
                                                    </DataTrigger>
                                                </Style.Triggers>
                                            </Style>
                                        </Button.Style>
                                    </Button>
                                </Grid>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </Grid>
</UserControl>