From 87ed120044f2f506a24048d2a4fa7da9df9a5e87 Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Mon, 23 Sep 2024 21:05:38 +0200
Subject: [PATCH] feat: electron links open in browser

---
 .../NavigationMenu.module.scss                |  1 +
 .../navigation-menu/NavigationMenu.tsx        | 54 +++++++++++++------
 apps/client/src/viewerConfig.ts               | 18 +++----
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
index acb7e09b77..1964a82f82 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss
@@ -47,6 +47,7 @@ $button-size: 3rem;
   @include action-link;
   padding: 0.75rem 1.5rem;
   gap: 0.5rem;
+  width: 100%;
 
   &:hover {
     background-color: $menu-hover-bg;
diff --git a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
index 59ba429373..3d733a2eb9 100644
--- a/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
+++ b/apps/client/src/common/components/navigation-menu/NavigationMenu.tsx
@@ -1,4 +1,4 @@
-import { memo, useRef } from 'react';
+import { memo, PropsWithChildren, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
 import {
@@ -19,9 +19,12 @@ import { IoSwapVertical } from '@react-icons/all-files/io5/IoSwapVertical';
 
 import { navigatorConstants } from '../../../viewerConfig';
 import useClickOutside from '../../hooks/useClickOutside';
+import useElectronEvent from '../../hooks/useElectronEvent';
 import { useClientStore } from '../../stores/clientStore';
 import { useViewOptionsStore } from '../../stores/viewOptions';
 import { isKeyEnter } from '../../utils/keyEvent';
+import { handleLinks } from '../../utils/linkUtils';
+import { cx } from '../../utils/styleUtils';
 import { RenameClientModal } from '../client-modal/RenameClientModal';
 
 import style from './NavigationMenu.module.scss';
@@ -96,38 +99,29 @@ function NavigationMenu(props: NavigationMenuProps) {
             <hr className={style.separator} />
             <Link
               to='/editor'
-              className={`${style.link} ${location.pathname === '/editor' ? style.current : ''}`}
               tabIndex={0}
+              className={`${style.link} ${location.pathname === '/editor' && style.current}`}
             >
               <IoLockClosedOutline />
               Editor
               <IoArrowUp className={style.linkIcon} />
             </Link>
-            <Link
-              to='/cuesheet'
-              className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
-              tabIndex={0}
-            >
+            <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
               <IoLockClosedOutline />
               Cuesheet
               <IoArrowUp className={style.linkIcon} />
-            </Link>
-            <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
+            </ClientLink>
+            <ClientLink to='op' current={location.pathname === '/op'}>
               <IoLockClosedOutline />
               Operator
               <IoArrowUp className={style.linkIcon} />
-            </Link>
+            </ClientLink>
             <hr className={style.separator} />
             {navigatorConstants.map((route) => (
-              <Link
-                key={route.url}
-                to={route.url}
-                className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
-                tabIndex={0}
-              >
+              <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
                 {route.label}
                 <IoArrowUp className={style.linkIcon} />
-              </Link>
+              </ClientLink>
             ))}
           </DrawerBody>
         </DrawerContent>
@@ -137,4 +131,30 @@ function NavigationMenu(props: NavigationMenuProps) {
   );
 }
 
+interface ClientLinkProps {
+  current: boolean;
+  to: string;
+}
+
+function ClientLink(props: PropsWithChildren<ClientLinkProps>) {
+  const { current, to, children } = props;
+  const { isElectron } = useElectronEvent();
+
+  const classes = cx([style.link, current && style.current]);
+
+  if (isElectron) {
+    return (
+      <button className={classes} tabIndex={0} onClick={(event) => handleLinks(event, to)}>
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <Link to={`/${to}`} className={classes} tabIndex={0}>
+      {children}
+    </Link>
+  );
+}
+
 export default memo(NavigationMenu);
diff --git a/apps/client/src/viewerConfig.ts b/apps/client/src/viewerConfig.ts
index 3b0acd8ff2..6c6ba35ff8 100644
--- a/apps/client/src/viewerConfig.ts
+++ b/apps/client/src/viewerConfig.ts
@@ -1,13 +1,13 @@
 export const navigatorConstants = [
-  { url: '/timer', label: 'Timer' },
-  { url: '/clock', label: 'Clock' },
-  { url: '/minimal', label: 'Minimal Timer' },
-  { url: '/backstage', label: 'Backstage' },
-  { url: '/timeline', label: 'Timeline (beta)' },
-  { url: '/public', label: 'Public' },
-  { url: '/lower', label: 'Lower Thirds' },
-  { url: '/studio', label: 'Studio Clock' },
-  { url: '/countdown', label: 'Countdown' },
+  { url: 'timer', label: 'Timer' },
+  { url: 'clock', label: 'Clock' },
+  { url: 'minimal', label: 'Minimal Timer' },
+  { url: 'backstage', label: 'Backstage' },
+  { url: 'timeline', label: 'Timeline (beta)' },
+  { url: 'public', label: 'Public' },
+  { url: 'lower', label: 'Lower Thirds' },
+  { url: 'studio', label: 'Studio Clock' },
+  { url: 'countdown', label: 'Countdown' },
 ];
 
 // default time format to use for users in 12 hour clocks