From 8fcfc3f006f9646c095a7a0dad2b797e3bddd74a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 09:14:33 +0000
Subject: [PATCH 1/6] Initial plan


From 9515ac4f9af13457f4d39ed63a5f11c373361c5d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 09:16:31 +0000
Subject: [PATCH 2/6] Add keyboard shortcuts display and copy button in Image
 Beautifier

Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
---
 src/App.tsx                                   |  6 +--
 .../ImageBeautifier/ImageBeautifier.tsx       | 47 +++++++++++++++----
 src/components/Sidebar/Sidebar.tsx            | 14 ++++--
 3 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index cda7fb8..51b4c04 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -26,11 +26,11 @@ function AppContent() {
         return;
       }
 
-      // Ctrl/Cmd + 1-0 to switch tools
-      if ((e.ctrlKey || e.metaKey) && e.key >= '1' && e.key <= '0') {
+      // Ctrl/Cmd + 1-9 and 0 to switch tools
+      if ((e.ctrlKey || e.metaKey) && (e.key >= '1' && e.key <= '9' || e.key === '0')) {
         e.preventDefault();
         const tools: ToolType[] = ['config', 'markdown', 'diff', 'image', 'regex', 'decoder', 'timestamp', 'generator', 'case', 'url'];
-        const toolIndex = parseInt(e.key) === 0 ? 9 : parseInt(e.key) - 1;
+        const toolIndex = e.key === '0' ? 9 : parseInt(e.key) - 1;
         setActiveTool(tools[toolIndex]);
       }
     };
