feat: console-style redesign of the Console interface

CHANGELOG.en-US.md

@@ -4,6 +4,7 @@ English (US) release notes, mirroring CHANGELOG.md (Brazilian Portuguese). Befor
 
 ## [Unreleased]
 ### What's new
+- A Console interface that looks like a home console: Home shows your launchers in a row at the top, over your games' art (A picks what opens, a pill-shaped Play now right below, with the screen, audio, resolution and HDR on one line), the tabs sit on the left, and the System tab is now a list of categories on the left with only that category's options on the right. Tiles without hairlines, rounder corners and less repetition: the setup summary left Home (it is in Session). (#162)
 - Update notice in Portuguese: the new version's highlight shows in the app's language when there is a changelog in it (today, Portuguese); other languages still see it in English. Applies to updates published after this version. (#158)
 - **Custom app** mode: in Settings → When entering console mode, pick any `.exe` (RetroArch, another launcher…) with optional arguments. Console Mode sets up the TV, opens the app on the game screen and restores the desk by itself when it closes. For launchers that only start another program and exit, type the real program's process name in **Process to watch**. If it never shows up, the session stays until you end it (hold Start + Select). (#161)
 - Diagnostics in Settings: a new card shows, read-only, the app's version and channel, Windows, the screens (resolution, HDR, which one is the game screen and which ones get hidden), the audio outputs, the connected controllers, whether Steam, Playnite, RTSS and ControlFS were found, and the end of the log. **Copy report** copies it all as text to paste into an issue, without your user name in paths and without keys. (#159)

CHANGELOG.md

@@ -4,6 +4,7 @@ Notas em português do Brasil; a versão em inglês (Estados Unidos) fica em `CH
 
 ## [Unreleased]
 ### Novidades
+- Interface Console com cara de console de mesa: o Início mostra os iniciadores numa fileira no topo, sobre a arte dos seus jogos (A escolhe o que abre, Jogar agora em formato de pílula logo abaixo, com a tela, o áudio, a resolução e o HDR numa linha só), as abas ficam à esquerda e a aba Sistema virou uma lista de categorias à esquerda com só as opções daquela categoria à direita. Blocos sem borda fina, cantos mais arredondados e menos repetição: o resumo do setup saiu do Início (está na Sessão). (#162)
 - Aviso de atualização em português: o destaque da nova versão aparece no idioma do app quando há um changelog nele (hoje, português); os outros idiomas continuam vendo o destaque em inglês. Vale a partir das atualizações publicadas depois desta versão. (#158)
 - Modo **Aplicativo personalizado**: em Ajustes → Ao entrar no modo console, escolha qualquer `.exe` (RetroArch, outro launcher…) com argumentos opcionais. O Console Mode prepara a TV, abre o app na tela de jogo e restaura a mesa sozinho quando ele fecha. Para launchers que só abrem outro programa e fecham, informe em **Processo a acompanhar** o nome do processo do programa de verdade. Se ele nunca aparecer, a sessão continua até você encerrá-la (segurar Start + Select). (#161)
 - Diagnóstico em Ajustes: um card novo mostra, só para leitura, a versão e o canal do app, o Windows, as telas (resolução, HDR, qual é a de jogo e quais são ocultadas), as saídas de áudio, os controles conectados, se Steam, Playnite, RTSS e ControlFS foram encontrados e o fim do log. **Copiar relatório** copia tudo em texto para colar numa issue, sem o seu nome de usuário nos caminhos e sem chaves. (#159)

docs/GUIDE.md

@@ -21,6 +21,10 @@ The session menu has two ways out. **Back to the PC** ends the session and puts
 
 ## Settings in Console mode
 
+**Home** puts your launchers in a row at the top (Steam Big Picture, Playnite, Xbox mode): **A** on one picks what opens, and **Play now** below starts it. The line under the name says where you will play and what changes (audio, resolution, FPS, HDR, VRR); the round button next to Play now opens **Session**, with the screens and quick settings.
+
+The **System** tab lists its categories on the left (Gaming display, When entering console mode, Controller, TV, Optional extras, App, Shortcut, help, and data, More apps from the developer). Moving over a category shows its options on the right; **A** or right goes into them, and **B** or left goes back to the categories.
+
 In **System → Controller**, choose the button layout: **Automatic**, **Xbox** or **PlayStation**. The preview and shortcut labels follow the choice, which is saved when you close the app. This changes the displayed symbols; the controller's inputs keep their existing mapping.
 
 The **System** tab provides the same settings as desktop mode, including controller shortcuts, Playnite, Android TV, custom FPS and the data folder. Both interfaces share the saved values, which remain after restarting the app.

docs/GUIDE.pt-BR.md

@@ -21,6 +21,10 @@ No menu da sessão há duas saídas. **Voltar ao PC** encerra a sessão e devolv
 
 ## Configurações no modo Console
 
+O **Início** mostra os seus iniciadores numa fileira no topo (Steam Big Picture, Playnite, modo Xbox): **A** num deles escolhe o que abre, e **Jogar agora** logo abaixo começa. A linha embaixo do nome diz onde você vai jogar e o que muda (áudio, resolução, FPS, HDR, VRR); o botão redondo ao lado de Jogar agora abre a **Sessão**, com as telas e os ajustes rápidos.
+
+A aba **Sistema** lista as categorias à esquerda (Tela de jogo, Ao entrar no modo console, Controle, TV, Extras opcionais, App, Atalho, ajuda e dados, Outros apps do desenvolvedor). Passar por uma categoria mostra as opções dela à direita; **A** ou a direita entra nelas, e **B** ou a esquerda volta para as categorias.
+
 Em **Sistema → Controle**, escolha o layout dos botões: **Automático**, **Xbox** ou **PlayStation**. A prévia e os nomes dos atalhos acompanham a escolha, que fica salva ao fechar o app. Isso muda os símbolos exibidos; as entradas do controle mantêm o mapeamento existente.
 
 A aba **Sistema** oferece os mesmos ajustes do modo PC, incluindo os atalhos do controle, Playnite, Android TV, FPS personalizado e pasta de dados. Os valores são compartilhados entre as duas interfaces e permanecem salvos ao reabrir o app.

docs/TESTING.md

@@ -493,6 +493,36 @@ Pré-requisito: RivaTuner Statistics Server instalado, com "Show On-Screen Displ
 - [ ] Com a sessão ativa e a opção ligada, minimizar e reabrir pela bandeja continua funcionando; o atalho do controle para abrir o app também traz a janela de volta.
 - [ ] Fechar no X (sem sessão ativa) continua fechando o app, com a opção ligada ou desligada.
 
+## Interface Console no estilo console (1.7.0)
+
+### Início
+- [ ] Os iniciadores aparecem numa fileira no topo (Steam Big Picture, Playnite se instalado, modo Xbox), cada um com sua cor e ícone; o que abre hoje tem um ponto verde em cima.
+- [ ] Com o controle, subir do Jogar agora chega na fileira; o bloco focado cresce e ganha o contorno branco, sem cortar nos vizinhos nem no topo.
+- [ ] A num iniciador muda o ponto para ele, o título grande embaixo passa a ser o nome dele e a escolha aparece igual em Sistema → Ao entrar no modo console → Abrir e no modo PC.
+- [ ] A linha embaixo do título mostra a resolução da tela de jogo e depois áudio, FPS, HDR e VRR quando ligados, separados por "·", e atualiza ao mudar cada um.
+- [ ] Sem tela de jogo escolhida, o texto pede para escolher a tela e Jogar agora fica desativado.
+- [ ] O botão redondo ao lado de Jogar agora abre a aba Sessão.
+- [ ] Com capas da Steam como fundo, as capas aparecem mais à direita e o lado esquerdo e a parte de baixo ficam escuros; o texto continua legível. Com imagem própria e sem fundo também.
+- [ ] Nomes longos (alemão, russo) não estouram: o título corta com reticências numa linha.
+
+### Barra do topo e dicas
+- [ ] As abas ficam à esquerda, ao lado do ícone, com LB/RB (L1/R1) em volta; o relógio continua à direita.
+- [ ] A barra de dicas embaixo não mostra mais LB/RB "Abas"; as outras dicas continuam.
+
+### Sistema
+- [ ] Ao abrir a aba, o foco fica na categoria em uso, com a barrinha verde ao lado e o nome aceso; as outras categorias ficam apagadas.
+- [ ] Descer e subir pelas categorias troca as opções da direita na hora, e a lista volta para o topo.
+- [ ] A ou direita entra na primeira opção; esquerda ou B volta para a categoria certa (a da barrinha, não a que estiver na mesma altura).
+- [ ] Abrir uma escolha (por exemplo Idioma, em App) e voltar com B ou escolhendo: o foco volta para a mesma linha.
+- [ ] Atalhos (Controle): abrir o editor e voltar devolve o foco para a linha do atalho.
+- [ ] Teste do controle (Atalho, ajuda e dados): ao fechar, o foco volta para a linha.
+- [ ] Fundo, imagem do fundo e sons da interface ficam em App; Fechar a Steam ao voltar ao PC fica em Ao entrar no modo console.
+- [ ] Campos de texto da TV e do FPS personalizado continuam aceitando digitação e as setas movem o cursor neles.
+
+### Visual geral
+- [ ] Blocos e linhas sem borda fina, cantos mais arredondados, Jogar agora em formato de pílula; o contorno branco do foco aparece em tudo, inclusive no menu da sessão.
+- [ ] Ajustes rápidos da Sessão aparecem como quadrados do mesmo tamanho, com o texto do valor inteiro (ou em duas linhas).
+- [ ] Alto contraste do Windows: textos e foco continuam visíveis.
 ## Diagnóstico (Ajustes → Atalho, ajuda e dados)
 
 - [ ] Abrir o card "Diagnóstico": o anel de carregamento aparece e, sem travar a janela, o relatório mostra versão e canal (instalado/portátil, estável/teste), Windows com build, e a versão do .NET.

src/ConsoleMode/App.xaml

@@ -77,38 +77,40 @@
                 <Setter Property="Padding" Value="10,3"/>
             </Style>
 
-            <!-- Console (10-foot) interface: big cards with a thick accent focus ring for controller navigation. -->
+            <!-- Console (10-foot) interface: flat dark tiles over the game art, no hairlines; the focus is a clean
+                 white outline and the tile grows a little (see ConsoleHomeView), like a console home. -->
             <Style x:Key="ConsoleCard" TargetType="Button">
                 <Setter Property="MinWidth" Value="220"/>
                 <Setter Property="MinHeight" Value="120"/>
                 <Setter Property="Padding" Value="22,18"/>
-                <Setter Property="CornerRadius" Value="16"/>
+                <Setter Property="CornerRadius" Value="18"/>
                 <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                 <Setter Property="VerticalContentAlignment" Value="Stretch"/>
-                <Setter Property="Background">
-                    <Setter.Value>
-                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
-                            <GradientStop Color="#26FFFFFF" Offset="0"/>
-                            <GradientStop Color="#0FFFFFFF" Offset="1"/>
-                        </LinearGradientBrush>
-                    </Setter.Value>
-                </Setter>
-                <Setter Property="BorderBrush" Value="#1AFFFFFF"/>
-                <Setter Property="BorderThickness" Value="1"/>
+                <Setter Property="Background" Value="#D9131820"/>
+                <Setter Property="BorderThickness" Value="0"/>
                 <Setter Property="UseSystemFocusVisuals" Value="True"/>
-                <!-- Xbox-style focus: a clean white outline, and the card grows a little (see ConsoleHomeView). -->
                 <Setter Property="FocusVisualPrimaryBrush" Value="White"/>
                 <Setter Property="FocusVisualPrimaryThickness" Value="3"/>
                 <Setter Property="FocusVisualSecondaryThickness" Value="0"/>
                 <Setter Property="FocusVisualMargin" Value="-5"/>
             </Style>
-            <!-- A tab in the console top bar; the active one is at full opacity with an underline. -->
+            <!-- One launcher in the console Home row: a square tile with the launcher's colours. -->
+            <Style x:Key="LaunchTileButton" TargetType="Button" BasedOn="{StaticResource ConsoleCard}">
+                <Setter Property="Width" Value="156"/>
+                <Setter Property="Height" Value="156"/>
+                <Setter Property="MinWidth" Value="0"/>
+                <Setter Property="MinHeight" Value="0"/>
+                <Setter Property="Padding" Value="12,14"/>
+                <Setter Property="CornerRadius" Value="22"/>
+                <Setter Property="FocusVisualMargin" Value="-6"/>
+            </Style>
+            <!-- A tab in the console top bar: plain text, the active one lit with a short underline. -->
             <Style x:Key="ConsoleTab" TargetType="Button">
-                <Setter Property="Padding" Value="20,10"/>
+                <Setter Property="Padding" Value="16,8"/>
                 <Setter Property="CornerRadius" Value="22"/>
                 <Setter Property="Background" Value="Transparent"/>
                 <Setter Property="BorderThickness" Value="0"/>
-                <Setter Property="FontSize" Value="21"/>
+                <Setter Property="FontSize" Value="22"/>
                 <Setter Property="FontWeight" Value="SemiBold"/>
                 <!-- Reached with LB / RB (or a click), never by moving the focus. -->
                 <Setter Property="IsTabStop" Value="False"/>
@@ -150,17 +152,28 @@
 
             <!-- One settings row in the console settings list: label left, value right. -->
             <Style x:Key="ConsoleRow" TargetType="Button" BasedOn="{StaticResource ConsoleCard}">
-                <Setter Property="MinHeight" Value="76"/>
-                <Setter Property="Height" Value="76"/>
+                <Setter Property="MinHeight" Value="72"/>
+                <Setter Property="Height" Value="72"/>
                 <Setter Property="Padding" Value="24,0"/>
+                <Setter Property="CornerRadius" Value="12"/>
+                <Setter Property="Background" Value="#14FFFFFF"/>
                 <Setter Property="HorizontalAlignment" Value="Stretch"/>
                 <Setter Property="VerticalContentAlignment" Value="Center"/>
+                <Setter Property="FocusVisualMargin" Value="-3"/>
+            </Style>
+            <!-- A category in the console System tab's left column: just its name, no tile. -->
+            <Style x:Key="ConsoleCategory" TargetType="Button" BasedOn="{StaticResource ConsoleRow}">
+                <Setter Property="MinHeight" Value="60"/>
+                <Setter Property="Height" Value="60"/>
+                <Setter Property="Padding" Value="20,0"/>
+                <Setter Property="Background" Value="Transparent"/>
+                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
             </Style>
             <Style x:Key="ConsolePlayButton" TargetType="Button" BasedOn="{StaticResource AccentButtonStyle}">
                 <Setter Property="Height" Value="64"/>
-                <Setter Property="MinWidth" Value="280"/>
-                <Setter Property="Padding" Value="32,0"/>
-                <Setter Property="CornerRadius" Value="14"/>
+                <Setter Property="MinWidth" Value="300"/>
+                <Setter Property="Padding" Value="36,0"/>
+                <Setter Property="CornerRadius" Value="32"/>
                 <Setter Property="FocusVisualPrimaryBrush" Value="White"/>
                 <Setter Property="FocusVisualPrimaryThickness" Value="4"/>
                 <Setter Property="FocusVisualSecondaryThickness" Value="0"/>

src/ConsoleMode/Services/LaunchArt.cs

@@ -0,0 +1,21 @@
+namespace ConsoleMode.Services;
+
+/// <summary>
+/// How each launcher looks as a tile in the console Home row: a Segoe Fluent glyph and the two colours
+/// of its gradient (ARGB). Unknown modes get the neutral tile, so a new mode never shows up blank.
+/// </summary>
+public static class LaunchArt
+{
+    public readonly record struct Art(string Glyph, uint From, uint To);
+
+    public static readonly Art Neutral = new("", 0xFF2A3038, 0xFF161A20);
+
+    public static Art For(string? mode) => mode switch
+    {
+        "bigPicture" => new("", 0xFF2A475E, 0xFF15202C),
+        "playnite" => new("", 0xFF4A3470, 0xFF1D1530),
+        "xboxMode" => new("", 0xFF178A17, 0xFF0A440A),
+        "customApp" => new("", 0xFF3A4250, 0xFF1A1E25),
+        _ => Neutral
+    };
+}

src/ConsoleMode/ViewModels/MainViewModel.ConsoleTabs.cs

@@ -3,8 +3,8 @@
 
 namespace ConsoleMode.ViewModels;
 
-// The console interface is three tabs, switched with LB / RB (L1 / R1): Home (the play banner),
-// Session (screens and quick settings) and System (every setting).
+// The console interface is three tabs, switched with LB / RB (L1 / R1): Home (the launchers and the
+// play button), Session (screens and quick settings) and System (every setting, by category).
 public partial class MainViewModel
 {
     public const int HomeTabIndex = 0;
@@ -13,7 +13,7 @@
 
     [ObservableProperty]
     [NotifyPropertyChangedFor(nameof(IsHomeTab), nameof(IsSessionTab), nameof(IsSystemTab))]
     private int _consoleTabIndex;
 
     public bool IsHomeTab => ConsoleTabIndex == HomeTabIndex;
     public bool IsSessionTab => ConsoleTabIndex == SessionTabIndex;
@@ -22,6 +22,13 @@
     public string HintLb => IsPlayStationHints ? "L1" : "LB";
     public string HintRb => IsPlayStationHints ? "R1" : "RB";
 
+    /// <summary>The System tab's category on the left; only its options show on the right.</summary>
+    [ObservableProperty] private int _systemCategory;
+
+    /// <summary>x:Bind helper: the options of one System category show only while it is the chosen one.</summary>
+    public Microsoft.UI.Xaml.Visibility CategoryVisibility(int current, int category) =>
+        current == category ? Microsoft.UI.Xaml.Visibility.Visible : Microsoft.UI.Xaml.Visibility.Collapsed;
+
     /// <summary>x:Bind helper: the active tab is fully lit, the others dimmed.</summary>
     public double TabOpacity(int current, int tab) => current == tab ? 1.0 : 0.55;