OwnCord/Client/OwnCord.Client/Controls/FriendsViewControl.xaml

<UserControl x:Class="OwnCord.Client.Controls.FriendsViewControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:converters="clr-namespace:OwnCord.Client.Converters"
             Background="{StaticResource BgPrimary}">

    <UserControl.Resources>
        <converters:StringEqualsConverter x:Key="StringEquals"/>

        <!-- Tab button style -->
        <Style x:Key="FriendsTabButton" TargetType="Button">
            <Setter Property="Foreground" Value="{StaticResource TextMuted}"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="FontWeight" Value="Medium"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Margin" Value="0,0,8,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" CornerRadius="4" Padding="8,4" Background="Transparent">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="{StaticResource BgHover}"/>
                                <Setter Property="Foreground" Value="{StaticResource TextNormal}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Active tab button style -->
        <Style x:Key="FriendsTabButtonActive" TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
                            <ContentPresenter 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>

        <!-- Add Friend tab (green) -->
        <Style x:Key="AddFriendTabButton" TargetType="Button">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="FontSize" Value="13"/>
            <Setter Property="FontWeight" Value="Bold"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Margin" Value="0,0,8,0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="Bd" CornerRadius="4" Padding="8,4" Background="{StaticResource Green}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Bd" Property="Background" Value="#1a8f4a"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Friend item hover -->
        <Style x:Key="FriendItemBorder" TargetType="Border">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="{StaticResource BgHover}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

        <!-- Friend action button -->
        <Style x:Key="FriendActionButton" 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" Width="32" Height="32" CornerRadius="16"
                                Background="{StaticResource BgSecondary}">
                            <ContentPresenter 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>
    </UserControl.Resources>

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

        <!-- ═══ Header ═══ -->
        <Border Grid.Row="0" BorderThickness="0,0,0,1" BorderBrush="#1e1f22">
            <StackPanel Orientation="Horizontal" Margin="16,0" VerticalAlignment="Center">
                <!-- Friends icon + title -->
                <TextBlock Text="&#x1F465;" FontSize="16" Margin="0,0,8,0" VerticalAlignment="Center"/>
                <TextBlock Text="Friends" Foreground="White" FontSize="15" FontWeight="Bold"
                           VerticalAlignment="Center" Margin="0,0,16,0"/>

                <!-- Divider -->
                <Border Width="1" Height="24" Background="{StaticResource BorderBrush}" Margin="0,0,16,0"/>

                <!-- Online tab -->
                <Button Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                        CommandParameter="online">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource StringEquals}, ConverterParameter=online}" Value="True">
                                    <Setter Property="Foreground" Value="White"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Border CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <TextBlock Text="Online" FontSize="13" FontWeight="Medium"/>
                </Button>

                <!-- All tab -->
                <Button Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                        CommandParameter="all">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource StringEquals}, ConverterParameter=all}" Value="True">
                                    <Setter Property="Foreground" Value="White"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Border CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <TextBlock Text="All" FontSize="13" FontWeight="Medium"/>
                </Button>

                <!-- Pending tab -->
                <Button Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                        CommandParameter="pending">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource FriendsTabButton}">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}, Converter={StaticResource StringEquals}, ConverterParameter=pending}" Value="True">
                                    <Setter Property="Foreground" Value="White"/>
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="Button">
                                                <Border CornerRadius="4" Padding="8,4" Background="{StaticResource BgActive}">
                                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                    <TextBlock Text="Pending" FontSize="13" FontWeight="Medium"/>
                </Button>

                <!-- Add Friend tab (green) -->
                <Button Style="{StaticResource AddFriendTabButton}"
                        Command="{Binding SelectTabCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                        CommandParameter="add">
                    <TextBlock Text="Add Friend" FontSize="13" FontWeight="Bold"/>
                </Button>
            </StackPanel>
        </Border>

        <!-- ═══ Friends list content ═══ -->
        <Grid Grid.Row="1" Margin="20,16,20,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <!-- Search bar -->
            <Border Grid.Row="0" Background="{StaticResource BgTertiary}" CornerRadius="4"
                    Padding="10,7" Margin="0,0,0,16">
                <Border.Style>
                    <Style TargetType="Border">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="add">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="pending">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <TextBox Text="{Binding FriendSearchText, RelativeSource={RelativeSource AncestorType=UserControl}, UpdateSourceTrigger=PropertyChanged}"
                         Background="Transparent" BorderThickness="0"
                         Foreground="{StaticResource TextNormal}"
                         CaretBrush="{StaticResource TextNormal}"
                         FontSize="13" VerticalAlignment="Center">
                    <TextBox.Style>
                        <Style TargetType="TextBox">
                            <Setter Property="Tag" Value="Search"/>
                        </Style>
                    </TextBox.Style>
                </TextBox>
            </Border>

            <!-- Count label -->
            <StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,0,0,8">
                <TextBlock FontSize="11" FontWeight="Bold" Foreground="{StaticResource TextMicro}">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Text" Value="ALL FRIENDS"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="online">
                                    <Setter Property="Text" Value="ONLINE"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="pending">
                                    <Setter Property="Text" Value="PENDING"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="add">
                                    <Setter Property="Text" Value="ADD FRIEND"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <TextBlock FontSize="11" FontWeight="Bold" Foreground="{StaticResource TextMicro}" Margin="6,0,0,0">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Text" Value="{Binding Friends.Count, RelativeSource={RelativeSource AncestorType=UserControl}, StringFormat='&#x2014; {0}'}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="add">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="pending">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </StackPanel>

            <!-- Friend items list -->
            <ScrollViewer Grid.Row="2" VerticalScrollBarVisibility="Auto">
                <ScrollViewer.Style>
                    <Style TargetType="ScrollViewer">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="add">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="pending">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ScrollViewer.Style>
                <ItemsControl ItemsSource="{Binding Friends, RelativeSource={RelativeSource AncestorType=UserControl}}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border Style="{StaticResource FriendItemBorder}"
                                    CornerRadius="8" Padding="8,8" Margin="0,0,0,1"
                                    BorderThickness="0,1,0,0" BorderBrush="{StaticResource BorderBrush}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

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

                                    <!-- Username and status text -->
                                    <StackPanel Grid.Column="1" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding Username}" Foreground="White"
                                                   FontSize="14" FontWeight="Bold"/>
                                        <TextBlock Foreground="{StaticResource TextMuted}" FontSize="12">
                                            <TextBlock.Style>
                                                <Style TargetType="TextBlock">
                                                    <Setter Property="Text" Value="Offline"/>
                                                    <Style.Triggers>
                                                        <DataTrigger Binding="{Binding Status}" Value="Online">
                                                            <Setter Property="Text" Value="Online"/>
                                                        </DataTrigger>
                                                        <DataTrigger Binding="{Binding Status}" Value="Idle">
                                                            <Setter Property="Text" Value="Idle"/>
                                                        </DataTrigger>
                                                        <DataTrigger Binding="{Binding Status}" Value="Dnd">
                                                            <Setter Property="Text" Value="Do Not Disturb"/>
                                                        </DataTrigger>
                                                    </Style.Triggers>
                                                </Style>
                                            </TextBlock.Style>
                                        </TextBlock>
                                    </StackPanel>

                                    <!-- Action buttons -->
                                    <StackPanel Grid.Column="2" Orientation="Horizontal" VerticalAlignment="Center">
                                        <!-- Message button -->
                                        <Button Style="{StaticResource FriendActionButton}"
                                                Command="{Binding DataContext.MessageFriendCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                                                CommandParameter="{Binding}"
                                                ToolTip="Message" Margin="0,0,8,0">
                                            <TextBlock Text="&#x1F4AC;" FontSize="14"
                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </Button>
                                        <!-- More button -->
                                        <Button Style="{StaticResource FriendActionButton}" ToolTip="More">
                                            <TextBlock Text="&#x22EF;" FontSize="16" Foreground="{StaticResource TextMuted}"
                                                       HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                        </Button>
                                    </StackPanel>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>

            <!-- Pending placeholder (shown when pending tab selected) -->
            <StackPanel Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center">
                <StackPanel.Style>
                    <Style TargetType="StackPanel">
                        <Setter Property="Visibility" Value="Collapsed"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="pending">
                                <Setter Property="Visibility" Value="Visible"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>
                <TextBlock Text="No pending friend requests" Foreground="{StaticResource TextMuted}" FontSize="14" HorizontalAlignment="Center"/>
            </StackPanel>

            <!-- Add Friend form (shown when add tab selected) -->
            <StackPanel Grid.Row="2" Margin="0,8,0,0">
                <StackPanel.Style>
                    <Style TargetType="StackPanel">
                        <Setter Property="Visibility" Value="Collapsed"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedTab, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="add">
                                <Setter Property="Visibility" Value="Visible"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </StackPanel.Style>
                <TextBlock Text="ADD FRIEND" Foreground="White" FontSize="15" FontWeight="Bold" Margin="0,0,0,4"/>
                <TextBlock Text="You can add friends with their username." Foreground="{StaticResource TextMuted}" FontSize="13" Margin="0,0,0,16"/>
                <Border Background="{StaticResource BgTertiary}" CornerRadius="8" Padding="4">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBox Grid.Column="0" Background="Transparent" BorderThickness="0"
                                 Foreground="{StaticResource TextNormal}" CaretBrush="{StaticResource TextNormal}"
                                 FontSize="14" VerticalAlignment="Center" Padding="8,8"
                                 Text="" x:Name="AddFriendInput"/>
                        <Button Grid.Column="1" Margin="4" Padding="16,8" Cursor="Hand">
                            <Button.Template>
                                <ControlTemplate TargetType="Button">
                                    <Border x:Name="Bd" Background="{StaticResource Accent}" CornerRadius="4" Padding="16,8">
                                        <TextBlock Text="Send Friend Request" Foreground="White" FontSize="13" FontWeight="Bold"/>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="Bd" Property="Background" Value="#4752c4"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </Grid>
                </Border>
            </StackPanel>
        </Grid>
    </Grid>
</UserControl>