From 27ab85404d932967f87658dad713940832d6a797 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 1 Mar 2025 21:45:42 -0600
Subject: [PATCH] Add key command to directly access App Configuration

---
 src/admin/AdminAppMenu.tsx          |  9 +++++++--
 src/utility/useIsKeyBeingPressed.ts | 29 +++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 src/utility/useIsKeyBeingPressed.ts

diff --git a/src/admin/AdminAppMenu.tsx b/src/admin/AdminAppMenu.tsx
index 43b22056..d78e6a59 100644
--- a/src/admin/AdminAppMenu.tsx
+++ b/src/admin/AdminAppMenu.tsx
@@ -22,6 +22,7 @@ import { signOutAction } from '@/auth/actions';
 import { ComponentProps } from 'react';
 import { FaRegFolderOpen } from 'react-icons/fa';
 import { FiUploadCloud } from 'react-icons/fi';
+import useIsKeyBeingPressed from '@/utility/useIsKeyBeingPressed';
 
 export default function AdminAppMenu({
   active,
@@ -45,6 +46,10 @@ export default function AdminAppMenu({
 
   const isSelecting = selectedPhotoIds !== undefined;
 
+  const isAltPressed = useIsKeyBeingPressed('alt');
+
+  const showAppInsightsLink = photosCountTotal > 0 && !isAltPressed;
+
   const items: ComponentProps<typeof MoreMenu>['items'] = [{
     label: 'Upload Photos',
     icon: <FiUploadCloud
@@ -95,14 +100,14 @@ export default function AdminAppMenu({
   }
 
   items.push({
-    label: photosCountTotal > 0
+    label: showAppInsightsLink
       ? 'App Insights'
       : 'App Configuration',
     icon: <AdminAppInfoIcon
       size="small"
       className="translate-x-[-0.5px] translate-y-[-0.5px]"
     />,
-    href: photosCountTotal > 0
+    href: showAppInsightsLink
       ? PATH_ADMIN_INSIGHTS
       : PATH_ADMIN_CONFIGURATION,
   }, {
diff --git a/src/utility/useIsKeyBeingPressed.ts b/src/utility/useIsKeyBeingPressed.ts
new file mode 100644
index 00000000..604ee843
--- /dev/null
+++ b/src/utility/useIsKeyBeingPressed.ts
@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+
+const LISTENER_KEYDOWN = 'keydown';
+const LISTENER_KEYUP = 'keyup';
+
+export default function useIsKeyBeingPressed(key: string) {
+  const [isPressed, setIsPressed] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === key.toLowerCase()) {
+        setIsPressed(true);
+      }
+    };
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === key.toLowerCase()) {
+        setIsPressed(false);
+      }
+    };
+    window.addEventListener(LISTENER_KEYDOWN, handleKeyDown);
+    window.addEventListener(LISTENER_KEYUP, handleKeyUp);
+    return () => {
+      window.removeEventListener(LISTENER_KEYDOWN, handleKeyDown);
+      window.removeEventListener(LISTENER_KEYUP, handleKeyUp);
+    };
+  }, [key]);
+
+  return isPressed;
+}