From c1ef1558677264ee33d76dc9cb8bfb1ed6be958b Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Sat, 28 Dec 2024 17:35:07 +0000
Subject: [PATCH] refactor: bunch of tool settings changes

---
 src/components/menubar/ViewMenu.tsx            |  4 ++--
 .../{SelectorBlocks.tsx => BlockSelector.tsx}  |  5 +++--
 src/components/tool-settings/index.tsx         | 18 +++++++++---------
 src/context/Settings.tsx                       |  2 +-
 src/types.d.ts                                 |  2 +-
 5 files changed, 16 insertions(+), 15 deletions(-)
 rename src/components/tool-settings/{SelectorBlocks.tsx => BlockSelector.tsx} (96%)

diff --git a/src/components/menubar/ViewMenu.tsx b/src/components/menubar/ViewMenu.tsx
index ced1aff..a9ab945 100644
--- a/src/components/menubar/ViewMenu.tsx
+++ b/src/components/menubar/ViewMenu.tsx
@@ -29,8 +29,8 @@ function ViewMenu() {
 				<MenubarCheckboxItem checked={settings.colorPicker} onCheckedChange={onCheckedChange("colorPicker")}>
 					Color Picker
 				</MenubarCheckboxItem>
-				<MenubarCheckboxItem checked={settings.blocksReplacer} onCheckedChange={onCheckedChange("blocksReplacer")}>
-					Blocks Replacer
+				<MenubarCheckboxItem checked={settings.blockReplacer} onCheckedChange={onCheckedChange("blockReplacer")}>
+					Block Replacer
 				</MenubarCheckboxItem>
 				<MenubarCheckboxItem checked={settings.radiusChanger} onCheckedChange={onCheckedChange("radiusChanger")}>
 					Radius Changer
diff --git a/src/components/tool-settings/SelectorBlocks.tsx b/src/components/tool-settings/BlockSelector.tsx
similarity index 96%
rename from src/components/tool-settings/SelectorBlocks.tsx
rename to src/components/tool-settings/BlockSelector.tsx
index d075cd6..c349bde 100644
--- a/src/components/tool-settings/SelectorBlocks.tsx
+++ b/src/components/tool-settings/BlockSelector.tsx
@@ -14,7 +14,7 @@ interface Props {
 	searchInput: string;
 }
 
-function SelectorBlocks({ stageWidth, searchInput }: Props) {
+function BlockSelector({ stageWidth, searchInput }: Props) {
 	const { version } = useContext(CanvasContext);
 	const { missingTexture, textures } = useContext(TexturesContext);
 	const { isDark } = useContext(ThemeContext);
@@ -67,6 +67,7 @@ function SelectorBlocks({ stageWidth, searchInput }: Props) {
 
 					return (
 						<Sprite
+							key={block}
 							texture={texture}
 							x={x}
 							y={y}
@@ -110,4 +111,4 @@ function SelectorBlocks({ stageWidth, searchInput }: Props) {
 	);
 }
 
-export default SelectorBlocks;
+export default BlockSelector;
diff --git a/src/components/tool-settings/index.tsx b/src/components/tool-settings/index.tsx
index 9ee9466..fa08374 100644
--- a/src/components/tool-settings/index.tsx
+++ b/src/components/tool-settings/index.tsx
@@ -8,7 +8,8 @@ import { Separator } from "@/components/ui/separator";
 import ColorPicker from "./ColorPicker";
 import Replace from "./Replace";
 import Radius from "./Radius";
-import SelectorBlocks from "./SelectorBlocks";
+import BlockSelector from "./BlockSelector";
+import { ScrollArea } from "../ui/scroll-area";
 
 function ToolSettings() {
 	const { settings } = useContext(SettingsContext);
@@ -18,14 +19,13 @@ function ToolSettings() {
 	const [searchInput, setSearchInput] = useState("");
 
 	useEffect(() => {
-		if (divRef.current) {
-			setStageWidth(divRef.current.clientWidth);
-		}
+		if (!divRef.current) return;
+		setStageWidth(divRef.current.clientWidth);
 	}, []);
 
 	return (
 		<>
-			{(settings.colorPicker || settings.blocksReplacer || settings.radiusChanger || settings.blockSelector) && (
+			{(settings.colorPicker || settings.blockReplacer || 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 && (
 						<>
@@ -34,7 +34,7 @@ function ToolSettings() {
 						</>
 					)}
 
-					{settings.blocksReplacer && (
+					{settings.blockReplacer && (
 						<>
 							<Replace />
 							<Separator />
@@ -51,9 +51,9 @@ function ToolSettings() {
 					{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>
+							<ScrollArea ref={divRef} className="w-full flex-1 pb-2">
+								<BlockSelector stageWidth={stageWidth} searchInput={searchInput} />
+							</ScrollArea>
 						</>
 					)}
 				</div>
diff --git a/src/context/Settings.tsx b/src/context/Settings.tsx
index 775058a..42de7a2 100644
--- a/src/context/Settings.tsx
+++ b/src/context/Settings.tsx
@@ -13,7 +13,7 @@ const defaultSettings: Settings = {
 	grid: true,
 	canvasBorder: false,
 	colorPicker: false,
-	blocksReplacer: true,
+	blockReplacer: true,
 	radiusChanger: true,
 	blockSelector: true,
 };
diff --git a/src/types.d.ts b/src/types.d.ts
index 0519ff1..97e35a8 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -27,7 +27,7 @@ interface Settings {
 	grid: boolean;
 	canvasBorder: boolean;
 	colorPicker: boolean;
-	blocksReplacer: boolean;
+	blockReplacer: boolean;
 	radiusChanger: boolean;
 	blockSelector: boolean;
 }