-
- );
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..4980312
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+export type RootLayoutProps = {
+ children: ReactNode;
+};
+
+export default function RootLayout(props: RootLayoutProps) {
+ return <>{props.children};
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
new file mode 100644
index 0000000..b8cf985
--- /dev/null
+++ b/src/app/page.tsx
@@ -0,0 +1,3 @@
+export default function HomePage() {
+ return
- {/* Settings Panel */}
-
-
-
-
- {/* Drop Zone */}
-
-
-
- {showSaveModal && (
-
-
-
-
-
-
-
-
- setSettings((prev) => ({
- ...prev,
- quality: parseInt(e.target.value),
- }))
- }
- className="w-full h-12 px-4 bg-white bg-opacity-10 leading-none text-white text-opacity-70 rounded-md focus:ring-primary-500 focus:border-primary-500 transition-colors hover:bg-white/15"
- />
-
-
-
-
- setSettings((prev) => ({
- ...prev,
- width: e.target.value
- ? parseInt(e.target.value)
- : undefined,
- }))
- }
- disabled={
- settings.preset &&
- settings.preset !== "Custom" &&
- PRESET_OPTIONS.find((p) => p.label === settings.preset)
- ?.width !== undefined
- }
- className="w-full h-12 px-4 bg-white bg-opacity-10 leading-none text-white text-opacity-70 rounded-md focus:ring-primary-500 focus:border-primary-500 transition-colors hover:bg-white/15 disabled:opacity-50 disabled:cursor-not-allowed"
- />
-
-
-
-
- setSettings((prev) => ({
- ...prev,
- height: e.target.value
- ? parseInt(e.target.value)
- : undefined,
- }))
- }
- disabled={
- settings.preset &&
- settings.preset !== "Custom" &&
- PRESET_OPTIONS.find((p) => p.label === settings.preset)
- ?.width !== undefined
- }
- className="w-full h-12 px-4 bg-white bg-opacity-10 leading-none text-white text-opacity-70 rounded-md focus:ring-primary-500 focus:border-primary-500 transition-colors hover:bg-white/15 disabled:opacity-50 disabled:cursor-not-allowed"
- />
-
-
-
-
-
-
-
-
-
- )}
-
-
-
- {!modalSuccessMsg ? (
-
-
-
- ) : (
- Save images
- - {/* Toggle for folder vs individual files */} -
-
-
-
- {/* Folder name input - only show when saveAsFolder is true */}
- {saveAsFolder && (
- - {saveAsFolder - ? "Images will be saved in a new folder with the specified name" - : "Images will be saved directly to the chosen location with their original names"} -
-
-
- setModalFolderName(e.target.value)}
- className="w-full p-3 rounded bg-white bg-opacity-10 text-white placeholder-white placeholder-opacity-40 focus:outline-none"
- placeholder="Compressed Images"
- />
-
- )}
-
-
-
- {modalLocationPath && (
-
-
- {modalErrorMsg && (
- - {modalLocationPath} -
- )} -
- {modalErrorMsg}
-
- )}
-
-
-
-
- )}
- Done
-- {modalSuccessMsg} -
- - {
- const rootProps = getRootProps();
- const setRefs = (node: HTMLDivElement | null) => {
- const maybeFn = (
- rootProps as unknown as {
- ref?: (n: HTMLDivElement | null) => void;
- }
- ).ref;
- if (typeof maybeFn === "function") {
- maybeFn(node);
- }
- dropAreaRef.current = node;
- };
- return { ...rootProps, ref: setRefs } as typeof rootProps & {
- ref: typeof setRefs;
- };
- })()}
- className={`drag-area ${isDragActive ? "drag-over" : ""} ${
- isProcessing ? "loading" : ""
- } mb-12`}
- >
-
-
-
- {/* Removed separate processing block; handled in drag area */}
-
- {/* Results */}
- {compressedImages.length > 0 && (
-
- {isProcessing ? (
-
-
-
-
- ) : (
- <>
-
- {isDragActive ? (
- - Processing images... -
-- Drop the images here... -
- ) : ( -
-
- )}
-
- )}
- - Drag & drop images here, or click to select -
-- Supports JPEG, PNG, WebP, GIF, and BMP -
-
-
- )}
-
- {/* Left: bulk actions and toggles */}
-
-
-
-
-
-
-
- {/* Center: Save Selected */}
-
-
-
-
- {/* Right: Clear All */}
-
-
-
-
- {compressedImages.map((image, idx) => (
-
-
-
- ))}
- {
- saveImage(image);
- }}
- >
- {image.thumbnail ? (
- 
- ) : (
-
-
-
-
-
- )}
-
- {/* selection indicator circle */}
-
-
- {selectedIds.includes(image.id) && (
-
- )}
-
- {!image.success && image.error && (
-
- )}
-
- {/* Subtle darken on hover for non-selected */}
-
-
- {/* Spinner overlay while processing (no error yet) */}
- {!image.success && !image.error && (
-
-
-
- )}
-
-
-
-
-
-
-
- {showDetails && (
- - {image.filename} -
- {!showDetails && image.success && ( - - {getCompressionRatio( - image.originalSize, - image.compressedSize || 0 - )} - - )} - {!image.success && image.error && ( - - Error - - )} -
- {image.success ? (
- <>
-
- )}
-
-
- Original:
-
-
- {formatFileSize(image.originalSize)}
-
-
- {image.compressedSize !== undefined && (
-
-
- Compressed:
-
-
- {formatFileSize(image.compressedSize)}
-
-
- )}
- {image.compressedSize !== undefined && (
-
-
- Saved:
-
-
- {getCompressionRatio(
- image.originalSize,
- image.compressedSize
- )}
-
-
- )}
- {image.originalDimensions && (
-
-
- Dimensions:
-
-
- {image.originalDimensions.width}×
- {image.originalDimensions.height}
-
-
- )}
-
-
- Format:
-
-
- {image.format}
-
-
-
- ) : (
-
- {image.error || "Processing failed"}
-
- )}
- Hello, world!
;
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..3a16b1c
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,8 @@
+body {
+ font-family:
+ -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+ sans-serif;
+ margin: auto;
+ max-width: 38rem;
+ padding: 2rem;
+}
diff --git a/src/main.ts b/src/main.ts
index e353384..c743489 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,51 +1,30 @@
-import { app, BrowserWindow, ipcMain, dialog, nativeImage } from "electron";
+import { app, BrowserWindow } from "electron";
+import path from "node:path";
import sharp from "sharp";
-import path from "path";
-import fs from "fs";
-import { promises as fsPromises } from "fs";
-import os from "os";
-// This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Webpack
-// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
-// whether you're running in development or production).
-declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
-declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: string;
+console.log(sharp.versions);
-// Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require("electron-squirrel-startup")) {
- app.quit();
-}
-
-const createWindow = (): void => {
+const createWindow = () => {
// Create the browser window.
- const iconPath = path.resolve(__dirname, "../assets/icons/pulp.png");
- const windowIcon = nativeImage.createFromPath(iconPath);
const mainWindow = new BrowserWindow({
- height: 1040,
- width: 1200,
- minHeight: 600,
- minWidth: 800,
- autoHideMenuBar: true,
- titleBarOverlay: {
- color: "#000000",
- symbolColor: "#ffffff",
- height: 36,
- },
- // Linux window icon fallback; Windows/macOS prefer packager icon
- icon: windowIcon.isEmpty() ? undefined : iconPath,
+ width: 800,
+ height: 600,
webPreferences: {
- preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
- contextIsolation: true,
- nodeIntegration: false,
+ preload: path.join(__dirname, "preload.js"),
},
});
// and load the index.html of the app.
- mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
- // Remove menu entirely on Windows/Linux
- mainWindow.removeMenu();
- // Set concise window title
- mainWindow.setTitle("Pulp");
+ if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
+ mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
+ } else {
+ mainWindow.loadFile(
+ path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`)
+ );
+ }
+
+ // Open the DevTools.
+ mainWindow.webContents.openDevTools();
};
// This method will be called when Electron has finished
@@ -70,287 +49,5 @@ app.on("activate", () => {
}
});
-// Image optimization function
-type OptimizationSettings = {
- format: "jpeg" | "png" | "webp" | "avif" | "tiff";
- quality: number;
- width?: number;
- height?: number;
-};
-
-async function optimizeImage(
- filePath: string,
- settings: OptimizationSettings = { format: "jpeg", quality: 80 }
-): Promise<{
- success: boolean;
- outputPath?: string;
- error?: string;
- originalBytes?: number;
- outputBytes?: number;
-}> {
- try {
- const parsedPath = path.parse(filePath);
- const outputExt = settings.format;
- const outputPath = path.join(
- parsedPath.dir,
- `${parsedPath.name}.min.${outputExt}`
- );
-
- let pipeline = sharp(filePath);
- if (settings.width || settings.height) {
- pipeline = pipeline.resize({
- width: settings.width,
- height: settings.height,
- fit: "inside",
- withoutEnlargement: true,
- });
- }
-
- if (settings.format === "jpeg") {
- pipeline = pipeline.jpeg({
- quality: settings.quality ?? 80,
- progressive: true,
- });
- } else if (settings.format === "webp") {
- pipeline = pipeline.webp({ quality: settings.quality ?? 80 });
- } else if (settings.format === "avif") {
- pipeline = pipeline.avif({ quality: settings.quality ?? 50 });
- } else if (settings.format === "tiff") {
- pipeline = pipeline.tiff({ compression: "lzw" });
- } else {
- // png: use default compression
- pipeline = pipeline.png({ compressionLevel: 9 });
- }
-
- await pipeline.toFile(outputPath);
-
- const [origStat, outStat] = await Promise.all([
- fsPromises.stat(filePath).catch(() => undefined),
- fsPromises.stat(outputPath).catch(() => undefined),
- ]);
-
- return {
- success: true,
- outputPath,
- originalBytes: origStat?.size,
- outputBytes: outStat?.size,
- };
- } catch (error) {
- return { success: false, error: (error as Error).message };
- }
-}
-
-// IPC handlers
-ipcMain.handle("select-images", async () => {
- const result = await dialog.showOpenDialog({
- properties: ["openFile", "multiSelections"],
- filters: [
- {
- name: "Images",
- extensions: ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "webp"],
- },
- ],
- });
-
- return result;
-});
-
-ipcMain.handle(
- "optimize-images",
- async (
- _event,
- args: { filePaths: string[]; settings: OptimizationSettings }
- ) => {
- const results = [] as Array<{
- filePath: string;
- success: boolean;
- outputPath?: string;
- error?: string;
- originalBytes?: number;
- outputBytes?: number;
- }>;
-
- for (const filePath of args.filePaths) {
- const result = await optimizeImage(filePath, args.settings);
- results.push({ filePath, ...result });
- }
-
- return results;
- }
-);
-
-// Allow user to choose a directory to save a folder into
-ipcMain.handle("select-save-location", async () => {
- const result = await dialog.showOpenDialog({
- properties: ["openDirectory", "createDirectory"],
- });
- return result;
-});
-
-// Let user choose a destination path and type folder name in one step
-ipcMain.handle("select-folder-destination", async () => {
- const result = await dialog.showSaveDialog({
- title: "Choose folder destination",
- buttonLabel: "Save",
- defaultPath: "Compressed Images",
- });
- return result;
-});
-
-// Save multiple images into a created folder at selected location
-ipcMain.handle(
- "save-images-to-folder",
- async (
- _event,
- args: {
- folderPath?: string;
- folderName?: string;
- folderFullPath?: string;
- images: Array<{
- filename: string;
- outputPath?: string;
- imageData?: string; // base64 without data URL prefix
- }>;
- }
- ) => {
- try {
- // Determine destination folder path
- let targetFolder: string;
- if (args.folderFullPath && args.folderFullPath.length > 0) {
- const parsed = path.parse(args.folderFullPath);
- const sanitizedBase =
- parsed.base.replace(/[<>:\"/\\|?*]+/g, " ").trim() ||
- "Compressed Images";
- targetFolder = path.join(parsed.dir, sanitizedBase);
- } else if (args.folderPath && args.folderName) {
- const sanitizedFolderName =
- args.folderName.replace(/[<>:\"/\\|?*]+/g, " ").trim() ||
- "Compressed Images";
- targetFolder = path.join(args.folderPath, sanitizedFolderName);
- } else {
- throw new Error("Missing destination folder information");
- }
- await fsPromises.mkdir(targetFolder, { recursive: true });
-
- // Check if any files already exist when saving individual files (not in a folder)
- let shouldAddCompressedSuffix = false;
- if (args.folderFullPath) {
- for (const image of args.images) {
- const destination = path.join(targetFolder, image.filename);
- if (fs.existsSync(destination)) {
- shouldAddCompressedSuffix = true;
- break; // If any file conflicts, rename all files
- }
- }
- }
-
- for (const image of args.images) {
- let destination = path.join(targetFolder, image.filename);
-
- // If we're saving individual files and any file conflicts exist, add -compressed to all
- if (args.folderFullPath && shouldAddCompressedSuffix) {
- const parsed = path.parse(image.filename);
- const nameWithoutExt = parsed.name;
- const extension = parsed.ext;
- const newFilename = `${nameWithoutExt}-compressed${extension}`;
- destination = path.join(targetFolder, newFilename);
- }
-
- if (image.outputPath && fs.existsSync(image.outputPath)) {
- await fsPromises.copyFile(image.outputPath, destination);
- } else if (image.imageData) {
- const buffer = Buffer.from(image.imageData, "base64");
- await fsPromises.writeFile(destination, buffer);
- }
- }
-
- return { success: true, folderPath: targetFolder };
- } catch (error) {
- const message = error instanceof Error ? error.message : String(error);
- return { success: false, error: message };
- }
- }
-);
-
-// Write dropped files to a temporary directory so they can be optimized by sharp
-ipcMain.handle(
- "write-temp-files",
- async (
- _event,
- files: Array<{ name: string; dataBase64: string }>
- ): Promise<{ tempDir: string; filePaths: string[] }> => {
- const tempDir = await fsPromises.mkdtemp(path.join(os.tmpdir(), "pulp-"));
- const filePaths: string[] = [];
- for (const f of files) {
- const target = path.join(tempDir, f.name);
- const buffer = Buffer.from(f.dataBase64, "base64");
- await fsPromises.writeFile(target, buffer);
- filePaths.push(target);
- }
- return { tempDir, filePaths };
- }
-);
-
-// Optimize images provided as base64 buffers (no temp files)
-ipcMain.handle(
- "optimize-images-buffers",
- async (
- _event,
- args: {
- files: Array<{ name: string; dataBase64: string }>;
- settings: OptimizationSettings;
- }
- ) => {
- const results: Array<{
- fileName: string;
- success: boolean;
- error?: string;
- originalBytes?: number;
- outputBytes?: number;
- outputBase64?: string;
- }> = [];
-
- for (const f of args.files) {
- try {
- const inputBuffer = Buffer.from(f.dataBase64, "base64");
- let pipeline = sharp(inputBuffer);
- if (args.settings.width || args.settings.height) {
- pipeline = pipeline.resize({
- width: args.settings.width,
- height: args.settings.height,
- fit: "inside",
- withoutEnlargement: true,
- });
- }
-
- if (args.settings.format === "jpeg") {
- pipeline = pipeline.jpeg({
- quality: args.settings.quality ?? 80,
- progressive: true,
- });
- } else if (args.settings.format === "webp") {
- pipeline = pipeline.webp({ quality: args.settings.quality ?? 80 });
- } else {
- pipeline = pipeline.png({ compressionLevel: 9 });
- }
-
- const outputBuffer = await pipeline.toBuffer();
- results.push({
- fileName: f.name,
- success: true,
- originalBytes: inputBuffer.length,
- outputBytes: outputBuffer.length,
- outputBase64: outputBuffer.toString("base64"),
- });
- } catch (e) {
- results.push({
- fileName: f.name,
- success: false,
- error: (e as Error).message,
- });
- }
- }
-
- return results;
- }
-);
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and import them here.
diff --git a/src/preload.ts b/src/preload.ts
index 48e792d..5e9d369 100644
--- a/src/preload.ts
+++ b/src/preload.ts
@@ -1,85 +1,2 @@
-import { contextBridge, ipcRenderer } from "electron";
-
-const api = {
- selectImages: (): Promise<{ canceled: boolean; filePaths: string[] }> =>
- ipcRenderer.invoke("select-images"),
- optimizeImages: (args: {
- filePaths: string[];
- settings: {
- format: "jpeg" | "png" | "webp" | "avif" | "tiff";
- quality: number;
- width?: number;
- height?: number;
- };
- }): Promise<
- {
- success: boolean;
- outputPath?: string;
- error?: string;
- filePath: string;
- originalBytes?: number;
- outputBytes?: number;
- }[]
- > => ipcRenderer.invoke("optimize-images", args),
- getFolderName: async (): Promise<{
- canceled: boolean;
- folderName?: string;
- }> => {
- const folderName = await new Promise