Update: Compatibility list

See merge request ryubing/ryujinx!29

assets/locales.json

@@ -1847,6 +1847,131 @@
         "zh_TW": "路徑"
       }
     },
+    {
+      "ID": "GameListSortStatusNameAscending",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "",
+        "el_GR": "Όνομα: A-Z",
+        "en_US": "Title: A-Z",
+        "es_ES": "Título: A-Z",
+        "fr_FR": "Titre : A-Z",
+        "he_IL": "",
+        "it_IT": "Titolo: A-Z",
+        "ja_JP": "タイトル：A-Z",
+        "ko_KR": "제목: A-Z",
+        "no_NO": "Tittel: A-Z",
+        "pl_PL": "Tytuł: A-Z",
+        "pt_BR": "Título: A-Z",
+        "ru_RU": "Название: А-Z",
+        "sv_SE": "Titel: A-Z",
+        "th_TH": "ชื่อเรื่อง: A-Z",
+        "tr_TR": "Başlık: A-Z",
+        "uk_UA": "Назва: A-Z",
+        "zh_CN": "标题：A-Z",
+        "zh_TW": "標題：A-Z"
+      }
+    },
+    {
+      "ID": "GameListSortStatusNameDescending",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "",
+        "el_GR": "Τίτλος: Z-A",
+        "en_US": "Title: Z-A",
+        "es_ES": "Título: Z-A",
+        "fr_FR": "Titre : Z-A",
+        "he_IL": "",
+        "it_IT": "Titolo: Z-A",
+        "ja_JP": "タイトル：Z-A",
+        "ko_KR": "제목: Z-A",
+        "no_NO": "Tittel: Z-A",
+        "pl_PL": "Tytuł: Z-A",
+        "pt_BR": "Título: Z-A",
+        "ru_RU": "Название: Z-A",
+        "sv_SE": "Titel: Z-A",
+        "th_TH": "ชื่อเรื่อง: Z-A",
+        "tr_TR": "Başlık: Z-A",
+        "uk_UA": "Назва: Z-A",
+        "zh_CN": "标题：Z-A",
+        "zh_TW": "標題：Z-A"
+      }
+    },
+    {
+      "ID": "GameListSortStatusDisable",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "Status: Deaktiviert",
+        "el_GR": "Κατάσταση: Απενεργοποιημένο",
+        "en_US": "Status: Disabled",
+        "es_ES": "Estado: Desactivado",
+        "fr_FR": "Statut : Désactivé",
+        "he_IL": "",
+        "it_IT": "Stato: Disabilitato",
+        "ja_JP": "ステータス：無効",
+        "ko_KR": "상태: 비활성화됨",
+        "no_NO": "Status: Deaktivert",
+        "pl_PL": "Status: Wyłączony",
+        "pt_BR": "Status: Desativado",
+        "ru_RU": "Статус: Отключено",
+        "sv_SE": "Status: Inaktiverad",
+        "th_TH": "",
+        "tr_TR": "Durum: Devre Dışı",
+        "uk_UA": "Статус: Вимкнено",
+        "zh_CN": "状态：禁用",
+        "zh_TW": "狀態：停用"
+      }
+    },
+    {
+      "ID": "GameListSortStatusAscending",
+      "Translations": {
+        "ar_SA": "الحالة: تصاعدي",
+        "de_DE": "Status: Aufsteigend",
+        "el_GR": "Κατάσταση: Αναγόμενη",
+        "en_US": "Status: Ascending",
+        "es_ES": "",
+        "fr_FR": "Statut : Croissant",
+        "he_IL": "סטטוס: עולה",
+        "it_IT": "Stato: Crescente",
+        "ja_JP": "ステータス：昇順",
+        "ko_KR": "상태: 오름차순",
+        "no_NO": "Status: Stigende",
+        "pl_PL": "Stan: Rosnący",
+        "pt_BR": "Status: Crescente",
+        "ru_RU": "Статус: По возрастанию",
+        "sv_SE": "Status: Stigande",
+        "th_TH": "สถานะ: เพิ่มขึ้น",
+        "tr_TR": "Durum: Artan",
+        "uk_UA": "Статус: Зростання",
+        "zh_CN": "状态：升序",
+        "zh_TW": "狀態：遞增"
+      }
+    },
+    {
+      "ID": "GameListSortStatusDescending",
+      "Translations": {
+        "ar_SA": "الحالة: تنازلي",
+        "de_DE": "Status: Absteigend",
+        "el_GR": "Κατάσταση: Καθοδική",
+        "en_US": "Status: Descending",
+        "es_ES": "",
+        "fr_FR": "Statut : Décroissant",
+        "he_IL": "סטטוס: יורד",
+        "it_IT": "Stato: Decrescente",
+        "ja_JP": "ステータス：降順",
+        "ko_KR": "상태: 내림차순",
+        "no_NO": "Status: Synkende",
+        "pl_PL": "Stan: Malejący",
+        "pt_BR": "Status: Decrescente",
+        "ru_RU": "Статус: По Убыванию",
+        "sv_SE": "Status: Fallande",
+        "th_TH": "สถานะ: ลดลง",
+        "tr_TR": "Durum: Azalan",
+        "uk_UA": "Статус: Зменшення",
+        "zh_CN": "状态：降序",
+        "zh_TW": "狀態：遞減"
+      }
+    },
     {
       "ID": "GameListHeaderCompatibilityStatus",
       "Translations": {
@@ -24372,6 +24497,106 @@
         "zh_TW": "開啟相容性列表"
       }
     },
