backwards-compatible plugin store, legacy plugin library

frontend/src/components/store/PluginCard.tsx

@@ -10,16 +10,26 @@ import {
 } from 'decky-frontend-lib';
 import { FC, useRef, useState } from 'react';
 
-import { StorePlugin, StorePluginVersion, requestPluginInstall } from './Store';
+import {
+  LegacyStorePlugin,
+  StorePlugin,
+  StorePluginVersion,
+  requestLegacyPluginInstall,
+  requestPluginInstall,
+} from './Store';
 
 interface PluginCardProps {
-  plugin: StorePlugin;
+  plugin: StorePlugin | LegacyStorePlugin;
 }
 
 const classNames = (...classes: string[]) => {
   return classes.join(' ');
 };
 
+function isLegacyPlugin(plugin: LegacyStorePlugin | StorePlugin): plugin is LegacyStorePlugin {
+  return 'artifact' in plugin;
+}
+
 const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
   const [selectedOption, setSelectedOption] = useState<number>(0);
   const buttonRef = useRef<HTMLDivElement>(null);
@@ -36,10 +46,10 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
       <Focusable
         // className="Panel Focusable"
         ref={containerRef}
-        onActivate={(e: CustomEvent) => {
+        onActivate={(_: CustomEvent) => {
           buttonRef.current!.focus();
         }}
-        onCancel={(e: CustomEvent) => {
+        onCancel={(_: CustomEvent) => {
           if (containerRef.current!.querySelectorAll('* :focus').length === 0) {
             Router.NavigateBackOrOpenMenu();
             setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
@@ -64,7 +74,14 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             className={classNames(staticClasses.Text)}
             // onClick={() => Router.NavigateToExternalWeb('https://github.com/' + plugin.artifact)}
           >
-            {plugin.name}
+            {isLegacyPlugin(plugin) ? (
+              <div>
+                <span style={{ color: 'grey' }}>{plugin.artifact.split('/')[0]}/</span>
+                {plugin.artifact.split('/')[1]}
+              </div>
+            ) : (
+              plugin.name
+            )}
           </a>
         </div>
         <div
@@ -79,10 +96,17 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               width: 'auto',
               height: '160px',
             }}
-            src={`https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.name.replace(
-              '/',
-              '_',
-            )}.png`}
+            src={
+              isLegacyPlugin(plugin)
+                ? `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.artifact.replace(
+                    '/',
+                    '_',
+                  )}.png`
+                : `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.name.replace(
+                    '/',
+                    '_',
+                  )}.png`
+            }
           />
           <div
             style={{
@@ -107,6 +131,18 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                   {tag == 'root' ? 'Requires root' : tag}
                 </span>
               ))}
+              {isLegacyPlugin(plugin) && (
+                <span
+                  style={{
+                    padding: '5px',
+                    marginRight: '10px',
+                    borderRadius: '5px',
+                    background: '#ACB2C947',
+                  }}
+                >
+                  legacy
+                </span>
+              )}
             </p>
           </div>
         </div>
@@ -132,7 +168,11 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             >
               <DialogButton
                 ref={buttonRef}
-                onClick={() => requestPluginInstall(plugin, plugin.versions[selectedOption])}
+                onClick={() =>
+                  isLegacyPlugin(plugin)
+                    ? requestLegacyPluginInstall(plugin, Object.keys(plugin.versions)[selectedOption])
+                    : requestPluginInstall(plugin, plugin.versions[selectedOption])
+                }
               >
                 Install
               </DialogButton>
@@ -144,10 +184,15 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             >
               <Dropdown
                 rgOptions={
-                  plugin.versions.map((version: StorePluginVersion, index) => ({
-                    data: index,
-                    label: version.name,
-                  })) as SingleDropdownOption[]
+                  (isLegacyPlugin(plugin)
+                    ? Object.keys(plugin.versions).map((v, k) => ({
+                        data: k,
+                        label: v,
+                      }))
+                    : plugin.versions.map((version: StorePluginVersion, index) => ({
+                        data: index,
+                        label: version.name,
+                      }))) as SingleDropdownOption[]
                 }
                 strDefaultLabel={'Select a version'}
                 selectedOption={selectedOption}

frontend/src/components/store/Store.tsx

@@ -17,6 +17,16 @@ export interface StorePlugin {
   tags: string[];
 }
 
+export interface LegacyStorePlugin {
+  artifact: string;
+  versions: {
+    [version: string]: string;
+  };
+  author: string;
+  description: string;
+  tags: string[];
+}
+
 export async function installFromURL(url: string) {
   const formData = new FormData();
   const splitURL = url.split('/');
@@ -28,6 +38,18 @@ export async function installFromURL(url: string) {
   });
 }
 
+export async function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
+  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', {
+    method: 'POST',
+    body: formData,
+  });
+}
+
 export async function requestPluginInstall(plugin: StorePlugin, selectedVer: StorePluginVersion) {
   const formData = new FormData();
   formData.append('name', plugin.name);
@@ -42,6 +64,7 @@ export async function requestPluginInstall(plugin: StorePlugin, selectedVer: Sto
 
 const StorePage: FC<{}> = () => {
   const [data, setData] = useState<StorePlugin[] | null>(null);
+  const [legacyData, setLegacyData] = useState<LegacyStorePlugin[] | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -49,6 +72,11 @@ const StorePage: FC<{}> = () => {
       console.log(res);
       setData(res);
     })();
+    (async () => {
+      const res = await fetch('https://plugins.deckbrew.xyz/get_plugins', { method: 'GET' }).then((r) => r.json());
+      console.log(res);
+      setLegacyData(res);
+    })();
   }, []);
 
   return (
@@ -67,12 +95,21 @@ const StorePage: FC<{}> = () => {
           height: '100%',
         }}
       >
-        {data === null ? (
+        {!data ? (
           <div style={{ height: '100%' }}>
             <SteamSpinner />
           </div>
         ) : (
-          data.map((plugin: StorePlugin) => <PluginCard plugin={plugin} />)
+          <div>
+            {data.map((plugin: StorePlugin) => (
+              <PluginCard plugin={plugin} />
+            ))}
+            {!legacyData ? (
+              <SteamSpinner />
+            ) : (
+              legacyData.map((plugin: LegacyStorePlugin) => <PluginCard plugin={plugin} />)
+            )}
+          </div>
         )}
       </div>
     </div>