add settings page with install from URL option

2 files changed, 28 insertions, 15 deletions

diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index 7816d1bb..28989a88 100644
--- a/frontend/src/components/store/PluginCard.tsx
+++ b/frontend/src/components/store/PluginCard.tsx
@@ -2,6 +2,7 @@ import {
   DialogButton,
   Dropdown,
   Focusable,
+  QuickAccessTab,
   Router,
   SingleDropdownOption,
   SuspensefulImage,
@@ -9,7 +10,7 @@ import {
 } from 'decky-frontend-lib';
 import { FC, useRef, useState } from 'react';
 
-import { StorePlugin } from './Store';
+import { StorePlugin, requestPluginInstall } from './Store';
 
 interface PluginCardProps {
   plugin: StorePlugin;
@@ -19,17 +20,6 @@ const classNames = (...classes: string[]) => {
   return classes.join(' ');
 };
 
-async function requestPluginInstall(plugin: StorePlugin, selectedVer: string) {
-  const formData = new FormData();
-  formData.append('artifact', plugin.artifact);
-  formData.append('version', selectedVer);
-  formData.append('hash', plugin.versions[selectedVer]);
-  await fetch('http://localhost:1337/browser/install_plugin', {
-    method: 'POST',
-    body: formData,
-  });
-}
-
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
   const buttonRef = useRef<HTMLDivElement>(null);
@@ -50,9 +40,12 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
           buttonRef.current!.focus();
         }}
         onCancel={(e: CustomEvent) => {
-          containerRef.current!.querySelectorAll('* :focus').length === 0
-            ? Router.NavigateBackOrOpenMenu()
-            : containerRef.current!.focus();
+          if (containerRef.current!.querySelectorAll('* :focus').length === 0) {
+            Router.NavigateBackOrOpenMenu();
+            setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
+          } else {
+            containerRef.current!.focus();
+          }
         }}
         style={{
           display: 'flex',
diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx
index ebb2bb8e..0e99a3c2 100644
--- a/frontend/src/components/store/Store.tsx
+++ b/frontend/src/components/store/Store.tsx
@@ -13,6 +13,26 @@ export interface StorePlugin {
   tags: string[];
 }
 
+export async function installFromURL(url: string) {
+  const formData = new FormData();
+  formData.append('artifact', url);
+  await fetch('http://localhost:1337/browser/install_plugin', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
+export async function requestPluginInstall(plugin: StorePlugin, selectedVer: string) {
+  const formData = new FormData();
+  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', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
 const StorePage: FC<{}> = () => {
   const [data, setData] = useState<StorePlugin[] | null>(null);