SurfSense/surfsense_web/hooks/use-platform-shortcut.ts

import { useCallback, useEffect, useState } from "react";

interface NavigatorUAData {
	platform: string;
}

function getIsMac() {
	if (typeof navigator === "undefined") return false;

	// Modern API (Chromium browsers: Chrome, Edge, Opera)
	const uaData = (navigator as Navigator & { userAgentData?: NavigatorUAData }).userAgentData;
	if (uaData?.platform) {
		return uaData.platform === "macOS";
	}

	// Fallback for Firefox/Safari
	return /Mac|iPhone/.test(navigator.platform);
}

/**
 * Returns a helper that formats keyboard shortcut strings with
 * platform-aware modifier symbols.
 *
 * SSR-safe: returns an empty string until mounted so there is no hydration
 * mismatch.
 */
export function usePlatformShortcut() {
	const [ready, setReady] = useState(false);
	const [isMac, setIsMac] = useState(false);

	useEffect(() => {
		setIsMac(getIsMac());
		setReady(true);
	}, []);

	const shortcut = useCallback(
		(...keys: string[]) => {
			if (!ready) return "";

			const mod = isMac ? "⌘" : "Ctrl";
			const shift = isMac ? "⇧" : "Shift";
			const alt = isMac ? "⌥" : "Alt";

			const mapped = keys.map((k) => {
				if (k === "Mod") return mod;
				if (k === "Shift") return shift;
				if (k === "Alt") return alt;
				return k;
			});

			return `(${mapped.join("+")})`;
		},
		[ready, isMac]
	);

	return { shortcut, isMac, ready };
}