Add configuration for keyboard shortcut tooltips

README.md

@@ -139,6 +139,7 @@ Application behavior can be changed by configuring the following environment var
      - `films` (default)
      - `focal-lengths`
 - `NEXT_PUBLIC_EXHAUSTIVE_SIDEBAR_CATEGORIES = 1` always shows expanded sidebar content
+- `NEXT_PUBLIC_HIDE_KEYBOARD_SHORTCUT_TOOLTIPS = 1` hides keyboard shortcut hints in areas like the main nav, and previous/next photo links
 - `NEXT_PUBLIC_HIDE_EXIF_DATA = 1` hides EXIF data in photo details and OG images (potentially useful for portfolios, which don't focus on photography)
 - `NEXT_PUBLIC_HIDE_ZOOM_CONTROLS = 1` hides fullscreen photo zoom controls
 - `NEXT_PUBLIC_HIDE_TAKEN_AT_TIME = 1` hides taken at time from photo meta

src/admin/AdminAppConfigurationClient.tsx

@@ -78,6 +78,7 @@ export default function AdminAppConfigurationClient({
   categoryVisibility,
   hasCategoryVisibility,
   collapseSidebarCategories,
+  showKeyboardShortcutTooltips,
   showExifInfo,
   showZoomControls,
   showTakenAtTimeHidden,
@@ -560,6 +561,15 @@ export default function AdminAppConfigurationClient({
             expanded category content
             {renderEnvVars(['NEXT_PUBLIC_EXHAUSTIVE_SIDEBAR_CATEGORIES'])}
           </ChecklistRow>
+          <ChecklistRow
+            title="Show keyboard shortcut tooltips"
+            status={showKeyboardShortcutTooltips}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide keyboard shortcut
+            tooltips in areas like the main nav, and previous/next photo links:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_KEYBOARD_SHORTCUT_TOOLTIPS'])}
+          </ChecklistRow>
           <ChecklistRow
             title="Show EXIF data"
             status={showExifInfo}

src/app/AppViewSwitcher.tsx

@@ -8,7 +8,10 @@ import {
 } from '@/app/paths';
 import IconSearch from '../components/icons/IconSearch';
 import { useAppState } from '@/state/AppState';
-import { GRID_HOMEPAGE_ENABLED } from './config';
+import {
+  GRID_HOMEPAGE_ENABLED,
+  SHOW_KEYBOARD_SHORTCUT_TOOLTIPS,
+} from './config';
 import AdminAppMenu from '@/admin/AdminAppMenu';
 import Spinner from '@/components/Spinner';
 import clsx from 'clsx/lite';
@@ -62,10 +65,10 @@ export default function AppViewSwitcher({
       href={PATH_FEED_INFERRED}
       hrefRef={refHrefFeed}
       active={currentSelection === 'feed'}
-      tooltip={{
+      tooltip={{...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
         content: 'Feed',
         keyCommand: KEY_COMMANDS.feed,
-      }}
+      }}}
       noPadding
     />;
 
@@ -75,10 +78,10 @@ export default function AppViewSwitcher({
       href={PATH_GRID_INFERRED}
       hrefRef={refHrefGrid}
       active={currentSelection === 'grid'}
-      tooltip={{
+      tooltip={{...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
         content: 'Grid',
         keyCommand: KEY_COMMANDS.grid,
-      }}
+      }}}
       noPadding
     />;
 
@@ -98,7 +101,12 @@ export default function AppViewSwitcher({
             icon={<Spinner />}
             isInteractive={false}
             noPadding
-            tooltip={{ content: 'Admin Menu' }}
+            tooltip={{
+              ...!isAdminMenuOpen && SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
+                content: 'Admin Menu',
+                keyCommand: KEY_COMMANDS.admin,
+              },
+            }}
           />}
         {isUserSignedIn &&
           <SwitcherItem
@@ -107,8 +115,10 @@ export default function AppViewSwitcher({
               setIsOpen={setIsAdminMenuOpen}
             />}
             tooltip={{
-              content: !isAdminMenuOpen ? 'Admin Menu' : undefined,
-              keyCommand: !isAdminMenuOpen ? KEY_COMMANDS.admin : undefined,
+              ...!isAdminMenuOpen && SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
+                content: 'Admin Menu',
+                keyCommand: KEY_COMMANDS.admin,
+              },
             }}
             noPadding
           />}
@@ -117,11 +127,11 @@ export default function AppViewSwitcher({
         <SwitcherItem
           icon={<IconSearch includeTitle={false} />}
           onClick={() => setIsCommandKOpen?.(true)}
-          tooltip={{
+          tooltip={{...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
             content: 'Search',
             keyCommandModifier: KEY_COMMANDS.search[0],
             keyCommand: KEY_COMMANDS.search[1],
-          }}
+          }}}
         />
       </Switcher>
     </div>

src/app/config.ts

@@ -264,6 +264,8 @@ export const SHOW_FOCAL_LENGTHS =
   CATEGORY_VISIBILITY.includes('focal-lengths');
 export const COLLAPSE_SIDEBAR_CATEGORIES =
   process.env.NEXT_PUBLIC_EXHAUSTIVE_SIDEBAR_CATEGORIES !== '1';
+export const SHOW_KEYBOARD_SHORTCUT_TOOLTIPS =
+  process.env.NEXT_PUBLIC_HIDE_KEYBOARD_SHORTCUT_TOOLTIPS !== '1';
 export const SHOW_EXIF_DATA =
   process.env.NEXT_PUBLIC_HIDE_EXIF_DATA !== '1';
 export const SHOW_ZOOM_CONTROLS =
@@ -361,8 +363,8 @@ export const APP_CONFIGURATION = {
   arePhotosStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTOS,
   arePhotoOGImagesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES,
   arePhotoCategoriesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_CATEGORIES,
-  // eslint-disable-next-line max-len
-  arePhotoCategoryOgImagesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES,
+  arePhotoCategoryOgImagesStaticallyOptimized:
+    STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES,
   areOriginalUploadsPreserved: PRESERVE_ORIGINAL_UPLOADS,
   hasImageQuality: Boolean(process.env.NEXT_PUBLIC_IMAGE_QUALITY),
   imageQuality: IMAGE_QUALITY,
@@ -378,6 +380,7 @@ export const APP_CONFIGURATION = {
     Boolean(process.env.NEXT_PUBLIC_CATEGORY_VISIBILITY),
   categoryVisibility: CATEGORY_VISIBILITY,
   collapseSidebarCategories: COLLAPSE_SIDEBAR_CATEGORIES,
+  showKeyboardShortcutTooltips: SHOW_KEYBOARD_SHORTCUT_TOOLTIPS,
   showExifInfo: SHOW_EXIF_DATA,
   showZoomControls: SHOW_ZOOM_CONTROLS,
   showTakenAtTimeHidden: SHOW_TAKEN_AT_TIME,

src/photo/PhotoPrevNextActions.tsx

@@ -23,7 +23,10 @@ import {
 } from './actions';
 import { isPhotoFav } from '@/tag';
 import Tooltip from '@/components/Tooltip';
-import { ALLOW_PUBLIC_DOWNLOADS } from '@/app/config';
+import {
+  ALLOW_PUBLIC_DOWNLOADS,
+  SHOW_KEYBOARD_SHORTCUT_TOOLTIPS,
+} from '@/app/config';
 import { downloadFileFromBrowser } from '@/utility/url';
 import useKeydownHandler from '@/utility/useKeydownHandler';
 import { KEY_COMMANDS } from './key-commands';
@@ -188,10 +191,10 @@ export default function PhotoPrevNextActions({
         'items-center sm:items-start',
         '*:select-none',
       )}>
-        <Tooltip
-          content={previousPhoto ? 'Previous' : undefined}
-          keyCommand={previousPhoto ? KEY_COMMANDS.prev[0] : undefined}
-        >
+        <Tooltip {...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
+          content: 'Previous',
+          keyCommand: KEY_COMMANDS.prev[0],
+        }}>
           <PhotoLink
             {...categories}
             ref={refPrevious}
@@ -208,10 +211,10 @@ export default function PhotoPrevNextActions({
         <span className="text-extra-extra-dim">
           /
         </span>
-        <Tooltip
-          content={nextPhoto ? 'Next' : undefined}
-          keyCommand={nextPhoto ? KEY_COMMANDS.next[0] : undefined}
-        >
+        <Tooltip {...SHOW_KEYBOARD_SHORTCUT_TOOLTIPS && {
+          content: 'Next',
+          keyCommand: KEY_COMMANDS.next[0],
+        }}>
           <PhotoLink
             {...categories}
             ref={refNext}