diff --git a/src/components/ImageBeautifier/ImageBeautifier.tsx b/src/components/ImageBeautifier/ImageBeautifier.tsx
index 359555c..820e1eb 100644
--- a/src/components/ImageBeautifier/ImageBeautifier.tsx
+++ b/src/components/ImageBeautifier/ImageBeautifier.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Upload, Download, Image as ImageIcon, RefreshCw } from 'lucide-react';
+import { Upload, Download, Image as ImageIcon, RefreshCw, Copy } from 'lucide-react';
 import clsx from 'clsx';
 
 const gradientPresets = [
@@ -92,6 +92,28 @@ export const ImageBeautifier: React.FC = () => {
     link.click();
   };
 
+  const handleCopy = async () => {
+    if (!canvasRef.current || !image) return;
+
+    try {
+      const canvas = canvasRef.current;
+      
+      // Convert canvas to blob
+      canvas.toBlob(async (blob) => {
+        if (!blob) return;
+        
+        // Use Clipboard API to copy the image
+        await navigator.clipboard.write([
+          new ClipboardItem({
+            'image/png': blob
+          })
+        ]);
+      }, 'image/png');
+    } catch (err) {
+      console.error('Failed to copy image:', err);
+    }
+  };
+
   const swapColors = () => {
     const temp = gradientColor1;
     setGradientColor1(gradientColor2);
@@ -405,13 +427,22 @@ export const ImageBeautifier: React.FC = () => {
         <div className="px-4 py-3 border-b border-gray-200 dark:border-[#30363d] flex items-center justify-between">
           <span className="text-xs font-medium text-gray-500 dark:text-[#8b949e] uppercase tracking-wider">Preview</span>
           {image && (
-            <button
-              onClick={handleDownload}
-              className="flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium text-white bg-[#238636] hover:bg-[#2ea043] transition-colors"
-            >
-              <Download size={14} />
-              <span>Download</span>
-            </button>
+            <div className="flex gap-2">
+              <button
+                onClick={handleCopy}
+                className="flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium text-white bg-[#238636] hover:bg-[#2ea043] transition-colors"
+              >
+                <Copy size={14} />
+                <span>Copy</span>
+              </button>
+              <button
+                onClick={handleDownload}
+                className="flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium text-white bg-[#238636] hover:bg-[#2ea043] transition-colors"
+              >
+                <Download size={14} />
+                <span>Download</span>
+              </button>
+            </div>
           )}
         </div>
         
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 3ba4fb4..02c8bb7 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -77,9 +77,10 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeTool, onToolChange }) =>
 
       {/* Tools */}
       <div className="flex-1 py-2">
-        {tools.map((tool) => {
+        {tools.map((tool, index) => {
           const Icon = tool.icon;
           const isActive = activeTool === tool.id;
+          const shortcutKey = index === 9 ? '0' : (index + 1).toString();
           return (
             <button
               key={tool.id}
@@ -90,13 +91,20 @@ export const Sidebar: React.FC<SidebarProps> = ({ activeTool, onToolChange }) =>
                   ? 'text-blue-600 dark:text-[#58a6ff] bg-blue-50 dark:bg-[#21262d]/50'
                   : 'text-gray-500 dark:text-[#8b949e] hover:bg-gray-100 dark:hover:bg-[#21262d]/30 hover:text-gray-900 dark:hover:text-[#c9d1d9]'
               )}
-              title={isCollapsed ? tool.name : undefined}
+              title={isCollapsed ? `${tool.name} (Ctrl+${shortcutKey})` : undefined}
             >
               {isActive && (
                 <div className="absolute left-0 top-1/2 -translate-y-1/2 w-[3px] h-6 bg-blue-600 dark:bg-[#58a6ff] rounded-r" />
               )}
               <Icon size={20} />
-              {!isCollapsed && <span className="text-sm">{tool.name}</span>}
+              {!isCollapsed && (
+                <>
+                  <span className="text-sm flex-1 text-left">{tool.name}</span>
+                  <span className="text-[10px] text-gray-400 dark:text-[#6e7681] font-mono">
+                    ⌃{shortcutKey}
+                  </span>
+                </>
+              )}
             </button>
           );
         })}

From d17f6687c09152841321b3fa515e18df5ac80e3f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 09:20:45 +0000
Subject: [PATCH 3/6] Fix async error handling in copy function

Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
---
 .../ImageBeautifier/ImageBeautifier.tsx       | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/ImageBeautifier/ImageBeautifier.tsx b/src/components/ImageBeautifier/ImageBeautifier.tsx
index 820e1eb..9352489 100644
--- a/src/components/ImageBeautifier/ImageBeautifier.tsx
+++ b/src/components/ImageBeautifier/ImageBeautifier.tsx
@@ -98,17 +98,21 @@ export const ImageBeautifier: React.FC = () => {
     try {
       const canvas = canvasRef.current;
       
-      // Convert canvas to blob
-      canvas.toBlob(async (blob) => {
-        if (!blob) return;
-        
-        // Use Clipboard API to copy the image
-        await navigator.clipboard.write([
-          new ClipboardItem({
-            'image/png': blob
-          })
-        ]);
-      }, 'image/png');
+      // Convert canvas to blob using Promise-based approach
+      const blob = await new Promise<Blob | null>((resolve) => {
+        canvas.toBlob((blob) => resolve(blob), 'image/png');
+      });
+
+      if (!blob) {
+        throw new Error('Failed to create blob from canvas');
+      }
+      
+      // Use Clipboard API to copy the image
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'image/png': blob
+        })
+      ]);
     } catch (err) {
       console.error('Failed to copy image:', err);
     }

From 952888d607ebf05211052e9ef620c70cd44ca654 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 09:22:08 +0000
Subject: [PATCH 4/6] Add browser compatibility check for Clipboard API

Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
---
 src/components/ImageBeautifier/ImageBeautifier.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/ImageBeautifier/ImageBeautifier.tsx b/src/components/ImageBeautifier/ImageBeautifier.tsx
index 9352489..e07c899 100644
--- a/src/components/ImageBeautifier/ImageBeautifier.tsx
+++ b/src/components/ImageBeautifier/ImageBeautifier.tsx
@@ -96,6 +96,12 @@ export const ImageBeautifier: React.FC = () => {
     if (!canvasRef.current || !image) return;
 
     try {
+      // Check if Clipboard API is supported
+      if (!navigator.clipboard || !ClipboardItem) {
+        alert('Copy to clipboard is not supported in this browser. Please use the Download button instead.');
+        return;
+      }
+
       const canvas = canvasRef.current;
       
       // Convert canvas to blob using Promise-based approach
@@ -115,6 +121,7 @@ export const ImageBeautifier: React.FC = () => {
       ]);
     } catch (err) {
       console.error('Failed to copy image:', err);
+      alert('Failed to copy image to clipboard. Please try downloading instead.');
     }
   };
 