+    {
+      "ID": "CompatibilityListGamesAndApplications",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "Spiele & Anwendungen",
+        "el_GR": "Παιχνίδια και Εφαρμογές",
+        "en_US": "Games & Applications",
+        "es_ES": "Juegos y Aplicaciones",
+        "fr_FR": "Jeux et Applications",
+        "he_IL": "משחקים ואפליקציות",
+        "it_IT": "Giochi e Applicazioni",
+        "ja_JP": "ゲームとアプリケーション",
+        "ko_KR": "게임 및 애플리케이션",
+        "no_NO": "Spill og Applikasjoner",
+        "pl_PL": "Gry i Aplikacje",
+        "pt_BR": "Jogos e Aplicativos",
+        "ru_RU": "Игры и Приложения",
+        "sv_SE": "Spel och Applikationer",
+        "th_TH": "",
+        "tr_TR": "Oyunlar ve Uygulamalar",
+        "uk_UA": "Ігри та Додатки",
+        "zh_CN": "游戏和应用程序",
+        "zh_TW": "遊戲與應用程式"
+      }
+    },
+    {
+      "ID": "CompatibilityListStatus",
+      "Translations": {
+        "ar_SA": "الحالة",
+        "de_DE": "",
+        "el_GR": "Κατάσταση",
+        "en_US": "Status",
+        "es_ES": "Estado",
+        "fr_FR": "Statut",
+        "he_IL": "מצב",
+        "it_IT": "Stato",
+        "ja_JP": "状況",
+        "ko_KR": "상태",
+        "no_NO": "",
+        "pl_PL": "Stan",
+        "pt_BR": "Estado",
+        "ru_RU": "Статус",
+        "sv_SE": "",
+        "th_TH": "สถานะ",
+        "tr_TR": "Durum",
+        "uk_UA": "Статус",
+        "zh_CN": "状态",
+        "zh_TW": "狀態"
+      }
+    },
+    {
+      "ID": "CompatibilityListDescription",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "Probleme und Merkmale",
+        "el_GR": "Προβλήματα και Χαρακτηριστικά",
+        "en_US": "Issues & Features",
+        "es_ES": "Problemas y Características",
+        "fr_FR": "Problèmes et Caractéristiques",
+        "he_IL": "",
+        "it_IT": "Problemi e Caratteristiche",
+        "ja_JP": "問題点と特徴",
+        "ko_KR": "문제점 및 특징",
+        "no_NO": "Problemer og Egenskaper",
+        "pl_PL": "Problemy i Cechy",
+        "pt_BR": "Problemas e Características",
+        "ru_RU": "Проблемы и Особенности",
+        "sv_SE": "Problem och Egenskaper",
+        "th_TH": "",
+        "tr_TR": "Sorunlar ve Özellikler",
+        "uk_UA": "Проблеми та Особливості",
+        "zh_CN": "问题和特性",
+        "zh_TW": "問題與特性"
+      }
+    },
+    {
+      "ID": "CompatibilityListInfo",
+      "Translations": {
+        "ar_SA": "",
+        "de_DE": "",
+        "el_GR": "Πληροφορίες",
+        "en_US": "Info",
+        "es_ES": "Información",
+        "fr_FR": "",
+        "he_IL": "מידע",
+        "it_IT": "",
+        "ja_JP": "情報",
+        "ko_KR": "정보",
+        "no_NO": "",
+        "pl_PL": "Informacja",
+        "pt_BR": "",
+        "ru_RU": "Инфо",
+        "sv_SE": "",
+        "th_TH": "",
+        "tr_TR": "Bilgi",
+        "uk_UA": "Інфо",
+        "zh_CN": "信息",
+        "zh_TW": "資訊"
+      }
+    },
     {
       "ID": "CompatibilityListOnlyShowOwnedGames",
       "Translations": {

src/Ryujinx/Assets/Styles/Styles.xaml

@@ -372,6 +372,12 @@
         <Setter Property="BorderThickness"
                 Value="2"/>
     </Style>
+    <Style Selector="Border.listbox-item-style">
+        <Setter Property="Padding" Value="10" />
+        <Setter Property="Margin" Value="5,0,5,0" />
+        <Setter Property="CornerRadius" Value="5" />
+        <Setter Property="Background" Value="{DynamicResource AppListBackgroundColor}" />
+    </Style>
     <Style Selector="ListBox ListBoxItem:selected /template/ ContentPresenter">
         <Setter Property="Background"
                 Value="{DynamicResource AppListBackgroundColor}" />

src/Ryujinx/UI/ViewModels/CompatibilityViewModel.cs

@@ -4,6 +4,7 @@ using Ryujinx.Ava.Systems.AppLibrary;
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using Ryujinx.Ava.Common.Locale;
 
 namespace Ryujinx.Ava.UI.ViewModels
 {
@@ -11,15 +12,37 @@ namespace Ryujinx.Ava.UI.ViewModels
     {
         private readonly ApplicationLibrary _appLibrary;
 
+        private (int Status, int Name) _sorting;
+
+        public bool IsSortedByTitle => true;
+        public bool IsSortedByStatus => true;
+
+        // Avalonia takes names of status from these variables
+        public LocaleKeys IsStringPlayable => LocaleKeys.CompatibilityListPlayable;
+        public LocaleKeys IsStringInGame => LocaleKeys.CompatibilityListIngame;
+        public LocaleKeys IsStringMenus => LocaleKeys.CompatibilityListMenus;
+        public LocaleKeys IsStringBoots => LocaleKeys.CompatibilityListBoots;
+        public LocaleKeys IsStringNothing => LocaleKeys.CompatibilityListNothing;
+
+        public string PlayableInfoText { get; set; }
+        public string InGameInfoText { get; set; }
+        public string MenusInfoText { get; set; }
+        public string BootsInfoText { get; set; }
+        public string NothingInfoText { get; set; }
+
+
         private IEnumerable<CompatibilityEntry> _currentEntries = CompatibilityDatabase.Entries;
+
         private string[] _ownedGameTitleIds = [];
 
+        private Func<CompatibilityEntry, object> _sortKeySelector = x => x.GameName; // Default sort by GameName
+
         public IEnumerable<CompatibilityEntry> CurrentEntries => OnlyShowOwnedGames
             ? _currentEntries.Where(x =>
                 x.TitleId.Check(tid => _ownedGameTitleIds.ContainsIgnoreCase(tid)))
             : _currentEntries;
 
-        public CompatibilityViewModel() { }
+        public CompatibilityViewModel() {}
 
         private void AppCountUpdated(object _, ApplicationCountUpdatedEventArgs __)
             => _ownedGameTitleIds = _appLibrary.Applications.Keys.Select(x => x.ToString("X16")).ToArray();
@@ -27,19 +50,29 @@ namespace Ryujinx.Ava.UI.ViewModels
         public CompatibilityViewModel(ApplicationLibrary appLibrary)
         {
             _appLibrary = appLibrary;
-
             AppCountUpdated(null, null);
-
+            CountByStatus();
             _appLibrary.ApplicationCountUpdated += AppCountUpdated;
         }
 
+        public void CountByStatus()
+        {
+            PlayableInfoText =  LocaleManager.Instance[LocaleKeys.CompatibilityListPlayable]  + ": " +   CurrentEntries.Count(x => x.Status == LocaleKeys.CompatibilityListPlayable);
+            InGameInfoText =    LocaleManager.Instance[LocaleKeys.CompatibilityListIngame]    + ": " +   CurrentEntries.Count(x => x.Status == LocaleKeys.CompatibilityListIngame);
+            MenusInfoText =     LocaleManager.Instance[LocaleKeys.CompatibilityListMenus]     + ": " +   CurrentEntries.Count(x => x.Status == LocaleKeys.CompatibilityListMenus);
+            BootsInfoText =     LocaleManager.Instance[LocaleKeys.CompatibilityListBoots]     + ": " +   CurrentEntries.Count(x => x.Status == LocaleKeys.CompatibilityListBoots);
+            NothingInfoText =   LocaleManager.Instance[LocaleKeys.CompatibilityListNothing]   + ": " +   CurrentEntries.Count(x => x.Status == LocaleKeys.CompatibilityListNothing);
+
+            _onlyShowOwnedGames = true;
+        }
+
         void IDisposable.Dispose()
         {
             GC.SuppressFinalize(this);
             _appLibrary.ApplicationCountUpdated -= AppCountUpdated;
         }
 
-        private bool _onlyShowOwnedGames = true;
+        private bool _onlyShowOwnedGames;
 
         public bool OnlyShowOwnedGames
         {
@@ -54,17 +87,37 @@ namespace Ryujinx.Ava.UI.ViewModels
             }
         }
 
+
+        public void NameSorting(int nameSort = 0)
+        {
+            _sorting.Name = nameSort;
+            SortApply();
+            OnPropertyChanged();
+            OnPropertyChanged(nameof(SortName));
+        }
+
+        public void StatusSorting(int statusSort = 0)
+        {
+            _sorting.Status = statusSort;
+            SortApply();
+            OnPropertyChanged();
+            OnPropertyChanged(nameof(SortName));
+        }
+
         public void Search(string searchTerm)
         {
             if (string.IsNullOrEmpty(searchTerm))
             {
                 SetEntries(CompatibilityDatabase.Entries);
+                SortApply();
                 return;
             }
 
             SetEntries(CompatibilityDatabase.Entries.Where(x =>
                 x.GameName.ContainsIgnoreCase(searchTerm)
                 || x.TitleId.Check(tid => tid.ContainsIgnoreCase(searchTerm))));
+
+            SortApply();
         }
 
         private void SetEntries(IEnumerable<CompatibilityEntry> entries)
@@ -72,5 +125,43 @@ namespace Ryujinx.Ava.UI.ViewModels
             _currentEntries = entries.ToList();
             OnPropertyChanged(nameof(CurrentEntries));
         }
+
+        private void SortApply()
+        {
+            try
+            {
+                _currentEntries = (_sorting switch
+                {
+                    (0, 0) => _currentEntries.OrderBy(x => _sortKeySelector(x) ?? string.Empty), // A - Z
+                    (0, 1) => _currentEntries.OrderByDescending(x => _sortKeySelector(x) ?? string.Empty), // Z - A
+                    (1, 0) => _currentEntries.OrderBy(x => x.Status).ThenBy(x => x.GameName, StringComparer.OrdinalIgnoreCase), // Status Playable - Nothing, then A - Z
+                    (1, 1) => _currentEntries.OrderBy(x => x.Status).ThenByDescending(x => x.GameName, StringComparer.OrdinalIgnoreCase), // Status Nothing - Playable, then A - Z
+                    (2, 0) => _currentEntries.OrderByDescending(x => x.Status).ThenBy(x => x.GameName, StringComparer.OrdinalIgnoreCase), // Status Playable - Nothing, then Z - A
+                    (2, 1) => _currentEntries.OrderByDescending(x => x.Status).ThenByDescending(x => x.GameName, StringComparer.OrdinalIgnoreCase), // Status Nothing - Playable, then Z - A
+                    _ => _currentEntries.OrderBy(x => x.Status)
+                }).ToList();
+            }
+            catch (Exception)
+            {
+
+            }
+
+            OnPropertyChanged();
+            OnPropertyChanged(nameof(CurrentEntries));
+        }
+
+        public string SortName
+        {
+            get
+            {
+                return (_sorting.Name) switch
+                {
+                    (0) => LocaleManager.Instance[LocaleKeys.GameListSortStatusNameAscending],
+                    (1) => LocaleManager.Instance[LocaleKeys.GameListSortStatusNameDescending],
+                    _ => string.Empty,
+                };
+            }
+        }
+
     }
 }

