feat(ui): improve Amiibo selection UX (ryubing/ryujinx!121)

See merge request ryubing/ryujinx!121

assets/locales.json

@@ -15545,26 +15545,26 @@
     {
       "ID": "AmiiboOptionsShowAllLabel",
       "Translations": {
-        "ar_SA": "إظهار كل أميبو",
+        "ar_SA": "",
-        "de_DE": "Zeige alle Amiibos",
+        "de_DE": "",
-        "el_GR": "Εμφάνιση όλων των Amiibo",
+        "el_GR": "",
-        "en_US": "Show All Amiibo",
+        "en_US": "Show incompatible Amiibo for this game",
-        "es_ES": "Mostrar todos los Amiibo",
+        "es_ES": "Mostrar Amiibo incompatibles con este juego",
-        "fr_FR": "Afficher Tous les Amiibo",
+        "fr_FR": "",
-        "he_IL": "הצג את כל האמיבואים",
+        "he_IL": "",
-        "it_IT": "Mostra tutti gli amiibo",
+        "it_IT": "",
-        "ja_JP": "すべての Amiibo を表示",
+        "ja_JP": "",
-        "ko_KR": "모든 Amiibo 표시",
+        "ko_KR": "",
-        "no_NO": "Vis alle Amiibo",
+        "no_NO": "",
-        "pl_PL": "Pokaż Wszystkie Amiibo",
+        "pl_PL": "",
-        "pt_BR": "Exibir Todos os Amiibos",
+        "pt_BR": "",
-        "ru_RU": "Показать все Amiibo",
+        "ru_RU": "",
-        "sv_SE": "Visa alla Amiibo",
+        "sv_SE": "",
-        "th_TH": "แสดง Amiibo ทั้งหมด",
+        "th_TH": "",
-        "tr_TR": "Tüm Amiibo'ları Göster",
+        "tr_TR": "",
-        "uk_UA": "Показати всі Amiibo",
+        "uk_UA": "",
-        "zh_CN": "显示所有 Amiibo",
+        "zh_CN": "",
-        "zh_TW": "顯示所有 Amiibo"
+        "zh_TW": ""
       }
     },
     {

src/Ryujinx/UI/ViewModels/AmiiboWindowViewModel.cs

@@ -342,14 +342,24 @@ namespace Ryujinx.Ava.UI.ViewModels
         {
             _amiibos.Clear();
 
+            List<AmiiboApi> amiiboSortedList;
+
+            // If no series selected, just display all available amiibos
             if (_seriesSelectedIndex < 0)
             {
-                return;
+                amiiboSortedList = _amiiboList
+                    .OrderBy(amiibo => amiibo.AmiiboSeries)
+                    .ThenBy(x => x.Name)
+                    .ToList();
+            }
+            else
+            {
+                amiiboSortedList = _amiiboList
+                    .Where(amiibo => amiibo.AmiiboSeries == _amiiboSeries[SeriesSelectedIndex])
+                    .OrderBy(amiibo => amiibo.Name).ToList();
             }
 
-            List<AmiiboApi> amiiboSortedList = _amiiboList
+            
-                .Where(amiibo => amiibo.AmiiboSeries == _amiiboSeries[SeriesSelectedIndex])
-                .OrderBy(amiibo => amiibo.Name).ToList();
 
             for (int i = 0; i < amiiboSortedList.Count; i++)
             {
@@ -386,7 +396,7 @@ namespace Ryujinx.Ava.UI.ViewModels
 
             Usage = string.Empty;
 
-            if (_amiiboSelectedIndex < 0)
+            if (_amiiboSelectedIndex < 0 || _amiibos.Count < 1)
             {
                 return;
             }

src/Ryujinx/UI/Windows/AmiiboWindow.axaml

@@ -31,15 +31,11 @@
                 VerticalAlignment="Top"
                 Margin="8, 8, 7, 0"
                 ToolTip.Tip="{ext:WindowTitle Amiibo}" />
-            <StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0, 0, 0, 100">
+            <StackPanel Grid.Column="1" Orientation="Horizontal" Margin="0, 0, 0, 20">
                 <StackPanel Spacing="10" Orientation="Horizontal" HorizontalAlignment="Left">
                     <TextBlock VerticalAlignment="Center" Text="{ext:Locale AmiiboSeriesLabel}" />
                     <ComboBox Margin="0, 8, 0, 0" SelectedIndex="{Binding SeriesSelectedIndex}" ItemsSource="{Binding AmiiboSeries}" MinWidth="100" />
                 </StackPanel>
-                <StackPanel Margin="15, 0, 0, 0" Spacing="10" Orientation="Horizontal" >
-                    <TextBlock VerticalAlignment="Center" Text="{ext:Locale AmiiboCharacterLabel}" />
-                    <ComboBox Margin="0, 8, 0, 0" SelectedIndex="{Binding AmiiboSelectedIndex}" MinWidth="100" ItemsSource="{Binding AmiiboList}" />
-                </StackPanel>
             </StackPanel>
         </Grid>
         <Grid Name="NormalControls" ColumnDefinitions="*,*" Grid.Row="1" HorizontalAlignment="Stretch" >
@@ -47,19 +43,31 @@
                 <TextBlock VerticalAlignment="Center" Text="{ext:Locale AmiiboSeriesLabel}" />
                 <ComboBox SelectedIndex="{Binding SeriesSelectedIndex}" ItemsSource="{Binding AmiiboSeries}" MinWidth="100" />
             </StackPanel>
-            <StackPanel Spacing="10" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
-                <TextBlock VerticalAlignment="Center" Text="{ext:Locale AmiiboCharacterLabel}" />
-                <ComboBox SelectedIndex="{Binding AmiiboSelectedIndex}" MinWidth="100" ItemsSource="{Binding AmiiboList}" />
-            </StackPanel>
         </Grid>
-        <StackPanel Margin="20" Grid.Row="2">
+        <DockPanel Grid.Row="2">
-            <Image Source="{Binding AmiiboImage}" Height="350" Width="350" HorizontalAlignment="Center" />
+            <ListBox
-            <ScrollViewer MaxHeight="120" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
+                DockPanel.Dock="Left"
-                          Margin="20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
+                Width="300"
-                <TextBlock TextWrapping="Wrap" Text="{Binding Usage}" HorizontalAlignment="Center"
+                Margin="20"
-                           TextAlignment="Center" />
+                SelectionMode="Single"
-            </ScrollViewer>
+                ItemsSource="{Binding AmiiboList}"
-        </StackPanel>
+                SelectedIndex="{Binding AmiiboSelectedIndex}">
+                
+                <ListBox.ItemTemplate>
+                    <DataTemplate>
+                        <TextBlock Margin="10, 0, 0 ,0" Text="{Binding Name}" />
+                    </DataTemplate>
+                </ListBox.ItemTemplate>
+            </ListBox>
+            <StackPanel Margin="20">
+                <Image Source="{Binding AmiiboImage}" Height="350" Width="150" HorizontalAlignment="Center" />
+                <ScrollViewer MaxHeight="120" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"
+                            Margin="20" VerticalAlignment="Top" HorizontalAlignment="Stretch">
+                    <TextBlock TextWrapping="Wrap" Text="{Binding Usage}" HorizontalAlignment="Center"
+                            TextAlignment="Center" />
+                </ScrollViewer>
+            </StackPanel>
+        </DockPanel>
         <Grid Grid.Row="3" ColumnDefinitions="Auto,Auto,*,Auto,Auto">
             <CheckBox Margin="10" Grid.Column="0" VerticalContentAlignment="Center" 
                       IsChecked="{Binding ShowAllAmiibo}"