StabilityMatrix/StabilityMatrix.Avalonia/Views/InstalledWorkflowsPage.axaml

<controls:UserControlBase xmlns="https://github.com/avaloniaui"
                          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                          xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
                          xmlns:viewModels="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
                          xmlns:asyncImageLoader="clr-namespace:AsyncImageLoader;assembly=AsyncImageLoader.Avalonia"
                          xmlns:designData="clr-namespace:StabilityMatrix.Avalonia.DesignData"
                          xmlns:openArt="clr-namespace:StabilityMatrix.Core.Models.Api.OpenArt"
                          xmlns:controls1="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
                          xmlns:lang="clr-namespace:StabilityMatrix.Avalonia.Languages"
                          xmlns:avalonia="https://github.com/projektanker/icons.avalonia"
                          xmlns:labs="clr-namespace:Avalonia.Labs.Controls;assembly=Avalonia.Labs.Controls"
                          xmlns:models="clr-namespace:StabilityMatrix.Avalonia.Models"
                          xmlns:helpers="clr-namespace:StabilityMatrix.Avalonia.Helpers"
                          xmlns:fluent="clr-namespace:FluentIcons.Avalonia.Fluent;assembly=FluentIcons.Avalonia.Fluent"
                          xmlns:input="clr-namespace:FluentAvalonia.UI.Input;assembly=FluentAvalonia"
                          mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
                          d:DataContext="{x:Static designData:DesignData.InstalledWorkflowsViewModel}"
                          x:DataType="viewModels:InstalledWorkflowsViewModel"
                          x:Class="StabilityMatrix.Avalonia.Views.InstalledWorkflowsPage">
    <UserControl.Styles>
        <Style Selector="Border#HoverBorder">
            <Setter Property="Transitions">
                <Transitions>
                    <BoxShadowsTransition Property="BoxShadow" Duration="0:0:0.237" />
                </Transitions>
            </Setter>

            <Style Selector="^ labs|AsyncImage">
                <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>
        <input:StandardUICommand
            x:Key="OpenInExplorerCommand"
            Command="{Binding OpenInExplorerCommand}" />
        <input:StandardUICommand
            x:Key="OpenOnOpenArtCommand"
            Command="{Binding OpenOnOpenArtCommand}" />
        <input:StandardUICommand
            x:Key="DeleteCommand"
            Command="{Binding DeleteCommand}" />
    </UserControl.Resources>

    <Grid RowDefinitions="Auto, *">
        <controls1:CommandBar Grid.Row="0" Grid.Column="0"
                              VerticalAlignment="Center"
                              HorizontalAlignment="Left"
                              VerticalContentAlignment="Center"
                              DefaultLabelPosition="Right">
            <controls1:CommandBar.PrimaryCommands>
                <controls1:CommandBarButton
                    IconSource="Refresh"
                    VerticalAlignment="Center"
                    Label="{x:Static lang:Resources.Action_Refresh}"
                    Command="{Binding LoadInstalledWorkflowsCommand}" />

                <controls1:CommandBarSeparator />

                <controls1:CommandBarElementContainer>
                    <StackPanel Orientation="Horizontal">
                        <avalonia:Icon FontSize="18"
                                       Value="fa-solid fa-info"
                                       Margin="8,0" />
                        <TextBlock Text="Drag &amp; drop one of the cards below into ComfyUI to load the workflow"
                                   VerticalAlignment="Center" />
                    </StackPanel>
                </controls1:CommandBarElementContainer>
            </controls1:CommandBar.PrimaryCommands>
        </controls1:CommandBar>

        <ScrollViewer Grid.Column="0"
                      Grid.Row="1">
            <ItemsRepeater ItemsSource="{Binding DisplayedWorkflows}">
                <ItemsRepeater.Layout>
                    <!-- <UniformGridLayout MinColumnSpacing="4" MinRowSpacing="4"/> -->
                    <UniformGridLayout MinColumnSpacing="4" MinRowSpacing="4" />
                </ItemsRepeater.Layout>
                <ItemsRepeater.ItemTemplate>
                    <DataTemplate x:DataType="{x:Type models:OpenArtMetadata}">
                        <Border
                            Name="HoverBorder"
                            Padding="0"
                            BorderThickness="0"
                            Margin="8"
                            ClipToBounds="True"
                            CornerRadius="8">
                            <Interaction.Behaviors>
                                <BehaviorCollection>
                                    <controls:BetterContextDragBehavior
                                        Context="{Binding FilePath}"
                                        DataFormat="Files"
                                        HorizontalDragThreshold="6"
                                        VerticalDragThreshold="6" />
                                </BehaviorCollection>
                            </Interaction.Behaviors>
                            <Border.ContextFlyout>
                                <MenuFlyout>
                                    <MenuItem Header="{x:Static lang:Resources.Action_OpenOnOpenArt}"
                                              IsVisible="{Binding HasMetadata}"
                                              Command="{StaticResource OpenOnOpenArtCommand}"
                                              CommandParameter="{Binding }">
                                        <MenuItem.Icon>
                                            <fluent:SymbolIcon Symbol="Open" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                    <MenuItem Header="{x:Static lang:Resources.Action_OpenInExplorer}"
                                              Command="{StaticResource OpenInExplorerCommand}"
                                              CommandParameter="{Binding }">
                                        <MenuItem.Icon>
                                            <fluent:SymbolIcon Symbol="Folder" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                    <MenuItem Header="{x:Static lang:Resources.Action_Delete}"
                                              Command="{StaticResource DeleteCommand}"
                                              CommandParameter="{Binding }">
                                        <MenuItem.Icon>
                                            <fluent:SymbolIcon Symbol="Delete" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                </MenuFlyout>
                            </Border.ContextFlyout>
                            <Button
                                Name="ModelCard"
                                Classes="transparent-full"
                                Padding="0"
                                BorderThickness="0"
                                VerticalContentAlignment="Top"
                                CornerRadius="8">
                                <Grid RowDefinitions="*, Auto">
                                    <labs:AsyncImage
                                        Grid.Row="0"
                                        Grid.RowSpan="2"
                                        CornerRadius="8"
                                        Width="330"
                                        Height="400"
                                        Source="{Binding FirstThumbnail}"
                                        IsVisible="{Binding FirstThumbnail, Converter={x:Static ObjectConverters.IsNotNull}, FallbackValue=False}"
                                        Stretch="UniformToFill" />

                                    <avalonia:Icon Grid.Row="0"
                                                   Grid.RowSpan="2"
                                                   CornerRadius="8"
                                                   Width="330"
                                                   Height="400"
                                                   FontSize="100"
                                                   IsVisible="{Binding FirstThumbnail, Converter={x:Static ObjectConverters.IsNull}, FallbackValue=False}"
                                                   Value="fa-regular fa-file-code" />

                                    <!-- 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 Workflow.Creator.DevProfileUrl}"
                                            CornerRadius="16"
                                            Classes="transparent"
                                            Padding="10,4">
                                            <StackPanel Orientation="Horizontal" Spacing="6">
                                                <labs:AsyncImage
                                                    Width="22"
                                                    Height="22"
                                                    Effect="{StaticResource ImageDropShadowEffect}"
                                                    CornerRadius="11"
                                                    RenderOptions.BitmapInterpolationMode="HighQuality"
                                                    IsVisible="{Binding Workflow.Creator.Avatar, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"
                                                    Source="{Binding Workflow.Creator.Avatar}" />
                                                <TextBlock
                                                    VerticalAlignment="Center"
                                                    Foreground="{DynamicResource TextControlForeground}"
                                                    Effect="{StaticResource TextDropShadowEffect}"
                                                    Text="{Binding Workflow.Creator.Name}" />
                                            </StackPanel>
                                        </Button>
                                    </Border>

                                    <Border
                                        Name="ModelCardBottom"
                                        Grid.Row="1">
                                        <TextBlock
                                            Padding="16"
                                            Margin="8,0,8,0"
                                            HorizontalAlignment="Center"
                                            VerticalAlignment="Center"
                                            FontWeight="SemiBold"
                                            Foreground="{DynamicResource TextControlForeground}"
                                            LetterSpacing="0.33"
                                            TextWrapping="Wrap"
                                            MaxWidth="315"
                                            Text="{Binding Workflow.Name}"
                                            ToolTip.Tip="{Binding Workflow.Name}" />
                                    </Border>
                                </Grid>
                            </Button>
                        </Border>
                    </DataTemplate>
                </ItemsRepeater.ItemTemplate>
            </ItemsRepeater>
        </ScrollViewer>
    </Grid>
</controls:UserControlBase>