From 21e6b1eaf9b33974e4e6963bf8bafb53a9caebb5 Mon Sep 17 00:00:00 2001
From: naama_code <naanas344@gmail.com>
Date: Thu, 21 May 2026 00:55:12 +0300
Subject: [PATCH] UX Enhancement: Make Canvas empty state clickable

---
 src/tools/texture-lab/Canvas.jsx     | 39 ++++++++++++++++++++++------
 src/tools/texture-lab/TextureLab.jsx |  1 +
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/tools/texture-lab/Canvas.jsx b/src/tools/texture-lab/Canvas.jsx
index 0d73c8de6..90c9d8079 100644
--- a/src/tools/texture-lab/Canvas.jsx
+++ b/src/tools/texture-lab/Canvas.jsx
@@ -17,6 +17,7 @@ export default function Canvas({
   viewMode,
   onViewModeChange,
   onMediaDrop,
+  onMediaLoad,
   isPlaying,
   currentTime,
   duration,
@@ -187,6 +188,18 @@ export default function Canvas({
     [onMediaDrop, isExporting]
   );
 
+  const fileInputRef = useRef(null);
+  const handleFileSelect = useCallback(
+    e => {
+      const file = e.target.files?.[0];
+      if (file) {
+        onMediaLoad(file, 'file');
+      }
+      e.target.value = '';
+    },
+    [onMediaLoad]
+  );
+
   return (
     <Box
       ref={containerRef}
@@ -435,15 +448,25 @@ export default function Canvas({
           justify="center"
           direction="column"
           gap={1}
+          as= "button"
+          cursor="pointer"
+          onClick={() => fileInputRef.current?.click()}
         >
-          <Box w="60px" h="60px" borderRadius="16px" display="flex" alignItems="center" justifyContent="center">
-            <Icon as={Upload} boxSize={8} color="var(--border-primary)" />
-          </Box>
-          <Text fontSize="14px" color="var(--text-muted)" textAlign="center">
-            Upload an image/video
-            <br />
-            to get started
-          </Text>
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileSelect}
+              accept="image/png,image/jpeg,image/webp,video/mp4,video/webm,video/ogg"
+              style={{ display: 'none' }}
+            />
+            <Box w="60px" h="60px" borderRadius="16px" display="flex" alignItems="center" justifyContent="center">
+              <Icon as={Upload} boxSize={8} color="var(--border-primary)" />
+            </Box>
+            <Text fontSize="14px" color="var(--text-muted)" textAlign="center">
+              Upload an image/video
+              <br />
+              to get started
+            </Text>
         </Flex>
       )}
 
diff --git a/src/tools/texture-lab/TextureLab.jsx b/src/tools/texture-lab/TextureLab.jsx
index 82f2a1f82..d9fb591f4 100644
--- a/src/tools/texture-lab/TextureLab.jsx
+++ b/src/tools/texture-lab/TextureLab.jsx
@@ -733,6 +733,7 @@ export default function TextureLab({ toolSelector }) {
           viewMode={viewMode}
           onViewModeChange={handleViewModeChange}
           onMediaDrop={file => handleMediaLoad(file, 'file')}
+          onMediaLoad={handleMediaLoad}
           isPlaying={isPlaying}
           currentTime={currentTime}
           duration={duration}