Files
OwnCord/Client/OwnCord.Client/Controls/FriendsViewControl.xaml
T
jevb b7d63dd443 chore: update .gitignore to exclude local tooling, build artifacts, and internal docs
Remove Claude Code configs, skills, publish artifacts, HTML mockups,
and internal planning docs from git tracking. Files remain local.
2026-03-15 16:54:55 +01:00

427 lines
26 KiB
XML

<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>