feat: electron links open in browser

apps/client/src/common/components/navigation-menu/NavigationMenu.module.scss

@@ -47,6 +47,8 @@ $button-size: 3rem;
   @include action-link;
   padding: 0.75rem 1.5rem;
   gap: 0.5rem;
+  width: 100%;
+  cursor: pointer;
 
   &:hover {
     background-color: $menu-hover-bg;

apps/client/src/common/components/navigation-menu/NavigationMenu.tsx

@@ -1,6 +1,6 @@
-import { memo, useRef } from 'react';
+import { memo, PropsWithChildren, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import {
   Drawer,
   DrawerBody,
@@ -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';
@@ -40,6 +43,7 @@ function NavigationMenu(props: NavigationMenuProps) {
   const { isOpen: isOpenRename, onOpen: onRenameOpen, onClose: onCloseRename } = useDisclosure();
   const { fullscreen, toggle } = useFullscreen();
   const { toggleMirror } = useViewOptionsStore();
+  const location = useLocation();
 
   const menuRef = useRef<HTMLDivElement | null>(null);
 
@@ -96,38 +100,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
+            <ClientLink to='cuesheet' current={location.pathname === '/cuesheet'}>
-              to='/cuesheet'
-              className={`${style.link} ${location.pathname === '/cuesheet' ? style.current : ''}`}
-              tabIndex={0}
-            >
               <IoLockClosedOutline />
               Cuesheet
               <IoArrowUp className={style.linkIcon} />
-            </Link>
+            </ClientLink>
-            <Link to='/op' className={`${style.link} ${location.pathname === '/op' ? style.current : ''}`} tabIndex={0}>
+            <ClientLink to='op' current={location.pathname === '/op'}>
               <IoLockClosedOutline />
               Operator
               <IoArrowUp className={style.linkIcon} />
-            </Link>
+            </ClientLink>
             <hr className={style.separator} />
             {navigatorConstants.map((route) => (
-              <Link
+              <ClientLink key={route.url} to={route.url} current={location.pathname === `/${route.url}`}>
-                key={route.url}
-                to={route.url}
-                className={`${style.link} ${route.url === location.pathname ? style.current : undefined}`}
-                tabIndex={0}
-              >
                 {route.label}
                 <IoArrowUp className={style.linkIcon} />
-              </Link>
+              </ClientLink>
             ))}
           </DrawerBody>
         </DrawerContent>
@@ -137,4 +132,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);

apps/client/src/viewerConfig.ts

@@ -1,13 +1,13 @@
 export const navigatorConstants = [
-  { url: '/timer', label: 'Timer' },
+  { url: 'timer', label: 'Timer' },
-  { url: '/clock', label: 'Clock' },
+  { url: 'clock', label: 'Clock' },
-  { url: '/minimal', label: 'Minimal Timer' },
+  { url: 'minimal', label: 'Minimal Timer' },
-  { url: '/backstage', label: 'Backstage' },
+  { url: 'backstage', label: 'Backstage' },
-  { url: '/timeline', label: 'Timeline (beta)' },
+  { url: 'timeline', label: 'Timeline (beta)' },
-  { url: '/public', label: 'Public' },
+  { url: 'public', label: 'Public' },
-  { url: '/lower', label: 'Lower Thirds' },
+  { url: 'lower', label: 'Lower Thirds' },
-  { url: '/studio', label: 'Studio Clock' },
+  { url: 'studio', label: 'Studio Clock' },
-  { url: '/countdown', label: 'Countdown' },
+  { url: 'countdown', label: 'Countdown' },
 ];
 
 // default time format to use for users in 12 hour clocks