Show hotkeys on empty views

src-web/components/core/HotKey.tsx

@@ -5,9 +5,11 @@ import { useOsInfo } from '../../hooks/useOsInfo';
 
 interface Props {
   action: HotkeyAction | null;
+  className?: string;
+  variant?: 'text' | 'with-bg';
 }
 
-export function HotKey({ action }: Props) {
+export function HotKey({ action, className, variant }: Props) {
   const osInfo = useOsInfo();
   const label = useFormattedHotkey(action);
   if (label === null || osInfo == null) {
@@ -15,6 +17,14 @@ export function HotKey({ action }: Props) {
   }
 
   return (
-    <span className={classNames('text-sm text-gray-1000 text-opacity-disabled')}>{label}</span>
+    <span
+      className={classNames(
+        className,
+        variant === 'with-bg' && 'rounded border',
+        'text-sm text-gray-1000 text-opacity-disabled',
+      )}
+    >
+      {label}
+    </span>
   );
 }