src/Ryujinx/UI/Windows/CompatibilityListWindow.axaml

@@ -1,4 +1,4 @@
-<window:StyleableAppWindow xmlns="https://github.com/avaloniaui"
+<window:StyleableAppWindow xmlns="https://github.com/avaloniaui"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:helpers="using:Ryujinx.Ava.UI.Helpers"
@@ -17,65 +17,277 @@
     <window:StyleableAppWindow.DataContext>
         <viewModels:CompatibilityViewModel />
     </window:StyleableAppWindow.DataContext>
-    <Grid RowDefinitions="Auto,*">
+    <Grid RowDefinitions="Auto,Auto,*">
-        <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto,Auto" Name="FlushControls">
+        
-            <controls:RyujinxLogo 
+        <!-- UI FlushControls -->
+        <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto,Auto,Auto" Name="FlushControls">
+            <controls:RyujinxLogo
                 Grid.Column="0"
                 Margin="15, 0, 7, 0"
                 ToolTip.Tip="{ext:WindowTitle CompatibilityListTitle, False}"/>
             <TextBox Name="SearchBoxFlush" Grid.Column="1" Margin="0, 5, 0, 5" HorizontalAlignment="Stretch" Watermark="{ext:Locale CompatibilityListSearchBoxWatermarkWithCount}" TextChanged="TextBox_OnTextChanged" />