From 9dcee73145f25b8d58104e7531c5f413ae00d949 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 10:36:12 +0000
Subject: [PATCH 5/6] Fix ClipboardItem reference to prevent ReferenceError in
 unsupported browsers

Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
---
 src/components/ImageBeautifier/ImageBeautifier.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ImageBeautifier/ImageBeautifier.tsx b/src/components/ImageBeautifier/ImageBeautifier.tsx
index e07c899..9b67452 100644
--- a/src/components/ImageBeautifier/ImageBeautifier.tsx
+++ b/src/components/ImageBeautifier/ImageBeautifier.tsx
@@ -97,7 +97,7 @@ export const ImageBeautifier: React.FC = () => {
 
     try {
       // Check if Clipboard API is supported
-      if (!navigator.clipboard || !ClipboardItem) {
+      if (!navigator.clipboard || !window.ClipboardItem) {
         alert('Copy to clipboard is not supported in this browser. Please use the Download button instead.');
         return;
       }
@@ -115,7 +115,7 @@ export const ImageBeautifier: React.FC = () => {
       
       // Use Clipboard API to copy the image
       await navigator.clipboard.write([
-        new ClipboardItem({
+        new window.ClipboardItem({
           'image/png': blob
         })
       ]);

From be8bcaff41b1a08aab5d09030b490495bf2e240e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 26 Jan 2026 10:43:53 +0000
Subject: [PATCH 6/6] Add visual feedback when copy button is clicked

Co-authored-by: dipeshsingh253 <84814627+dipeshsingh253@users.noreply.github.com>
---
 .../ImageBeautifier/ImageBeautifier.tsx       | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageBeautifier/ImageBeautifier.tsx b/src/components/ImageBeautifier/ImageBeautifier.tsx
index 9b67452..1d605b8 100644
--- a/src/components/ImageBeautifier/ImageBeautifier.tsx
+++ b/src/components/ImageBeautifier/ImageBeautifier.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Upload, Download, Image as ImageIcon, RefreshCw, Copy } from 'lucide-react';
+import { Upload, Download, Image as ImageIcon, RefreshCw, Copy, Check } from 'lucide-react';
 import clsx from 'clsx';
 
 const gradientPresets = [
@@ -26,6 +26,7 @@ export const ImageBeautifier: React.FC = () => {
   const [borderRadius, setBorderRadius] = useState(12);
   const [padding, setPadding] = useState(64);
   const [shadow, setShadow] = useState(true);
+  const [copied, setCopied] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const dropZoneRef = useRef<HTMLDivElement>(null);
@@ -119,6 +120,10 @@ export const ImageBeautifier: React.FC = () => {
           'image/png': blob
         })
       ]);
+      
+      // Show success feedback
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     } catch (err) {
       console.error('Failed to copy image:', err);
       alert('Failed to copy image to clipboard. Please try downloading instead.');
@@ -441,10 +446,24 @@ export const ImageBeautifier: React.FC = () => {
             <div className="flex gap-2">
               <button
                 onClick={handleCopy}
-                className="flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium text-white bg-[#238636] hover:bg-[#2ea043] transition-colors"
+                className={clsx(
+                  'flex items-center gap-2 px-3 py-1.5 rounded text-xs font-medium text-white transition-colors',
+                  copied 
+                    ? 'bg-[#2ea043]' 
+                    : 'bg-[#238636] hover:bg-[#2ea043]'
+                )}
               >
-                <Copy size={14} />
-                <span>Copy</span>
+                {copied ? (
+                  <>
+                    <Check size={14} />
+                    <span>Copied!</span>
+                  </>
+                ) : (
+                  <>
+                    <Copy size={14} />
+                    <span>Copy</span>
+                  </>
+                )}
               </button>
               <button
                 onClick={handleDownload}