feat: toggle tool settings

src/components/menubar/ViewMenu.tsx

@@ -24,6 +24,17 @@ function ViewMenu() {
 				<MenubarCheckboxItem checked={settings.canvasBorder} onCheckedChange={onCheckedChange("canvasBorder")}>
 					Canvas Border
 				</MenubarCheckboxItem>
+
+				<MenubarSeparator />
+				<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
+					Color Picker
+				</MenubarCheckboxItem>
+				<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
+					Radius Changer
+				</MenubarCheckboxItem>
+				<MenubarCheckboxItem checked={settings.blockSelector} onCheckedChange={onCheckedChange("blockSelector")}>
+					Block Selector
+				</MenubarCheckboxItem>
 			</MenubarContent>
 		</MenubarMenu>
 	);

src/components/tool-settings/index.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
+
+import { SettingsContext } from "@/context/Settings";
 
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -8,6 +10,8 @@ import Radius from "./Radius";
 import SelectorBlocks from "./SelectorBlocks";
 
 function ToolSettings() {
+	const { settings } = useContext(SettingsContext);
+
 	const divRef = useRef<HTMLDivElement>(null);
 	const [stageWidth, setStageWidth] = useState(0);
 	const [searchInput, setSearchInput] = useState("");
@@ -19,18 +23,34 @@ function ToolSettings() {
 	}, []);
 
 	return (
-		<div className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2">
+		<>
-			<ColorPicker />
+			{(settings.colorPicker || settings.radiusChanger || settings.blockSelector) && (
-			<Separator />
+				<div className="w-72 border-l border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-2 pb-0 flex flex-col h-full gap-2">
+					{settings.colorPicker && (
+						<>
+							<ColorPicker />
+							<Separator />
+						</>
+					)}
 
-			<Radius />
+					{settings.radiusChanger && (
-			<Separator />
+						<>
+							<Radius />
+							<Separator />
+						</>
+					)}
 
-			<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
+					{settings.blockSelector && (
-			<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
+						<>
-				<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
+							<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
-			</div>
+							<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
-		</div>
+								<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
+							</div>
+						</>
+					)}
+				</div>
+			)}
+		</>
 	);
 }
 

src/context/Settings.tsx

@@ -7,6 +7,9 @@ interface Props {
 const defaultSettings: Settings = {
 	grid: true,
 	canvasBorder: false,
+	colorPicker: false,
+	radiusChanger: true,
+	blockSelector: true,
 };
 
 export const SettingsContext = createContext({

src/types.d.ts

@@ -24,9 +24,11 @@ interface Block extends Position {
 type Tool = "hand" | "pencil" | "eraser" | "eyedropper" | "zoom";
 
 interface Settings {
-	blockSelectorWindow: boolean;
 	grid: boolean;
 	canvasBorder: boolean;
+	colorPicker: boolean;
+	radiusChanger: boolean;
+	blockSelector: boolean;
 }
 
 interface DialogProps {