mjpic 1.0.0

package/src/components/dialogs/AspectRatioDialog.tsx

@@ -0,0 +1,218 @@
+import { useState } from 'react';
+import { X, Plus, Trash2, GripVertical } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { usePresetStore, AspectRatioPreset } from '@/store/usePresetStore';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+
+interface AspectRatioDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface SortableItemProps {
+  preset: AspectRatioPreset;
+  onRemove: (id: string) => void;
+  t: (key: string) => string;
+}
+
+const SortableItem = ({ preset, onRemove, t }: SortableItemProps) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: preset.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 1 : 0,
+    position: 'relative' as const,
+  };
+
+  return (
+    <div 
+        ref={setNodeRef} 
+        style={style} 
+        className={`flex justify-between items-center bg-zinc-800 p-2 rounded mb-2 ${isDragging ? 'opacity-50 ring-2 ring-blue-500' : ''}`}
+    >
+        <button 
+            {...attributes} 
+            {...listeners} 
+            className="text-zinc-600 hover:text-zinc-400 cursor-grab active:cursor-grabbing mr-2 p-1"
+        >
+            <GripVertical size={14} />
+        </button>
+
+        <div className="flex flex-col flex-1">
+            <span className="text-sm text-zinc-200">
+                {preset.value === 'Free' ? t('panels.free') : preset.label}
+            </span>
+            {preset.label !== preset.value && preset.value !== 'Free' && (
+                <span className="text-xs text-zinc-500">{preset.value}</span>
+            )}
+        </div>
+        
+        {!preset.isDefault && (
+            <button 
+                onClick={() => onRemove(preset.id)}
+                className="text-zinc-500 hover:text-red-400 p-1 rounded hover:bg-zinc-700/50 transition-colors"
+            >
+                <Trash2 size={14} />
+            </button>
+        )}
+        {preset.isDefault && (
+            <span className="text-xs text-zinc-600 px-2">{t('common.default')}</span>
+        )}
+    </div>
+  );
+};
+
+export const AspectRatioDialog = ({ isOpen, onClose }: AspectRatioDialogProps) => {
+  const { t } = useTranslation();
+  const { aspectRatios, addAspectRatio, removeAspectRatio, reorderAspectRatios } = usePresetStore();
+  
+  const [newWidth, setNewWidth] = useState('');
+  const [newHeight, setNewHeight] = useState('');
+  const [newLabel, setNewLabel] = useState('');
+  
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5, // Prevent accidental drags when clicking
+        },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  if (!isOpen) return null;
+
+  const handleAdd = () => {
+    if (!newWidth || !newHeight) return;
+    
+    // Validate numbers
+    const w = parseInt(newWidth);
+    const h = parseInt(newHeight);
+    
+    if (isNaN(w) || isNaN(h) || w <= 0 || h <= 0) {
+        alert('Invalid dimensions');
+        return;
+    }
+    
+    const value = `${w}:${h}`;
+    const label = newLabel || value;
+    
+    addAspectRatio({
+        label,
+        value,
+    });
+    
+    setNewWidth('');
+    setNewHeight('');
+    setNewLabel('');
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    
+    if (over && active.id !== over.id) {
+      const oldIndex = aspectRatios.findIndex((item) => item.id === active.id);
+      const newIndex = aspectRatios.findIndex((item) => item.id === over.id);
+      
+      reorderAspectRatios(arrayMove(aspectRatios, oldIndex, newIndex));
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl w-96 p-4 max-h-[80vh] flex flex-col">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-zinc-100 font-semibold">{t('common.manageRatios')}</h3>
+          <button onClick={onClose} className="text-zinc-400 hover:text-white">
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Add New */}
+        <div className="bg-zinc-800/50 p-3 rounded mb-4 space-y-3">
+            <div className="flex gap-2 items-center">
+                <input 
+                    type="number" 
+                    placeholder={t('common.width')} 
+                    value={newWidth}
+                    onChange={(e) => setNewWidth(e.target.value)}
+                    className="w-16 bg-zinc-700 text-zinc-100 p-1.5 rounded text-sm text-center"
+                    min="1"
+                />
+                <span className="text-zinc-400">:</span>
+                <input 
+                    type="number" 
+                    placeholder={t('common.height')}
+                    value={newHeight}
+                    onChange={(e) => setNewHeight(e.target.value)}
+                    className="w-16 bg-zinc-700 text-zinc-100 p-1.5 rounded text-sm text-center"
+                    min="1"
+                />
+                <button 
+                    onClick={handleAdd}
+                    disabled={!newWidth || !newHeight}
+                    className="ml-auto px-3 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded text-sm flex items-center gap-1"
+                >
+                    <Plus size={14} /> {t('common.add')}
+                </button>
+            </div>
+            <input 
+                type="text" 
+                placeholder={t('common.labelOptional')}
+                value={newLabel}
+                onChange={(e) => setNewLabel(e.target.value)}
+                className="w-full bg-zinc-700 text-zinc-100 p-1.5 rounded text-sm"
+            />
+        </div>
+
+        {/* List */}
+        <div className="flex-1 overflow-y-auto pr-1">
+            <DndContext 
+                sensors={sensors} 
+                collisionDetection={closestCenter} 
+                onDragEnd={handleDragEnd}
+            >
+                <SortableContext 
+                    items={aspectRatios} 
+                    strategy={verticalListSortingStrategy}
+                >
+                    {aspectRatios.map((ratio) => (
+                        <SortableItem 
+                            key={ratio.id} 
+                            preset={ratio} 
+                            onRemove={removeAspectRatio}
+                            t={t}
+                        />
+                    ))}
+                </SortableContext>
+            </DndContext>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/dialogs/SaveDialog.tsx

@@ -0,0 +1,150 @@
+import { useState, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+
+interface SaveDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (format: string, quality: number, path?: string, fileName?: string) => void;
+  defaultPath?: string;
+  defaultFileName?: string;
+}
+
+export const SaveDialog = ({ isOpen, onClose, onConfirm, defaultPath, defaultFileName }: SaveDialogProps) => {
+  const { t } = useTranslation();
+  const [format, setFormat] = useState('image/jpeg');
+  const [quality, setQuality] = useState(85);
+  const [savePath, setSavePath] = useState('');
+  const [fileName, setFileName] = useState('');
+
+  // Reset state when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+        setFormat('image/jpeg');
+        setQuality(85);
+        
+        const extMap: Record<string, string> = {
+            'image/jpeg': '.jpg',
+            'image/png': '.png',
+            'image/webp': '.webp'
+        };
+        const suffix = t('common.copySuffix', { defaultValue: '_copy' });
+        const ext = extMap['image/jpeg'];
+
+        if (defaultPath) {
+            // CLI Mode
+            const basePath = defaultPath.replace(/\.[^/.]+$/, '');
+            setSavePath(`${basePath}${suffix}${ext}`);
+            setFileName('');
+        } else {
+            // Web Mode
+            const baseName = defaultFileName ? defaultFileName.replace(/\.[^/.]+$/, '') : 'image';
+            setFileName(`${baseName}${suffix}${ext}`);
+            setSavePath('');
+        }
+    }
+  }, [isOpen, defaultPath, defaultFileName, t]);
+
+  // Update extension when format changes
+  useEffect(() => {
+      const extMap: Record<string, string> = {
+          'image/jpeg': '.jpg',
+          'image/png': '.png',
+          'image/webp': '.webp'
+      };
+      
+      const newExt = extMap[format];
+      if (newExt) {
+          if (savePath) {
+              setSavePath(prev => prev.replace(/\.[^/.]+$/, newExt));
+          }
+          if (fileName) {
+              setFileName(prev => prev.replace(/\.[^/.]+$/, newExt));
+          }
+      }
+  }, [format]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="bg-zinc-900 border border-zinc-800 rounded-lg shadow-xl w-96 p-4">
+        <div className="flex justify-between items-center mb-4">
+          <h3 className="text-zinc-100 font-semibold">{t('common.saveSettings')}</h3>
+          <button onClick={onClose} className="text-zinc-400 hover:text-white">
+            <X size={18} />
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          {defaultPath ? (
+             <div className="space-y-2">
+                <label className="text-xs text-zinc-400 block">{t('common.savePath')}</label>
+                <input 
+                  type="text"
+                  value={savePath}
+                  onChange={(e) => setSavePath(e.target.value)}
+                  className="w-full bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 outline-none text-sm font-mono"
+                />
+             </div>
+          ) : (
+             <div className="space-y-2">
+                <label className="text-xs text-zinc-400 block">{t('common.fileName')}</label>
+                <input 
+                  type="text"
+                  value={fileName}
+                  onChange={(e) => setFileName(e.target.value)}
+                  className="w-full bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 outline-none text-sm"
+                />
+             </div>
+          )}
+
+          <div className="space-y-2">
+            <label className="text-xs text-zinc-400 block">{t('common.format')}</label>
+            <select 
+              value={format}
+              onChange={(e) => setFormat(e.target.value)}
+              className="w-full bg-zinc-800 text-zinc-100 p-2 rounded border border-zinc-700 outline-none text-sm"
+            >
+              <option value="image/jpeg">JPG</option>
+              <option value="image/png">PNG</option>
+              <option value="image/webp">WEBP</option>
+            </select>
+          </div>
+
+          {format !== 'image/png' && (
+            <div className="space-y-2">
+              <div className="flex justify-between text-xs text-zinc-400">
+                <span>{t('common.quality')}</span>
+                <span>{quality}</span>
+              </div>
+              <input 
+                type="range" 
+                min="1" 
+                max="100" 
+                value={quality} 
+                onChange={(e) => setQuality(parseInt(e.target.value))}
+                className="w-full h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-blue-500"
+              />
+            </div>
+          )}
+
+          <div className="flex gap-2 mt-6">
+            <button 
+              onClick={onClose}
+              className="flex-1 px-3 py-2 rounded bg-zinc-800 hover:bg-zinc-700 text-zinc-300 text-sm transition-colors"
+            >
+              {t('common.cancel')}
+            </button>
+            <button 
+              onClick={() => onConfirm(format, quality / 100, savePath, fileName)}
+              className="flex-1 px-3 py-2 rounded bg-blue-600 hover:bg-blue-500 text-white text-sm transition-colors"
+            >
+              {t('common.confirm')}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};