LanMountainDesktop/LanMountainDesktop/Views/ComponentLibraryWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:LanMountainDesktop.ViewModels"
        xmlns:fi="using:FluentIcons.Avalonia"
        x:Class="LanMountainDesktop.Views.ComponentLibraryWindow"
        x:DataType="vm:ComponentLibraryWindowViewModel"
        Width="980"
        Height="620"
        MinWidth="760"
        MinHeight="500"
        CanResize="True"
        SystemDecorations="Full"
        Title="Component Library"
        Background="{DynamicResource AdaptiveSurfaceBaseBrush}">

    <Grid RowDefinitions="Auto,*"
          RowSpacing="10"
          Margin="14">
        <Grid ColumnDefinitions="*,Auto"
              Margin="6,4,6,0">
            <TextBlock VerticalAlignment="Center"
                       FontSize="18"
                       FontWeight="SemiBold"
                       Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                       Text="{Binding Title}" />
            <Button Grid.Column="1"
                    Width="34"
                    Height="34"
                    Padding="0"
                    Background="Transparent"
                    BorderThickness="0"
                    Click="OnCloseClick">
                <fi:FluentIcon Icon="Dismiss"
                               IconVariant="Regular" />
            </Button>
        </Grid>

        <Grid Grid.Row="1"
              ColumnDefinitions="240,*"
              ColumnSpacing="12">
            <Border Classes="surface-translucent-panel"
                    CornerRadius="{DynamicResource DesignCornerRadiusLg}"
                    Padding="10">
                <ListBox x:Name="CategoryListBox"
                         Background="Transparent"
                         BorderThickness="0"
                         SelectionChanged="OnCategorySelectionChanged"
                         ItemsSource="{Binding Categories}">
                    <ListBox.ItemTemplate>
                        <DataTemplate x:DataType="vm:ComponentLibraryCategoryViewModel">
                            <Border Padding="10"
                                    Margin="0,0,0,6"
                                    CornerRadius="{DynamicResource DesignCornerRadiusSm}"
                                    Background="{DynamicResource AdaptiveNavItemBackgroundBrush}">
                                <Grid ColumnDefinitions="Auto,*"
                                      ColumnSpacing="8">
                                    <fi:SymbolIcon Symbol="{Binding Icon}"
                                                   IconVariant="Regular"
                                                   FontSize="16" />
                                    <TextBlock Grid.Column="1"
                                               VerticalAlignment="Center"
                                               FontWeight="SemiBold"
                                               Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                               Text="{Binding Title}" />
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>
            </Border>

            <Border Grid.Column="1"
                    Classes="surface-translucent-strong"
                    CornerRadius="{DynamicResource DesignCornerRadiusLg}"
                    Padding="10">
                <ScrollViewer VerticalScrollBarVisibility="Auto"
                              HorizontalScrollBarVisibility="Disabled">
                    <ItemsControl ItemsSource="{Binding Components}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>

                        <ItemsControl.ItemTemplate>
                            <DataTemplate x:DataType="vm:ComponentLibraryItemViewModel">
                                <Border Width="240"
                                        Height="220"
                                        Margin="6"
                                        CornerRadius="{DynamicResource DesignCornerRadiusLg}"
                                        Padding="10"
                                        Background="{DynamicResource AdaptiveSurfaceRaisedBrush}"
                                        BorderBrush="{DynamicResource AdaptiveButtonBorderBrush}"
                                        BorderThickness="1">
                                    <Grid RowDefinitions="*,Auto,Auto"
                                          RowSpacing="8">
                                        <Border CornerRadius="{DynamicResource DesignCornerRadiusXs}"
                                                Background="{DynamicResource AdaptiveGlassPanelBackgroundBrush}"
                                                BorderThickness="1"
                                                BorderBrush="{DynamicResource AdaptiveGlassPanelBorderBrush}"
                                                Padding="8">
                                            <Grid>
                                                <Image Source="{Binding PreviewBitmap}"
                                                       Stretch="Uniform"
                                                       HorizontalAlignment="Stretch"
                                                       VerticalAlignment="Stretch"
                                                       RenderOptions.BitmapInterpolationMode="HighQuality"
                                                       IsVisible="{Binding IsPreviewReady}" />

                                                <Border IsVisible="{Binding IsPreviewPending}"
                                                        Background="{DynamicResource AdaptiveSurfaceBaseBrush}">
                                                    <StackPanel HorizontalAlignment="Center"
                                                                VerticalAlignment="Center"
                                                                Spacing="8">
                                                        <ProgressBar Width="96"
                                                                     IsIndeterminate="True" />
                                                        <TextBlock HorizontalAlignment="Center"
                                                                   TextAlignment="Center"
                                                                   FontSize="12"
                                                                   Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                                                   Text="{Binding PreviewStatusText}" />
                                                    </StackPanel>
                                                </Border>

                                                <Border IsVisible="{Binding IsPreviewFailed}"
                                                        Background="{DynamicResource AdaptiveSurfaceBaseBrush}">
                                                    <StackPanel HorizontalAlignment="Center"
                                                                VerticalAlignment="Center"
                                                                Spacing="8">
                                                        <TextBlock HorizontalAlignment="Center"
                                                                   TextAlignment="Center"
                                                                   FontWeight="SemiBold"
                                                                   Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                                                   Text="{Binding PreviewStatusText}" />
                                                        <TextBlock HorizontalAlignment="Center"
                                                                   TextAlignment="Center"
                                                                   FontSize="12"
                                                                   TextWrapping="Wrap"
                                                                   Foreground="{DynamicResource AdaptiveTextSecondaryBrush}"
                                                                   Text="{Binding PreviewErrorMessage}" />
                                                    </StackPanel>
                                                </Border>
                                            </Grid>
                                        </Border>

                                        <TextBlock Grid.Row="1"
                                                   HorizontalAlignment="Center"
                                                   FontWeight="SemiBold"
                                                   Foreground="{DynamicResource AdaptiveTextPrimaryBrush}"
                                                   Text="{Binding DisplayName}" />

                                        <Button Grid.Row="2"
                                                HorizontalAlignment="Center"
                                                Padding="12,6"
                                                Tag="{Binding ComponentId}"
                                                Click="OnAddComponentClick">
                                            <TextBlock Text="Add to Desktop" />
                                        </Button>
                                    </Grid>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </Border>
        </Grid>
    </Grid>
</Window>