diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx index e72fcfacc..c777edf58 100644 --- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/dashboards/page-client.tsx @@ -5,6 +5,7 @@ import { FormDialog } from "@/components/form-dialog"; import { InputField } from "@/components/form-fields"; import { useRouter } from "@/components/router"; import { ActionDialog, Button, Typography } from "@/components/ui"; +import { getShortcutModifierKeyLabel } from "@/lib/keyboard-shortcuts"; import { useUpdateConfig } from "@/lib/config-update"; import { ChartBarIcon, @@ -28,6 +29,7 @@ export default function PageClient() { const adminApp = useAdminApp(); const project = adminApp.useProject(); const config = project.useConfig(); + const modifierKeyLabel = getShortcutModifierKeyLabel(); const updateConfig = useUpdateConfig(); const router = useRouter(); const [deleteDialogId, setDeleteDialogId] = useState(null); @@ -77,7 +79,9 @@ export default function PageClient() {
No dashboards yet - Create a dashboard from the command palette (⌘ K) or click "New Dashboard" above. + Create a dashboard from the command palette ( + {modifierKeyLabel} K + ) or click "New Dashboard" above.
diff --git a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/query-analytics/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/query-analytics/page-client.tsx index 3465a9167..06457ee67 100644 --- a/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/query-analytics/page-client.tsx +++ b/apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/query-analytics/page-client.tsx @@ -3,6 +3,7 @@ import Editor from "@monaco-editor/react"; import type { Monaco } from "@monaco-editor/react"; import React, { useEffect, useMemo, useRef } from "react"; +import { getShortcutModifierKeyLabel } from "@/lib/keyboard-shortcuts"; import { Alert, Button, Textarea, Typography } from "@/components/ui"; import { PageLayout } from "../page-layout"; import { useAdminApp } from "../use-admin-app"; @@ -21,6 +22,7 @@ type CompletionItem = Parameters(null); @@ -168,7 +170,7 @@ export default function PageClient() { loading={loading} disabled={loading || !queryRef.current.trim()} > - Run query (⌘ + enter) + Run query ({modifierKeyLabel} + enter) diff --git a/apps/dashboard/src/components/cmdk-search.tsx b/apps/dashboard/src/components/cmdk-search.tsx index ecb809fef..cf8f7333a 100644 --- a/apps/dashboard/src/components/cmdk-search.tsx +++ b/apps/dashboard/src/components/cmdk-search.tsx @@ -1,6 +1,7 @@ "use client"; import { useRouter } from "@/components/router"; +import { getShortcutModifierKeyLabel } from "@/lib/keyboard-shortcuts"; import { cn } from "@/lib/utils"; import { LayoutIcon, @@ -118,6 +119,8 @@ const CyclingPlaceholder = memo(function CyclingPlaceholder({ }: { onSelectQuery?: (query: string) => void, }) { + const modifierKeyLabel = getShortcutModifierKeyLabel(); + return (
{/* Top spacer */} @@ -149,7 +152,9 @@ const CyclingPlaceholder = memo(function CyclingPlaceholder({
{/* Keybind reminder - like tape on the corner */} - + + {modifierKeyLabel} + + K @@ -204,7 +209,9 @@ const CyclingPlaceholder = memo(function CyclingPlaceholder({ {/* Keyboard hints footer */}
- + + {modifierKeyLabel} + + K open @@ -999,6 +1006,7 @@ export function CmdKSearch({ export function CmdKTrigger() { const mouseCursorRef = useRef(null); const mouseCursorParentRef = useRef(null); + const modifierKeyLabel = getShortcutModifierKeyLabel(); useEffect(() => { const handleMouseMove = (e: MouseEvent) => { @@ -1058,8 +1066,11 @@ export function CmdKTrigger() { Control Center
- - ⌘ + + {modifierKeyLabel} K diff --git a/apps/dashboard/src/lib/keyboard-shortcuts.ts b/apps/dashboard/src/lib/keyboard-shortcuts.ts new file mode 100644 index 000000000..386a2421a --- /dev/null +++ b/apps/dashboard/src/lib/keyboard-shortcuts.ts @@ -0,0 +1,19 @@ +export function getShortcutModifierKeyLabel() { + if (typeof navigator === "undefined") { + return "⌘"; + } + + const platform = navigator.platform; + const userAgent = navigator.userAgent; + const isAppleDevice = + platform.startsWith("Mac") || + platform === "iPhone" || + platform === "iPad" || + platform === "iPod" || + userAgent.includes("Macintosh") || + userAgent.includes("iPhone") || + userAgent.includes("iPad") || + userAgent.includes("iPod"); + + return isAppleDevice ? "⌘" : "Ctrl"; +}