Loading component links to open externally if desktop app (#7833)

Author: pierremtb

src/components/Loading.tsx

@@ -16,6 +16,7 @@ import {
 } from '@src/lang/std/engineConnection'
 import { SafeRenderer } from '@src/lib/markdown'
 import { engineCommandManager } from '@src/lib/singletons'
+import { openExternalBrowserIfDesktop } from '@src/lib/openWindow'
 
 interface LoadingProps extends React.PropsWithChildren {
   isDummy?: boolean
@@ -33,6 +34,10 @@ const markedOptions: MarkedOptions = {
   escape,
 }
 
+const statusUrl = 'https://status.zoo.dev'
+const diagnosingNetworkIssuesUrl =
+  'https://community.zoo.dev/t/diagnosing-network-connection-issues/156'
+
 // This exists here and not in engineConnection because we want some styling
 // available to us.
 export const CONNECTION_ERROR_CALL_TO_ACTION_TEXT: Record<
@@ -61,7 +66,10 @@ export const CONNECTION_ERROR_CALL_TO_ACTION_TEXT: Record<
   [ConnectionError.Outage]: (
     <>
       We seem to be experiencing an outage. Please visit{' '}
-      <a href="https://status.zoo.dev">status.zoo.dev</a> for updates.
+      <a href={statusUrl} onClick={openExternalBrowserIfDesktop(statusUrl)}>
+        status.zoo.dev
+      </a>{' '}
+      for updates.
     </>
   ),
   [ConnectionError.PeerConnectionRemoteDisconnected]:
@@ -236,7 +244,12 @@ const Loading = ({
             <div className="text-sm">
               If the issue persists, please visit the community support thread
               on{' '}
-              <a href="https://community.zoo.dev/t/diagnosing-network-connection-issues/156">
+              <a
+                href={diagnosingNetworkIssuesUrl}
+                onClick={openExternalBrowserIfDesktop(
+                  diagnosingNetworkIssuesUrl
+                )}
+              >
                 diagnosing network connection issues
               </a>
               .