From d06494885a8932dd01571b40de88eed3a6cd095b Mon Sep 17 00:00:00 2001
From: AAGaming <aagaming@riseup.net>
Date: Sun, 1 Sep 2024 20:40:12 -0400
Subject: [PATCH] fix external links softlocking the ui in testing store cta

---
 frontend/src/components/ExternalLink.tsx     | 16 ++++++++++++++++
 frontend/src/components/store/PluginCard.tsx |  5 +++--
 frontend/src/components/store/Store.tsx      |  9 +++++----
 3 files changed, 24 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/ExternalLink.tsx

diff --git a/frontend/src/components/ExternalLink.tsx b/frontend/src/components/ExternalLink.tsx
new file mode 100644
index 000000000..a223fc774
--- /dev/null
+++ b/frontend/src/components/ExternalLink.tsx
@@ -0,0 +1,16 @@
+import { Navigation } from '@decky/ui';
+import { AnchorHTMLAttributes, FC } from 'react';
+
+const ExternalLink: FC<AnchorHTMLAttributes<HTMLAnchorElement>> = (props) => {
+  return (
+    <a
+      {...props}
+      onClick={(e) => {
+        e.preventDefault();
+        props.onClick ? props.onClick(e) : props.href && Navigation.NavigateToExternalWeb(props.href);
+      }}
+    />
+  );
+};
+
+export default ExternalLink;
diff --git a/frontend/src/components/store/PluginCard.tsx b/frontend/src/components/store/PluginCard.tsx
index dd54aa656..6e2a35103 100644
--- a/frontend/src/components/store/PluginCard.tsx
+++ b/frontend/src/components/store/PluginCard.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { InstallType } from '../../plugin';
 import { StorePlugin, StorePluginVersion, requestPluginInstall } from '../../store';
+import ExternalLink from '../ExternalLink';
 
 interface PluginCardProps {
   plugin: StorePlugin;
@@ -108,7 +109,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
               }}
             >
               <i>{t('PluginCard.plugin_full_access')}</i>{' '}
-              <a
+              <ExternalLink
                 className="deckyStoreCardDescriptionRootLink"
                 href="https://deckbrew.xyz/root"
                 target="_blank"
@@ -118,7 +119,7 @@ const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
                 }}
               >
                 deckbrew.xyz/root
-              </a>
+              </ExternalLink>
             </div>
           )}
         </div>
diff --git a/frontend/src/components/store/Store.tsx b/frontend/src/components/store/Store.tsx
index d6342bba9..1094b243a 100644
--- a/frontend/src/components/store/Store.tsx
+++ b/frontend/src/components/store/Store.tsx
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 import logo from '../../../assets/plugin_store.png';
 import Logger from '../../logger';
 import { SortDirections, SortOptions, Store, StorePlugin, getPluginList, getStore } from '../../store';
+import ExternalLink from '../ExternalLink';
 import PluginCard from './PluginCard';
 
 const logger = new Logger('Store');
@@ -207,7 +208,7 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
           <h2 style={{ margin: 0 }}>{t('Store.store_testing_warning.label')}</h2>
           <span>
             {`${t('Store.store_testing_warning.desc')} `}
-            <a
+            <ExternalLink
               href="https://decky.xyz/testing"
               target="_blank"
               style={{
@@ -215,7 +216,7 @@ const BrowseTab: FC<{ setPluginCount: Dispatch<SetStateAction<number | null>> }>
               }}
             >
               decky.xyz/testing
-            </a>
+            </ExternalLink>
           </span>
         </div>
       )}
@@ -269,7 +270,7 @@ const AboutTab: FC<{}> = () => {
       <span className="deckyStoreAboutHeader">Testing</span>
       <span>
         {t('Store.store_testing_cta')}{' '}
-        <a
+        <ExternalLink
           href="https://decky.xyz/testing"
           target="_blank"
           style={{
@@ -277,7 +278,7 @@ const AboutTab: FC<{}> = () => {
           }}
         >
           decky.xyz/testing
-        </a>
+        </ExternalLink>
       </span>
       <span className="deckyStoreAboutHeader">{t('Store.store_contrib.label')}</span>
       <span>{t('Store.store_contrib.desc')}</span>