feat(web): add tool settings UI for all core image tools

Adds Zustand file store, useToolProcessor hook for upload/process/download
flow, and 7 settings components: resize (with social media presets), crop
(with aspect ratio presets), rotate/flip, convert, compress (quality +
target size modes), strip-metadata, and color adjustments (brightness,
contrast, saturation, channels, effects). Updates tool-page to render the
appropriate settings panel based on toolId.
This commit is contained in:
Siddharth Kumar Sah
2026-03-22 03:56:44 +08:00
parent 37112af779
commit 8964bc5cd8
10 changed files with 1335 additions and 21 deletions
+45
View File
@@ -0,0 +1,45 @@
import { create } from "zustand";
interface FileState {
files: File[];
jobId: string | null;
processedUrl: string | null;
processing: boolean;
error: string | null;
originalSize: number | null;
processedSize: number | null;
setFiles: (files: File[]) => void;
setJobId: (id: string) => void;
setProcessedUrl: (url: string | null) => void;
setProcessing: (v: boolean) => void;
setError: (e: string | null) => void;
setSizes: (original: number, processed: number) => void;
reset: () => void;
}
export const useFileStore = create<FileState>((set) => ({
files: [],
jobId: null,
processedUrl: null,
processing: false,
error: null,
originalSize: null,
processedSize: null,
setFiles: (files) => set({ files, error: null }),
setJobId: (id) => set({ jobId: id }),
setProcessedUrl: (url) => set({ processedUrl: url }),
setProcessing: (v) => set({ processing: v }),
setError: (e) => set({ error: e, processing: false }),
setSizes: (original, processed) =>
set({ originalSize: original, processedSize: processed }),
reset: () =>
set({
files: [],
jobId: null,
processedUrl: null,
processing: false,
error: null,
originalSize: null,
processedSize: null,
}),
}));