Support/detect the Steam Deck OLED

Detecting the OLED model isn't too difficult, its only difference is a
new GPU PCI ID
Adding to that, both the system info text and page will now note the
model name (LCD or OLED) if available

public/locales/en/translation.json

@@ -701,7 +701,7 @@
             "osVersion": "Version {{versionNumber}}",
             "showDetailed": "Show detailed system specifications",
             "software": "Software:",
-            "steamDeck": "Steam Deck",
+            "steamDeck": "Steam Deck {{model}}",
             "systemModel": "System Model:",
             "systemSpecifications": "System Specifications:"
         }

src/backend/utils/systeminfo/index.ts

@@ -9,7 +9,7 @@ import { filesize } from 'filesize'
 import { getGpuInfo } from './gpu'
 import { getMemoryInfo } from './memory'
 import { getOsInfo } from './osInfo'
-import { isSteamDeck } from './steamDeck'
+import { getSteamDeckInfo, type SteamDeckInfo } from './steamDeck'
 import { getHeroicVersion } from './heroicVersion'
 import {
   getGogdlVersion,
@@ -52,7 +52,7 @@ interface SystemInformation {
     name: string
     version: string
   }
-  isSteamDeck: boolean
+  steamDeckInfo: SteamDeckInfo
   isFlatpak: boolean
   softwareInUse: {
     heroicVersion: string
@@ -75,7 +75,7 @@ async function getSystemInfo(cache = true): Promise<SystemInformation> {
   const memory = await getMemoryInfo()
   const gpus = await getGpuInfo()
   const detailedOsInfo = await getOsInfo()
-  const isDeck = isSteamDeck(cpus, gpus)
+  const deckInfo = getSteamDeckInfo(cpus, gpus)
   const [legendaryVersion, gogdlVersion, nileVersion] = await Promise.all([
     getLegendaryVersion(),
     getGogdlVersion(),
@@ -101,7 +101,7 @@ async function getSystemInfo(cache = true): Promise<SystemInformation> {
       version: process.getSystemVersion(),
       ...detailedOsInfo
     },
-    isSteamDeck: isDeck,
+    steamDeckInfo: deckInfo,
     isFlatpak: !!process.env.FLATPAK_ID,
     softwareInUse: {
       heroicVersion: getHeroicVersion(),
@@ -126,7 +126,9 @@ ${info.GPUs.map(
 ).join('\n')}
 OS: ${info.OS.name} ${info.OS.version} (${info.OS.platform})
 
-The current system is${info.isSteamDeck ? '' : ' not'} a Steam Deck
+The current system is${info.steamDeckInfo.isDeck ? '' : ' not'} a Steam Deck${
+    info.steamDeckInfo.isDeck ? ` (model: ${info.steamDeckInfo.model})` : ''
+  }
 We are${info.isFlatpak ? '' : ' not'} running inside a Flatpak container
 
 Software Versions:

src/backend/utils/systeminfo/steamDeck.ts

@@ -1,9 +1,25 @@
 import type { CpuInfo } from 'os'
 import type { GPUInfo } from './index'
 
-const isSteamDeck = (cpus: CpuInfo[], gpus: GPUInfo[]): boolean =>
-  cpus[0]?.model === 'AMD Custom APU 0405' &&
-  gpus[0]?.deviceId === '163f' &&
-  gpus[0]?.vendorId === '1002'
+type SteamDeckInfo =
+  | { isDeck: true; model: string }
+  | { isDeck: false; model?: undefined }
 
-export { isSteamDeck }
+function getSteamDeckInfo(cpus: CpuInfo[], gpus: GPUInfo[]): SteamDeckInfo {
+  if (cpus[0]?.model !== 'AMD Custom APU 0405') return { isDeck: false }
+
+  const primaryGpu = gpus.at(0)
+  if (!primaryGpu || primaryGpu.vendorId !== '1002') return { isDeck: false }
+
+  switch (primaryGpu.deviceId) {
+    case '163f':
+      return { isDeck: true, model: 'LCD' }
+    case '1435':
+      return { isDeck: true, model: 'OLED' }
+    default:
+      return { isDeck: false }
+  }
+}
+
+export { getSteamDeckInfo }
+export type { SteamDeckInfo }

src/frontend/screens/Settings/sections/SystemInfo/index.tsx

@@ -68,7 +68,9 @@ function SteamDeckSystemSpecifications({
             <SteamDeckLogo className="logo fillWithThemeColor" />
           </Grid>
           <Grid item xs={10}>
-            {t('settings.systemInformation.steamDeck', 'Steam Deck')}
+            {t('settings.systemInformation.steamDeck', 'Steam Deck {{model}}', {
+              model: systemInformation.steamDeckInfo.model
+            })}
           </Grid>
         </Grid>
       </Paper>
@@ -103,7 +105,7 @@ export default function SystemInfo() {
             'System Specifications:'
           )}
         </h5>
-        {systemInformation.isSteamDeck ? (
+        {systemInformation.steamDeckInfo.isDeck ? (
           <SteamDeckSystemSpecifications
             systemInformation={systemInformation}
           />