Add plugin updater, notification badge, fixes

frontend/src/components/store/PluginCard.tsx

@@ -15,18 +15,15 @@ import {
   LegacyStorePlugin,
   StorePlugin,
   StorePluginVersion,
+  isLegacyPlugin,
   requestLegacyPluginInstall,
   requestPluginInstall,
-} from './Store';
+} from '../../store';
 
 interface PluginCardProps {
   plugin: StorePlugin | LegacyStorePlugin;
 }
 
-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);
@@ -119,13 +116,16 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
             <p className={joinClassNames(staticClasses.PanelSectionRow)}>
               <span>Author: {plugin.author}</span>
             </p>
-            <p className={joinClassNames('deckyStoreCardTagsContainer', staticClasses.PanelSectionRow)} style={{
+            <p
+              className={joinClassNames('deckyStoreCardTagsContainer', staticClasses.PanelSectionRow)}
+              style={{
                 padding: '0 16px',
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: '5px 10px',
-              }}>
-              <span style={{padding: '5px 0'}}>Tags:</span>
+              }}
+            >
+              <span style={{ padding: '5px 0' }}>Tags:</span>
               {plugin.tags.map((tag: string) => (
                 <span
                   className="deckyStoreCardTag"
@@ -183,7 +183,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                 onClick={() =>
                   isLegacyPlugin(plugin)
                     ? requestLegacyPluginInstall(plugin, Object.keys(plugin.versions)[selectedOption])
-                    : requestPluginInstall(plugin, plugin.versions[selectedOption])
+                    : requestPluginInstall(plugin.name, plugin.versions[selectedOption])
                 }
               >
                 Install

frontend/src/components/store/Store.tsx

@@ -1,111 +1,21 @@
-import { ModalRoot, SteamSpinner, showModal, staticClasses } from 'decky-frontend-lib';
+import { SteamSpinner } from 'decky-frontend-lib';
 import { FC, useEffect, useState } from 'react';
 
+import { LegacyStorePlugin, StorePlugin, getLegacyPluginList, getPluginList } from '../../store';
 import PluginCard from './PluginCard';
 
-export interface StorePluginVersion {
-  name: string;
-  hash: string;
-}
-
-export interface StorePlugin {
-  id: number;
-  name: string;
-  versions: StorePluginVersion[];
-  author: string;
-  description: string;
-  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('/');
-  formData.append('name', splitURL[splitURL.length - 1].replace('.zip', ''));
-  formData.append('artifact', url);
-  await fetch('http://localhost:1337/browser/install_plugin', {
-    method: 'POST',
-    body: formData,
-    credentials: 'include',
-    headers: {
-      Authentication: window.deckyAuthToken,
-    },
-  });
-}
-
-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]);
-        fetch('http://localhost:1337/browser/install_plugin', {
-          method: 'POST',
-          body: formData,
-          credentials: 'include',
-          headers: {
-            Authentication: window.deckyAuthToken,
-          },
-        });
-      }}
-      onCancel={() => {
-        // do nothing
-      }}
-    >
-      <div className={staticClasses.Title} style={{ flexDirection: 'column', boxShadow: 'unset' }}>
-        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) {
-  const formData = new FormData();
-  formData.append('name', plugin.name);
-  formData.append('artifact', `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`);
-  formData.append('version', selectedVer.name);
-  formData.append('hash', selectedVer.hash);
-  await fetch('http://localhost:1337/browser/install_plugin', {
-    method: 'POST',
-    body: formData,
-    credentials: 'include',
-    headers: {
-      Authentication: window.deckyAuthToken,
-    },
-  });
-}
-
 const StorePage: FC<{}> = () => {
   const [data, setData] = useState<StorePlugin[] | null>(null);
   const [legacyData, setLegacyData] = useState<LegacyStorePlugin[] | null>(null);
 
   useEffect(() => {
     (async () => {
-      const res = await fetch('https://beta.deckbrew.xyz/plugins', {
-        method: 'GET',
-      }).then((r) => r.json());
+      const res = await getPluginList();
       console.log(res);
-      setData(res.filter((x: StorePlugin) => x.name !== 'Example Plugin'));
+      setData(res);
     })();
     (async () => {
-      const res = await fetch('https://plugins.deckbrew.xyz/get_plugins', {
-        method: 'GET',
-      }).then((r) => r.json());
+      const res = await getLegacyPluginList();
       console.log(res);
       setLegacyData(res);
     })();