Fix hotkey formatting

src-web/components/core/Button.tsx

@@ -52,7 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   }: ButtonProps,
   ref,
 ) {
-  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null);
+  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join('');
   const fullTitle = hotkeyTrigger ? `${title}  ${hotkeyTrigger}` : title;
 
   const classes = useMemo(

src-web/components/core/HotKey.tsx

@@ -12,8 +12,8 @@ interface Props {
 
 export function HotKey({ action, className, variant }: Props) {
   const osInfo = useOsInfo();
-  const label = useFormattedHotkey(action);
+  const labelParts = useFormattedHotkey(action);
-  if (label === null || osInfo == null) {
+  if (labelParts === null || osInfo == null) {
     return null;
   }
 
@@ -25,8 +25,8 @@ export function HotKey({ action, className, variant }: Props) {
         'text-gray-1000 text-opacity-disabled',
       )}
     >
-      {label.split('').map((char, index) => (
+      {labelParts.map((char, index) => (
-        <div key={index} className="w-[1.1em] text-center">
+        <div key={index} className="min-w-[1.1em] text-center">
           {char}
         </div>
       ))}

src-web/hooks/useHotKey.ts

@@ -1,5 +1,6 @@
 import type { OsType } from '@tauri-apps/api/os';
 import { useEffect, useRef } from 'react';
+import { capitalize } from '../lib/capitalize';
 import { debounce } from '../lib/debounce';
 import { useOsInfo } from './useOsInfo';
 
@@ -121,7 +122,7 @@ export function useHotKeyLabel(action: HotkeyAction): string {
   return hotkeyLabels[action];
 }
 
-export function useFormattedHotkey(action: HotkeyAction | null): string | null {
+export function useFormattedHotkey(action: HotkeyAction | null): string[] | null {
   const osInfo = useOsInfo();
   const trigger = action != null ? hotkeys[action]?.[0] ?? null : null;
   if (trigger == null || osInfo == null) {
@@ -145,21 +146,21 @@ export function useFormattedHotkey(action: HotkeyAction | null): string | null {
       } else if (p === 'Tab') {
         labelParts.push('⇥');
       } else {
-        labelParts.push(p.toUpperCase());
+        labelParts.push(capitalize(p));
       }
     } else {
       if (p === 'CmdCtrl') {
         labelParts.push('Ctrl');
       } else {
-        labelParts.push(p);
+        labelParts.push(capitalize(p));
       }
     }
   }
 
   if (os === 'Darwin') {
-    return labelParts.join('');
+    return labelParts;
   } else {
-    return labelParts.join('+');
+    return [labelParts.join('+')];
   }
 }
 

src-web/lib/capitalize.ts

@@ -0,0 +1,3 @@
+export function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}