From 48f23fd7ece857b904b44203bd3b643c6210c9f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Cuesta?=
 <1827495+alvaro-cuesta@users.noreply.github.com>
Date: Fri, 3 Jan 2025 00:24:46 +0100
Subject: [PATCH 1/5] refactor: remove unused classnames

---
 frontend/src/components/store/PluginCard.tsx | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index f64abd09..68257b5e 100644
--- a/frontend/src/components/store/PluginCard.tsx
+++ b/frontend/src/components/store/PluginCard.tsx
@@ -32,7 +32,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
 
   return (
     <div
-      className="deckyStoreCard"
       style={{
         marginLeft: '20px',
         marginRight: '20px',
@@ -41,7 +40,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
       }}
     >
       <div
-        className="deckyStoreCardImageContainer"
         style={{
           width: '320px',
           height: '200px',
@@ -49,7 +47,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
         }}
       >
         <SuspensefulImage
-          className="deckyStoreCardImage"
           suspenseHeight="200px"
           suspenseWidth="320px"
           style={{
@@ -61,7 +58,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
         />
       </div>
       <div
-        className="deckyStoreCardInfo"
         style={{
           width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
           display: 'flex',
@@ -73,7 +69,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
       >
         <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <span
-            className="deckyStoreCardTitle"
             style={{
               fontSize: '1.25em',
               fontWeight: 'bold',
@@ -86,7 +81,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             {storePlugin.name}
           </span>
           <span
-            className="deckyStoreCardAuthor"
             style={{
               marginRight: 'auto',
               fontSize: '1em',
@@ -95,7 +89,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             {storePlugin.author}
           </span>
           <span
-            className="deckyStoreCardDescription"
             style={{
               fontSize: '13px',
               color: '#969696',
@@ -115,7 +108,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
           </span>
           {root && (
             <div
-              className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
               style={{
                 fontSize: '13px',
                 color: '#fee75c',
@@ -124,7 +116,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             >
               <i>{t('PluginCard.plugin_full_access')}</i>{' '}
               <ExternalLink
-                className="deckyStoreCardDescriptionRootLink"
                 href="https://deckbrew.xyz/root"
                 target="_blank"
                 style={{
@@ -137,7 +128,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             </div>
           )}
         </div>
-        <div className="deckyStoreCardButtonRow">
+        <div>
           <PanelSectionRow>
             <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
               <div
@@ -159,7 +150,6 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
                   }
                 >
                   <span
-                    className="deckyStoreCardInstallText"
                     style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '5px' }}
                   >
                     {installType === InstallType.UPDATE ? (
@@ -187,7 +177,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
                   </span>
                 </ButtonItem>
               </div>
-              <div className="deckyStoreCardVersionContainer" style={{ minWidth: '130px' }}>
+              <div style={{ minWidth: '130px' }}>
                 <Dropdown
                   rgOptions={
                     storePlugin.versions.map((version, index) => ({

From ebc2f52e3fbbe6e7abe7d8d67e68311df01a6881 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Cuesta?=
 <1827495+alvaro-cuesta@users.noreply.github.com>
Date: Fri, 3 Jan 2025 00:43:01 +0100
Subject: [PATCH 2/5] feat: add uninstall button to store

---
 frontend/src/components/store/PluginCard.tsx | 150 ++++++++++---------
 frontend/src/components/store/Store.tsx      |   5 -
 2 files changed, 78 insertions(+), 77 deletions(-)

diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index 68257b5e..9fb3c2a1 100644
--- 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
index 3209ba08..4c5d7da8 100644
--- 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>

From bb69a9a578abc765104141239c6abf653b547ece Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Cuesta?=
 <1827495+alvaro-cuesta@users.noreply.github.com>
Date: Fri, 17 Jan 2025 09:39:15 +0100
Subject: [PATCH 3/5] revert(48f23fd7): "refactor: remove unused classnames"

Although the classes seemed to be unused, they exist for theme
developers.

Also add a warning documenting this.
---
 frontend/src/components/store/PluginCard.tsx | 164 ++++++++++---------
 1 file changed, 91 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index 9fb3c2a1..0d555f19 100644
--- a/frontend/src/components/store/PluginCard.tsx
+++ b/frontend/src/components/store/PluginCard.tsx
@@ -30,8 +30,10 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
 
   const { t } = useTranslation();
 
+  // IMPORTANT! The `deckyStore*` classes below seem unused but they exist for theme developers
   return (
     <div
+      className="deckyStoreCard"
       style={{
         marginLeft: '20px',
         marginRight: '20px',
@@ -40,6 +42,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
       }}
     >
       <div
+        className="deckyStoreCardImageContainer"
         style={{
           width: '320px',
           height: '200px',
@@ -47,6 +50,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
         }}
       >
         <SuspensefulImage
+          className="deckyStoreCardImage"
           suspenseHeight="200px"
           suspenseWidth="320px"
           style={{
@@ -58,6 +62,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
         />
       </div>
       <div
+        className="deckyStoreCardInfo"
         style={{
           width: 'calc(100% - 320px)', // The calc is here so that the info section doesn't expand into the image
           display: 'flex',
@@ -69,6 +74,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
       >
         <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <span
+            className="deckyStoreCardTitle"
             style={{
               fontSize: '1.25em',
               fontWeight: 'bold',
@@ -81,6 +87,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             {storePlugin.name}
           </span>
           <span
+            className="deckyStoreCardAuthor"
             style={{
               marginRight: 'auto',
               fontSize: '1em',
@@ -89,6 +96,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             {storePlugin.author}
           </span>
           <span
+            className="deckyStoreCardDescription"
             style={{
               fontSize: '13px',
               color: '#969696',
@@ -108,6 +116,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
           </span>
           {root && (
             <div
+              className="deckyStoreCardDescription deckyStoreCardDescriptionRoot"
               style={{
                 fontSize: '13px',
                 color: '#fee75c',
@@ -116,6 +125,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             >
               <i>{t('PluginCard.plugin_full_access')}</i>{' '}
               <ExternalLink
+                className="deckyStoreCardDescriptionRootLink"
                 href="https://deckbrew.xyz/root"
                 target="_blank"
                 style={{
@@ -128,82 +138,90 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
             </div>
           )}
         </div>
-        <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 ? (
+        <div className="deckyStoreCardButtonRow">
+          <PanelSectionRow>
+            <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
               <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 }),
-                  );
-                }}
+                onClick={() =>
+                  requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType)
+                }
               >
-                <FaTrash />
+                <span
+                  className="deckyStoreCardInstallText"
+                  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>
               </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>
+              {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 }),
+                    );
+                  }}
+                >
+                  <FaTrash />
+                </DialogButton>
+              ) : null}
+              <div className="deckyStoreCardVersionContainer" 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>
     </div>
   );

From 3396928ea3ac297f888dcf5d839619d2b7755316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Cuesta?=
 <1827495+alvaro-cuesta@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:02:41 +0100
Subject: [PATCH 4/5] revert(partial): restore "deckyStoreCardInstallContainer"

Class was removed in ebc2f52e because it seemed no longer needed after
removing some styling, but it's actually there for theme developers.
---
 frontend/src/components/store/PluginCard.tsx | 76 ++++++++++----------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index 0d555f19..25446c61 100644
--- a/frontend/src/components/store/PluginCard.tsx
+++ b/frontend/src/components/store/PluginCard.tsx
@@ -141,44 +141,46 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
         <div className="deckyStoreCardButtonRow">
           <PanelSectionRow>
             <Focusable style={{ display: 'flex', gap: '5px', padding: 0 }}>
-              <DialogButton
-                onClick={() =>
-                  requestPluginInstall(storePlugin.name, storePlugin.versions[selectedOption], installType)
-                }
-              >
-                <span
-                  className="deckyStoreCardInstallText"
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    gap: '5px',
-                  }}
+              <div className="deckyStoreCardInstallContainer" style={{ flexGrow: '1' }}>
+                <DialogButton
+                  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')}
-                    </>
-                  )}
-                </span>
-              </DialogButton>
+                  <span
+                    className="deckyStoreCardInstallText"
+                    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>
+                </DialogButton>
+              </div>
               {installedPlugin && installedVersionIndex === selectedOption ? (
                 <DialogButton
                   style={{

From cc89630c2888555de0229b757cb625ef665dc383 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Cuesta?=
 <1827495+alvaro-cuesta@users.noreply.github.com>
Date: Fri, 17 Jan 2025 10:06:23 +0100
Subject: [PATCH 5/5] chore: remove unneeded formatting change

---
 frontend/src/components/store/PluginCard.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index 25446c61..c01c2b97 100644
--- a/frontend/src/components/store/PluginCard.tsx
+++ b/frontend/src/components/store/PluginCard.tsx
@@ -149,12 +149,7 @@ const PluginCard: FC<PluginCardProps> = ({ storePlugin, installedPlugin }) => {
                 >
                   <span
                     className="deckyStoreCardInstallText"
-                    style={{
-                      display: 'flex',
-                      justifyContent: 'center',
-                      alignItems: 'center',
-                      gap: '5px',
-                    }}
+                    style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '5px' }}
                   >
                     {installType === InstallType.UPDATE ? (
                       <>