From 99bfd58c494a7b28e75f20f5470cfe2cb424daff Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Thu, 26 Dec 2024 22:14:57 +0000
Subject: [PATCH] feat: toggle tool settings

---
 src/components/menubar/ViewMenu.tsx    | 11 +++++++
 src/components/tool-settings/index.tsx | 42 +++++++++++++++++++-------
 src/context/Settings.tsx               |  3 ++
 src/types.d.ts                         |  4 ++-
 4 files changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/components/menubar/ViewMenu.tsx b/src/components/menubar/ViewMenu.tsx
index 9d17656..dddc836 100644
--- a/src/components/menubar/ViewMenu.tsx
+++ b/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>
 	);
diff --git a/src/components/tool-settings/index.tsx b/src/components/tool-settings/index.tsx
index 7cb82f5..7882d6d 100644
--- a/src/components/tool-settings/index.tsx
+++ b/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 />
-			<Separator />
+		<>
+			{(settings.colorPicker || settings.radiusChanger || settings.blockSelector) && (
+				<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 />
-			<Separator />
+					{settings.radiusChanger && (
+						<>
+							<Radius />
+							<Separator />
+						</>
+					)}
 
-			<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
-			<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
-				<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
-			</div>
-		</div>
+					{settings.blockSelector && (
+						<>
+							<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
+							<div ref={divRef} className="w-full flex-1 overflow-y-auto pb-2">
+								<SelectorBlocks stageWidth={stageWidth} searchInput={searchInput} />
+							</div>
+						</>
+					)}
+				</div>
+			)}
+		</>
 	);
 }
 
diff --git a/src/context/Settings.tsx b/src/context/Settings.tsx
index a8c304d..a8d9afb 100644
--- a/src/context/Settings.tsx
+++ b/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({
diff --git a/src/types.d.ts b/src/types.d.ts
index f80f98a..cab4479 100644
--- a/src/types.d.ts
+++ b/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 {