devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

feat: add save/copy buttons to image preview modal

Browse Source
This commit is contained in:
Jannis Braun
2026-03-25 03:19:17 +01:00
parent 91ffbb5d0a
commit 4ea319646a
1 changed files with 37 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/ImagePreview.tsx
+30 -1
View File
@@ -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}
>
{/* Toolbar: download, copy, close */}
<div className="absolute top-4 right-4 flex items-center gap-2 z-10">
<button
className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors z-10"
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"