refactor: bunch of tool settings changes

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

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;

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) {
+		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>

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,
 };

src/types.d.ts

@@ -27,7 +27,7 @@ interface Settings {
 	grid: boolean;
 	canvasBorder: boolean;
 	colorPicker: boolean;
-	blocksReplacer: boolean;
+	blockReplacer: boolean;
 	radiusChanger: boolean;
 	blockSelector: boolean;
 }