+            <StackPanel Grid.Column="2" Orientation="Horizontal"  Margin="10, 5, 0, 5">
+                <TextBlock
+                        Margin="10,0"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        DockPanel.Dock="Right"
+                        Text="{ext:Locale CommonSort}" />
+                <DropDownButton
+                        Width="150"
+                        HorizontalAlignment="Right"
+                        VerticalAlignment="Center"
+                        Content="{Binding SortName}"
+                        DockPanel.Dock="Right">
+                    <DropDownButton.Flyout>
+                        <Flyout Placement="Bottom">
+                            <StackPanel
+                                Margin="0"
+                                HorizontalAlignment="Stretch"
+                                Orientation="Vertical">
+                                <StackPanel>
+                                    <RadioButton
+                                        Checked="Sort_Name_Checked"
+                                        Content="{ext:Locale GameListSortStatusNameAscending}"
+                                        GroupName="Sort"
+                                        IsChecked="{Binding IsSortedByTitle, Mode=OneTime}"
+                                        Tag="0" />
+                                    <RadioButton
+                                        Checked="Sort_Name_Checked"
+                                        Content="{ext:Locale GameListSortStatusNameDescending}"
+                                        GroupName="Sort"
+                                        Tag="1" />
+                                </StackPanel>
+                                <Border
+                                    Width="60"
+                                    Height="2"
+                                    Margin="5"
+                                    HorizontalAlignment="Stretch"
+                                    BorderBrush="White"
+                                    BorderThickness="0,1,0,0">
+                                    <Separator Height="0" HorizontalAlignment="Stretch" />
+                                </Border>
+                                <RadioButton
+                                    Checked="Sort_Status_Checked"
+                                    Content="{ext:Locale GameListSortStatusDisable}"
+                                    GroupName="Order"
+                                    IsChecked="{Binding IsSortedByStatus, Mode=OneTime}"
+                                    Tag="0" />
+                                <RadioButton
+                                    Checked="Sort_Status_Checked"
+                                    Content="{ext:Locale GameListSortStatusAscending}"
+                                    GroupName="Order"
+                                    Tag="1" />
+                                <RadioButton
+                                    Checked="Sort_Status_Checked"
+                                    Content="{ext:Locale GameListSortStatusDescending}"
+                                    GroupName="Order"
+                                    Tag="2" />
+                            </StackPanel>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </StackPanel>
+            <CheckBox Grid.Column="3" Margin="7, 0, 0, 0" IsChecked="{Binding OnlyShowOwnedGames}" />
+            <TextBlock Grid.Column="4" Padding="0, 0, 138, 0" Margin="-10, 0, 18, 0" Text="{ext:Locale CompatibilityListOnlyShowOwnedGames}" />
+        </Grid>
+
+        <!-- UI NormalControls -->
+        <Grid Grid.Row="0" ColumnDefinitions="*,Auto,Auto,Auto" Name="NormalControls">
+            <TextBox Name="SearchBoxNormal" Grid.Column="0" Margin="15, 0, 0, 5" HorizontalAlignment="Stretch" Watermark="{ext:Locale CompatibilityListSearchBoxWatermarkWithCount}" TextChanged="TextBox_OnTextChanged" />
+            <StackPanel Grid.Column="1" Orientation="Horizontal"  Margin="10, 0, 5, 5">
+                <TextBlock
+                    Margin="10,0"
+                    HorizontalAlignment="Right"
+                    VerticalAlignment="Center"
+                    DockPanel.Dock="Right"
+                    Text="{ext:Locale CommonSort}" />
+                <DropDownButton
+                    Width="150"
+                    HorizontalAlignment="Right"
+                    VerticalAlignment="Center"
+                    Content="{Binding SortName}"
+                    DockPanel.Dock="Right">
+                    <DropDownButton.Flyout>
+                        <Flyout Placement="Bottom">
+                            <StackPanel
+                                Margin="0"
+                                HorizontalAlignment="Stretch"
+                                Orientation="Vertical">
+                                <StackPanel>
+                                    <RadioButton
+                                        Checked="Sort_Name_Checked"
+                                        Content="{ext:Locale GameListSortStatusNameAscending}"
+                                        GroupName="Sort"
+                                        IsChecked="{Binding IsSortedByTitle, Mode=OneTime}"
+                                        Tag="0" />
+                                    <RadioButton
+                                        Checked="Sort_Name_Checked"
+                                        Content="{ext:Locale GameListSortStatusNameDescending}"
+                                        GroupName="Sort"
+                                        Tag="1" />
+                                </StackPanel>
+                                <Border
+                                    Width="60"
+                                    Height="2"
+                                    Margin="5"
+                                    HorizontalAlignment="Stretch"
+                                    BorderBrush="White"
+                                    BorderThickness="0,1,0,0">
+                                    <Separator Height="0" HorizontalAlignment="Stretch" />
+                                </Border>
+                                <RadioButton
+                                    Checked="Sort_Status_Checked"
+                                    Content="{ext:Locale GameListSortStatusDisable}"
+                                    GroupName="Order"
+                                    IsChecked="{Binding IsSortedByStatus, Mode=OneTime}"
+                                    Tag="0" />
+                                <RadioButton
+                                    Checked="Sort_Status_Checked"
+                                    Content="{ext:Locale GameListSortStatusAscending}"
+                                    GroupName="Order"
+                                    Tag="1" />
+                                <RadioButton
+                                    Checked="Sort_Status_Checked"
+                                    Content="{ext:Locale GameListSortStatusDescending}"
+                                    GroupName="Order"
+                                    Tag="2" />
+                            </StackPanel>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </StackPanel>
             <CheckBox Grid.Column="2" Margin="7, 0, 0, 0" IsChecked="{Binding OnlyShowOwnedGames}" />
