StabilityMatrix/StabilityMatrix.Avalonia/Views/CheckpointsPage.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:vm="clr-namespace:StabilityMatrix.Avalonia.ViewModels"
             xmlns:ui="using:FluentAvalonia.UI.Controls"
             xmlns:mocks="clr-namespace:StabilityMatrix.Avalonia.DesignData"
             xmlns:controls="clr-namespace:StabilityMatrix.Avalonia.Controls"
             xmlns:system="clr-namespace:System;assembly=System.Runtime"
             d:DataContext="{x:Static mocks:DesignData.CheckpointsPageViewModel}"
             x:CompileBindings="True"
             x:DataType="vm:CheckpointsPageViewModel"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="StabilityMatrix.Avalonia.Views.CheckpointsPage">
    
    <controls:UserControlBase.Resources>
        <!--Direction="0"
            ShadowDepth="0"-->
        <DropShadowEffect
            BlurRadius="8"
            Color="#FF000000"
            Opacity="0.2"
            x:Key="TextDropShadowEffect" />
        
        <!--  Template for a single badge  -->
        <DataTemplate DataType="{x:Type system:String}" x:Key="BadgeTemplate">
            <controls:Card
                Height="18"
                Margin="4,0,0,0"
                Padding="3"
                Width="40">
                <TextBlock
                    FontSize="10"
                    FontWeight="Medium"
                    Foreground="{DynamicResource TextFillColorSecondaryBrush}"
                    HorizontalAlignment="Center"
                    Text="{Binding}"
                    VerticalAlignment="Center" />
            </controls:Card>
        </DataTemplate>
        
        <!-- Right click menu for a checkpoint file -->
        <!--<ui:CommandBarFlyout x:DataType="vm:CheckpointFile" Placement="Right" x:Key="FileCommandBarFlyout">
            Note: unlike a regular CommandBar, primary items can be set as the xml content and don't need
                   to be wrapped in a <ui:CommandBarFlyout.PrimaryCommands> tag
            <ui:CommandBarButton Label="Rename" IconSource="Save" ToolTip.Tip="Rename" 
                                 Command="{Binding RenameCommand}" />
            <ui:CommandBarButton Label="Delete" IconSource="Delete" ToolTip.Tip="Delete" 
                                 Command="{Binding DeleteCommand}" />
        </ui:CommandBarFlyout>-->
        
        <DataTemplate DataType="{x:Type vm:CheckpointFile}" x:Key="CheckpointFileDataTemplate">
            <Border
                DragDrop.AllowDrop="False"
                Background="Transparent"
                BorderThickness="0"
                Margin="8">
                <!--TODO: MouseDragElementBehavior-->
                <controls:Card Width="260">
                    <controls:Card.ContextFlyout>
                        <ui:FAMenuFlyout>
                            <ui:MenuFlyoutItem Command="{Binding RenameCommand}" 
                                               Text="Rename" IconSource="Rename" />
                            <ui:MenuFlyoutItem Command="{Binding DeleteCommand}" 
                                               Text="Delete" IconSource="Delete" />
                            <ui:MenuFlyoutItem Command="{Binding OpenOnCivitAiCommand}" 
                                               Text="Open on CivitAI" IconSource="Link"
                                               IsVisible="{Binding IsConnectedModel}"/>
                        </ui:FAMenuFlyout>
                    </controls:Card.ContextFlyout>
                    <Grid>
                        <!--  Main contents, hidden when IsLoading is true  -->
                        <StackPanel MinHeight="70">
                            <Grid ColumnDefinitions="*,*,*,*,*" RowDefinitions="*,0.1*" IsVisible="{Binding !IsLoading}">
                                <StackPanel
                                    Grid.ColumnSpan="4"
                                    HorizontalAlignment="Left"
                                    IsEnabled="True"
                                    Margin="4"
                                    Orientation="Vertical">
                                    <!--  Tooltip for title and version  -->
                                    <ToolTip.Tip>
                                        <StackPanel>
                                            <!--  Title  -->
                                            <TextBlock
                                                FontSize="14"
                                                FontWeight="Medium"
                                                Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                                                HorizontalAlignment="Left"
                                                Margin="0,0,0,4"
                                                Text="{Binding Title}"
                                                TextWrapping="WrapWithOverflow" />
                                            <!--  Version  -->
                                            <TextBlock
                                                FontSize="13"
                                                Foreground="{DynamicResource TextFillColorTertiaryBrush}"
                                                HorizontalAlignment="Left"
                                                Margin="0,0,0,4"
                                                Text="{Binding ConnectedModel.VersionName, FallbackValue=''}"
                                                TextWrapping="WrapWithOverflow"
                                                IsVisible="{Binding IsConnectedModel}" />
                                            <!--  Image  -->
                                            <Image
                                                Margin="0,0,0,4"
                                                Source="{Binding PreviewImage}"
                                                Stretch="Uniform"
                                                IsVisible="{Binding IsConnectedModel}" />
                                        </StackPanel>
                                    </ToolTip.Tip>
                                    <TextBlock
                                        Foreground="{DynamicResource TextFillColorPrimaryBrush}"
                                        HorizontalAlignment="Left"
                                        IsEnabled="True"
                                        MaxWidth="150"
                                        Text="{Binding Title}"
                                        TextTrimming="CharacterEllipsis"
                                        TextWrapping="NoWrap" />
                                    <TextBlock
                                        FontSize="13"
                                        Foreground="{DynamicResource TextFillColorTertiaryBrush}"
                                        HorizontalAlignment="Left"
                                        IsEnabled="True"
                                        Text="{Binding ConnectedModel.VersionName, FallbackValue=''}"
                                        TextWrapping="WrapWithOverflow"
                                        IsVisible="{Binding IsConnectedModel}" />
                                </StackPanel>
                                <Grid Grid.Column="4" Grid.Row="0">
                                    <Button
                                        Background="Transparent"
                                        BorderBrush="Transparent"
                                        FontSize="20"
                                        HorizontalAlignment="Right"
                                        IsEnabled="True"
                                        MaxHeight="48"
                                        MaxWidth="64"
                                        Padding="0"
                                        ToolTip.Tip="Connected Model"
                                        VerticalAlignment="Top"
                                        IsVisible="{Binding IsConnectedModel, Mode=OneWay}">
                                        <ui:SymbolIcon
                                            Foreground="LightGreen"
                                            Symbol="CloudSyncComplete"
                                            ToolTip.Tip="Connected Model" />
                                    </Button>
                                    <Button
                                        Background="Transparent"
                                        BorderBrush="Transparent"
                                        FontSize="20"
                                        HorizontalAlignment="Right"
                                        IsEnabled="True"
                                        MaxHeight="48"
                                        MaxWidth="64"
                                        Padding="0"
                                        ToolTip.Tip="Local Model"
                                        VerticalAlignment="Top"
                                        IsVisible="{Binding !IsConnectedModel, Mode=OneWay}">
                                        <ui:SymbolIcon
                                            Foreground="DimGray"
                                            Symbol="CloudOffline"
                                            ToolTip.Tip="Local Model" />
                                    </Button>
                                </Grid>
                                <TextBlock
                                    FontSize="11"
                                    Foreground="{DynamicResource TextFillColorTertiaryBrush}"
                                    Grid.Column="0"
                                    Grid.ColumnSpan="3"
                                    Grid.Row="1"
                                    IsEnabled="True"
                                    Margin="4,4"
                                    Text="{Binding FileName}"
                                    TextTrimming="CharacterEllipsis"
                                    ToolTip.Tip="{Binding FileName}"
                                    VerticalAlignment="Bottom" />
                                <ItemsControl
                                    Grid.Column="3"
                                    Grid.ColumnSpan="2"
                                    Grid.Row="1"
                                    ItemTemplate="{StaticResource BadgeTemplate}"
                                    ItemsSource="{Binding Badges}"
                                    VerticalAlignment="Bottom">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel
                                                HorizontalAlignment="Right"
                                                Orientation="Horizontal"
                                                VerticalAlignment="Bottom" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                </ItemsControl>
                            </Grid>
                        </StackPanel>
                        
                        <!--  Progress ring  -->
                        <controls:ProgressRing
                            Grid.Row="0"
                            Height="32"
                            Width="32"
                            Foreground="{DynamicResource ThemeRedColor}"
                            BorderThickness="4"
                            HorizontalAlignment="Center"
                            IsIndeterminate="True"
                            Padding="0"
                            VerticalAlignment="Center"
                            IsEnabled="{Binding IsLoading}"
                            IsVisible="{Binding IsLoading}" />
                    </Grid>
                </controls:Card>
            </Border>
        </DataTemplate>
        
        <DataTemplate DataType="{x:Type vm:CheckpointFolder}" x:Key="CheckpointFolderGridDataTemplate">
            <Expander
                Header="{Binding Title}"
                IsExpanded="True"
                Margin="8"
                Padding="8,8,8,8"
                IsVisible="{Binding IsCategoryEnabled, FallbackValue=True}">
                <Expander.ContextMenu>
                    <ContextMenu>
                        <!-- ReSharper disable once Xaml.RedundantResource -->
                        <MenuItem Header="Show in Explorer" 
                                  Command="{Binding ShowInExplorerCommand}"
                                  CommandParameter="{Binding DirectoryPath}"/>
                    </ContextMenu>
                </Expander.ContextMenu>
                <StackPanel Orientation="Vertical">
                    <!-- Subfolders -->
                    <StackPanel Orientation="Vertical">
                        <ItemsControl
                            HorizontalAlignment="Stretch"
                            ItemTemplate="{DynamicResource CheckpointFolderGridDataTemplate}"
                            ItemsSource="{Binding SubFolders, Mode=OneWay}"
                            Margin="8,0,8,8" />
                    </StackPanel>
                    <!-- Files Grid -->
                    <Grid Name="FilesGrid" 
                          Background="Transparent"
                          DragDrop.AllowDrop="True">
                        <ItemsRepeater
                            ItemTemplate="{StaticResource CheckpointFileDataTemplate}"
                            ItemsSource="{Binding CheckpointFiles}">
                            <ItemsRepeater.Layout>
                                <UniformGridLayout Orientation="Horizontal"/>
                            </ItemsRepeater.Layout>
                        </ItemsRepeater>
                        <!-- Blurred background for drag and drop -->
                        <Border
                            CornerRadius="8"
                            Grid.RowSpan="4"
                            IsEnabled="False"
                            IsVisible="{Binding IsDragBlurEnabled}">
                            <Border.Background>
                                <SolidColorBrush Color="#EE202020" />
                            </Border.Background>
                        </Border>
                        <!-- Drag prompt text -->
                        <TextBlock
                            Effect="{StaticResource TextDropShadowEffect}"
                            FontSize="24"
                            HorizontalAlignment="Center"
                            Text="Drop a file here to import"
                            VerticalAlignment="Center"
                            IsVisible="{Binding IsCurrentDragTarget}" />
                        <StackPanel
                            Margin="0,8"
                            Orientation="Vertical"
                            DataContext="{Binding Progress}"
                            VerticalAlignment="Center">
                            <!-- Import progress -->
                            <TextBlock
                                Effect="{StaticResource TextDropShadowEffect}"
                                FontSize="18"
                                HorizontalAlignment="Center"
                                Text="{Binding Text}"
                                VerticalAlignment="Center"
                                IsVisible="{Binding IsTextVisible}" />
                            <ProgressBar
                                Effect="{StaticResource TextDropShadowEffect}"
                                HorizontalAlignment="Stretch"
                                IsIndeterminate="{Binding IsIndeterminate, FallbackValue=False}"
                                Margin="64,8"
                                VerticalAlignment="Center"
                                IsVisible="{Binding IsProgressVisible}"
                                Value="{Binding Value, FallbackValue=20}" />
                        </StackPanel>
                    </Grid>
                </StackPanel>
            </Expander>
        </DataTemplate>
        
        <!--  Template for dropdown category checkbox item  -->
        <DataTemplate DataType="{x:Type vm:CheckpointFolder}" x:Key="CategoryItemTemplate"> 
            <CheckBox Content="{Binding Title}" IsChecked="{Binding IsCategoryEnabled, Mode=TwoWay}" />
        </DataTemplate>
        
        <!--  Template for dropdown box  -->
        <ControlTemplate x:Key="CategoryDropDownTemplate">
            <Grid>
                <Border
                    CornerRadius="{TemplateBinding Border.CornerRadius}"
                    Margin="{TemplateBinding Margin}"
                    Name="ContentBorder"
                    Padding="0"
                    VerticalAlignment="Stretch">
                    <Grid>
                        <Rectangle
                            Height="16"
                            HorizontalAlignment="Left"
                            Margin="0"
                            RadiusX="2"
                            RadiusY="2"
                            VerticalAlignment="Center"
                            IsVisible="False"
                            Width="3"
                            x:Name="ActiveRectangle">
                            <Rectangle.Fill>
                                <SolidColorBrush Color="{DynamicResource SystemAccentColorSecondary}" />
                            </Rectangle.Fill>
                        </Rectangle>
                        <Grid ColumnDefinitions="*,Auto">
                            <!--  Setup grid rows  -->
                            <StackPanel
                                Grid.Column="0"
                                Margin="10,0,0,0"
                                VerticalAlignment="Top">
                                <!--<CheckBox 
                                    Content="{Binding TitleWithFilesCount}" 
                                    IsChecked="{Binding IsCategoryEnabled, Mode=TwoWay}" />-->
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Border>
            </Grid>  
        </ControlTemplate>
        
    </controls:UserControlBase.Resources>
    
    <Grid ColumnDefinitions="Auto,*" RowDefinitions="0.2*,*" Margin="4, 0">
        <!--  Top settings bar  -->
        <ToggleSwitch
            OffContent="Import as Connected"
            OnContent="Import as Connected"
            Grid.Column="0"
            IsChecked="{Binding IsImportAsConnected}"
            Margin="24,8"
            ToolTip.Tip="Search for connected metadata on new local imports" />
        <StackPanel
            Grid.Column="1"
            Grid.Row="0"
            Spacing="8"
            HorizontalAlignment="Right"
            Margin="16,0"
            Orientation="Horizontal">
            <Button 
                Command="{Binding OpenModelsFolderCommand}">
                <TextBlock Text="Models Folder"/>
            </Button>
            <DropDownButton
                Content="Categories"
                Margin="8"
                VerticalAlignment="Center"
                HorizontalAlignment="Right">
                <DropDownButton.Flyout>
                    <MenuFlyout 
                        ItemTemplate="{StaticResource CategoryItemTemplate}"
                        Placement="Bottom" 
                        ItemsSource="{Binding CheckpointFolders}"/>
                </DropDownButton.Flyout>
            </DropDownButton>
            <!--<ComboBox
                VerticalAlignment="Center"
                HorizontalAlignment="Right"
                ItemsSource="{Binding CheckpointFolders}"
                MinWidth="180"
                SelectedIndex="0">
                
                <ComboBox.ItemContainerStyle>
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="Template" Value="{StaticResource CategoryDropDownStyle}" />
                    </Style>
                </ComboBox.ItemContainerStyle>

                <ComboBox.ItemTemplate>
                    <DataTemplate DataType="{x:Type vm:CheckpointFolder}">
                        <StackPanel Margin="10,0,0,0" VerticalAlignment="Top">
                            <TextBlock Margin="0,5,0,5" Text="Categories" />
                        </StackPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>-->
        </StackPanel>

        <!--  Main view with model cards  -->
        <ScrollViewer
            Grid.Column="0"
            Grid.ColumnSpan="2"
            Grid.Row="1"
            HorizontalScrollBarVisibility="Disabled"
            VerticalScrollBarVisibility="Auto">
            <Grid>
                <StackPanel Orientation="Vertical">
                    <ItemsControl
                        HorizontalAlignment="Stretch"
                        ItemTemplate="{StaticResource CheckpointFolderGridDataTemplate}"
                        ItemsSource="{Binding CheckpointFolders, Mode=OneWay}"
                        Margin="8,0,8,8" />
                </StackPanel>
            </Grid>
        </ScrollViewer>
    </Grid>
    
</controls:UserControlBase>