chore: remove swagger deps, parallelize CI jobs

- Remove @fastify/swagger and @fastify/swagger-ui (API docs live on GitHub Pages)
- Run typecheck, build, and docker CI jobs in parallel instead of sequentially

apps/web/src/components/common/image-viewer.tsx

@@ -79,15 +79,19 @@ export function ImageViewer({ src, filename, fileSize, cssRotate, cssFlipH, cssF
           maxWidth: "100%",
           maxHeight: "100%",
           objectFit: "contain" as const,
-          ...(previewTransform && { transform: previewTransform }),
+          ...(previewTransform && {
+            transform: previewTransform,
+            transition: "transform 0.25s ease",
+          }),
         }
       : {
           transform: `scale(${zoom / 100})${previewTransform ? ` ${previewTransform}` : ""}`,
           transformOrigin: "center center",
+          ...(previewTransform && { transition: "transform 0.25s ease" }),
         };
 
   return (
-    <div className="flex flex-col w-full h-full max-w-3xl mx-auto">
+    <div className="flex flex-col w-full h-full max-w-3xl mx-auto min-h-0">
       {/* Toolbar */}
       <div className="flex items-center justify-center gap-1 py-2 px-3 border-b border-border shrink-0">
         <button

apps/web/src/components/common/multi-image-viewer.tsx

@@ -22,14 +22,14 @@ export function MultiImageViewer() {
   const hasProcessed = !!currentEntry.processedUrl;
 
   return (
-    <div className="flex flex-col w-full h-full" onKeyDown={hasMultiple ? handleKeyDown : undefined} tabIndex={hasMultiple ? 0 : undefined}>
-      <div className="flex-1 relative flex items-center justify-center">
+    <div className="flex flex-col w-full h-full min-h-0" onKeyDown={hasMultiple ? handleKeyDown : undefined} tabIndex={hasMultiple ? 0 : undefined}>
+      <div className="flex-1 relative flex items-center justify-center min-h-0">
         {hasMultiple && hasPrev && (
           <button onClick={navigatePrev} className="absolute left-3 z-10 w-8 h-8 rounded-full bg-background/80 border border-border shadow-sm flex items-center justify-center hover:bg-background transition-colors" aria-label="Previous image">
             <ChevronLeft className="h-4 w-4" />
           </button>
         )}
-        <div className="w-full h-full">
+        <div className="w-full h-full min-h-0">
           {hasProcessed ? (
             <BeforeAfterSlider beforeSrc={currentEntry.blobUrl} afterSrc={currentEntry.processedUrl!} beforeSize={currentEntry.originalSize} afterSize={currentEntry.processedSize ?? undefined} />
           ) : (

apps/web/src/components/common/side-by-side-comparison.tsx

@@ -27,15 +27,6 @@ export function SideBySideComparison({
       ? ((1 - afterSize / beforeSize) * 100).toFixed(1)
       : null;
 
-  const checkerboard = {
-    backgroundImage: `linear-gradient(45deg, #ccc 25%, transparent 25%),
-      linear-gradient(-45deg, #ccc 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #ccc 75%),
-      linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
-    backgroundSize: "16px 16px",
-    backgroundPosition: "0 0, 0 8px, 8px -8px, -8px 0px",
-  };
-
   return (
     <div className="flex flex-col items-center gap-3 w-full max-w-3xl mx-auto">
       {/* Side-by-side images */}
@@ -45,14 +36,11 @@ export function SideBySideComparison({
           <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
             Original
           </span>
-          <div
-            className="w-full aspect-video rounded-lg border border-border overflow-hidden flex items-center justify-center"
-            style={checkerboard}
-          >
+          <div className="w-full rounded-lg border border-border overflow-hidden flex items-center justify-center bg-muted/30 p-2 min-h-[200px] max-h-[60vh]">
             <img
               src={beforeSrc}
               alt="Original"
-              className="max-w-full max-h-full object-contain"
+              className="max-w-full max-h-[56vh] object-contain rounded-sm"
               draggable={false}
               onLoad={(e) => {
                 const img = e.currentTarget;
@@ -70,19 +58,16 @@ export function SideBySideComparison({
           </div>
         </div>
 
-        {/* Resized */}
+        {/* Processed */}
         <div className="flex-1 flex flex-col items-center gap-2">
           <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-            Resized
+            Processed
           </span>
-          <div
-            className="w-full aspect-video rounded-lg border border-border overflow-hidden flex items-center justify-center"
-            style={checkerboard}
-          >
+          <div className="w-full rounded-lg border border-border overflow-hidden flex items-center justify-center bg-muted/30 p-2 min-h-[200px] max-h-[60vh]">
             <img
               src={afterSrc}
-              alt="Resized"
-              className="max-w-full max-h-full object-contain"
+              alt="Processed"
+              className="max-w-full max-h-[56vh] object-contain rounded-sm"
               draggable={false}
               onLoad={(e) => {
                 const img = e.currentTarget;

apps/web/src/components/tools/resize-settings.tsx

@@ -22,7 +22,7 @@ export function ResizeSettings() {
   const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
     useToolProcessor("resize");
 
-  const [tab, setTab] = useState<ResizeTab>("presets");
+  const [tab, setTab] = useState<ResizeTab>("custom");
   const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
   const [width, setWidth] = useState<string>("");
   const [height, setHeight] = useState<string>("");
@@ -84,15 +84,15 @@ export function ResizeSettings() {
       {/* Tab selector */}
       <div>
         <div className="flex gap-1">
-          <button type="button" onClick={() => setTab("presets")} className={tabClass("presets")}>
-            Presets
-          </button>
           <button type="button" onClick={() => setTab("custom")} className={tabClass("custom")}>
             Custom Size
           </button>
           <button type="button" onClick={() => setTab("scale")} className={tabClass("scale")}>
             Scale
           </button>
+          <button type="button" onClick={() => setTab("presets")} className={tabClass("presets")}>
+            Presets
+          </button>
         </div>
       </div>
 

apps/web/src/components/tools/rotate-settings.tsx

@@ -1,8 +1,7 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useFileStore } from "@/stores/file-store";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
 import {
-  Download,
   RotateCcw,
   RotateCw,
   FlipHorizontal,
@@ -22,24 +21,42 @@ interface RotateSettingsProps {
 
 export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
   const { files } = useFileStore();
-  const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
+  const { processFiles, processAllFiles, processing, error, progress } =
     useToolProcessor("rotate");
 
-  const [angle, setAngle] = useState(0);
+  // Quick rotation in 90° steps: 0, 90, 180, 270
+  const [rotation, setRotation] = useState(0);
+  // Fine straighten adjustment: -45 to +45
+  const [straighten, setStraighten] = useState(0);
   const [flipH, setFlipH] = useState(false);
   const [flipV, setFlipV] = useState(false);
 
+  const totalAngle = rotation + straighten;
+
   // Emit preview transform on every change
   useEffect(() => {
-    onPreviewTransform?.({ rotate: angle, flipH, flipV });
-  }, [angle, flipH, flipV, onPreviewTransform]);
+    onPreviewTransform?.({ rotate: totalAngle, flipH, flipV });
+  }, [totalAngle, flipH, flipV, onPreviewTransform]);
 
-  const rotateLeft = () => setAngle((a) => (a - 90 + 360) % 360);
-  const rotateRight = () => setAngle((a) => (a + 90) % 360);
+  // Reset controls after successful processing
+  const prevProcessing = useRef(processing);
+  useEffect(() => {
+    if (prevProcessing.current && !processing && !error) {
+      setRotation(0);
+      setStraighten(0);
+      setFlipH(false);
+      setFlipV(false);
+    }
+    prevProcessing.current = processing;
+  }, [processing, error]);
+
+  const rotateLeft = () => setRotation((r) => r - 90);
+  const rotateRight = () => setRotation((r) => r + 90);
 
   const handleProcess = () => {
+    const backendAngle = ((totalAngle % 360) + 360) % 360;
     const settings = {
-      angle,
+      angle: backendAngle,
       horizontal: flipH,
       vertical: flipV,
     };
@@ -51,52 +68,78 @@ export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
   };
 
   const hasFile = files.length > 0;
-  const hasChanges = angle !== 0 || flipH || flipV;
+  const hasChanges = totalAngle !== 0 || flipH || flipV;
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (hasFile && hasChanges && !processing) handleProcess();
   };
 
+  const handleReset = () => {
+    setRotation(0);
+    setStraighten(0);
+    setFlipH(false);
+    setFlipV(false);
+  };
+
+  // Display angle normalized to 0-359
+  const displayAngle = ((totalAngle % 360) + 360) % 360;
+
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      {/* Quick rotate buttons */}
+      {/* Quick rotate */}
       <div>
-        <label className="text-xs text-muted-foreground">Quick Rotate</label>
-        <div className="flex gap-2 mt-1">
+        <label className="text-xs text-muted-foreground">Rotate</label>
+        <div className="flex items-center gap-2 mt-1">
           <button
             type="button"
             onClick={rotateLeft}
-            className="flex-1 flex items-center justify-center gap-1 py-2 rounded bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-sm"
+            className="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-sm font-medium"
+            title="Rotate 90° counter-clockwise"
           >
             <RotateCcw className="h-4 w-4" />
-            90 Left
+            Left
           </button>
+          <div className="px-3 py-1.5 rounded-md bg-background border border-border text-center min-w-[4rem]">
+            <span className="text-sm font-mono font-medium tabular-nums">
+              {displayAngle}°
+            </span>
+          </div>
           <button
             type="button"
             onClick={rotateRight}
-            className="flex-1 flex items-center justify-center gap-1 py-2 rounded bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-sm"
+            className="flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-lg bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-sm font-medium"
+            title="Rotate 90° clockwise"
           >
+            Right
             <RotateCw className="h-4 w-4" />
-            90 Right
           </button>
         </div>
       </div>
 
-      {/* Angle slider */}
+      {/* Straighten */}
       <div>
         <div className="flex justify-between items-center">
-          <label className="text-xs text-muted-foreground">Angle</label>
-          <span className="text-xs font-mono text-foreground">{angle} deg</span>
+          <label className="text-xs text-muted-foreground">Straighten</label>
+          <span className="text-xs font-mono tabular-nums text-muted-foreground">
+            {straighten > 0 ? "+" : ""}
+            {straighten}°
+          </span>
         </div>
         <input
           type="range"
-          min={0}
-          max={360}
-          value={angle}
-          onChange={(e) => setAngle(Number(e.target.value))}
+          min={-45}
+          max={45}
+          step={0.5}
+          value={straighten}
+          onChange={(e) => setStraighten(Number(e.target.value))}
           className="w-full mt-1"
         />
+        <div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
+          <span>-45°</span>
+          <span>0°</span>
+          <span>+45°</span>
+        </div>
       </div>
 
       {/* Flip buttons */}
@@ -106,7 +149,7 @@ export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
           <button
             type="button"
             onClick={() => setFlipH(!flipH)}
-            className={`flex-1 flex items-center justify-center gap-1 py-2 rounded text-sm transition-colors ${
+            className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-colors ${
               flipH
                 ? "bg-primary text-primary-foreground"
                 : "bg-muted text-muted-foreground hover:bg-primary/10"
@@ -118,7 +161,7 @@ export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
           <button
             type="button"
             onClick={() => setFlipV(!flipV)}
-            className={`flex-1 flex items-center justify-center gap-1 py-2 rounded text-sm transition-colors ${
+            className={`flex-1 flex items-center justify-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-colors ${
               flipV
                 ? "bg-primary text-primary-foreground"
                 : "bg-muted text-muted-foreground hover:bg-primary/10"
@@ -130,6 +173,17 @@ export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
         </div>
       </div>
 
+      {/* Reset all */}
+      {hasChanges && (
+        <button
+          type="button"
+          onClick={handleReset}
+          className="w-full text-xs text-muted-foreground hover:text-foreground py-1"
+        >
+          Reset all changes
+        </button>
+      )}
+
       {/* Error */}
       {error && <p className="text-xs text-red-500">{error}</p>}
 
@@ -152,18 +206,6 @@ export function RotateSettings({ onPreviewTransform }: RotateSettingsProps) {
           {files.length > 1 ? `Apply (${files.length} files)` : "Apply"}
         </button>
       )}
-
-      {/* Download */}
-      {downloadUrl && (
-        <a
-          href={downloadUrl}
-          download
-          className="w-full py-2.5 rounded-lg border border-primary text-primary font-medium flex items-center justify-center gap-2 hover:bg-primary/5"
-        >
-          <Download className="h-4 w-4" />
-          Download
-        </a>
-      )}
     </form>
   );
 }