-            <TextBlock Grid.Column="3" Padding="0, 0, 138, 0" Margin="-10, 0, 18, 0" Text="{ext:Locale CompatibilityListOnlyShowOwnedGames}" />
+            <TextBlock Grid.Column="3" Padding="0, 0, 1, 0" Margin="-10, 0, 18, 0" Text="{ext:Locale CompatibilityListOnlyShowOwnedGames}" />
         </Grid>
-        <Grid Grid.Row="0" ColumnDefinitions="*,Auto,Auto" Name="NormalControls">
+
-            <TextBox Name="SearchBoxNormal" Grid.Column="0" Margin="15, 0, 0, 5" HorizontalAlignment="Stretch" Watermark="{ext:Locale CompatibilityListSearchBoxWatermark}" TextChanged="TextBox_OnTextChanged" />
+        <!-- Description Field Above ScrollViewer -->
-            <CheckBox Grid.Column="1" Margin="7, 0, 0, 0" IsChecked="{Binding OnlyShowOwnedGames}" />
+        <Grid Grid.Row="1" ColumnDefinitions="*,Auto" Margin="10, 5, 10, 5">
-            <TextBlock Grid.Column="2" Padding="0, 0, 1, 0" Margin="-10, 0, 18, 0" Text="{ext:Locale CompatibilityListOnlyShowOwnedGames}" />
+            <Grid Grid.Column="0">
+                <Border Classes="listbox-item-style">
+                    <Grid MinWidth="800"
+                          ColumnDefinitions="Auto,Auto,Auto,*,Auto"
+                          Background="Transparent">
+                        <TextBlock Grid.Column="0"
+                                   Text="{ext:Locale CompatibilityListGamesAndApplications}"
+                                   FontWeight="Bold"
+                                   Width="525"
+                                   VerticalAlignment="Center"
+                                   HorizontalAlignment="Center"
+                                   TextWrapping="Wrap" />
+                        <TextBlock Grid.Column="1"
+                                   Text="ID"
+                                   FontWeight="Bold"
+                                   Width="135"
+                                   Padding="7, 0, 0, 0"
+                                   VerticalAlignment="Center"
+                                   HorizontalAlignment="Center"
+                                   TextWrapping="Wrap" />
+                        <TextBlock Grid.Column="2"
+                                   Padding="7, 0"
+                                   Text="{ext:Locale CompatibilityListStatus}"
+                                   FontWeight="Bold"
+                                   Width="100"
+                                   VerticalAlignment="Center"
+                                   HorizontalAlignment="Center"
+                                   TextWrapping="NoWrap" />
+                        <TextBlock Grid.Column="3"
+                                   Text="{ext:Locale CompatibilityListDescription}"
+                                   FontWeight="Bold"
+                                   VerticalAlignment="Center"
+                                   HorizontalAlignment="Left"
+                                   TextWrapping="WrapWithOverflow" />
+                    </Grid>
+                </Border>
+            </Grid>
+            <Grid Grid.Column="1">
+                <DropDownButton 
+                    Width="80"
+                    Height="35"
+                    HorizontalAlignment="Right"
+                    VerticalAlignment="Center"
+                    Content="Info"
+                    DockPanel.Dock="Right">
+                    <DropDownButton.Flyout>
+                        <Flyout Placement="Bottom">
+                            <StackPanel>
+                                <TextBlock
+                                    HorizontalAlignment="Left"
+                                    Padding="0,5"
+                                    Text="Compatibility verified:" />
+                                <TextBlock
+                                    HorizontalAlignment="Left"
+                                    Foreground="{Binding IsStringPlayable, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
+                                    Text="{Binding PlayableInfoText }" />
+                                <TextBlock
+                                    HorizontalAlignment="Left"
+                                    Foreground="{Binding IsStringInGame, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
+                                    Text="{Binding InGameInfoText }" />
+                                <TextBlock
+                                    HorizontalAlignment="Left"
+                                    Foreground="{Binding IsStringMenus, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
+                                    Text="{Binding MenusInfoText }" />
+                                <TextBlock
+                                    HorizontalAlignment="Left"
+                                    Foreground="{Binding IsStringBoots, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
+                                    Text="{Binding BootsInfoText  }" />
+                                <TextBlock
+                                    HorizontalAlignment="Left"
+                                    Foreground="{Binding IsStringNothing, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
+                                    Text="{Binding NothingInfoText  }" />
+                            </StackPanel>
+                        </Flyout>
+                    </DropDownButton.Flyout>
+                </DropDownButton>
+            </Grid>
+            
         </Grid>
