feat: set scale dialog

src/components/dialogs/SetScale.tsx

@@ -0,0 +1,40 @@
+import { useContext, useState } from "react";
+
+import { CanvasContext } from "@/context/Canvas";
+
+import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+function SetScale({ close }: DialogProps) {
+	const { scale, setScale } = useContext(CanvasContext);
+
+	const [newScale, setNewScale] = useState(scale * 100);
+
+	const onSubmit = () => {
+		setScale(newScale / 100);
+		close();
+	};
+
+	return (
+		<DialogContent>
+			<DialogHeader>
+				<DialogTitle>Set Scale</DialogTitle>
+				<DialogDescription>Set your scale to a particular percentage</DialogDescription>
+			</DialogHeader>
+
+			<Input type="number" value={newScale} onChange={(e) => setNewScale(parseInt(e.target.value))} />
+
+			<DialogFooter>
+				<Button variant="outline" onClick={close}>
+					Cancel
+				</Button>
+				<Button type="submit" onClick={onSubmit}>
+					Submit
+				</Button>
+			</DialogFooter>
+		</DialogContent>
+	);
+}
+
+export default SetScale;

src/components/menubar/ViewMenu.tsx

@@ -1,8 +1,11 @@
 import { useContext } from "react";
-import { MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";
+import { MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@/components/ui/menubar";
+
+import { DialogContext } from "@/context/Dialog";
 import { SettingsContext } from "@/context/Settings";
 
 function ViewMenu() {
+	const openDialog = useContext(DialogContext);
 	const { settings, setSetting } = useContext(SettingsContext);
 
 	const onCheckedChange = (key: keyof Settings) => (value: boolean) => {
@@ -13,6 +16,8 @@ function ViewMenu() {
 		<MenubarMenu>
 			<MenubarTrigger>View</MenubarTrigger>
 			<MenubarContent>
+				<MenubarItem onClick={() => openDialog("SetScale")}>Set Scale</MenubarItem>
+				<MenubarSeparator />
 				<MenubarCheckboxItem checked={settings.grid} onCheckedChange={onCheckedChange("grid")}>
 					Grid
 				</MenubarCheckboxItem>