fix Cmd Issue

[Gagan202005]

Related Tickets & Documents

Fixes: keploy/keploy#3439

Description

• Added runtime OS detection to display Cmd + K on macOS and Ctrl + K on other platforms.
• Implemented the logic in a reusable utility/component, making it easy to use across the codebase.

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

• Tested locally on macOS to confirm the shortcut renders as Cmd + K.
• Verified fallback behavior on non-mac platforms shows Ctrl + K

Demo

• Image of UI on Mac

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes

[Copilot]

Pull request overview

This PR fixes issue #3439 by implementing runtime OS detection to display the appropriate keyboard shortcut hint ("Cmd + K" on macOS, "Ctrl + K" on other platforms) in the search button of the navigation bar.

Key Changes:

• Created a new utility hook ShortcutHint to detect the user's operating system and return the appropriate keyboard shortcut text
• Updated the search button in FloatingNavbarClient to use the new utility instead of hardcoded "Ctrl + K"

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
utils/GetShortCutHint.ts	New utility hook that detects macOS via user agent and returns the appropriate keyboard shortcut string
components/navbar/FloatingNavbarClient.tsx	Imports and uses the new ShortcutHint hook to dynamically display the correct keyboard shortcut

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Using a React hook (with useState and useEffect) for this functionality is unnecessarily complex and causes performance overhead. Since the OS doesn't change during the user's session, this could be simplified to a pure function that returns the shortcut string directly, or use useMemo to cache the result. The current implementation causes unnecessary re-renders of the component.

Suggested change

	import { useEffect,useState } from "react";
	export function ShortcutHint() {
	const [shortcut, setShortcut] = useState("Ctrl + K");
	useEffect(() => {
	const ua = navigator.userAgent.toLowerCase();
	if (ua.includes("macintosh") || ua.includes("mac os x")) {
	setShortcut("Cmd + K");
	}
	}, []);
	return shortcut;
	}
	export function ShortcutHint() {
	const ua =
	typeof navigator !== "undefined"
	? navigator.userAgent.toLowerCase()
	: "";
	if (ua.includes("macintosh") || ua.includes("mac os x")) {
	return "Cmd + K";
	}
	return "Ctrl + K";
	}

[Copilot]

Missing space after comma in the import statement. Should be "useEffect, useState" instead of "useEffect,useState".

Suggested change

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

[Copilot]

The file naming convention is inconsistent with other utils. This file uses PascalCase "GetShortCutHint.ts", while other utility files in this directory follow camelCase naming (e.g., "calculateReadingTime.ts", "sanitizeAuthorSlug.ts"). Consider renaming to "getShortcutHint.ts" for consistency.

[Copilot]

This implementation will cause a hydration mismatch in Next.js. The component initially renders "Ctrl + K" during SSR/first render, then updates to "Cmd + K" on macOS after the useEffect runs. This creates a flash of incorrect content and triggers React hydration warnings. Since this component is used in a client component (indicated by "use client" directive), consider using a pure function that detects the OS synchronously during render, or use the same detection method already present in the parent component (line 38 uses navigator.platform).

Suggested change

	import { useEffect,useState } from "react";
	export function ShortcutHint() {
	const [shortcut, setShortcut] = useState("Ctrl + K");
	useEffect(() => {
	const ua = navigator.userAgent.toLowerCase();
	if (ua.includes("macintosh") || ua.includes("mac os x")) {
	setShortcut("Cmd + K");
	}
	}, []);
	return shortcut;
	export function ShortcutHint() {
	if (typeof navigator !== "undefined") {
	const ua = navigator.userAgent.toLowerCase();
	if (ua.includes("macintosh") || ua.includes("mac os x")) {
	return "Cmd + K";
	}
	}
	return "Ctrl + K";

[Copilot]

The OS detection methods are inconsistent within the same component. This new utility uses "navigator.userAgent" to detect macOS, while the existing keyboard event handler (line 38) uses "navigator.platform". Consider using the same detection method for consistency. Additionally, "navigator.platform" is more reliable for this use case as it's specifically designed for platform detection, whereas "navigator.userAgent" can be modified or spoofed more easily.

Suggested change

	const ua = navigator.userAgent.toLowerCase();
	if (ua.includes("macintosh") || ua.includes("mac os x")) {
	const platform = navigator.platform || "";
	if (platform.toUpperCase().includes("MAC")) {