From 13e88240009741efffb09c96078a8e4d9fe3af2c Mon Sep 17 00:00:00 2001
From: Oleg Proskurin <regx@usul.su>
Date: Mon, 6 Oct 2025 00:25:21 +0700
Subject: [PATCH] feat: improve UI

---
 .../src/components/demo/ResultCard.tsx        | 82 ++++++++++++++-----
 1 file changed, 63 insertions(+), 19 deletions(-)

diff --git a/apps/landing/src/components/demo/ResultCard.tsx b/apps/landing/src/components/demo/ResultCard.tsx
index a42926f..ced770b 100644
--- a/apps/landing/src/components/demo/ResultCard.tsx
+++ b/apps/landing/src/components/demo/ResultCard.tsx
@@ -289,6 +289,17 @@ function ImagePreview({
   filename: string;
   hasEnhancementOptions?: boolean;
 }) {
+  const [promptExpanded, setPromptExpanded] = useState(false);
+  const [urlCopied, setUrlCopied] = useState(false);
+
+  const copyImageUrl = () => {
+    if (image?.url) {
+      navigator.clipboard.writeText(image.url);
+      setUrlCopied(true);
+      setTimeout(() => setUrlCopied(false), 2000);
+    }
+  };
+
   return (
     <div className="flex-shrink-0">
       <div className="mb-2 flex items-center justify-between gap-2">
@@ -311,29 +322,62 @@ function ImagePreview({
         </div>
       ) : (
         image && (
-          <div className="relative group cursor-pointer">
-            <img
-              src={image.url}
-              alt={label}
-              className="h-96 w-auto object-contain rounded-lg border border-slate-700"
-              onClick={() => onZoom(image.url)}
-            />
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                onDownload(image.url, filename);
-              }}
-              className="absolute top-2 right-2 px-3 py-1.5 bg-black/70 hover:bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
-              aria-label={`Download ${label}`}
-            >
-              Download
-            </button>
-          </div>
+          <>
+            <div className="relative group cursor-pointer">
+              <img
+                src={image.url}
+                alt={label}
+                className="h-96 w-auto object-contain rounded-lg border border-slate-700"
+                onClick={() => onZoom(image.url)}
+              />
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDownload(image.url, filename);
+                }}
+                className="absolute top-2 right-2 px-3 py-1.5 bg-black/70 hover:bg-black/90 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity"
+                aria-label={`Download ${label}`}
+              >
+                Download
+              </button>
+            </div>
+
+            {/* Image URL with Copy Button */}
+            <div className="mt-2 flex items-center gap-2 max-w-sm">
+              <div className="flex-1 px-2 py-1 bg-slate-800/50 border border-slate-700 rounded text-xs text-gray-400 font-mono truncate">
+                {image.url}
+              </div>
+              <button
+                onClick={copyImageUrl}
+                className="px-2 py-1 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded text-xs text-gray-300 hover:text-white transition-colors whitespace-nowrap"
+                aria-label="Copy image URL"
+              >
+                {urlCopied ? '✓ Copied' : 'Copy URL'}
+              </button>
+            </div>
+          </>
         )
       )}
 
+      {/* Prompt with Truncation */}
       <div className="mt-2 flex items-start gap-2 max-w-sm">
-        <p className="flex-1 text-sm text-gray-300 leading-relaxed">{prompt}</p>
+        <div className="flex-1">
+          <p
+            className={`text-sm text-gray-300 leading-relaxed ${
+              !promptExpanded ? 'line-clamp-4' : ''
+            }`}
+          >
+            {prompt}
+          </p>
+          {prompt.length > 150 && (
+            <button
+              onClick={() => setPromptExpanded(!promptExpanded)}
+              className="mt-1 text-xs text-amber-400 hover:text-amber-300 transition-colors"
+            >
+              {promptExpanded ? 'Show less' : 'Show more...'}
+            </button>
+          )}
+        </div>
         <PromptReuseButton prompt={prompt} onReuse={onReusePrompt} label={label} />
       </div>
     </div>