Add a warning for users trying to use android sdks older then selected device

packages/vscode-extension/src/webview/components/shared/Select.css

@@ -65,12 +65,17 @@ button {
   color: var(--swm-secondary-text);
   pointer-events: none;
 }
+
 .select-item:hover {
   outline: none;
   background-color: var(--swm-select-item-highlighted-background);
   cursor: pointer;
 }
 
+.select-item-marked {
+  color: var(--swm-marked-text);
+}
+
 .select-label {
   padding: 0 25px;
   font-size: 12px;

packages/vscode-extension/src/webview/components/shared/Select.tsx

@@ -3,20 +3,29 @@ import { PropsWithChildren, ReactNode, forwardRef } from "react";
 import classnames from "classnames";
 import "./Select.css";
 
-const SelectItem = forwardRef<HTMLDivElement, PropsWithChildren<RadixSelect.SelectItemProps>>(
-  ({ children, ...props }, forwardedRef) => {
-    return (
-      <RadixSelect.Item className="select-item" {...props} ref={forwardedRef}>
-        <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
-        <RadixSelect.ItemIndicator className="select-item-indicator">
-          <span className="codicon codicon-check" />
-        </RadixSelect.ItemIndicator>
-      </RadixSelect.Item>
-    );
-  }
-);
+const SelectItem = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<RadixSelect.SelectItemProps & { marked?: boolean }>
+>(({ children, ...props }, forwardedRef) => {
+  return (
+    <RadixSelect.Item
+      className={classnames("select-item", props.marked ? "select-item-marked" : undefined)}
+      {...props}
+      ref={forwardedRef}>
+      <RadixSelect.ItemText>{children}</RadixSelect.ItemText>
+      <RadixSelect.ItemIndicator className="select-item-indicator">
+        <span className="codicon codicon-check" />
+      </RadixSelect.ItemIndicator>
+    </RadixSelect.Item>
+  );
+});
 
-type SelectItemType = { value: string; label: string | ReactNode; disabled?: boolean };
+type SelectItemType = {
+  value: string;
+  label: string | ReactNode;
+  disabled?: boolean;
+  marked?: boolean;
+};
 
 type SelectGroupType = { items: SelectItemType[]; label: string | ReactNode };
 
@@ -59,13 +68,18 @@ function Select({ value, onChange, items, placeholder, className, disabled }: Se
                     <SelectItem
                       key={selectItem.value}
                       disabled={selectItem.disabled}
+                      marked={selectItem.marked}
                       value={selectItem.value}>
                       {selectItem.label}
                     </SelectItem>
                   ))}
                 </RadixSelect.Group>
               ) : (
-                <SelectItem key={item.value} disabled={item.disabled} value={item.value}>
+                <SelectItem
+                  key={item.value}
+                  disabled={item.disabled}
+                  value={item.value}
+                  marked={item.marked}>
                   {item.label}
                 </SelectItem>
               )

packages/vscode-extension/src/webview/styles/theme.css

