External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: make target size the primary compression mode

Browse Source 
Move Target Size button to the left and default to it on load, since
it is the more useful mode for most users.
This commit is contained in:
SnapOtter
2026-05-11 16:33:10 +08:00
parent 5b5767990b
commit 5b868886ba
1 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/tools/compress-settings.tsx
+24 -24
View File
@@ -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>
);