Add image for clients with missing or unknown platform

components/ClientCard.tsx

@@ -12,7 +12,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Image from 'next/image';
 import * as React from 'react';
-import { ClientImages } from '../misc/clientimages';
+import { ClientImages, UnknownImage } from '../misc/clientimages';
 import { Client, ReleaseAsset } from '../misc/model';
 import {
   ApplyConfigDialog,
@@ -123,10 +123,10 @@ export default function ClientCard({
         <CardHeader
           avatar={
             <Image
-              src={ClientImages[client.platform]}
+              src={ClientImages[client.platform] ?? UnknownImage}
               width={50}
               height={50}
-              alt={client.platform}
+              alt={ClientImages[client.platform] ? client.platform : "Unknown device"}
               priority={true}
               placeholder="blur"></Image>
           }

misc/clientimages.ts

@@ -3,10 +3,13 @@ import ESP32_S3_BOX_3 from '../public/static/ESP32-S3-BOX-3.png';
 import ESP32_S3_BOX_LITE from '../public/static/ESP32-S3-BOX-LITE.png';
 import M5STACK_CORES3 from '../public/static/M5STACK-CORES3.png';
 import { StaticImageData } from 'next/image';
+import UNKNOWN from '../public/static/unknown.png';
 
 export const ClientImages: { [key: string]: StaticImageData } = {
   'ESP32-S3-BOX': ESP32_S3_BOX,
   'ESP32-S3-BOX-3': ESP32_S3_BOX_3,
   'ESP32-S3-BOX-LITE': ESP32_S3_BOX_LITE,
   'M5STACK-CORES3': M5STACK_CORES3,
 };
+
+export const UnknownImage = UNKNOWN;