feat: implement platform-aware keyboard shortcuts for sidebar and toolbar actions, enhancing user experience

surfsense_web/hooks/use-platform-shortcut.ts

@@ -0,0 +1,57 @@
+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 };
+}