-        <ScrollViewer Grid.Row="1">
+
-                <ListBox Margin="12, 0, 13, 0"
+        <!-- List of compatible games  -->
-                         Background="Transparent"
+        <ScrollViewer Grid.Row="2">
-                         ItemsSource="{Binding CurrentEntries}">
+            <ListBox Margin="12, 0, 13, 0"
-                    <ListBox.ItemTemplate>
+                     Background="Transparent"
-                        <DataTemplate DataType="{x:Type systems:CompatibilityEntry}">
+                     ItemsSource="{Binding CurrentEntries}">
-                            <Grid MinWidth="800"
+                <ListBox.ItemTemplate>
-                                  Margin="10"
+                    <DataTemplate DataType="{x:Type systems:CompatibilityEntry}">
-                                  ColumnDefinitions="Auto,Auto,Auto,*"
+                        <Grid MinWidth="800"
-                                  Background="Transparent"
+                              Margin="10"
-                                  ToolTip.Tip="{Binding  LocalizedLastUpdated}">
+                              ColumnDefinitions="Auto,Auto,Auto,*"
-                                <TextBlock Grid.Column="0"
+                              Background="Transparent"
-                                           Text="{Binding GameName}"
+                              ToolTip.Tip="{Binding  LocalizedLastUpdated}">
-                                           Width="525"
+                            <TextBlock Grid.Column="0"
-                                           VerticalAlignment="Center"
+                                       Text="{Binding GameName}"
-                                           HorizontalAlignment="Center"
+                                       Width="525"
-                                           TextWrapping="Wrap" />
+                                       VerticalAlignment="Center"
-                                <TextBlock Grid.Column="1"
+                                       HorizontalAlignment="Center"
-                                           Width="135"
+                                       TextWrapping="Wrap" />
-                                           Padding="7, 0, 0, 0"
+                            <TextBlock Grid.Column="1"
-                                           FontFamily="{StaticResource JetBrainsMono}"
+                                       Width="135"
-                                           Text="{Binding FormattedTitleId}"
+                                       Padding="7, 0, 0, 0"
-                                           VerticalAlignment="Center"
+                                       FontFamily="{StaticResource JetBrainsMono}"
-                                           HorizontalAlignment="Center"
+                                       Text="{Binding FormattedTitleId}"
-                                           TextWrapping="Wrap" />
+                                       VerticalAlignment="Center"
-                                <TextBlock Grid.Column="2"
+                                       HorizontalAlignment="Center"
-                                           Padding="7, 0"
+                                       TextWrapping="Wrap" />
-                                           Text="{Binding LocalizedStatus}"
+                            <TextBlock Grid.Column="2"
-                                           Width="90"
+                                       Padding="7, 0"
-                                           Background="Transparent"
+                                       Text="{Binding LocalizedStatus}"
-                                           ToolTip.Tip="{Binding LocalizedStatusDescription}"
+                                       Width="100"
-                                           Foreground="{Binding Status, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
+                                       Background="Transparent"
-                                           VerticalAlignment="Center"
+                                       ToolTip.Tip="{Binding LocalizedStatusDescription}"
-                                           HorizontalAlignment="Center"
+                                       Foreground="{Binding Status, Converter={x:Static helpers:PlayabilityStatusConverter.Shared}}"
-                                           TextWrapping="NoWrap" />
+                                       VerticalAlignment="Center"
-                                <TextBlock Grid.Column="3"
+                                       HorizontalAlignment="Center"
-                                           Text="{Binding FormattedIssueLabels}"
+                                       TextWrapping="NoWrap" />
-                                           VerticalAlignment="Center"
+                            <TextBlock Grid.Column="3"
-                                           HorizontalAlignment="Left"
+                                       Text="{Binding FormattedIssueLabels}"
-                                           TextWrapping="WrapWithOverflow" />
+                                       VerticalAlignment="Center"
-                            </Grid>
+                                       HorizontalAlignment="Left"
-                        </DataTemplate>
+                                       TextWrapping="WrapWithOverflow" />
-                    </ListBox.ItemTemplate>
+                        </Grid>
-                </ListBox>
+                    </DataTemplate>
+                </ListBox.ItemTemplate>
+            </ListBox>
         </ScrollViewer>
         <Grid></Grid>
     </Grid>

src/Ryujinx/UI/Windows/CompatibilityListWindow.axaml.cs

@@ -1,5 +1,6 @@
 using Avalonia.Controls;
 using Ryujinx.Ava.Common.Locale;
+using Avalonia.Interactivity;
 using Ryujinx.Ava.Systems.Configuration;
 using Ryujinx.Ava.UI.ViewModels;
 using System.Threading.Tasks;
@@ -42,5 +43,28 @@ namespace Ryujinx.Ava.UI.Windows
 
             cvm.Search(searchBox.Text);
         }
+
+        public void Sort_Name_Checked(object sender, RoutedEventArgs args)
+        {
+            if (sender is RadioButton { Tag: string sortStrategy })
+            {
+                if (DataContext is not CompatibilityViewModel cvm)
+                    return;
+
+                 cvm.NameSorting(int.Parse(sortStrategy));
+            }
+        }
+
+        public void Sort_Status_Checked(object sender, RoutedEventArgs args)
+        {
+            if (sender is RadioButton { Tag: string sortStrategy })
+            {
+                if (DataContext is not CompatibilityViewModel cvm)
+                    return;
+
+                cvm.StatusSorting(int.Parse(sortStrategy));
+            }
+        }
+
     }
 }