mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
feat(web): add Stirling-PDF-style file preview, review panel, and tool chaining UX
After upload: dropzone replaced by image viewer with zoom controls. After processing: review panel shows result preview, file info, download, undo button, and suggested next tools for chaining.
This commit is contained in:
Siddharth Kumar Sah
@@ -0,0 +1,152 @@
|
||||
import { useState, useRef, useCallback, useEffect } from "react";
|
||||
import { ZoomIn, ZoomOut, Maximize, Minimize2 } from "lucide-react";
|
||||
import { formatFileSize } from "@/lib/download";
|
||||
|
||||
interface ImageViewerProps {
|
||||
src: string;
|
||||
filename: string;
|
||||
fileSize: number;
|
||||
}
|
||||
|
||||
const ZOOM_STEPS = [25, 50, 75, 100, 125, 150, 200, 300];
|
||||
const DEFAULT_ZOOM = 100;
|
||||
|
||||
export function ImageViewer({ src, filename, fileSize }: ImageViewerProps) {
|
||||
const [zoom, setZoom] = useState(DEFAULT_ZOOM);
|
||||
const [naturalWidth, setNaturalWidth] = useState<number | null>(null);
|
||||
const [naturalHeight, setNaturalHeight] = useState<number | null>(null);
|
||||
const [fitMode, setFitMode] = useState<"fit" | "actual">("fit");
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const imgRef = useRef<HTMLImageElement>(null);
|
||||
|
||||
const isSvg = filename.toLowerCase().endsWith(".svg");
|
||||
|
||||
const handleImageLoad = useCallback(() => {
|
||||
if (imgRef.current) {
|
||||
setNaturalWidth(imgRef.current.naturalWidth);
|
||||
setNaturalHeight(imgRef.current.naturalHeight);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const zoomIn = useCallback(() => {
|
||||
setZoom((prev) => {
|
||||
const next = ZOOM_STEPS.find((s) => s > prev);
|
||||
return next ?? prev;
|
||||
});
|
||||
setFitMode("actual");
|
||||
}, []);
|
||||
|
||||
const zoomOut = useCallback(() => {
|
||||
setZoom((prev) => {
|
||||
const next = [...ZOOM_STEPS].reverse().find((s) => s < prev);
|
||||
return next ?? prev;
|
||||
});
|
||||
setFitMode("actual");
|
||||
}, []);
|
||||
|
||||
const fitToContainer = useCallback(() => {
|
||||
setFitMode("fit");
|
||||
setZoom(DEFAULT_ZOOM);
|
||||
}, []);
|
||||
|
||||
const actualSize = useCallback(() => {
|
||||
setFitMode("actual");
|
||||
setZoom(100);
|
||||
}, []);
|
||||
|
||||
// Reset zoom on src change
|
||||
useEffect(() => {
|
||||
setZoom(DEFAULT_ZOOM);
|
||||
setFitMode("fit");
|
||||
setNaturalWidth(null);
|
||||
setNaturalHeight(null);
|
||||
}, [src]);
|
||||
|
||||
const imageStyle =
|
||||
fitMode === "fit"
|
||||
? { maxWidth: "100%", maxHeight: "100%", objectFit: "contain" as const }
|
||||
: { transform: `scale(${zoom / 100})`, transformOrigin: "center center" };
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full h-full max-w-3xl mx-auto">
|
||||
{/* Toolbar */}
|
||||
<div className="flex items-center justify-center gap-1 py-2 px-3 border-b border-border shrink-0">
|
||||
<button
|
||||
onClick={zoomOut}
|
||||
disabled={zoom <= ZOOM_STEPS[0]}
|
||||
className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Zoom out"
|
||||
>
|
||||
<ZoomOut className="h-4 w-4" />
|
||||
</button>
|
||||
<span className="text-xs text-muted-foreground min-w-[3rem] text-center tabular-nums">
|
||||
{fitMode === "fit" ? "Fit" : `${zoom}%`}
|
||||
</span>
|
||||
<button
|
||||
onClick={zoomIn}
|
||||
disabled={zoom >= ZOOM_STEPS[ZOOM_STEPS.length - 1]}
|
||||
className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
title="Zoom in"
|
||||
>
|
||||
<ZoomIn className="h-4 w-4" />
|
||||
</button>
|
||||
<div className="w-px h-4 bg-border mx-1" />
|
||||
<button
|
||||
onClick={fitToContainer}
|
||||
className={`px-2 py-1 rounded text-xs ${fitMode === "fit" ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
|
||||
title="Fit to view"
|
||||
>
|
||||
<Maximize className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={actualSize}
|
||||
className={`px-2 py-1 rounded text-xs ${fitMode === "actual" && zoom === 100 ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted"}`}
|
||||
title="Actual size (100%)"
|
||||
>
|
||||
<Minimize2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Image area */}
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex-1 flex items-center justify-center overflow-auto bg-muted/20 p-4"
|
||||
>
|
||||
{isSvg ? (
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={src}
|
||||
alt={filename}
|
||||
onLoad={handleImageLoad}
|
||||
className="select-none"
|
||||
style={imageStyle}
|
||||
draggable={false}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
ref={imgRef}
|
||||
src={src}
|
||||
alt={filename}
|
||||
onLoad={handleImageLoad}
|
||||
className="select-none rounded-sm"
|
||||
style={imageStyle}
|
||||
draggable={false}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info bar */}
|
||||
<div className="flex items-center justify-between px-3 py-1.5 border-t border-border text-xs text-muted-foreground shrink-0">
|
||||
<span className="truncate mr-2">{filename}</span>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
{naturalWidth != null && naturalHeight != null && (
|
||||
<span>
|
||||
{naturalWidth} x {naturalHeight}
|
||||
</span>
|
||||
)}
|
||||
<span>{formatFileSize(fileSize)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
import { useState, useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { TOOLS } from "@stirling-image/shared";
|
||||
import {
|
||||
Download,
|
||||
Undo2,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
ArrowRight,
|
||||
} from "lucide-react";
|
||||
import * as icons from "lucide-react";
|
||||
import { triggerDownload, formatFileSize } from "@/lib/download";
|
||||
import { getSuggestedTools } from "@/lib/suggested-tools";
|
||||
|
||||
interface ReviewPanelProps {
|
||||
filename: string;
|
||||
fileSize: number;
|
||||
fileType: string;
|
||||
downloadUrl: string;
|
||||
previewUrl?: string;
|
||||
onUndo: () => void;
|
||||
currentToolId: string;
|
||||
}
|
||||
|
||||
export function ReviewPanel({
|
||||
filename,
|
||||
fileSize,
|
||||
fileType,
|
||||
downloadUrl,
|
||||
previewUrl,
|
||||
onUndo,
|
||||
currentToolId,
|
||||
}: ReviewPanelProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(true);
|
||||
const [isSuggestionsExpanded, setIsSuggestionsExpanded] = useState(true);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const suggestedToolIds = useMemo(
|
||||
() => getSuggestedTools(currentToolId),
|
||||
[currentToolId],
|
||||
);
|
||||
|
||||
const suggestedTools = useMemo(
|
||||
() =>
|
||||
suggestedToolIds
|
||||
.map((id) => TOOLS.find((t) => t.id === id))
|
||||
.filter(
|
||||
(t): t is (typeof TOOLS)[number] => t !== undefined,
|
||||
),
|
||||
[suggestedToolIds],
|
||||
);
|
||||
|
||||
const timestamp = useMemo(() => {
|
||||
const now = new Date();
|
||||
return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
||||
}, []);
|
||||
|
||||
const handleDownload = () => {
|
||||
triggerDownload(downloadUrl, filename);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="border-t border-border" />
|
||||
|
||||
{/* Review header */}
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className="flex items-center justify-between w-full text-sm font-medium text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<span>Review</span>
|
||||
{isExpanded ? (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="space-y-3">
|
||||
{/* Preview thumbnail */}
|
||||
{previewUrl && (
|
||||
<div className="rounded-lg border border-border overflow-hidden bg-muted/30">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Processed result"
|
||||
className="w-full h-auto max-h-32 object-contain"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* File metadata */}
|
||||
<div className="space-y-1 text-xs text-muted-foreground">
|
||||
<p className="truncate text-foreground font-medium">{filename}</p>
|
||||
<p>Size: {formatFileSize(fileSize)}</p>
|
||||
<p>Type: {fileType}</p>
|
||||
<p>Processed: {timestamp}</p>
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={onUndo}
|
||||
className="flex-1 py-2 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted flex items-center justify-center gap-1.5 text-xs font-medium"
|
||||
>
|
||||
<Undo2 className="h-3.5 w-3.5" />
|
||||
Undo
|
||||
</button>
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className="flex-1 py-2 rounded-lg bg-primary text-primary-foreground flex items-center justify-center gap-1.5 text-xs font-medium hover:bg-primary/90"
|
||||
>
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Suggested tools */}
|
||||
{suggestedTools.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<div className="border-t border-border pt-2" />
|
||||
<button
|
||||
onClick={() =>
|
||||
setIsSuggestionsExpanded(!isSuggestionsExpanded)
|
||||
}
|
||||
className="flex items-center justify-between w-full text-xs font-medium text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<span>Continue editing</span>
|
||||
{isSuggestionsExpanded ? (
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
) : (
|
||||
<ChevronRight className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isSuggestionsExpanded && (
|
||||
<div className="space-y-1">
|
||||
{suggestedTools.map((tool) => {
|
||||
const ToolIcon =
|
||||
(
|
||||
icons as unknown as Record<
|
||||
string,
|
||||
React.ComponentType<{ className?: string }>
|
||||
>
|
||||
)[tool.icon] || icons.FileImage;
|
||||
return (
|
||||
<button
|
||||
key={tool.id}
|
||||
onClick={() => navigate(tool.route)}
|
||||
className="flex items-center gap-2 w-full px-2 py-1.5 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-muted group"
|
||||
>
|
||||
<ToolIcon className="h-3.5 w-3.5 shrink-0" />
|
||||
<span className="flex-1 text-left">{tool.name}</span>
|
||||
<ArrowRight className="h-3 w-3 opacity-0 group-hover:opacity-100 shrink-0" />
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user