feat: add uninstall button to store

SteamDeckHomebrew · Jan 2, 2025 · ebc2f52 · ebc2f52
1 parent 48f23fd
commit ebc2f52
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 77 deletions.
diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
@@ -1,7 +1,7 @@
-import { ButtonItem, Dropdown, Focusable, PanelSectionRow, SingleDropdownOption, SuspensefulImage } from '@decky/ui';
-import { CSSProperties, FC, useState } from 'react';
+import { DialogButton, Dropdown, Focusable, PanelSectionRow, SingleDropdownOption, SuspensefulImage } from '@decky/ui';
+import { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { FaArrowDown, FaArrowUp, FaCheck, FaDownload, FaRecycle } from 'react-icons/fa';
+import { FaArrowDown, FaArrowUp, FaCheck, FaDownload, FaRecycle, FaTrash } from 'react-icons/fa';
 
 import { InstallType, Plugin } from '../../plugin';
 import { StorePlugin, requestPluginInstall } from '../../store';
@@ -128,76 +128,82 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             </div>
           )}
         </div>
-        <div>
-          <PanelSectionRow>
-            <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
-              <div
-                className="deckyStoreCardInstallContainer"
-                style={
-                  {
-                    paddingTop: '0px',
-                    paddingBottom: '0px',
-                    flexGrow: 1,
-                    '--field-negative-horizontal-margin': 0,
-                  } as CSSProperties
-                }
+        <PanelSectionRow>
+          <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
+            <DialogButton
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                gap: '5px',
+              }}
+              onClick={() => requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType)}
+            >
+              {installType === InstallType.UPDATE ? (
+                <>
+                  <FaArrowUp /> {t('PluginCard.plugin_update')}
+                </>
+              ) : installType === InstallType.REINSTALL ? (
+                <>
+                  <FaRecycle /> {t('PluginCard.plugin_reinstall')}
+                </>
+              ) : installType === InstallType.DOWNGRADE ? (
+                <>
+                  <FaArrowDown /> {t('PluginCard.plugin_downgrade')}
+                </>
+              ) : installType === InstallType.OVERWRITE ? (
+                <>
+                  <FaDownload /> {t('PluginCard.plugin_overwrite')}
+                </>
+              ) : (
+                // installType === InstallType.INSTALL (also fallback)
+                <>
+                  <FaDownload /> {t('PluginCard.plugin_install')}
+                </>
+              )}
+            </DialogButton>
+            {installedPlugin && installedVersionIndex === selectedOption ? (
+              <DialogButton
+                style={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  minWidth: '40px',
+                  flex: '1 1',
+                  padding: '0',
+                }}
+                onClick={() => {
+                  DeckyPluginLoader.uninstallPlugin(
+                    installedPlugin.name,
+                    t('PluginLoader.plugin_uninstall.title', { name: installedPlugin.name }),
+                    t('PluginLoader.plugin_uninstall.button'),
+                    t('PluginLoader.plugin_uninstall.desc', { name: installedPlugin.name }),
+                  );
+                }}
               >
-                <ButtonItem
-                  bottomSeparator="none"
-                  layout="below"
-                  onClick={() =>
-                    requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType)
-                  }
-                >
-                  <span
-                    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '5px' }}
-                  >
-                    {installType === InstallType.UPDATE ? (
-                      <>
-                        <FaArrowUp /> {t('PluginCard.plugin_update')}
-                      </>
-                    ) : installType === InstallType.REINSTALL ? (
-                      <>
-                        <FaRecycle /> {t('PluginCard.plugin_reinstall')}
-                      </>
-                    ) : installType === InstallType.DOWNGRADE ? (
-                      <>
-                        <FaArrowDown /> {t('PluginCard.plugin_downgrade')}
-                      </>
-                    ) : installType === InstallType.OVERWRITE ? (
-                      <>
-                        <FaDownload /> {t('PluginCard.plugin_overwrite')}
-                      </>
-                    ) : (
-                      // installType === InstallType.INSTALL (also fallback)
-                      <>
-                        <FaDownload /> {t('PluginCard.plugin_install')}
-                      </>
-                    )}
-                  </span>
-                </ButtonItem>
-              </div>
-              <div style={{ minWidth: '130px' }}>
-                <Dropdown
-                  rgOptions={
-                    storePlugin.versions.map((version, index) => ({
-                      data: index,
-                      label: (
-                        <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-                          {version.name}
-                          {installedPlugin && installedVersionIndex === index ? <FaCheck /> : null}
-                        </div>
-                      ),
-                    })) as SingleDropdownOption[]
-                  }
-                  menuLabel={t('PluginCard.plugin_version_label') as string}
-                  selectedOption={selectedOption}
-                  onChange={({ data }) => setSelectedOption(data)}
-                />
-              </div>
-            </Focusable>
-          </PanelSectionRow>
-        </div>
+                <FaTrash />
+              </DialogButton>
+            ) : null}
+            <div style={{ minWidth: '130px' }}>
+              <Dropdown
+                rgOptions={storePlugin.versions.map(
+                  (version, index): SingleDropdownOption => ({
+                    data: index,
+                    label: (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                        {version.name}
+                        {installedPlugin && installedVersionIndex === index ? <FaCheck /> : null}
+                      </div>
+                    ),
+                  }),
+                )}
+                menuLabel={t('PluginCard.plugin_version_label') as string}
+                selectedOption={selectedOption}
+                onChange={({ data }) => setSelectedOption(data)}
+              />
+            </div>
+          </Focusable>
+        </PanelSectionRow>
       </div>
     </div>
   );

diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx
@@ -109,11 +109,6 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
 
   return (
     <>
-      <style>{`
-              .deckyStoreCardInstallContainer > .Panel {
-                padding: 0;
-              }
-            `}</style>
       {/* This should be used once filtering is added
 
       <PanelSectionRow>