Adds a new enter shortcut key

Author: samejr

apps/webapp/app/assets/icons/KeyboardEnterIcon.tsx

@@ -0,0 +1,12 @@
+export function KeyboardEnterIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 5H18C19.6569 5 21 6.34315 21 8V13C21 14.6569 19.6569 16 18 16H8"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M2 16L8 12L8 20L2 16Z" fill="currentColor" />
+    </svg>
+  );
+}

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

@@ -6,6 +6,7 @@ import { KeyboardWindowsIcon } from "~/assets/icons/KeyboardWindowsIcon";
 import { type Modifier, type Shortcut } from "~/hooks/useShortcutKeys";
 import { cn } from "~/utils/cn";
 import { useOperatingSystem } from "./OperatingSystemProvider";
+import { KeyboardEnterIcon } from "~/assets/icons/KeyboardEnterIcon";
 
 const medium =
   "text-[0.75rem] font-medium min-w-[17px] rounded-[2px] tabular-nums px-1 ml-1 -mr-0.5 flex items-center gap-x-1.5 border border-dimmed/40 text-text-dimmed group-hover:text-text-bright/80 group-hover:border-dimmed/60 transition uppercase";
@@ -60,7 +61,11 @@ function keyString(key: string, isMac: boolean, variant: "small" | "medium" | "m
 
   switch (key) {
     case "enter":
-      return isMac ? "↵" : <span className="capitalize">Enter</span>;
+      return isMac ? (
+        <KeyboardEnterIcon className={className} />
+      ) : (
+        <span className="capitalize">Enter</span>
+      );
     case "esc":
       return <span className="capitalize">Esc</span>;
     case "del":