fix(search): require Cmd/Ctrl modifier for K shortcut and show platform-aware label

Author: steffen-berkner

src/app/[lang]/provider.tsx

@@ -1,6 +1,7 @@
+"use client";
 import { defineI18nUI } from "fumadocs-ui/i18n";
 import { RootProvider } from "fumadocs-ui/provider/base";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect, useState } from "react";
 import { i18n } from "@/lib/i18n";
 
 const { provider } = defineI18nUI(i18n, {
@@ -12,6 +13,26 @@ const { provider } = defineI18nUI(i18n, {
 	},
 });
 
+function ShortcutDisplay() {
+	const [modifier, setModifier] = useState("Ctrl");
+
+	useEffect(() => {
+		const platform =
+			(navigator as Navigator & { userAgentData?: { platform?: string } })
+				.userAgentData?.platform ??
+			navigator.platform ??
+			"";
+		setModifier(/Mac|iPhone|iPad|iPod/i.test(platform) ? "⌘" : "Strg");
+	}, []);
+
+	return (
+		<span className="inline-flex items-center gap-1">
+			<span>{modifier}</span>
+			<span>K</span>
+		</span>
+	);
+}
+
 export function Provider({
 	children,
 	lang,
@@ -25,8 +46,9 @@ export function Provider({
 				enabled: true,
 				hotKey: [
 					{
-						display: "K",
-						key: "k", // key code, or a function determining whether the key is pressed
+						display: <ShortcutDisplay />,
+						key: (e) =>
+							(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k",
 					},
 				],
 			}}