+ {/* Draggable region for window */}
+
+
+
+ );
+};
diff --git a/src/app/globals.css b/src/app/globals.css
index 01c870a..7cc60cb 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,27 @@
-@import "tailwindcss";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Pulp - Clean black & white theme */
+
+:root {
+ --color-bg: #000000;
+ --color-surface: rgba(255, 255, 255, 0.05);
+ --color-surface-hover: rgba(255, 255, 255, 0.1);
+ --color-border: rgba(255, 255, 255, 0.15);
+ --color-border-hover: rgba(255, 255, 255, 0.25);
+ --color-text: #ffffff;
+ --color-text-secondary: rgba(255, 255, 255, 0.7);
+ --color-text-muted: rgba(255, 255, 255, 0.5);
+ --color-accent: #924EFF;
+ --color-success: #22c55e;
+ --color-error: #ef4444;
+}
+
+* {
+ box-sizing: border-box;
+}
-/* Custom styles for the image optimizer app */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
@@ -8,260 +29,728 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background: var(--color-bg);
+ color: var(--color-text);
+}
+
+/* Draggable title bar region */
+.drag-region {
+ -webkit-app-region: drag;
+ height: 36px;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 9999;
+}
+
+/* Main app container */
+.app-container {
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ padding-top: 36px; /* Space for drag region */
+}
+
+.app-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ max-width: 1200px;
+ width: 100%;
+ margin: 0 auto;
+ padding: 1.5rem;
+}
+
+/* Mode Toggle - Top */
+.mode-toggle-container {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 1.5rem;
+ -webkit-app-region: no-drag;
+}
+
+.mode-toggle {
+ position: relative;
+ display: inline-flex;
+ align-items: center;
+ background: var(--color-bg);
+ border: 2px solid var(--color-text);
+ border-radius: 9999px;
+}
+
+.mode-toggle-pill {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 50%;
+ background: var(--color-text);
+ border-radius: 9999px;
+ transition: transform 0.3s ease;
+}
+
+.mode-toggle-pill.video {
+ transform: translateX(100%);
+}
+
+.mode-button {
+ position: relative;
+ z-index: 10;
+ padding: 0.5rem 1.5rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ transition: color 0.2s ease;
+}
+
+.mode-button.active {
+ color: var(--color-bg);
+}
+
+.mode-button:not(.active) {
+ color: var(--color-text);
+}
+
+/* Settings Panel */
+.settings-panel {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ justify-content: center;
+ margin-bottom: 2rem;
+ -webkit-app-region: no-drag;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.form-label {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--color-text-muted);
}
-/* Globally customize select arrow and spacing */
+/* Select styling */
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
- /* Inline SVG down arrow, white with 80% opacity */
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-opacity='0.8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+ background-color: var(--color-surface);
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
- background-position: calc(100% - 16px) center; /* move arrow a bit left */
- background-size: 14px 14px;
- padding-right: 2.5rem; /* make room for arrow */
+ background-position: calc(100% - 12px) center;
+ background-size: 12px;
+ padding: 0 2.5rem 0 1rem;
+ height: 48px;
+ border: none;
+ border-radius: 0.5rem;
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: background-color 0.15s ease;
+}
+
+select:hover {
+ background-color: var(--color-surface-hover);
+}
+
+select:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(146, 78, 255, 0.5);
}
-/* Hide default arrow in legacy MS browsers */
+
select::-ms-expand {
display: none;
}
-/* Hover border effect matching active/focus but at 10% opacity */
-select:hover,
-input[type="number"]:hover {
- box-shadow: 0 0 0 2px rgba(146, 78, 255, 0.1);
+select option {
+ background-color: #1a1a1a;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+select optgroup {
+ background-color: #2a2a2a;
+ color: rgba(255, 255, 255, 0.7);
+ font-weight: 600;
+}
+
+/* Input styling */
+input[type="number"] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+ background: var(--color-surface);
+ border: none;
+ border-radius: 0.5rem;
+ padding: 0 1rem;
+ height: 48px;
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ transition: background-color 0.15s ease;
+ width: 100%;
}
-/* Remove spin buttons from number inputs (Chrome, Safari, Edge) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
-/* Remove spin buttons from number inputs (Firefox) */
-input[type="number"] {
- -moz-appearance: textfield;
+
+input[type="number"]:hover {
+ background-color: var(--color-surface-hover);
+}
+
+input[type="number"]:focus {
+ outline: none;
+ box-shadow: 0 0 0 2px rgba(146, 78, 255, 0.5);
+}
+
+input[type="number"]::placeholder {
+ color: var(--color-text-muted);
+}
+
+/* Dropzone - fills remaining space */
+.dropzone-wrapper {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
}
-/* Drag area styling */
.drag-area {
- border: 2px dashed rgba(255, 255, 255, 0.2);
+ flex: 1;
+ min-height: 200px;
+ border: 2px dashed var(--color-border);
border-radius: 0.5rem;
- padding: 2rem;
- text-align: center;
- transition: border-color 0.2s ease;
- height: 244px;
- cursor: pointer;
display: flex;
+ flex-direction: column;
align-items: center;
justify-content: center;
+ cursor: pointer;
+ transition: border-color 0.2s ease, background-color 0.2s ease;
+ -webkit-app-region: no-drag;
}
+
.drag-area:hover {
- border: 2px dashed rgba(255, 255, 255, 0.3);
+ border-color: var(--color-border-hover);
background-color: rgba(255, 255, 255, 0.02);
}
.drag-area.drag-over {
- border-color: #924eff;
+ border-color: var(--color-accent);
}
-/* Pulse the dashed purple border while loading (no glow) */
@keyframes pulseBorderOpacity {
- 0% {
+ 0%, 100% {
border-color: rgba(146, 78, 255, 0.35);
}
50% {
border-color: rgba(146, 78, 255, 1);
}
- 100% {
- border-color: rgba(146, 78, 255, 0.35);
- }
}
.drag-area.loading {
- border-style: dashed;
border-color: rgba(146, 78, 255, 0.6);
animation: pulseBorderOpacity 1.6s ease-in-out infinite;
- box-shadow: none;
- background: transparent;
+ pointer-events: none;
+}
+
+.dropzone-text {
+ color: var(--color-text-secondary);
+ font-size: 1.125rem;
+ margin-bottom: 0.5rem;
+}
+
+.dropzone-subtext {
+ color: var(--color-text-muted);
+ font-size: 0.875rem;
+}
+
+/* Results section */
+.results-section {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+}
+
+.results-header {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ margin-bottom: 1.5rem;
+}
+
+.results-left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.results-center {
+ display: flex;
+ gap: 0.75rem;
+}
+
+.results-right {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
}
-/* Button styling */
+/* Buttons - clean, no boxes */
.btn-primary {
- background-color: white;
- color: black;
padding: 0.5rem 1.5rem;
+ background: var(--color-text);
+ color: var(--color-bg);
+ border: none;
border-radius: 0.375rem;
+ font-size: 0.875rem;
font-weight: 500;
- transition: all 0.2s ease;
- border: none;
cursor: pointer;
+ transition: opacity 0.15s ease;
}
.btn-primary:hover {
- background-color: rgba(255, 255, 255, 0.9);
+ opacity: 0.9;
+}
+
+.btn-primary:active {
+ opacity: 0.8;
+}
+
+.btn-outline {
+ padding: 0.5rem 1rem;
+ background: transparent;
+ color: var(--color-text);
+ border: 2px solid var(--color-text);
+ border-radius: 0.375rem;
+ font-size: 0.875rem;
+ font-weight: 500;
cursor: pointer;
+ transition: all 0.15s ease;
}
-/* Custom checkbox styling */
-input[type="checkbox"]:checked {
- background-color: white;
- border-color: white;
+.btn-outline:hover {
+ background: var(--color-text);
+ color: var(--color-bg);
}
-input[type="checkbox"]:checked::before {
- content: "✓";
- color: black;
- font-size: 0.75rem;
- font-weight: bold;
+.btn-outline-danger {
+ padding: 0.5rem 1rem;
+ background: transparent;
+ color: var(--color-error);
+ border: 2px solid var(--color-error);
+ border-radius: 0.375rem;
+ font-size: 0.875rem;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.15s ease;
+}
+
+.btn-outline-danger:hover {
+ background: var(--color-error);
+ color: var(--color-text);
+}
+
+.btn-ghost {
+ padding: 0.5rem 1rem;
+ background: transparent;
+ color: var(--color-text);
+ border: none;
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: opacity 0.15s ease;
+}
+
+.btn-ghost:hover {
+ opacity: 0.8;
+ background: var(--color-surface);
+ border-radius: 0.375rem;
+}
+
+/* Checkbox toggle */
+.checkbox-label {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--color-text-secondary);
+ cursor: pointer;
+ transition: color 0.15s ease;
+}
+
+.checkbox-label:hover {
+ color: var(--color-text);
+}
+
+.checkbox-input {
+ appearance: none;
+ width: 1rem;
+ height: 1rem;
+ border: 2px solid var(--color-text-secondary);
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ position: relative;
+}
+
+.checkbox-input:checked {
+ background: var(--color-text);
+ border-color: var(--color-text);
+}
+
+.checkbox-input:checked::after {
+ content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
+ color: var(--color-bg);
+ font-size: 0.625rem;
+ font-weight: bold;
}
-/* Select options styling for dark theme */
-select option {
- background-color: #1a1a1a;
- color: rgba(255, 255, 255, 0.9);
- white-space: nowrap;
+.checkbox-input:hover {
+ border-color: var(--color-text);
+ background: var(--color-surface);
+}
+
+/* Image Grid */
+.image-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 1.5rem;
+}
+
+.image-grid.video-mode {
+ grid-template-columns: 1fr;
+ max-width: 900px;
+ margin: 0 auto;
+}
+
+.image-card {
+ position: relative;
+ cursor: pointer;
+}
+
+.image-preview {
+ position: relative;
+ aspect-ratio: 1;
+ border-radius: 0.5rem;
overflow: hidden;
- text-overflow: ellipsis;
- max-width: 200px;
+ background: var(--color-surface);
}
-/* Optgroup styling */
-select optgroup {
- background-color: #2a2a2a;
- color: rgba(255, 255, 255, 0.7);
+.image-grid.video-mode .image-preview {
+ aspect-ratio: 16/9;
+}
+
+.image-preview img,
+.image-preview video {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+/* Selection circle */
+.select-circle {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 20;
+ transition: all 0.15s ease;
+ background: rgba(0, 0, 0, 0.2);
+ border: 2px solid rgba(255, 255, 255, 0.2);
+}
+
+.select-circle.selected {
+ background: var(--color-text);
+ border-color: var(--color-bg);
+}
+
+.select-circle svg {
+ width: 1rem;
+ height: 1rem;
+}
+
+/* Selection border */
+.selection-border {
+ position: absolute;
+ inset: 0;
+ border: 2px solid var(--color-accent);
+ border-radius: 0.5rem;
+ pointer-events: none;
+ z-index: 10;
+}
+
+/* Hover overlay with stats */
+.image-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.6);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ padding: 1rem;
+ text-align: center;
+}
+
+.image-card:hover .image-overlay {
+ opacity: 1;
+}
+
+.overlay-status {
+ font-size: 0.75rem;
font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin-bottom: 0.5rem;
+}
+
+.overlay-status.success {
+ color: var(--color-success);
+}
+
+.overlay-status.error {
+ color: var(--color-error);
+}
+
+.overlay-status.processing {
+ color: var(--color-accent);
+}
+
+.overlay-info {
+ font-size: 0.75rem;
+ color: var(--color-text-secondary);
+ margin-bottom: 0.25rem;
+}
+
+.overlay-ratio {
font-size: 0.875rem;
- padding: 0.25rem 0.5rem;
+ font-weight: 600;
+ color: var(--color-text);
}
-/* Make the highlighted (hover/focus) option a bit lighter than background; don't change the selected option */
-select option:hover,
-select option:focus,
-select option:active {
- background-color: #2a2a2a !important;
- color: rgba(255, 255, 255, 0.95);
+
+/* Download icon on hover */
+.download-icon {
+ width: 1.5rem;
+ height: 1.5rem;
+ color: var(--color-text);
+ margin-top: 0.5rem;
}
-/* Custom scrollbar for webkit browsers */
-::-webkit-scrollbar {
- width: 8px;
+/* Processing spinner overlay */
+.processing-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 15;
}
-::-webkit-scrollbar-track {
- background: rgba(255, 255, 255, 0.1);
- border-radius: 4px;
+/* Error overlay */
+.error-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(239, 68, 68, 0.2);
+ border: 1px solid var(--color-error);
+ pointer-events: none;
+ z-index: 10;
}
-::-webkit-scrollbar-thumb {
- background: rgba(255, 255, 255, 0.3);
- border-radius: 4px;
+/* Video processed badge */
+.processed-badge {
+ position: absolute;
+ top: 0.5rem;
+ left: 0.5rem;
+ background: var(--color-success);
+ color: var(--color-text);
+ padding: 0.25rem 0.5rem;
+ border-radius: 0.25rem;
+ font-size: 0.75rem;
+ font-weight: 500;
+ z-index: 20;
}
-::-webkit-scrollbar-thumb:hover {
- background: rgba(255, 255, 255, 0.5);
+/* Image info below */
+.image-info {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 0.5rem;
}
-/* Grid layout responsiveness */
-@media (max-width: 768px) {
- .max-w-6xl {
- padding: 0 1rem;
- }
+.image-filename {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--color-text-muted);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ flex: 1;
}
-/* Input and select focus states */
-input:focus,
-select:focus {
- outline: none;
- box-shadow: 0 0 0 2px rgba(146, 78, 255, 0.5);
+.image-ratio {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--color-text);
+ margin-left: 0.5rem;
+ white-space: nowrap;
}
-/* Transition animations */
-.transition-all {
- transition-property: all;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 300ms;
+.image-error {
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--color-error);
+ margin-left: 0.5rem;
}
-/* Image grid hover effects */
-.group:hover .group-hover\:opacity-100 {
- opacity: 1;
+/* Detailed view */
+.image-details {
+ margin-top: 0.5rem;
+ font-size: 0.875rem;
+ color: var(--color-text-muted);
}
-.group:hover .group-hover\:bg-opacity-50 {
- background-color: rgba(0, 0, 0, 0.5);
+.detail-row {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.25rem 0;
}
-/* Loading spinner animation */
-@keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.detail-label {
+ color: var(--color-text-muted);
}
-.animate-spin {
- animation: spin 1s linear infinite;
+.detail-value {
+ color: var(--color-text);
}
-/* Success and error state colors */
-.text-green-600 {
- color: #16a34a;
+.detail-value.success {
+ color: var(--color-success);
}
-.text-red-400 {
- color: #f87171;
+.detail-value.error {
+ color: var(--color-error);
}
-.bg-red-500 {
- background-color: #ef4444;
+/* Spinner */
+.spinner {
+ width: 1.5rem;
+ height: 1.5rem;
+ border: 2px solid var(--color-border);
+ border-top-color: var(--color-text);
+ border-radius: 50%;
+ animation: spin 0.8s linear infinite;
}
-/* Border styles for selected items */
-.border-blue-500 {
- border-color: #924eff !important;
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
}
+/* Collapse button */
+.collapse-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ width: 100%;
+ padding: 0.75rem;
+ margin-bottom: 1rem;
+ background: transparent;
+ border: none;
+ color: var(--color-text-secondary);
+ font-size: 0.875rem;
+ cursor: pointer;
+ transition: color 0.15s ease;
+}
-/* Opacity utilities */
-.bg-opacity-10 {
- background-color: rgba(255, 255, 255, 0.1);
+.collapse-btn:hover {
+ color: var(--color-text);
}
-.bg-opacity-20 {
- background-color: rgba(255, 255, 255, 0.2);
+.collapse-btn svg {
+ width: 1rem;
+ height: 1rem;
+ transition: transform 0.2s ease;
}
-.bg-opacity-50 {
- background-color: rgba(0, 0, 0, 0.5);
+.collapse-btn.collapsed svg {
+ transform: rotate(180deg);
}
-.text-opacity-50 {
- color: rgba(255, 255, 255, 0.5);
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
}
-.text-opacity-70 {
- color: rgba(255, 255, 255, 0.7);
+::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.1);
+ border-radius: 4px;
}
-.text-opacity-90 {
- color: rgba(255, 255, 255, 0.9);
+::-webkit-scrollbar-thumb {
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 4px;
}
-.border-opacity-20 {
- border-color: rgba(255, 255, 255, 0.2);
+::-webkit-scrollbar-thumb:hover {
+ background: rgba(255, 255, 255, 0.5);
}
-.border-opacity-50 {
- border-color: rgba(255, 255, 255, 0.5);
+/* Responsive */
+@media (max-width: 768px) {
+ .app-content {
+ padding: 1rem;
+ }
+
+ .settings-panel {
+ gap: 0.5rem;
+ }
+
+ .results-header {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .results-left,
+ .results-center,
+ .results-right {
+ justify-content: center;
+ }
+
+ .image-grid {
+ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+ gap: 1rem;
+ }
}
-.border-opacity-90 {
- border-color: rgba(59, 130, 246, 0.9);
+/* Utility classes */
+.invisible {
+ visibility: hidden;
+ pointer-events: none;
}
+
+/* Tailwind compatibility */
+.text-white { color: var(--color-text); }
+.text-opacity-50 { color: var(--color-text-muted); }
+.text-opacity-70 { color: var(--color-text-secondary); }
+.bg-opacity-10 { background-color: var(--color-surface); }
+.text-green-600 { color: var(--color-success); }
+.text-red-400 { color: var(--color-error); }
diff --git a/src/app/index.tsx b/src/app/index.tsx
index f50667c..b0de5cc 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -1,1257 +1,2 @@
-import { useState, useCallback, useEffect, useRef } from "react";
-import { useDropzone } from "react-dropzone";
-import "./globals.css";
-
-type BufferOptimizeResult = {
- fileName: string;
- success: boolean;
- error?: string;
- originalBytes?: number;
- outputBytes?: number;
- outputBase64?: string;
-};
-
-type OptimizeResult = {
- filePath: string;
- success: boolean;
- outputPath?: string;
- error?: string;
- originalBytes?: number;
- outputBytes?: number;
-};
-
-interface CompressedImage {
- id: string;
- originalFile: File;
- originalSize: number;
- compressedSize?: number;
- originalDimensions?: { width: number; height: number };
- format: string;
- filename: string;
- thumbnail: string;
- outputPath?: string;
- sourcePath?: string;
- compressedDataBase64?: string;
- success: boolean;
- error?: string;
-}
-
-interface CompressionSettings {
- format: "jpeg" | "png" | "webp" | "avif" | "tiff";
- quality: number;
- width?: number;
- height?: number;
- preset?: string;
-}
-
-interface PresetOption {
- label: string;
- width?: number;
- height?: number;
- aspectRatio?: number;
-}
-
-// Common aspect ratio and size presets
-const PRESET_OPTIONS: (PresetOption & { category?: string })[] = [
- { label: "Custom", width: undefined, height: undefined },
- { label: "1:1", aspectRatio: 1, category: "Aspect Ratio" },
- { label: "4:3", aspectRatio: 4 / 3, category: "Aspect Ratio" },
- { label: "16:9", aspectRatio: 16 / 9, category: "Aspect Ratio" },
- { label: "3:2", aspectRatio: 3 / 2, category: "Aspect Ratio" },
- { label: "21:9", aspectRatio: 21 / 9, category: "Aspect Ratio" },
- {
- label: "1080x1080",
- width: 1080,
- height: 1080,
- category: "Preset Sizes",
- },
- {
- label: "1080x1920",
- width: 1080,
- height: 1920,
- category: "Preset Sizes",
- },
- {
- label: "1200x630",
- width: 1200,
- height: 630,
- category: "Preset Sizes",
- },
- {
- label: "1500x500",
- width: 1500,
- height: 500,
- category: "Preset Sizes",
- },
- {
- label: "1584x396",
- width: 1584,
- height: 396,
- category: "Preset Sizes",
- },
- {
- label: "1280x720",
- width: 1280,
- height: 720,
- category: "Preset Sizes",
- },
- {
- label: "1920x600",
- width: 1920,
- height: 600,
- category: "Preset Sizes",
- },
- {
- label: "400x400",
- width: 400,
- height: 400,
- category: "Preset Sizes",
- },
- {
- label: "150x150",
- width: 150,
- height: 150,
- category: "Preset Sizes",
- },
- {
- label: "300x300",
- width: 300,
- height: 300,
- category: "Preset Sizes",
- },
- {
- label: "600x600",
- width: 600,
- height: 600,
- category: "Preset Sizes",
- },
-];
-
-export function App() {
- const [compressedImages, setCompressedImages] = useState
+ {/* Mode Toggle - Top */}
+
+
+
+
+
+ {/* Settings Panel */}
+
+
+
+
+
+
+
+ ) : (
+
+ {/* Results Header */}
+
+ )}
+
+
+
+ {/* Collapse/Expand Button */}
+
+
+ {/* Collapsed Dropzone */}
+ {!isDropzoneCollapsed && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {/* Image Grid */}
+
-
- );
-}
+import './globals.css';
+export { App } from './App';
diff --git a/src/components/Dropzone.tsx b/src/components/Dropzone.tsx
new file mode 100644
index 0000000..a5fdbbc
--- /dev/null
+++ b/src/components/Dropzone.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { useDropzone } from 'react-dropzone';
+
+interface DropzoneProps {
+ onDrop: (files: File[]) => void;
+ isDragActive: boolean;
+ isProcessing: boolean;
+ isCollapsed?: boolean;
+ mode: 'image' | 'video';
+ hasFiles: boolean;
+}
+
+export const Dropzone: React.FC
- {/* 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"}
-
- )}
-
+
+
+ {isProcessing ? (
+
+ );
+};
diff --git a/src/components/ImageGrid.tsx b/src/components/ImageGrid.tsx
new file mode 100644
index 0000000..7cb4c7f
--- /dev/null
+++ b/src/components/ImageGrid.tsx
@@ -0,0 +1,193 @@
+import React from 'react';
+import { CompressedImage } from '../types';
+
+interface ImageGridProps {
+ images: CompressedImage[];
+ previewUrls: Map
+
+
+ ) : (
+ <>
+ + Processing {mode === 'image' ? 'images' : 'videos'}... +
++ {isDragActive + ? `Drop ${mode === 'image' ? 'images' : 'videos'} here` + : `Drag & drop ${mode === 'image' ? 'images' : 'videos'} here, or click to select` + } +
++ {mode === 'image' + ? 'Supports JPEG, PNG, WebP, AVIF, TIFF, GIF, BMP' + : 'Supports MP4, WebM, AVI, MOV, MKV, M4V, FLV' + } +
+ + )} +
+ {images.map((image) => {
+ const isVideo = image.originalFile.type.startsWith("video/");
+ const isSelected = selectedIds.includes(image.id);
+ // Use compressed preview (same as what gets saved)
+ const previewUrl = previewUrls.get(image.id) || image.thumbnail;
+
+ return (
+
+ );
+};
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..4396e38
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface InputProps {
+ label: string;
+ value: number;
+ onChange: (value: number) => void;
+ min?: number;
+ max?: number;
+ placeholder?: string;
+ suffix?: string;
+ className?: string;
+}
+
+export const Input: React.FC
+
+ );
+ })}
+ onImageClick(image)}
+ >
+ {isVideo ? (
+
+
+ {/* File info below image */}
+
+
+ {image.filename}
+
+ {!showDetails && image.success && image.compressedSize && (
+
+ {getCompressionRatio(image.originalSize, image.compressedSize)}
+
+ )}
+ {!image.success && image.error && (
+ Error
+ )}
+
+
+ {/* Detailed view */}
+ {showDetails && (
+
+ {image.success ? (
+ <>
+
+ )}
+
+ Original:
+ {formatFileSize(image.originalSize)}
+
+ {image.compressedSize !== undefined && (
+
+ Compressed:
+ {formatFileSize(image.compressedSize)}
+
+ )}
+ {image.compressedSize !== undefined && (
+
+ Saved:
+
+ {getCompressionRatio(image.originalSize, image.compressedSize)}
+
+
+ )}
+
+ Format:
+
+ {image.format}
+
+
+
+ ) : (
+
+
+ {image.error || "Processing failed"}
+
+
+ )}
+
+
+
+ );
+};
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..40a1245
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+interface SelectOption {
+ value: string;
+ label: string;
+ category?: string;
+}
+
+interface SelectProps {
+ label: string;
+ value: string;
+ onChange: (value: string) => void;
+ options: SelectOption[];
+ className?: string;
+ showTransition?: boolean;
+ isVisible?: boolean;
+}
+
+export const Select: React.FC
+ {
+ const val = parseInt(e.target.value);
+ onChange(isNaN(val) ? 0 : Math.min(max, Math.max(min, val)));
+ }}
+ min={min}
+ max={max}
+ style={suffix ? { paddingRight: '2rem' } : undefined}
+ />
+ {suffix && (
+
+ {suffix}
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
new file mode 100644
index 0000000..6fd40ce
--- /dev/null
+++ b/src/components/SettingsPanel.tsx
@@ -0,0 +1,237 @@
+import React from 'react';
+import { CompressionSettings, PresetOption } from '../types';
+
+interface SettingsPanelProps {
+ mode: 'image' | 'video';
+ settings: CompressionSettings;
+ onSettingsChange: (settings: CompressionSettings) => void;
+ presetOptions: PresetOption[];
+ isDropzoneCollapsed: boolean;
+}
+
+export const SettingsPanel: React.FC
+ {/* Format dropdown */}
+
+ );
+};
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..9fab2d9
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,5 @@
+export { Input } from './Input';
+export { Select } from './Select';
+export { Dropzone } from './Dropzone';
+export { ImageGrid } from './ImageGrid';
+export { SettingsPanel } from './SettingsPanel';
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
new file mode 100644
index 0000000..5e58415
--- /dev/null
+++ b/src/hooks/index.ts
@@ -0,0 +1,3 @@
+export { useImageProcessing } from './useImageProcessing';
+export { useFileHandling } from './useFileHandling';
+export { useVideoProcessing } from './useVideoProcessing';
diff --git a/src/hooks/useFileHandling.ts b/src/hooks/useFileHandling.ts
new file mode 100644
index 0000000..418843b
--- /dev/null
+++ b/src/hooks/useFileHandling.ts
@@ -0,0 +1,54 @@
+import { useCallback } from 'react';
+
+export const useFileHandling = () => {
+ /**
+ * Write a file to a temp directory via IPC (main process handles fs operations)
+ */
+ const writeTempFile = useCallback(async (file: File): Promise
+
+
+
+
+ {/* Quality input */}
+
+
+
+
+ {/* Max Width input */}
+
+
+ onSettingsChange({
+ ...settings,
+ ...(mode === 'image'
+ ? { quality: Math.min(100, Math.max(1, parseInt(e.target.value) || 1)) }
+ : { videoQuality: Math.min(100, Math.max(1, parseInt(e.target.value) || 1)) }
+ ),
+ })
+ }
+ min={1}
+ max={100}
+ style={{ paddingRight: '2rem' }}
+ />
+
+ %
+
+
+
+
+ {
+ const value = parseInt(e.target.value);
+ onSettingsChange({
+ ...settings,
+ width: isNaN(value) || value <= 0 ? undefined : value,
+ preset: 'Custom',
+ });
+ }}
+ min={0}
+ max={8000}
+ style={{ width: '100px' }}
+ />
+
+
+ {/* Max Height input */}
+
+
+ {
+ const value = parseInt(e.target.value);
+ onSettingsChange({
+ ...settings,
+ height: isNaN(value) || value <= 0 ? undefined : value,
+ preset: 'Custom',
+ });
+ }}
+ min={0}
+ max={8000}
+ style={{ width: '100px' }}
+ />
+
+
+ {/* Preset dropdown - only for image mode */}
+ {mode === 'image' && (
+
+
+
+
+ )}
+
+ {/* Video-specific settings */}
+ {mode === 'video' && (
+ <>
+
+
+
+
+
+
+
+
+
+
+ )}
+