@@ -143,6 +143,7 @@ body[data-vscode-theme-kind="vscode-high-contrast-light"] {
   --swm-preview-background: var(--white);
 
   --swm-default-text: var(--navy-light-100);
+  --swm-marked-text: var(--yellow-dark-120);
   --swm-highlighted-text: var(--navy-light-40);
   --swm-error-color: var(--red-light-100);
   --swm-secondary-text: var(--navy-light-60);
@@ -304,6 +305,7 @@ body[data-vscode-theme-kind="vscode-high-contrast"] {
   --swm-preview-background: var(--background-dark-100);
 
   --swm-default-text: var(--off-white);
+  --swm-marked-text: var(--yellow-dark-100);
   --swm-highlighted-text: black;
   --swm-error-color: var(--red-dark-100);
   --swm-secondary-text: var(--background-dark-10);

packages/vscode-extension/src/webview/utilities/consts.ts

@@ -24,6 +24,7 @@ export type DeviceProperties = {
   offsetY: number;
   frameImage: string;
   maskImage: string;
+  minimumAndroidApiLevel?: number;
 };
 
 // Model identifiers for new devices are sourced from 'hw.device.name'
@@ -63,6 +64,7 @@ export const AndroidSupportedDevices: DeviceProperties[] = [
   {
     modelName: "Google Pixel 9",
     modelId: "pixel_9",
+    minimumAndroidApiLevel: 35,
     platform: DevicePlatform.Android,
     screenWidth: 1080,
     screenHeight: 2424,
@@ -76,6 +78,7 @@ export const AndroidSupportedDevices: DeviceProperties[] = [
   {
     modelName: "Google Pixel 8",
     modelId: "pixel_8",
+    minimumAndroidApiLevel: 34,
     platform: DevicePlatform.Android,
     screenWidth: 1080,
     screenHeight: 2400,
@@ -89,6 +92,7 @@ export const AndroidSupportedDevices: DeviceProperties[] = [
   {
     modelName: "Google Pixel 7",
     modelId: "pixel_7",
+    minimumAndroidApiLevel: 33,
     platform: DevicePlatform.Android,
     screenWidth: 1080,
     screenHeight: 2400,
@@ -102,6 +106,7 @@ export const AndroidSupportedDevices: DeviceProperties[] = [
   {
     modelName: "Google Pixel 6a",
     modelId: "pixel_6a",
+    minimumAndroidApiLevel: 32,
     platform: DevicePlatform.Android,
     screenWidth: 1080,
     screenHeight: 2400,

packages/vscode-extension/src/webview/views/CreateDeviceView.css

@@ -28,6 +28,10 @@
   user-select: none;
 }
 
+.form-filed-marked {
+  color: var(--swm-marked-text);
+}
+
 .dropdown .listbox {
   max-height: 300px !important;
   overflow-y: scroll;
@@ -40,6 +44,15 @@
   background-color: var(--swm-separator);
 }
 
+.incompatible-system-warning {
+  display: flex;
+  width: 100%;
+  padding: 10px;
+  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
 input.device-name-input {
   width: 100%;
   height: 25px;

packages/vscode-extension/src/webview/views/CreateDeviceView.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import classNames from "classnames";
 import Select from "../components/shared/Select";
 import "./CreateDeviceView.css";
 import { useDevices } from "../providers/DevicesProvider";
@@ -54,6 +55,7 @@ export function formatDisplayName(name: string) {
 function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
   const [deviceProperties, setDeviceProperties] = useState<DeviceProperties | undefined>(undefined);
   const [selectedSystemName, selectSystemName] = useState<string>("");
+  const [isSystemCompatible, setIsSystemCompatible] = useState(true);
   const [displayName, setDisplayName] = useState<string>("");
   const [isDisplayNameValid, setIsDisplayNameValid] = useState(true);
   const [loading, setLoading] = useState<boolean>(false);
@@ -73,11 +75,16 @@ function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
           value: runtime.identifier,
           label: runtime.name,
           disabled: !runtime.available,
+          marked: false,
         }))
       : androidImages.map((systemImage) => ({
           value: systemImage.location,
           label: systemImage.name,
           disabled: !systemImage.available,
+          marked: !!(
+            deviceProperties?.minimumAndroidApiLevel &&
+            deviceProperties.minimumAndroidApiLevel > systemImage.apiLevel
+          ),
         }));
 
   async function createDevice() {
@@ -125,6 +132,7 @@ function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
     selectSystemName("");
     setDisplayName("");
     setIsDisplayNameValid(true);
+    setIsSystemCompatible(true);
   }
 
   return (
@@ -153,9 +161,17 @@ function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
         {systemImagesOptions.length > 0 ? (
           <Select
             disabled={!deviceProperties}
-            className="form-field"
+            className={classNames(
+              "form-field",
+              isSystemCompatible ? undefined : "form-filed-marked"
+            )}
             value={selectedSystemName}
             onChange={(newValue) => {
+              setIsSystemCompatible(
+                !systemImagesOptions.find((option) => {
+                  return option.value === newValue;
+                })?.marked
+              );
               selectSystemName(newValue);
               setDisplayName(deviceProperties?.modelName ?? "");
             }}
@@ -168,6 +184,12 @@ function CreateDeviceView({ onCreate, onCancel }: CreateDeviceViewProps) {
             {deviceProperties?.platform === "iOS" ? "Xcode" : "Android Studio"}.
           </div>
         )}
+        {!isSystemCompatible && (
+          <div className="incompatible-system-warning">
+            <span className="codicon codicon-warning warning" />{" "}
+            <div>This system image is not compatible with the selected device.</div>
+          </div>
+        )}
       </div>
       <div className="form-row">
         <Label className="form-label">