Adds a prop so you can optionally hide the shortcut key

Author: samejr

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -301,6 +301,7 @@ export function SideMenu({
                     variant="small-menu-item"
                     data-action="ask-ai"
                     shortcut={{ modifiers: ["mod"], key: "/" }}
+                    hideShortcutKey
                     data-modal-override-open-class-ask-ai="true"
                     onClick={() => {
                       if (typeof window.Kapa === "function") {
@@ -317,6 +318,7 @@ export function SideMenu({
                 className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs"
               >
                 Ask AI
+                <ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
               </TooltipContent>
             </Tooltip>
           </TooltipProvider>

apps/webapp/app/components/primitives/Buttons.tsx

@@ -177,6 +177,7 @@ export type ButtonContentPropsType = {
   shortcutPosition?: "before-trailing-icon" | "after-trailing-icon";
   tooltip?: ReactNode;
   iconSpacing?: string;
+  hideShortcutKey?: boolean;
 };
 
 export function ButtonContent(props: ButtonContentPropsType) {
@@ -192,6 +193,7 @@ export function ButtonContent(props: ButtonContentPropsType) {
     className,
     tooltip,
     iconSpacing,
+    hideShortcutKey,
   } = props;
   const variation = allVariants.variant[props.variant];
 
@@ -207,6 +209,7 @@ export function ButtonContent(props: ButtonContentPropsType) {
         className={cn(shortcutClassName)}
         shortcut={shortcut}
         variant={variation.shortcutVariant ?? "medium"}
+        hideShortcutKey={hideShortcutKey}
       />
     );
 

apps/webapp/app/components/primitives/ShortcutKey.tsx

@@ -33,17 +33,23 @@ type ShortcutKeyProps = {
   shortcut: ShortcutKeyDefinition;
   variant: ShortcutKeyVariant;
   className?: string;
+  hideShortcutKey?: boolean;
 };
 
-export function ShortcutKey({ shortcut, variant, className }: ShortcutKeyProps) {
+export function ShortcutKey({
+  shortcut,
+  variant,
+  className,
+  hideShortcutKey = false,
+}: ShortcutKeyProps) {
   const { platform } = useOperatingSystem();
   const isMac = platform === "mac";
   let relevantShortcut = "mac" in shortcut ? (isMac ? shortcut.mac : shortcut.windows) : shortcut;
   const modifiers = relevantShortcut.modifiers ?? [];
   const character = relevantShortcut.key ? keyString(relevantShortcut.key, isMac, variant) : null;
 
   return (
-    <span className={cn(variants[variant], className)}>
+    <span className={cn(variants[variant], hideShortcutKey && "hidden", className)}>
       {modifiers.map((k) => (
         <span key={k}>
           <span>{modifierString(k, isMac, variant)}</span>