From 0f1fd2050bc576c5dd03a2b984f8e1436e21e55c Mon Sep 17 00:00:00 2001
From: SnapOtter <snapotter.hq@gmail.com>
Date: Mon, 11 May 2026 17:12:24 +0800
Subject: [PATCH] fix: add +/- stepper buttons to quality slider in compress
 tool

Small bordered buttons with Minus/Plus icons flank the range slider,
allowing single-step quality adjustments. Disabled at min (1) and
max (100) boundaries.
---
 .../components/tools/compress-settings.tsx    | 38 ++++++++++++++-----
 1 file changed, 28 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/tools/compress-settings.tsx b/apps/web/src/components/tools/compress-settings.tsx
index f97364cb..577fcbcc 100644
--- a/apps/web/src/components/tools/compress-settings.tsx
+++ b/apps/web/src/components/tools/compress-settings.tsx
@@ -1,4 +1,4 @@
-import { Download } from "lucide-react";
+import { Download, Minus, Plus } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
@@ -99,15 +99,33 @@ export function CompressControls({ settings: initialSettings, onChange }: Compre
             </label>
             <span className="text-xs font-mono text-foreground">{quality}</span>
           </div>
-          <input
-            id="compress-quality"
-            type="range"
-            min={1}
-            max={100}
-            value={quality}
-            onChange={(e) => setQuality(Number(e.target.value))}
-            className="w-full mt-1"
-          />
+          <div className="flex items-center gap-1.5 mt-1">
+            <button
+              type="button"
+              onClick={() => setQuality((q) => Math.max(1, q - 1))}
+              disabled={quality <= 1}
+              className="p-1 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed shrink-0"
+            >
+              <Minus className="h-3 w-3" />
+            </button>
+            <input
+              id="compress-quality"
+              type="range"
+              min={1}
+              max={100}
+              value={quality}
+              onChange={(e) => setQuality(Number(e.target.value))}
+              className="flex-1 min-w-0"
+            />
+            <button
+              type="button"
+              onClick={() => setQuality((q) => Math.min(100, q + 1))}
+              disabled={quality >= 100}
+              className="p-1 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed shrink-0"
+            >
+              <Plus className="h-3 w-3" />
+            </button>
+          </div>
           <div className="flex justify-between text-[10px] text-muted-foreground mt-0.5">
             <span>Smallest file</span>
             <span>Best quality</span>