StabilityMatrix/StabilityMatrix.Avalonia/Views/CivitAiBrowserPage.axaml

<controls:UserControlBase
    x:Class="StabilityMatrix.Avalonia.Views.CivitAiBrowserPage"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:avalonia="clr-namespace:Projektanker.Icons.Avalonia;assembly=Projektanker.Icons.Avalonia"
    xmlns:checkpointBrowser="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointBrowser"
    xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
    xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ui="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
    xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
    xmlns:vm="clr-namespace:StabilityMatrix.Avalonia.ViewModels.CheckpointManager"
    xmlns:converters="clr-namespace:StabilityMatrix.Avalonia.Converters"
    xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
    xmlns:helpers="clr-namespace:StabilityMatrix.Avalonia.Helpers"
    xmlns:controls1="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls"
    d:DataContext="{x:Static designData:DesignData.CivitAiBrowserViewModel}"
    d:DesignHeight="700"
    d:DesignWidth="800"
    x:CompileBindings="True"
    x:DataType="checkpointBrowser:CivitAiBrowserViewModel"
    mc:Ignorable="d">

    <UserControl.Styles>
        <Style Selector="Border#HoverBorder">
            <Setter Property="Transitions">
                <Transitions>
                    <BoxShadowsTransition Property="BoxShadow" Duration="0:0:0.237"/>
                </Transitions>
            </Setter>
            
            <Style Selector="^ asyncImageLoader|AdvancedImage">
                <Setter Property="Transitions">
                    <Transitions>
                        <TransformOperationsTransition Property="RenderTransform"
                                                       Duration="0:0:0.237">
                            <TransformOperationsTransition.Easing>
                                <QuadraticEaseInOut/>
                            </TransformOperationsTransition.Easing>
                        </TransformOperationsTransition>
                    </Transitions>
                </Setter>
            </Style>
            
            <Style Selector="^:pointerover">
                <Setter Property="BoxShadow" Value="0 0 40 0 #60000000"/>
                <Setter Property="Cursor" Value="Hand" />
                <Style Selector="^ asyncImageLoader|AdvancedImage">
                    <Setter Property="CornerRadius" Value="12"/>
                    <Setter Property="RenderTransform" Value="scale(1.03, 1.03)"/>
                </Style>
                <Style Selector="^ Border#ModelCardBottom">
                    <Setter Property="Background" Value="#CC000000" />
                </Style>
            </Style>
            
            <Style Selector="^:not(:pointerover)">
                <Setter Property="BoxShadow" Value="0 0 20 0 #60000000"/>
                <Setter Property="Cursor" Value="Arrow" />
                <Style Selector="^ asyncImageLoader|AdvancedImage">
                    <Setter Property="CornerRadius" Value="8"/>
                    <Setter Property="RenderTransform" Value="scale(1, 1)"/>
                </Style>
                <Style Selector="^ Border#ModelCardBottom">
                    <Setter Property="Background" Value="#99000000" />
                </Style>
            </Style>
        </Style>
    </UserControl.Styles>

    <UserControl.Resources>
        <converters:KiloFormatterStringConverter x:Key="KiloFormatterConverter"/>
        <DataTemplate x:Key="CivitModelTemplate" DataType="{x:Type checkpointBrowser:CheckpointBrowserCardViewModel}">
            <Border
                Name="HoverBorder"
                Padding="0"
                BorderThickness="0"
                Margin="8"
                ClipToBounds="True"
                CornerRadius="8">
                <Border.ContextFlyout>
                    <MenuFlyout>
                        <MenuItem Header="{x:Static lang:Resources.Action_OpenOnCivitAi}"
                                  Command="{Binding OpenModelCommand}">
                            <MenuItem.Icon>
                                <ui:SymbolIcon Symbol="Open" />
                            </MenuItem.Icon>
                        </MenuItem>
                    </MenuFlyout>
                </Border.ContextFlyout>
                <Button
                    Name="ModelCard"
                    Classes="transparent-full"
                    Padding="0"
                    BorderThickness="0"
                    VerticalContentAlignment="Top"
                    CornerRadius="8"
                    Command="{Binding ShowVersionDialogCommand}"
                    CommandParameter="{Binding CivitModel}"
                    IsEnabled="{Binding !IsImporting}">
                    <Grid RowDefinitions="*, Auto">
                        <controls1:AsyncImage Grid.Row="0"
                                                      CornerRadius="8"
                                                      VerticalAlignment="Top"
                                                      HorizontalAlignment="Center"
                                                      Height="75"
                                                      ZIndex="10"
                                                      IsVisible="{Binding ShowSantaHats}"
                                                      Margin="0,8,0,0"
                                                      Source="avares://StabilityMatrix.Avalonia/Assets/santahat.png">
                            <!-- <controls:BetterAdvancedImage.RenderTransform> -->
                            <!--     <RotateTransform Angle="315"></RotateTransform> -->
                            <!-- </controls:BetterAdvancedImage.RenderTransform> -->
                        </controls1:AsyncImage>
                        <controls1:AsyncImage
                            Grid.Row="0"
                            Grid.RowSpan="2"
                            CornerRadius="8"
                            Width="330"
                            Height="400"
                            Source="{Binding CardImage}"
                            Stretch="UniformToFill"/>

                        <StackPanel
                            Grid.Row="0"
                            HorizontalAlignment="Right"
                            Orientation="Horizontal">
                            <Button
                                Margin="0,8,8,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Classes="transparent-info"
                                Command="{Binding ToggleFavoriteCommand}"
                                FontSize="20"
                                IsVisible="{Binding !IsFavorite}">
                                <Grid>
                                    <ui:SymbolIcon Symbol="StarAdd" />
                                </Grid>
                            </Button>
                            <Button
                                Margin="0,8,8,0"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Classes="success"
                                Command="{Binding ToggleFavoriteCommand}"
                                FontSize="20"
                                IsVisible="{Binding IsFavorite}">
                                <Grid>
                                    <ui:SymbolIcon Symbol="StarFilled" />
                                </Grid>
                            </Button>
                        </StackPanel>
                        
                        <!-- Username pill card -->
                        <Border
                            BoxShadow="inset 1.2 0 80 1.8 #66000000"
                            CornerRadius="16"
                            Margin="4"
                            Grid.Row="0" 
                            HorizontalAlignment="Left"
                            VerticalAlignment="Bottom">
                            <Border.Resources>
                                <DropShadowEffect
                                    x:Key="TextDropShadowEffect"
                                    BlurRadius="12"
                                    Color="#FF000000"
                                    Opacity="0.9"/>
                                <DropShadowEffect
                                    x:Key="ImageDropShadowEffect"
                                    BlurRadius="12"
                                    Color="#FF000000"
                                    Opacity="0.2"/>
                            </Border.Resources>
                            <Button
                                Command="{x:Static helpers:IOCommands.OpenUrlCommand}"
                                CommandParameter="{Binding CivitModel.Creator.ProfileUrl}"
                                CornerRadius="16"
                                Classes="transparent"
                                Padding="10,4">
                                <StackPanel Orientation="Horizontal" Spacing="6">
                                    <controls1:AsyncImage
                                        Width="22"
                                        Height="22"
                                        Effect="{StaticResource ImageDropShadowEffect}"
                                        CornerRadius="11"
                                        RenderOptions.BitmapInterpolationMode="HighQuality"
                                        IsVisible="{Binding CivitModel.Creator.Image, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                                        Source="{Binding CivitModel.Creator.Image}"/>
                                    <TextBlock 
                                        VerticalAlignment="Center"
                                        Effect="{StaticResource TextDropShadowEffect}"
                                        Text="{Binding CivitModel.Creator.Username}"/>
                                </StackPanel>
                            </Button>
                        </Border>

                        <StackPanel Grid.Row="0" Orientation="Horizontal">
                            <controls:Card
                                Height="24"
                                Margin="8,8,0,0"
                                Padding="4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"
                                Classes="info">

                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    FontWeight="Medium"
                                    Text="{Binding CivitModel.Type}" />
                            </controls:Card>
                            <controls:Card
                                Height="24"
                                Margin="4,8,0,0"
                                Padding="4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"
                                Classes="info">

                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    FontWeight="Medium"
                                    Text="{Binding CivitModel.BaseModelType}" />
                            </controls:Card>
                            <controls:Card
                                Height="24"
                                Margin="4,8,0,0"
                                Padding="4"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Top"
                                Classes="success"
                                IsVisible="{Binding ShowUpdateCard}">

                                <TextBlock
                                    HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    FontWeight="Medium"
                                    Text="{Binding UpdateCardText}" />
                            </controls:Card>
                        </StackPanel>
                        <Border
                            Grid.Row="0"
                            Grid.RowSpan="2"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Stretch"
                            Background="#DD000000"
                            CornerRadius="8"
                            IsVisible="{Binding IsImporting}"
                            ZIndex="1" />
                        <StackPanel
                            Grid.Row="0"
                            Grid.RowSpan="2"
                            HorizontalAlignment="Stretch"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsImporting}"
                            Orientation="Vertical"
                            ZIndex="2">
                            <controls:ProgressRing
                                Width="120"
                                Height="120"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                EndAngle="450"
                                IsIndeterminate="False"
                                StartAngle="90"
                                Value="{Binding Value}" />
                            <TextBlock
                                Margin="0,8,0,0"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                Text="{Binding Text, TargetNullValue=Importing...}" />
                        </StackPanel>

                        <Border
                            Name="ModelCardBottom"
                            Grid.Row="1">
                            <Grid ColumnDefinitions="*, Auto" RowDefinitions="Auto, Auto, Auto">

                                <!--
                                    TextTrimming causing issues with unicode chars until
                                    https://github.com/AvaloniaUI/Avalonia/pull/13385 is released
                                -->
                                <TextBlock
                                    Grid.ColumnSpan="2"
                                    MaxWidth="250"
                                    Margin="8,0,8,0"
                                    HorizontalAlignment="Left"
                                    VerticalAlignment="Center"
                                    FontWeight="SemiBold"
                                    Foreground="{DynamicResource TextControlForeground}"
                                    LetterSpacing="0.33"
                                    Text="{Binding CivitModel.Name}"
                                    TextWrapping="NoWrap"
                                    ToolTip.Tip="{Binding CivitModel.Name}" />

                                <TextBlock
                                    Grid.Row="1"
                                    Grid.Column="0"
                                    Margin="8,-4,0,0"
                                    VerticalAlignment="Center"
                                    FontSize="11"
                                    Foreground="{DynamicResource TextControlForeground}"
                                    Text="{Binding CivitModel.LatestModelVersionName, FallbackValue=''}" />

                                <StackPanel
                                    Grid.Row="2"
                                    Grid.Column="0"
                                    Orientation="Horizontal">

                                    <controls:StarsRating
                                        Margin="8,8,0,8"
                                        Background="#66000000"
                                        FontSize="16"
                                        Foreground="{DynamicResource ThemeEldenRingOrangeColor}"
                                        Value="{Binding CivitModel.Stats.Rating}" />
                                    <TextBlock
                                        Margin="4,0,0,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.RatingCount}"
                                        TextAlignment="Center" />
                                </StackPanel>

                                <StackPanel
                                    Grid.Row="2"
                                    Grid.Column="1"
                                    HorizontalAlignment="Right"
                                    Orientation="Horizontal">
                                    <avalonia:Icon Value="fa-solid fa-heart" />
                                    <TextBlock
                                        Margin="4,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.FavoriteCount, Converter={StaticResource KiloFormatterConverter}}" />

                                    <avalonia:Icon Margin="4,0" Value="fa-solid fa-download" />
                                    <TextBlock
                                        Margin="0,0,4,0"
                                        VerticalAlignment="Center"
                                        Text="{Binding CivitModel.Stats.DownloadCount, Converter={StaticResource KiloFormatterConverter}}" />
                                </StackPanel>
                                <Button
                                    Grid.Row="0"
                                    Grid.Column="1"
                                    Width="32"
                                    Margin="0,4,4,0"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    HorizontalContentAlignment="Right"
                                    VerticalContentAlignment="Top"
                                    BorderThickness="0"
                                    Classes="transparent">
                                    <ui:SymbolIcon FontSize="18" Symbol="MoreVertical" />
                                    <Button.Flyout>
                                        <MenuFlyout>
                                            <MenuItem Command="{Binding OpenModelCommand}" Header="{x:Static lang:Resources.Action_OpenOnCivitAi}">
                                                <MenuItem.Icon>
                                                    <ui:SymbolIcon Symbol="Open" />
                                                </MenuItem.Icon>
                                            </MenuItem>
                                        </MenuFlyout>
                                    </Button.Flyout>
                                </Button>
                            </Grid>
                        </Border>
                    </Grid>
                </Button>
            </Border>

        </DataTemplate>
    </UserControl.Resources>

    <Grid RowDefinitions="Auto,*,Auto">

        <StackPanel Margin="8" Orientation="Vertical">
            <Grid ColumnDefinitions="*,Auto">

                <TextBox
                    HorizontalAlignment="Stretch"
                    KeyDown="InputElement_OnKeyDown"
                    Text="{Binding SearchQuery, Mode=TwoWay}"
                    Watermark="{x:Static lang:Resources.Label_ModelSearchWatermark}">
                    <TextBox.InnerRightContent>
                        <Button
                            Classes="transparent-full"
                            Command="{Binding ClearSearchQuery}"
                            IsVisible="{Binding SearchQuery.Length}">
                            <ui:SymbolIcon Symbol="Cancel" />
                        </Button>
                    </TextBox.InnerRightContent>
                </TextBox>

                <Button
                    Grid.Column="1"
                    Width="80"
                    Margin="8,0,8,0"
                    VerticalAlignment="Stretch"
                    Classes="accent"
                    Command="{Binding SearchModelsCommand}"
                    IsDefault="True">
                    <Grid>
                        <controls:ProgressRing
                            MinWidth="16"
                            MinHeight="16"
                            VerticalAlignment="Center"
                            BorderThickness="4"
                            IsIndeterminate="True"
                            IsVisible="{Binding SearchModelsCommand.IsRunning}" />
                        <TextBlock
                            VerticalAlignment="Center"
                            IsVisible="{Binding !SearchModelsCommand.IsRunning}"
                            Text="{x:Static lang:Resources.Action_Search}" />
                    </Grid>
                </Button>
            </Grid>
            <DockPanel>
                <StackPanel Margin="0,8,4,8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_Sort}" />
                    <ComboBox
                        MinWidth="100"
                        ItemsSource="{Binding AllSortModes}"
                        SelectedItem="{Binding SortMode}" />
                </StackPanel>

                <StackPanel Margin="4,8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_TimePeriod}" />
                    <ComboBox
                        MinWidth="100"
                        ItemsSource="{Binding AllCivitPeriods}"
                        SelectedItem="{Binding SelectedPeriod}" />
                </StackPanel>

                <StackPanel Margin="4,8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_ModelType}" />
                    <ComboBox
                        MinWidth="100"
                        ItemsSource="{Binding AllModelTypes}"
                        SelectedItem="{Binding SelectedModelType}" />
                </StackPanel>

                <StackPanel Margin="4,8" Orientation="Vertical">
                    <Label Content="{x:Static lang:Resources.Label_BaseModel}" />
                    <ComboBox
                        MinWidth="100"
                        ItemsSource="{Binding BaseModelOptions}"
                        SelectedItem="{Binding SelectedBaseModelType}" />
                </StackPanel>


                <CheckBox
                    Margin="8,8,0,0"
                    HorizontalAlignment="Right"
                    Content="{x:Static lang:Resources.Label_ShowNsfwContent}"
                    IsChecked="{Binding ShowNsfw, Mode=TwoWay}" />
            </DockPanel>

        </StackPanel>

        <ScrollViewer
            Grid.Row="1"
            ScrollChanged="ScrollViewer_OnScrollChanged">
            <ItemsRepeater ItemTemplate="{StaticResource CivitModelTemplate}"
                           HorizontalAlignment="Center"
                           ItemsSource="{Binding ModelCards}">
                <ItemsRepeater.Layout>
                    <UniformGridLayout Orientation="Horizontal" />
                </ItemsRepeater.Layout>
            </ItemsRepeater>
        </ScrollViewer>

        <TextBlock
            Grid.Row="2"
            Margin="8,8"
            VerticalAlignment="Center"
            Text="{x:Static lang:Resources.Label_DataProvidedByCivitAi}" />

        <StackPanel Grid.Row="2"
                    HorizontalAlignment="Center"
                    IsVisible="{Binding HasSearched}"
                    Margin="0,8,0,8"
                    Orientation="Horizontal">
            <Button
                Margin="0,0,8,0"
                Command="{Binding FirstPage}"
                IsEnabled="{Binding CanGoToFirstPage}"
                ToolTip.Tip="{x:Static lang:Resources.Label_FirstPage}">
                <avalonia:Icon Value="fa-solid fa-backward-fast" />
            </Button>
            <Button
                Margin="0,0,16,0"
                Command="{Binding PreviousPage}"
                IsEnabled="{Binding CanGoToPreviousPage}"
                ToolTip.Tip="{x:Static lang:Resources.Label_PreviousPage}">
                <avalonia:Icon Value="fa-solid fa-caret-left" />
            </Button>
            <TextBlock Margin="8,0,4,0" TextAlignment="Center"
                       Text="{x:Static lang:Resources.Label_Page}"
                       VerticalAlignment="Center"/>
            <ui:NumberBox Value="{Binding CurrentPageNumber, FallbackValue=1}"
                          VerticalAlignment="Center"
                          SpinButtonPlacementMode="Hidden"
                          TextAlignment="Center"/>
            <TextBlock Margin="4,0,8,0" VerticalAlignment="Center">
                <Run Text="/"/>
                <Run Text="{Binding TotalPages, FallbackValue=5}"/>
            </TextBlock>
            <Button
                Margin="16,0,8,0"
                Command="{Binding NextPage}"
                IsEnabled="{Binding CanGoToNextPage}"
                ToolTip.Tip="{x:Static lang:Resources.Label_NextPage}">
                <avalonia:Icon Value="fa-solid fa-caret-right" />
            </Button>
            <Button
                Command="{Binding LastPage}"
                IsEnabled="{Binding CanGoToLastPage}"
                ToolTip.Tip="{x:Static lang:Resources.Label_LastPage}">
                <avalonia:Icon Value="fa-solid fa-forward-fast" />
            </Button>
        </StackPanel>

        <TextBlock
            Grid.Row="0"
            Grid.RowSpan="3"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="20"
            IsVisible="{Binding NoResultsFound}"
            Text="{Binding NoResultsText, FallbackValue=No results found}" />

        <controls:ProgressRing
            Grid.Row="1"
            Width="128"
            Height="128"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            IsIndeterminate="True"
            IsVisible="{Binding ShowMainLoadingSpinner, FallbackValue=False}" />
    </Grid>
</controls:UserControlBase>