feat: add shortcuts list in documentation

Author: julien-moreau

website/src/app/documentation/page.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 
 import { Fade } from "react-awesome-reveal";
 
+import { Kbd } from "@/components/ui/kbd";
+
 import { NextChapterComponent } from "./components/next-chapter";
 
 export default function DocumentationPage() {
@@ -78,6 +80,70 @@ export default function DocumentationPage() {
 							engine. The most powerful, beautiful, simple, and open web rendering engine in the world.
 						</div>
 
+						<div className="text-3xl md:text-2xl lg:text-3xl mt-3">Shortcults</div>
+
+						<div className="text-xl font-semibold">In Editor</div>
+
+						<div className="flex flex-col">
+							<div>
+								<Kbd>⌘Q</Kbd> or <Kbd>CTRL+Q</Kbd>: Quit application.
+							</div>
+							<div>
+								<Kbd>⌘,</Kbd> (macOS only): Open editor's preferences.
+							</div>
+
+							<br />
+
+							<div>
+								<Kbd>⌘C</Kbd> or <Kbd>CTRL+C</Kbd>: Copy selected text / selected object.
+							</div>
+							<div>
+								<Kbd>⌘V</Kbd> or <Kbd>CTRL+V</Kbd>: Paste text / copied object.
+							</div>
+
+							<br />
+
+							<div>
+								<Kbd>⌘S</Kbd> or <Kbd>CTRL+S</Kbd>: Save project.
+							</div>
+							<div>
+								<Kbd>⌘G</Kbd> or <Kbd>CTRL+G</Kbd>: Generate project output (downsized & compressed textures, scripts map, output scene, assets copy, etc.).
+							</div>
+							<div>
+								<Kbd>⌘P</Kbd> or <Kbd>CTRL+P</Kbd>: Open commands dialog.
+							</div>
+							<div>
+								<Kbd>⌘F</Kbd> or <Kbd>CTRL+F</Kbd>: Focus selected object in preview panel.
+							</div>
+
+							<br />
+
+							<div>
+								<Kbd>⌘T</Kbd> or <Kbd>CTRL+T</Kbd>: Select translation gizmo.
+							</div>
+							<div>
+								<Kbd>⌘R</Kbd> or <Kbd>CTRL+R</Kbd>: Select rotation gizmo.
+							</div>
+							<div>
+								<Kbd>⌘D</Kbd> or <Kbd>CTRL+D</Kbd>: Select scaling gizmo.
+							</div>
+
+							<br />
+
+							<div>
+								<Kbd>⌘B</Kbd> or <Kbd>CTRL+B</Kbd>: Play / Stop scene in preview panel.
+							</div>
+
+							<br />
+
+							<div>
+								<Kbd>⌘M</Kbd> or <Kbd>CTRL+M</Kbd>: Minimize focused window.
+							</div>
+							<div>
+								<Kbd>⌘W</Kbd> or <Kbd>CTRL+W</Kbd>: Close focused windows.
+							</div>
+						</div>
+
 						<NextChapterComponent href="/documentation/creating-project" title="Creating project" />
 					</div>
 				</Fade>

website/src/components/ui/kbd.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+	return (
+		<kbd
+			data-slot="kbd"
+			className={cn(
+				"bg-neutral-800 pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+				"[&_svg:not([class*='size-'])]:size-3",
+				"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return <kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };