feat: small, random changes

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

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 />
 

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

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>

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>

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!">
+					<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={32} height={32}>
+						<Application width={28} height={28}>
 							<pixiContainer>
-								<pixiSprite texture={textures[selectedBlock] ?? missingTexture} scale={2} />
+								<pixiSprite texture={textures[selectedBlock] ?? missingTexture} scale={1.75} />
 							</pixiContainer>
 						</Application>
 					</div>

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

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);
+		setHistory((prev) => {
-		newHistory.push({ name, apply, revert });
+			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);
-		}
+			return newHistory;
-
+		});
-		setHistory(newHistory);
 	};
 
 	const undo = () => {

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;
 }
 
 /*

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.25rem_minmax(0,1fr)_auto] grid-cols-[2.25rem_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)] grid-cols-[2.25rem_minmax(0,1fr)_auto]"
 										}`}
 									>
 										<Menubar />