Show warning when installing legacy plugins

frontend/src/components/store/Store.tsx

@@ -1,4 +1,4 @@
-import { SteamSpinner } from 'decky-frontend-lib';
+import { ModalRoot, SteamSpinner, showModal, staticClasses } from 'decky-frontend-lib';
 import { FC, useEffect, useState } from 'react';
 
 import PluginCard from './PluginCard';
@@ -38,16 +38,32 @@ export async function installFromURL(url: string) {
   });
 }
 
-export async function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
+export function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
+  showModal(
+    <ModalRoot
+      onOK={() => {
         const formData = new FormData();
         formData.append('name', plugin.artifact);
         formData.append('artifact', `https://github.com/${plugin.artifact}/archive/refs/tags/${selectedVer}.zip`);
         formData.append('version', selectedVer);
         formData.append('hash', plugin.versions[selectedVer]);
-  await fetch('http://localhost:1337/browser/install_plugin', {
+        fetch('http://localhost:1337/browser/install_plugin', {
           method: 'POST',
           body: formData,
         });
+      }}
+      onCancel={() => {
+        // do nothing
+      }}
+    >
+      <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
+        Using legacy plugins
+      </div>
+      You are currently installing a <b>legacy</b> plugin. Legacy plugins are no longer supported and may have issues.
+      Legacy plugins do not support gamepad input. To interact with a legacy plugin, you will need to use the
+      touchscreen.
+    </ModalRoot>,
+  );
 }
 
 export async function requestPluginInstall(plugin: StorePlugin, selectedVer: StorePluginVersion) {