altered shortcuts to kbd tag format

apps/web/src/components/editor/panels/preview/toolbar.tsx

@@ -26,7 +26,9 @@ import { PREVIEW_ZOOM_PRESETS } from "@/lib/preview/zoom";
 import { usePreviewViewport } from "./preview-viewport";
 import { GridPopover } from "./guide-popover";
 import { usePreviewStore } from "@/stores/preview-store";
-
+import { useKeyboardShortcutsHelp } from "@/hooks/use-keyboard-shortcuts-help";
+import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "@/components/ui/tooltip";
+import { Kbd } from "@/components/ui/kbd";
 export function PreviewToolbar({
 	onToggleFullscreen,
 }: {
@@ -135,14 +137,32 @@ function ZoomSelect() {
 
 function PlayPauseButton() {
 	const isPlaying = useEditor((e) => e.playback.getIsPlaying());
-
+	const { shortcuts } = useKeyboardShortcutsHelp();
+	const togglePlay = shortcuts.find(
+	item => item.action === "toggle-play"
+	);	
 	return (
-		<Button
-			variant="text"
-			size="icon"
-			onClick={() => invokeAction("toggle-play")}
-		>
-			<HugeiconsIcon icon={isPlaying ? PauseIcon : PlayIcon} />
-		</Button>
+		<TooltipProvider duration={500}>
+			<Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="text"
+            size="icon"
+            onClick={() => invokeAction("toggle-play")}
+          >
+            <HugeiconsIcon icon={isPlaying ? PauseIcon : PlayIcon} />
+          </Button>
+        </TooltipTrigger>
+
+        <TooltipContent className="flex items-center gap-2">
+			<span> {togglePlay?.description} </span>
+			<div className="flex gap-1">
+				<Kbd>
+					{togglePlay?.keys?.join(" / ")}
+				</Kbd>
+			</div>
+		</TooltipContent>
+      </Tooltip>
+		</TooltipProvider>
 	);
 }

apps/web/src/components/editor/panels/timeline/timeline-toolbar.tsx

@@ -50,7 +50,7 @@ import { GraphEditorPopover } from "./graph-editor/popover";
 import { PopoverTrigger } from "@/components/ui/popover";
 import { useGraphEditorController } from "./graph-editor/use-controller";
 import { useKeyboardShortcutsHelp } from "@/hooks/use-keyboard-shortcuts-help";
-
+import { Kbd } from "@/components/ui/kbd";
 export function TimelineToolbar({
 	zoomLevel,
 	minZoom,
@@ -100,7 +100,8 @@ function ToolbarLeftSection() {
 	const shortcutMap = Object.fromEntries(
 	shortcuts.map(s => [s.action, s])
 	);
-
+	console.log(shortcutMap);
+	
 
 
 	const selectedElement =
@@ -137,78 +138,107 @@ function ToolbarLeftSection() {
 		});
 
 	const ToolTipShortcuts = {
-		"split": {
-			icon: <HugeiconsIcon icon={ScissorIcon} />,
-			tooltip: `Split element (${shortcutMap["split"]?.keys[0]})`,
-			disabled: false,
-			onClick: ({ event }) =>
-			handleAction({ action: "split", event }),
-		},
+  split: {
+    icon: <HugeiconsIcon icon={ScissorIcon} />,
+    tooltip: (
+      <div className="flex items-center gap-2">
+        <span>Split element</span>
+        <Kbd>{shortcutMap["split"]?.keys?.[0]}</Kbd>
+      </div>
+    ),
+    disabled: false,
+    onClick: ({ event }) =>
+      handleAction({ action: "split", event }),
+  },
 
-		"split-left": {
-			icon: <HugeiconsIcon icon={AlignLeftIcon} />,
-			tooltip: `Split left (${shortcutMap["split-left"]?.keys[0]})`,
-			disabled: false,
-			onClick: ({ event }) =>
-			handleAction({ action: "split-left", event }),
-		},
+  "split-left": {
+    icon: <HugeiconsIcon icon={AlignLeftIcon} />,
+    tooltip: (
+      <div className="flex items-center gap-2">
+        <span>Split left</span>
+        <Kbd>{shortcutMap["split-left"]?.keys?.[0]}</Kbd>
+      </div>
+    ),
+    disabled: false,
+    onClick: ({ event }) =>
+      handleAction({ action: "split-left", event }),
+  },
 
-		"split-right": {
-			icon: <HugeiconsIcon icon={AlignRightIcon} />,
-			tooltip: `Split right (${shortcutMap["split-right"]?.keys[0]})`,
-			disabled: false,
-			onClick: ({ event }) =>
-			handleAction({ action: "split-right", event }),
-		},
+  "split-right": {
+    icon: <HugeiconsIcon icon={AlignRightIcon} />,
+    tooltip: (
+      <div className="flex items-center gap-2">
+        <span>Split right</span>
+        <Kbd>{shortcutMap["split-right"]?.keys?.[0]}</Kbd>
+      </div>
+    ),
+    disabled: false,
+    onClick: ({ event }) =>
+      handleAction({ action: "split-right", event }),
+  },
 
-		"toggle-source-audio": {
-			icon: (
-			<HugeiconsIcon
-				icon={
-				isSelectedSourceAudioSeparated
-					? Unlink02Icon
-					: Link02Icon
-				}
-			/>
-			),
-			tooltip: sourceAudioLabel,
-			disabled: !canToggleSelectedSourceAudio,
-			onClick: ({ event }) =>
-			handleAction({
-				action: "toggle-source-audio",
-				event
-			}),
-		},
+  "toggle-source-audio": {
+    icon: (
+      <HugeiconsIcon
+        icon={
+          isSelectedSourceAudioSeparated
+            ? Unlink02Icon
+            : Link02Icon
+        }
+      />
+    ),
+    tooltip: sourceAudioLabel,
+    disabled: !canToggleSelectedSourceAudio,
+    onClick: ({ event }) =>
+      handleAction({
+        action: "toggle-source-audio",
+        event,
+      }),
+  },
 
-		"duplicate-selected": {
-			icon: <HugeiconsIcon icon={Copy01Icon} />,
-			tooltip: "Duplicate element",
-			disabled: false,
-			onClick: ({ event }) =>
-			handleAction({
-				action: "duplicate-selected",
-				event
-			}),
-		},
+  "duplicate-selected": {
+    icon: <HugeiconsIcon icon={Copy01Icon} />,
+    tooltip: (
+      <div className="flex items-center gap-2">
+        <span>Duplicate element</span>
+        <Kbd>
+          {shortcutMap["duplicate-selected"]?.keys?.[0]}
+        </Kbd>
+      </div>
+    ),
+    disabled: false,
+    onClick: ({ event }) =>
+      handleAction({
+        action: "duplicate-selected",
+        event,
+      }),
+  },
 
-		"freeze-frame": {
-			icon: <HugeiconsIcon icon={SnowIcon} />,
-			tooltip: "Freeze frame (coming soon)",
-			disabled: true,
-			onClick: ({ event: _event }) => {},
-		},
+  "freeze-frame": {
+    icon: <HugeiconsIcon icon={SnowIcon} />,
+    tooltip: "Freeze frame (coming soon)",
+    disabled: true,
+    onClick: () => {},
+  },
 
-		"delete-selected": {
-			icon: <HugeiconsIcon icon={Delete02Icon} />,
-			tooltip: `Delete element (${shortcutMap["delete-selected"]?.keys.join(" / ")})`,
-			disabled: false,
-			onClick: ({ event }) =>
-			handleAction({
-				action: "delete-selected",
-				event
-			}),
-		},
-	};
+  "delete-selected": {
+    icon: <HugeiconsIcon icon={Delete02Icon} />,
+    tooltip: (
+      <div className="flex items-center gap-2">
+        <span>Delete element</span>
+        <Kbd>
+          {shortcutMap["delete-selected"]?.keys?.join(" / ")}
+        </Kbd>
+      </div>
+    ),
+    disabled: false,
+    onClick: ({ event }) =>
+      handleAction({
+        action: "delete-selected",
+        event,
+      }),
+  },
+};
 
 	const handleAction = ({
 		action,
@@ -374,7 +404,7 @@ function ToolbarButton({
 	buttonWrapper,
 }: {
 	icon: React.ReactNode;
-	tooltip: string;
+	tooltip: React.ReactNode | string;
 	onClick?: ({ event }: { event: React.MouseEvent }) => void;
 	disabled?: boolean;
 	isActive?: boolean;

apps/web/src/components/ui/kbd.tsx

@@ -0,0 +1,10 @@
+"use client"
+import * as React from "react";
+
+export const Kbd =  ({ children }: { children: React.ReactNode }) => {
+  return (
+    <kbd className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono border">
+      {children}
+    </kbd>
+  );
+}