From a27f52927603c1f518a3dc46fed0e0a7568c98da Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Wed, 8 Oct 2025 17:31:31 +0100
Subject: [PATCH] feat: small, random changes

---
 src/components/canvas/Blocks.tsx             |  2 +-
 src/components/canvas/Canvas.tsx             |  3 +++
 src/components/canvas/information/Canvas.tsx |  2 +-
 src/components/dialogs/ClearBlocks.tsx       |  2 +-
 src/components/sidebar/Replace.tsx           |  4 ++--
 src/components/toolbar/SelectedBlock.tsx     |  6 +++---
 src/components/toolbar/index.tsx             |  2 +-
 src/context/History.tsx                      | 17 +++++++++--------
 src/index.css                                |  2 +-
 src/pages/AppPage.tsx                        |  4 ++--
 10 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/canvas/Blocks.tsx b/src/components/canvas/Blocks.tsx
index 093210f..625a55a 100644
--- a/src/components/canvas/Blocks.tsx
+++ b/src/components/canvas/Blocks.tsx
@@ -15,7 +15,7 @@ interface Props {
 	isSelectionLayer?: boolean;
 }
 
-// Lifts 16,000 tiles limit
+// Removes 16,000 tiles limit
 settings.use32bitIndex = true;
 
 function Blocks({ blocks, missingTexture, textures, coords, scale, version, isSelectionLayer }: Props) {
diff --git a/src/components/canvas/Canvas.tsx b/src/components/canvas/Canvas.tsx
index e9248b8..834211d 100644
--- a/src/components/canvas/Canvas.tsx
+++ b/src/components/canvas/Canvas.tsx
@@ -527,6 +527,9 @@ function Canvas() {
 				</Application>
 			</div>
 
+			{/* Overlay for the inset shadow */}
+			<div className="absolute inset-0 pointer-events-none  shadow-[inset_0_0_20px_rgba(0,0,0,0.6)] shadow-black/15 dark:shadow-black/45" />
+
 			<CursorInformation mouseCoords={mouseCoords} />
 			<CanvasInformation />
 
diff --git a/src/components/canvas/information/Canvas.tsx b/src/components/canvas/information/Canvas.tsx
index fb6b10a..59d9736 100644
--- a/src/components/canvas/information/Canvas.tsx
+++ b/src/components/canvas/information/Canvas.tsx
@@ -29,7 +29,7 @@ function CanvasInformation() {
 				</div>
 			</div>
 
-			<div className="info-child">
+			<div className="info-child py-2!">
 				<Slider
 					defaultValue={[1]}
 					min={-1} // 10^(-1) = 0.1
diff --git a/src/components/dialogs/ClearBlocks.tsx b/src/components/dialogs/ClearBlocks.tsx
index 2841ab6..e56d615 100644
--- a/src/components/dialogs/ClearBlocks.tsx
+++ b/src/components/dialogs/ClearBlocks.tsx
@@ -28,7 +28,7 @@ function ClearBlocks({ close }: DialogProps) {
 		<DialogContent>
 			<DialogHeader>
 				<DialogTitle>Are you sure?</DialogTitle>
-				<DialogDescription>This action will delete every block on the canvas. It cannot be undone once completed.</DialogDescription>
+				<DialogDescription>This action will delete every block on the canvas!</DialogDescription>
 			</DialogHeader>
 
 			<DialogFooter>
diff --git a/src/components/sidebar/Replace.tsx b/src/components/sidebar/Replace.tsx
index e39c214..9569e1c 100644
--- a/src/components/sidebar/Replace.tsx
+++ b/src/components/sidebar/Replace.tsx
@@ -78,7 +78,7 @@ function Replace() {
 			<Label htmlFor="radius">Block 1</Label>
 			<button
 				onClick={() => onClickBlockButton(1)}
-				className="h-10 rounded-md border border-zinc-200 dark:border-zinc-800 dark:bg-zinc-950 flex justify-center items-center"
+				className="h-10 rounded-md cursor-pointer border border-zinc-200 dark:border-zinc-800 dark:bg-zinc-950 flex justify-center items-center"
 			>
 				<Application width={32} height={32} backgroundAlpha={0}>
 					<pixiContainer>
@@ -90,7 +90,7 @@ function Replace() {
 			<Label htmlFor="radius">Block 2</Label>
 			<button
 				onClick={() => onClickBlockButton(2)}
-				className="h-10 rounded-md border border-zinc-200 dark:border-zinc-800 dark:bg-zinc-950 flex justify-center items-center"
+				className="h-10 rounded-md cursor-pointer border border-zinc-200 dark:border-zinc-800 dark:bg-zinc-950 flex justify-center items-center"
 			>
 				<Application width={32} height={32} backgroundAlpha={0}>
 					<pixiContainer>
diff --git a/src/components/toolbar/SelectedBlock.tsx b/src/components/toolbar/SelectedBlock.tsx
index 72e5e7e..3ad646e 100644
--- a/src/components/toolbar/SelectedBlock.tsx
+++ b/src/components/toolbar/SelectedBlock.tsx
@@ -30,10 +30,10 @@ function SelectedBlock() {
 		<TooltipProvider>
 			<Tooltip delayDuration={0}>
 				<TooltipTrigger asChild>
-					<div className="absolute bottom-1 w-8 h-8 outline-solid outline-1 outline-zinc-800 dark:outline-zinc-200 rounded p-0!">
-						<Application width={32} height={32}>
+					<div className="absolute bottom-1 w-7 h-7 outline-solid outline-1 outline-zinc-800 dark:outline-zinc-200 rounded p-0!">
+						<Application width={28} height={28}>
 							<pixiContainer>
-								<pixiSprite texture={textures[selectedBlock] ?? missingTexture} scale={2} />
+								<pixiSprite texture={textures[selectedBlock] ?? missingTexture} scale={1.75} />
 							</pixiContainer>
 						</Application>
 					</div>
diff --git a/src/components/toolbar/index.tsx b/src/components/toolbar/index.tsx
index eeafe72..09876bc 100644
--- a/src/components/toolbar/index.tsx
+++ b/src/components/toolbar/index.tsx
@@ -41,7 +41,7 @@ function Toolbar() {
 				type="single"
 				value={tool}
 				onValueChange={onToolChange}
-				className="w-full flex flex-col items-center border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 *:py-0.5"
+				className="rounded-none w-full flex flex-col items-center border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 *:py-0.5"
 			>
 				{/* Hand */}
 				<Tooltip delayDuration={0}>
diff --git a/src/context/History.tsx b/src/context/History.tsx
index 6e4e00d..c1e2c86 100644
--- a/src/context/History.tsx
+++ b/src/context/History.tsx
@@ -27,16 +27,17 @@ export const HistoryProvider = ({ children }: Props) => {
 	const MAX_HISTORY = 20;
 
 	const addHistory = (name: string, apply: () => void, revert: () => void) => {
-		const newHistory = history.slice(0, currentIndex + 1);
-		newHistory.push({ name, apply, revert });
+		setHistory((prev) => {
+			const newHistory = prev.slice(0, currentIndex + 1);
+			newHistory.push({ name, apply, revert });
+
+			if (newHistory.length > MAX_HISTORY) {
+				newHistory.shift();
+			}
 
-		if (newHistory.length > MAX_HISTORY) {
-			newHistory.shift();
-		} else {
 			setCurrentIndex(newHistory.length - 1);
-		}
-
-		setHistory(newHistory);
+			return newHistory;
+		});
 	};
 
 	const undo = () => {
diff --git a/src/index.css b/src/index.css
index 8c785ea..481368d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -67,7 +67,7 @@ body {
 }
 
 .info-child {
-	@apply bg-zinc-50 dark:bg-zinc-900 px-2 py-1 rounded shadow-xl w-fit border border-zinc-200 dark:border-zinc-800;
+	@apply bg-zinc-50 dark:bg-zinc-900 px-2 py-1 rounded shadow-md shadow-black/25 w-fit border border-zinc-200 dark:border-zinc-800;
 }
 
 /*
diff --git a/src/pages/AppPage.tsx b/src/pages/AppPage.tsx
index 38fb9e5..26a6ec2 100644
--- a/src/pages/AppPage.tsx
+++ b/src/pages/AppPage.tsx
@@ -31,8 +31,8 @@ function AppPage() {
 									<main
 										className={`overflow-y-hidden h-svh grid ${
 											isMobileView
-												? "grid-rows-[2.3rem_minmax(0,1fr)_auto] grid-cols-[2.3rem_minmax(0,1fr)]"
-												: "grid-rows-[2.3rem_minmax(0,1fr)] grid-cols-[2.3rem_minmax(0,1fr)_auto]"
+												? "grid-rows-[2.25rem_minmax(0,1fr)_auto] grid-cols-[2.25rem_minmax(0,1fr)]"
+												: "grid-rows-[2.25rem_minmax(0,1fr)] grid-cols-[2.25rem_minmax(0,1fr)_auto]"
 										}`}
 									>
 										<Menubar />