Refine admin menu tooltip interaction

src/admin/AdminAppMenu.tsx

@@ -97,7 +97,7 @@ export default function AdminAppMenu({
           {photosCountNeedSync}
         </span>
         <InsightsIndicatorDot
-          className="inline-block translate-y-[1px]"
+          className="inline-block translate-y-[-1px]"
           size="small"
         />
       </>,
@@ -201,7 +201,7 @@ export default function AdminAppMenu({
               className="translate-x-[1px] translate-y-[1px]"
               size={13}
             />
-            :<IconLock
+            : <IconLock
               size={16}
               className="translate-x-[1px] translate-y-[0.5px]"
               narrow

src/app/AppViewSwitcher.tsx

@@ -12,7 +12,7 @@ import { GRID_HOMEPAGE_ENABLED } from './config';
 import AdminAppMenu from '@/admin/AdminAppMenu';
 import Spinner from '@/components/Spinner';
 import clsx from 'clsx/lite';
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 
 export type SwitcherSelection = 'feed' | 'grid' | 'admin';
 
@@ -29,19 +29,31 @@ export default function AppViewSwitcher({
     setIsCommandKOpen,
   } = useAppState();
 
+  const hasAdminMenuOpenedOnce = useRef(false);
   const [isAdminMenuOpen, setIsAdminMenuOpen] = useState(false);
 
+  useEffect(() => {
+    if (isAdminMenuOpen) {
+      hasAdminMenuOpenedOnce.current = true;
+    } else if (hasAdminMenuOpenedOnce.current) {
+      // Blur admin menu button to avoid tooltip on dismiss
+      setTimeout(() => {
+        if (document.activeElement instanceof HTMLElement) {
+          document.activeElement.blur();
+        }
+      }, 50);
+    }
+  }, [isAdminMenuOpen]);
+
   const renderItemFeed =
     <SwitcherItem
       icon={<IconFeed includeTitle={false} className="translate-x-[-0.5px]" />}
       href={PATH_FEED_INFERRED}
       active={currentSelection === 'feed'}
-      tooltip={!isAdminMenuOpen
+      tooltip={{
-        ? {
+        content: 'Feed',
-          content: 'Feed',
+        keyCommand: 'F',
-          keyCommand: 'F',
+      }}
-        }
-        : undefined}
       noPadding
     />;
 
@@ -50,20 +62,20 @@ export default function AppViewSwitcher({
       icon={<IconGrid includeTitle={false} className="translate-x-[-0.5px]" />}
       href={PATH_GRID_INFERRED}
       active={currentSelection === 'grid'}
-      tooltip={!isAdminMenuOpen
+      tooltip={{
-        ? {
+        content: 'Grid',
-          content: 'Grid',
+        keyCommand: 'G',
-          keyCommand: 'G',
+      }}
-        }
-        : undefined}
       noPadding
     />;
 
   return (
-    <div className={clsx(
+    <div
-      'flex gap-1 sm:gap-2',
+      className={clsx(
-      className,
+        'flex gap-1 sm:gap-2',
-    )}>
+        className,
+      )}
+    >
       <Switcher>
         {GRID_HOMEPAGE_ENABLED ? renderItemGrid : renderItemFeed}
         {GRID_HOMEPAGE_ENABLED ? renderItemFeed : renderItemGrid}
@@ -73,9 +85,7 @@ export default function AppViewSwitcher({
             icon={<Spinner />}
             isInteractive={false}
             noPadding
-            tooltip={!isAdminMenuOpen
+            tooltip={{ content: 'Admin Menu' }}
-              ? { content: 'Admin Menu' }
-              : undefined}
           />}
         {isUserSignedIn &&
           <SwitcherItem
@@ -83,9 +93,7 @@ export default function AppViewSwitcher({
               isOpen={isAdminMenuOpen}
               setIsOpen={setIsAdminMenuOpen}
             />}
-            tooltip={!isAdminMenuOpen
+            tooltip={{ content: !isAdminMenuOpen ? 'Admin Menu' : undefined }}
-              ? { content: 'Admin Menu' }
-              : undefined}
             noPadding
           />}
       </Switcher>
@@ -93,13 +101,11 @@ export default function AppViewSwitcher({
         <SwitcherItem
           icon={<IconSearch includeTitle={false} />}
           onClick={() => setIsCommandKOpen?.(true)}
-          tooltip={!isAdminMenuOpen
+          tooltip={{
-            ? {
+            content: 'Search',
-              content: 'Search',
+            keyCommand: 'K',
-              keyCommand: 'K',
+            keyCommandModifier: '⌘',
-              keyCommandModifier: '⌘',
+          }}
-            }
-            : undefined}
         />
       </Switcher>
     </div>

src/components/SwitcherItem.tsx

@@ -72,7 +72,7 @@ export default function SwitcherItem({
       ? <Tooltip
         {...tooltip}
         classNameTrigger={WIDTH_CLASS}
-        delayDuration={500}
+        delayDuration={300}
       >
         {content}
       </Tooltip>

src/components/primitives/KeyCommand.tsx

@@ -19,7 +19,11 @@ export default function KeyCommand({
       {keys.map((key) => (
         <span
           key={key}
-          className="text-gray-600 bg-gray-200/75 px-1 rounded-sm"
+          className={clsx(
+            'px-1 rounded-sm shadow-xs',
+            'text-gray-600 bg-gray-200/90',
+            'dark:text-gray-300 dark:bg-gray-600/55',
+          )}
         >
           {key}
         </span>

src/components/primitives/TooltipPrimitive.tsx

@@ -49,7 +49,7 @@ export default function TooltipPrimitive({
   });
 
   const classNameTrigger = clsx(
-    'cursor-default inline-block',
+    'cursor-default inline-flex',
     classNameTriggerProp,
   );