OwnCord/Client/OwnCord.Client/Controls/ServerStripControl.xaml

<UserControl x:Class="OwnCord.Client.Controls.ServerStripControl"
             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"
             Width="72"
             Background="{StaticResource BgTertiary}">

    <UserControl.Resources>
        <converters:FirstCharConverter x:Key="FirstCharConverter"/>
        <converters:ColorToBrushConverter x:Key="ColorToBrushConverter"/>

        <!-- Server icon button base template -->
        <Style x:Key="ServerIconButton" TargetType="Button">
            <Setter Property="Width" Value="48"/>
            <Setter Property="Height" Value="48"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <!-- Active indicator bar (left side) -->
                            <Rectangle x:Name="Indicator"
                                       Width="4" Height="0"
                                       Fill="White"
                                       HorizontalAlignment="Left"
                                       VerticalAlignment="Center"
                                       RadiusX="2" RadiusY="2"
                                       Margin="-12,0,0,0"/>

                            <!-- Icon circle -->
                            <Border x:Name="IconBorder"
                                    Width="48" Height="48"
                                    CornerRadius="24"
                                    Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"/>
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="IconBorder" Property="CornerRadius" Value="12"/>
                                <Setter TargetName="Indicator" Property="Height" Value="20"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Add server button style -->
        <Style x:Key="AddServerButton" TargetType="Button">
            <Setter Property="Width" Value="48"/>
            <Setter Property="Height" Value="48"/>
            <Setter Property="Cursor" Value="Hand"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="AddBorder"
                                Width="48" Height="48"
                                CornerRadius="24"
                                Background="Transparent"
                                BorderBrush="{StaticResource Green}"
                                BorderThickness="2"
                                Style="{x:Null}">
                            <Border.Resources>
                                <Style TargetType="Border"/>
                            </Border.Resources>
                            <TextBlock Text="+"
                                       Foreground="{StaticResource Green}"
                                       FontSize="24"
                                       FontWeight="Bold"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="AddBorder" Property="CornerRadius" Value="12"/>
                                <Setter TargetName="AddBorder" Property="Background" Value="{StaticResource Green}"/>
                                <Setter TargetName="AddBorder" Property="BorderThickness" Value="0"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>

    <ScrollViewer VerticalScrollBarVisibility="Auto"
                  HorizontalScrollBarVisibility="Disabled"
                  Padding="0">
        <ScrollViewer.Resources>
            <!-- Hide scrollbar but keep scrolling -->
            <Style TargetType="ScrollBar">
                <Setter Property="Width" Value="0"/>
            </Style>
        </ScrollViewer.Resources>

        <StackPanel HorizontalAlignment="Center"
                    Orientation="Vertical"
                    Margin="0,12,0,12">

            <!-- Home / DM button -->
            <Button x:Name="HomeButton"
                    Style="{StaticResource ServerIconButton}"
                    Background="{StaticResource Accent}"
                    Command="{Binding HomeCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                    ToolTip="Direct Messages"
                    Margin="0,0,0,8">
                <Grid>
                    <Path Data="M12,4 C13.66,4 15,5.34 15,7 C15,8.66 13.66,10 12,10 C10.34,10 9,8.66 9,7 C9,5.34 10.34,4 12,4 M12,12 C14.21,12 18,13.1 18,15.33 L18,17 L6,17 L6,15.33 C6,13.1 9.79,12 12,12"
                          Fill="White"
                          Stretch="Uniform"
                          Width="22" Height="22"/>
                </Grid>
            </Button>

            <!-- Separator -->
            <Border Width="32" Height="2"
                    Background="{StaticResource BorderBrush}"
                    CornerRadius="1"
                    Margin="0,0,0,8"/>

            <!-- Server list -->
            <ItemsControl x:Name="ServerList"
                          ItemsSource="{Binding Servers, RelativeSource={RelativeSource AncestorType=UserControl}}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Button Style="{StaticResource ServerIconButton}"
                                Background="{Binding Color, Converter={StaticResource ColorToBrushConverter}}"
                                Command="{Binding DataContext.SelectServerCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                CommandParameter="{Binding}"
                                ToolTip="{Binding Name}"
                                Tag="{Binding}"
                                Margin="0,0,0,8">
                            <!-- Re-template to handle active state via Tag comparison -->
                            <Button.Template>
                                <ControlTemplate TargetType="Button">
                                    <Grid>
                                        <!-- Active indicator bar -->
                                        <Rectangle x:Name="Indicator"
                                                   Width="4" Height="0"
                                                   Fill="White"
                                                   HorizontalAlignment="Left"
                                                   VerticalAlignment="Center"
                                                   RadiusX="2" RadiusY="2"
                                                   Margin="-12,0,0,0"/>

                                        <!-- Icon circle -->
                                        <Border x:Name="IconBorder"
                                                Width="48" Height="48"
                                                CornerRadius="24"
                                                Background="{TemplateBinding Background}">
                                            <TextBlock Text="{Binding Name, Converter={StaticResource FirstCharConverter}}"
                                                       Foreground="White"
                                                       FontSize="18"
                                                       FontWeight="Bold"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Center"/>
                                        </Border>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter TargetName="IconBorder" Property="CornerRadius" Value="12"/>
                                            <Setter TargetName="Indicator" Property="Height" Value="20"/>
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Button.Template>
                        </Button>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>

            <!-- Add server button -->
            <Button x:Name="AddButton"
                    Style="{StaticResource AddServerButton}"
                    Command="{Binding AddServerCommand, RelativeSource={RelativeSource AncestorType=UserControl}}"
                    ToolTip="Add a Server"
                    Margin="0,0,0,0"/>

        </StackPanel>
    </ScrollViewer>
</UserControl>