ModManagerPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="WorkshopUploader.ModManagerPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:models="clr-namespace:WorkshopUploader.Models"
    xmlns:l="clr-namespace:WorkshopUploader.Localization"
    Title="{l:Translate Key=Mod_Headline}">

    <ContentPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid RowDefinitions="Auto,Auto,*" Padding="0" RowSpacing="0">

        <!--  Header  -->
        <Grid Grid.Row="0" Padding="24,24,24,12" ColumnDefinitions="*,Auto" ColumnSpacing="12">
            <VerticalStackLayout Grid.Column="0" Spacing="6">
                <Label Style="{StaticResource Headline}" Text="{l:Translate Key=Mod_Headline}" />
                <Label Style="{StaticResource SubHeadline}" Text="{l:Translate Key=Mod_Subtitle}" />
            </VerticalStackLayout>
            <Button
                Grid.Column="1"
                Clicked="OnRefreshCurrentTab"
                Style="{StaticResource SecondaryButton}"
                Text="{l:Translate Key=Refresh}"
                VerticalOptions="Start" />
        </Grid>

        <!--  Segment Control (internal tabs)  -->
        <Grid Grid.Row="1" Padding="24,0,24,12" ColumnDefinitions="*,*,*,*" ColumnSpacing="6">
            <Button x:Name="TabStore" Grid.Column="0" Text="{l:Translate Key=Mod_Store}" Clicked="OnTabStore" />
            <Button x:Name="TabInstalled" Grid.Column="1" Text="{l:Translate Key=Mod_Installed}" Style="{StaticResource SecondaryButton}" Clicked="OnTabInstalled" />
            <Button x:Name="TabFavorites" Grid.Column="2" Text="{l:Translate Key=Mod_Favorites}" Style="{StaticResource SecondaryButton}" Clicked="OnTabFavorites" />
            <Button x:Name="TabHealth" Grid.Column="3" Text="{l:Translate Key=Mod_Health}" Style="{StaticResource SecondaryButton}" Clicked="OnTabHealth" />
        </Grid>

        <!--  Tab content area  -->
        <Grid Grid.Row="2" Padding="24,0,24,24">

            <!--  STORE TAB  -->
            <VerticalStackLayout x:Name="StoreView" IsVisible="True" Spacing="12">

                <!--  Search + filters  -->
                <Grid ColumnDefinitions="*,Auto" ColumnSpacing="8">
                    <Entry x:Name="SearchEntry" Grid.Column="0" Placeholder="{l:Translate Key=Mod_SearchPlaceholder}" ReturnCommand="{x:Null}" Completed="OnSearchSubmit" />
                    <Button Grid.Column="1" Text="{l:Translate Key=Search}" Clicked="OnSearchSubmit" />
                </Grid>

                <Grid ColumnDefinitions="*,*" ColumnSpacing="8">
                    <Picker x:Name="TagFilter" Grid.Column="0" Title="{l:Translate Key=Mod_FilterByTag}" SelectedIndexChanged="OnFilterChanged">
                        <Picker.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>All</x:String>
                                <x:String>vanilla</x:String>
                                <x:String>modded</x:String>
                                <x:String>melonloader</x:String>
                                <x:String>fmf</x:String>
                                <x:String>framework</x:String>
                            </x:Array>
                        </Picker.ItemsSource>
                    </Picker>
                    <Picker x:Name="SortPicker" Grid.Column="1" Title="{l:Translate Key=Mod_SortBy}" SelectedIndexChanged="OnFilterChanged">
                        <Picker.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>Last Updated</x:String>
                                <x:String>Newest</x:String>
                                <x:String>Top Rated</x:String>
                                <x:String>Trending</x:String>
                                <x:String>Most Subscribed</x:String>
                                <x:String>Title A-Z</x:String>
                            </x:Array>
                        </Picker.ItemsSource>
                    </Picker>
                </Grid>

                <Label x:Name="StoreStatusLabel" FontSize="11" TextColor="#5A9E96" />

                <CollectionView x:Name="StoreList" SelectionMode="None">
                    <CollectionView.ItemsLayout>
                        <GridItemsLayout Orientation="Vertical" Span="2" HorizontalItemSpacing="12" VerticalItemSpacing="12" />
                    </CollectionView.ItemsLayout>
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:WorkshopItemDetailVm">
                            <Border Padding="12" Margin="0,0,0,6" StrokeThickness="0" BackgroundColor="#001715">
                                <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="8" />
                                </Border.StrokeShape>
                                <Border.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnStoreItemTapped" />
                                </Border.GestureRecognizers>
                                <Grid ColumnDefinitions="56,*,Auto" ColumnSpacing="12">
                                    <Border Grid.Column="0" StrokeThickness="0" BackgroundColor="#001E1C"
                                        HeightRequest="56" WidthRequest="56">
                                        <Border.StrokeShape>
                                            <RoundRectangle CornerRadius="6" />
                                        </Border.StrokeShape>
                                        <Image Source="{Binding PreviewImageSource}" Aspect="AspectFill" />
                                    </Border>
                                    <VerticalStackLayout Grid.Column="1" Spacing="3" VerticalOptions="Center">
                                        <Label FontAttributes="Bold" FontSize="14" TextColor="#C0FCF6" LineBreakMode="TailTruncation" Text="{Binding Title}" />
                                        <HorizontalStackLayout Spacing="6">
                                            <Label FontSize="10" TextColor="{Binding SourceColor}" Text="{Binding SourceLabel}"
                                                BackgroundColor="#001E1C" Padding="5,1" />
                                            <Label FontSize="11" TextColor="#7FBFB8" Text="{Binding OwnerName}" />
                                        </HorizontalStackLayout>
                                        <HorizontalStackLayout Spacing="10">
                                            <Label FontSize="10" TextColor="#5A9E96" Text="{Binding NumSubscriptions, StringFormat='Subs: {0}'}" />
                                            <Label FontSize="10" TextColor="#5A9E96" Text="{Binding Score, StringFormat='Score: {0:P0}'}" />
                                        </HorizontalStackLayout>
                                        <Label
                                            FontSize="10"
                                            LineBreakMode="WordWrap"
                                            MaxLines="4"
                                            TextColor="#D7A23B"
                                            Text="{Binding DependencyHintCompact}"
                                            IsVisible="{Binding HasDependencyHints}" />
                                    </VerticalStackLayout>
                                    <VerticalStackLayout Grid.Column="2" VerticalOptions="Center" Spacing="4">
                                        <Button Text="{l:Translate Key=Mod_Subscribe}" Clicked="OnQuickSubscribe" Padding="10,4" FontSize="11" />
                                    </VerticalStackLayout>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

                <!--  Pagination  -->
                <HorizontalStackLayout x:Name="StorePagination" Spacing="8" HorizontalOptions="Center">
                    <Button x:Name="StorePrevBtn" Text="{l:Translate Key=Previous}" Style="{StaticResource SecondaryButton}" Clicked="OnStorePrev" IsEnabled="False" />
                    <Label x:Name="StorePageLabel" FontSize="12" TextColor="#7FBFB8" VerticalOptions="Center" />
                    <Button x:Name="StoreNextBtn" Text="{l:Translate Key=Next}" Style="{StaticResource SecondaryButton}" Clicked="OnStoreNext" IsEnabled="False" />
                </HorizontalStackLayout>
            </VerticalStackLayout>

            <!--  INSTALLED TAB  -->
            <VerticalStackLayout x:Name="InstalledView" IsVisible="False" Spacing="12">
                <Label x:Name="InstalledStatusLabel" FontSize="11" TextColor="#5A9E96" />
                <CollectionView x:Name="InstalledList" SelectionMode="None">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:WorkshopItemDetailVm">
                            <Border Padding="12" Margin="0,0,0,6" StrokeThickness="0" BackgroundColor="#001715">
                                <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="8" />
                                </Border.StrokeShape>
                                <Border.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnStoreItemTapped" />
                                </Border.GestureRecognizers>
                                <Grid ColumnDefinitions="56,*,Auto,Auto" ColumnSpacing="10">
                                    <Border Grid.Column="0" StrokeThickness="0" BackgroundColor="#001E1C"
                                        HeightRequest="56" WidthRequest="56">
                                        <Border.StrokeShape>
                                            <RoundRectangle CornerRadius="6" />
                                        </Border.StrokeShape>
                                        <Image Source="{Binding PreviewImageSource}" Aspect="AspectFill" />
                                    </Border>
                                    <VerticalStackLayout Grid.Column="1" Spacing="3" VerticalOptions="Center">
                                        <Label FontAttributes="Bold" FontSize="14" TextColor="#C0FCF6" LineBreakMode="TailTruncation" Text="{Binding Title}" />
                                        <HorizontalStackLayout Spacing="6">
                                            <Label FontSize="10" TextColor="{Binding SourceColor}" Text="{Binding SourceLabel}"
                                                BackgroundColor="#001E1C" Padding="5,1" />
                                            <Label FontSize="10" TextColor="#5A9E96" Text="{Binding Updated, StringFormat='Updated: {0:d}'}" />
                                        </HorizontalStackLayout>
                                    </VerticalStackLayout>
                                    <Label Grid.Column="2" FontSize="10" TextColor="#D7A23B" VerticalOptions="Center"
                                        Text="{Binding NeedsUpdate, StringFormat='Update: {0}'}" />
                                    <Button Grid.Column="3" Text="{l:Translate Key=Mod_Unsubscribe}" Clicked="OnQuickUnsubscribe"
                                        Style="{StaticResource SecondaryButton}" Padding="10,4" FontSize="11" VerticalOptions="Center" />
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <HorizontalStackLayout x:Name="InstalledPagination" Spacing="8" HorizontalOptions="Center">
                    <Button x:Name="InstalledPrevBtn" Text="{l:Translate Key=Previous}" Style="{StaticResource SecondaryButton}" Clicked="OnInstalledPrev" IsEnabled="False" />
                    <Label x:Name="InstalledPageLabel" FontSize="12" TextColor="#7FBFB8" VerticalOptions="Center" />
                    <Button x:Name="InstalledNextBtn" Text="{l:Translate Key=Next}" Style="{StaticResource SecondaryButton}" Clicked="OnInstalledNext" IsEnabled="False" />
                </HorizontalStackLayout>
            </VerticalStackLayout>

            <!--  FAVORITES TAB  -->
            <VerticalStackLayout x:Name="FavoritesView" IsVisible="False" Spacing="12">
                <Label x:Name="FavoritesStatusLabel" FontSize="11" TextColor="#5A9E96" />
                <CollectionView x:Name="FavoritesList" SelectionMode="None">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="models:WorkshopItemDetailVm">
                            <Border Padding="12" Margin="0,0,0,6" StrokeThickness="0" BackgroundColor="#001715">
                                <Border.StrokeShape>
                                    <RoundRectangle CornerRadius="8" />
                                </Border.StrokeShape>
                                <Border.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="OnStoreItemTapped" />
                                </Border.GestureRecognizers>
                                <Grid ColumnDefinitions="56,*,Auto" ColumnSpacing="10">
                                    <Border Grid.Column="0" StrokeThickness="0" BackgroundColor="#001E1C"
                                        HeightRequest="56" WidthRequest="56">
                                        <Border.StrokeShape>
                                            <RoundRectangle CornerRadius="6" />
                                        </Border.StrokeShape>
                                        <Image Source="{Binding PreviewImageSource}" Aspect="AspectFill" />
                                    </Border>
                                    <VerticalStackLayout Grid.Column="1" Spacing="3" VerticalOptions="Center">
                                        <Label FontAttributes="Bold" FontSize="14" TextColor="#C0FCF6" LineBreakMode="TailTruncation" Text="{Binding Title}" />
                                        <HorizontalStackLayout Spacing="6">
                                            <Label FontSize="10" TextColor="{Binding SourceColor}" Text="{Binding SourceLabel}"
                                                BackgroundColor="#001E1C" Padding="5,1" />
                                            <Label FontSize="11" TextColor="#7FBFB8" Text="{Binding OwnerName}" />
                                        </HorizontalStackLayout>
                                    </VerticalStackLayout>
                                    <Button Grid.Column="2" Text="{l:Translate Key=Mod_Unfavorite}" Clicked="OnQuickUnfavorite"
                                        Style="{StaticResource SecondaryButton}" Padding="10,4" FontSize="11" VerticalOptions="Center" />
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>
                <HorizontalStackLayout x:Name="FavoritesPagination" Spacing="8" HorizontalOptions="Center">
                    <Button x:Name="FavoritesPrevBtn" Text="{l:Translate Key=Previous}" Style="{StaticResource SecondaryButton}" Clicked="OnFavoritesPrev" IsEnabled="False" />
                    <Label x:Name="FavoritesPageLabel" FontSize="12" TextColor="#7FBFB8" VerticalOptions="Center" />
                    <Button x:Name="FavoritesNextBtn" Text="{l:Translate Key=Next}" Style="{StaticResource SecondaryButton}" Clicked="OnFavoritesNext" IsEnabled="False" />
                </HorizontalStackLayout>
            </VerticalStackLayout>

            <!--  HEALTH TAB  -->
            <ScrollView x:Name="HealthView" IsVisible="False">
                <VerticalStackLayout Spacing="16">

                    <!--  Dependency health  -->
                    <Border Padding="20" StrokeThickness="0" BackgroundColor="#001715">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="8" />
                        </Border.StrokeShape>
                        <VerticalStackLayout Spacing="12">
                            <Grid ColumnDefinitions="*,Auto">
                                <Label Grid.Column="0" Style="{StaticResource SectionTitle}" Text="{l:Translate Key=Mod_DependencyHealth}" VerticalOptions="Center" />
                                <Button Grid.Column="1" Clicked="OnRefreshChecks" Style="{StaticResource SecondaryButton}" Text="{l:Translate Key=Mod_Check}" VerticalOptions="Center" />
                            </Grid>
                            <CollectionView x:Name="ChecksList" SelectionMode="None">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="models:DependencyCheckResult">
                                        <Grid Padding="0,6" ColumnDefinitions="Auto,*,Auto" ColumnSpacing="12">
                                            <Ellipse Grid.Column="0" WidthRequest="10" HeightRequest="10" VerticalOptions="Center" />
                                            <VerticalStackLayout Grid.Column="1" Spacing="3">
                                                <Label FontAttributes="Bold" FontSize="13" TextColor="#C0FCF6" Text="{Binding Label}" />
                                                <Label FontSize="11" TextColor="#5A9E96" LineBreakMode="TailTruncation" MaxLines="2" Text="{Binding Detail}" />
                                            </VerticalStackLayout>
                                            <Button Grid.Column="2" Clicked="OnOpenFolder" CommandParameter="{Binding Path}"
                                                Style="{StaticResource TertiaryButton}" Text="{l:Translate Key=Open}" VerticalOptions="Center" />
                                        </Grid>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </VerticalStackLayout>
                    </Border>

                    <!--  MelonLoader  -->
                    <Border Padding="20" StrokeThickness="0" BackgroundColor="#001715">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="8" />
                        </Border.StrokeShape>
                        <VerticalStackLayout Spacing="10">
                            <Label Style="{StaticResource SectionTitle}" Text="{l:Translate Key=Mod_MelonLoader}" />
                            <Label x:Name="MelonStatusLabel" FontSize="12" TextColor="#7FBFB8" Text="{l:Translate Key=Mod_CheckingStatus}" />
                            <HorizontalStackLayout Spacing="8">
                                <Button Clicked="OnMelonLoaderDownload" Text="{l:Translate Key=Mod_DownloadPage}" />
                                <Button Clicked="OnOpenGameFolder" Style="{StaticResource SecondaryButton}" Text="{l:Translate Key=Mod_GameFolder}" />
                            </HorizontalStackLayout>
                        </VerticalStackLayout>
                    </Border>

                    <!--  Plugin channel  -->
                    <Border Padding="20" StrokeThickness="0" BackgroundColor="#001715">
                        <Border.StrokeShape>
                            <RoundRectangle CornerRadius="8" />
                        </Border.StrokeShape>
                        <VerticalStackLayout Spacing="10">
                            <Label Style="{StaticResource SectionTitle}" Text="{l:Translate Key=Mod_PluginChannel}" />
                            <HorizontalStackLayout Spacing="12" VerticalOptions="Center">
                                <Label FontSize="12" TextColor="#7FBFB8" Text="{l:Translate Key=Mod_Channel}" VerticalOptions="Center" />
                                <Picker x:Name="ChannelPicker" WidthRequest="200" SelectedIndexChanged="OnChannelChanged">
                                    <Picker.ItemsSource>
                                        <x:Array Type="{x:Type x:String}">
                                            <x:String>Stable</x:String>
                                            <x:String>Beta (experimental)</x:String>
                                        </x:Array>
                                    </Picker.ItemsSource>
                                </Picker>
                            </HorizontalStackLayout>
                            <Label x:Name="ChannelInfoLabel" FontSize="11" TextColor="#5A9E96" Text="Stable: official channel." />
                            <CollectionView x:Name="PluginsList" SelectionMode="None">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate x:DataType="models:PluginPackageInfo">
                                        <Grid Padding="8,6" ColumnDefinitions="*,Auto,Auto" ColumnSpacing="12" BackgroundColor="#001E1C" Margin="0,2">
                                            <Label Grid.Column="0" FontSize="13" TextColor="#C0FCF6" Text="{Binding PluginId}" VerticalOptions="Center" />
                                            <Label Grid.Column="1" FontSize="11" TextColor="#5A9E96" Text="{Binding Version}" VerticalOptions="Center" />
                                            <Label Grid.Column="2" FontSize="10" TextColor="#3ABFA8" Text="{Binding Channel}" VerticalOptions="Center" />
                                        </Grid>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>
                        </VerticalStackLayout>
                    </Border>

                </VerticalStackLayout>
            </ScrollView>

        </Grid>
    </Grid>

</ContentPage>