From 5b868886baff7bec55344c4ca510518df85c0ee9 Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 11 May 2026 16:33:10 +0800
Subject: [PATCH] fix: make target size the primary compression mode

Move Target Size button to the left and default to it on load, since
it is the more useful mode for most users.
---
 .../components/tools/compress-settings.tsx    | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/web/src/components/tools/compress-settings.tsx b/apps/web/src/components/tools/compress-settings.tsx
index 7a9620c7..8f972de5 100644
--- a/apps/web/src/components/tools/compress-settings.tsx
+++ b/apps/web/src/components/tools/compress-settings.tsx
@@ -12,7 +12,7 @@ export interface CompressControlsProps {
 }
 
 export function CompressControls({ settings: initialSettings, onChange }: CompressControlsProps) {
-  const [mode, setMode] = useState<CompressMode>("quality");
+  const [mode, setMode] = useState<CompressMode>("targetSize");
   const [quality, setQuality] = useState(75);
   const [targetSizeKb, setTargetSizeKb] = useState("");
 
@@ -44,13 +44,6 @@ export function CompressControls({ settings: initialSettings, onChange }: Compre
       <div>
         <p className="text-sm font-medium text-muted-foreground">Compression Mode</p>
         <div className="flex gap-1 mt-1">
-          <button
-            type="button"
-            onClick={() => setMode("quality")}
-            className={`flex-1 text-xs py-1.5 rounded ${mode === "quality" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
-          >
-            Quality
-          </button>
           <button
             type="button"
             onClick={() => setMode("targetSize")}
@@ -58,10 +51,32 @@ export function CompressControls({ settings: initialSettings, onChange }: Compre
           >
             Target Size
           </button>
+          <button
+            type="button"
+            onClick={() => setMode("quality")}
+            className={`flex-1 text-xs py-1.5 rounded ${mode === "quality" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+          >
+            Quality
+          </button>
         </div>
       </div>
 
-      {mode === "quality" ? (
+      {mode === "targetSize" ? (
+        <div>
+          <label htmlFor="compress-target-size" className="text-xs text-muted-foreground">
+            Target Size (KB)
+          </label>
+          <input
+            id="compress-target-size"
+            type="number"
+            value={targetSizeKb}
+            onChange={(e) => setTargetSizeKb(e.target.value)}
+            min={1}
+            placeholder="e.g. 200"
+            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+          />
+        </div>
+      ) : (
         <div>
           <div className="flex justify-between items-center">
             <label htmlFor="compress-quality" className="text-xs text-muted-foreground">
@@ -83,21 +98,6 @@ export function CompressControls({ settings: initialSettings, onChange }: Compre
             <span>Best quality</span>
           </div>
         </div>
-      ) : (
-        <div>
-          <label htmlFor="compress-target-size" className="text-xs text-muted-foreground">
-            Target Size (KB)
-          </label>
-          <input
-            id="compress-target-size"
-            type="number"
-            value={targetSizeKb}
-            onChange={(e) => setTargetSizeKb(e.target.value)}
-            min={1}
-            placeholder="e.g. 200"
-            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-          />
-        </div>
       )}
     </div>
   );