From 4ea319646a88d0e9a97bf4780fe45ef10c842fca Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Wed, 25 Mar 2026 03:19:17 +0100
Subject: [PATCH] feat: add save/copy buttons to image preview modal

---
 .../web/src/components/chat/ImagePreview.tsx  | 45 +++++++++++++++----
 1 file changed, 37 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/chat/ImagePreview.tsx b/packages/web/src/components/chat/ImagePreview.tsx
index 7133119c..e7356cba 100644
--- a/packages/web/src/components/chat/ImagePreview.tsx
+++ b/packages/web/src/components/chat/ImagePreview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useUIStore } from '../../stores/uiStore';
+import { saveImage, copyImageToClipboard } from '../../utils/imageActions';
 
 export function ImagePreview() {
   const imageUrl = useUIStore((s) => s.imagePreviewUrl);
@@ -13,14 +14,42 @@ export function ImagePreview() {
       className="fixed inset-0 z-[200] flex items-center justify-center bg-surface-overlay animate-fade-in cursor-pointer"
       onClick={closeImagePreview}
     >
-      <button
-        className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors z-10"
-        onClick={closeImagePreview}
-      >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
-        </svg>
-      </button>
+      {/* Toolbar: download, copy, close */}
+      <div className="absolute top-4 right-4 flex items-center gap-2 z-10">
+        <button
+          className="text-white/70 hover:text-white transition-colors"
+          onClick={(e) => {
+            e.stopPropagation();
+            saveImage(imageUrl);
+          }}
+          title="Save image"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+          </svg>
+        </button>
+        <button
+          className="text-white/70 hover:text-white transition-colors"
+          onClick={(e) => {
+            e.stopPropagation();
+            copyImageToClipboard(imageUrl);
+          }}
+          title="Copy image"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M21 9v10c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h7l6 6zm-2 1h-5V4H8v15h11V10zM3 15V3c0-1.1.9-2 2-2h9v2H5v12H3z" />
+          </svg>
+        </button>
+        <button
+          className="text-white/70 hover:text-white transition-colors"
+          onClick={closeImagePreview}
+          title="Close"
+        >
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
+          </svg>
+        </button>
+      </div>
       <img
         src={imageUrl}
         alt="Preview"