feat(1.1.0): New home + Zip build

forge.config.ts

@@ -1,5 +1,6 @@
 import type { ForgeConfig } from '@electron-forge/shared-types';
 import { MakerSquirrel } from '@electron-forge/maker-squirrel';
+import { MakerZIP } from '@electron-forge/maker-zip';
 import { MakerDeb } from '@electron-forge/maker-deb';
 import { MakerRpm } from '@electron-forge/maker-rpm';
 import { PublisherGithub } from '@electron-forge/publisher-github';
@@ -18,6 +19,8 @@ const config: ForgeConfig = {
 		new MakerSquirrel({
 			setupIcon: './src/icons/icon.ico',
 		}),
+		// Zip portable
+		new MakerZIP(),
 		// Linux - RPM
 		new MakerRpm({
 			options: {

package.json

@@ -4,7 +4,7 @@
 	"author": "AstroCorp",
 	"description": "Visual Diff is a desktop application built with Electron + Vue 3 that allows you to visually compare two images or two videos side-by-side. It provides an interactive slider to reveal differences between the files, making it easy to spot changes, variations, or discrepancies.",
 	"license": "MIT",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"main": ".vite/build/main.js",
 	"scripts": {
 		"start": "electron-forge start",
@@ -13,28 +13,28 @@
 		"publish": "electron-forge publish"
 	},
 	"devDependencies": {
-		"@electron-forge/cli": "^7.10.2",
-		"@electron-forge/maker-deb": "^7.10.2",
-		"@electron-forge/maker-rpm": "^7.10.2",
-		"@electron-forge/maker-squirrel": "^7.10.2",
-		"@electron-forge/maker-zip": "^7.10.2",
-		"@electron-forge/plugin-auto-unpack-natives": "^7.10.2",
-		"@electron-forge/plugin-fuses": "^7.10.2",
-		"@electron-forge/plugin-vite": "^7.10.2",
+		"@electron-forge/cli": "^7.11.1",
+		"@electron-forge/maker-deb": "^7.11.1",
+		"@electron-forge/maker-rpm": "^7.11.1",
+		"@electron-forge/maker-squirrel": "^7.11.1",
+		"@electron-forge/maker-zip": "^7.11.1",
+		"@electron-forge/plugin-auto-unpack-natives": "^7.11.1",
+		"@electron-forge/plugin-fuses": "^7.11.1",
+		"@electron-forge/plugin-vite": "^7.11.1",
 		"@electron-forge/publisher-github": "^7.11.1",
 		"@electron/fuses": "^1.8.0",
 		"@types/electron-squirrel-startup": "^1.0.2",
 		"@vitejs/plugin-vue": "^6.0.3",
-		"electron": "39.2.7",
-		"typescript": "~4.5.4",
-		"vite": "^5.4.21"
+		"electron": "40.0.0",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1"
 	},
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.18",
 		"electron-squirrel-startup": "^1.0.1",
 		"tailwindcss": "^4.1.18",
 		"update-electron-app": "^3.1.2",
-		"vue": "^3.5.26"
+		"vue": "^3.5.27"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [

src/components/DragDropZone.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useMediaFiles } from '../composables/useMediaFiles';
+
+interface Emits {
+	(e: 'filesDropped', filePaths: string[]): void;
+}
+
+const emit = defineEmits<Emits>();
+const { isMediaFile } = useMediaFiles();
+
+const isDragging = ref<boolean>(false);
+
+/**
+ * Maneja el evento de drag enter
+ * Activa el estado de arrastre para feedback visual
+ * @param e - Evento de drag del navegador
+ */
+const handleDragEnter = (e: DragEvent) => {
+	e.preventDefault();
+	e.stopPropagation();
+	isDragging.value = true;
+};
+
+/**
+ * Maneja el evento de drag over para permitir el drop
+ * Previene el comportamiento por defecto del navegador
+ * @param e - Evento de drag del navegador
+ */
+const handleDragOver = (e: DragEvent) => {
+	e.preventDefault();
+	e.stopPropagation();
+};
+
+/**
+ * Maneja el evento de drag leave
+ * Desactiva el estado de arrastre solo cuando el cursor sale completamente del contenedor,
+ * evitando flickering al pasar sobre elementos hijos
+ * @param e - Evento de drag del navegador
+ */
+const handleDragLeave = (e: DragEvent) => {
+	e.preventDefault();
+	e.stopPropagation();
+
+	// Solo desactivar si realmente salimos del contenedor principal
+	const target = e.currentTarget as HTMLElement;
+	const relatedTarget = e.relatedTarget as HTMLElement;
+
+	if (!target.contains(relatedTarget)) {
+		isDragging.value = false;
+	}
+};
+
+/**
+ * Maneja el evento de drop de archivos
+ * Procesa los archivos soltados, filtra solo archivos multimedia válidos,
+ * limita a los primeros 2 archivos y emite el evento con las rutas
+ * @param e - Evento de drop del navegador conteniendo los archivos
+ */
+const handleDrop = async (e: DragEvent) => {
+	e.preventDefault();
+	e.stopPropagation();
+	isDragging.value = false;
+
+	if (!e.dataTransfer?.files || e.dataTransfer.files.length === 0) {
+		return;
+	}
+
+	// En Electron, usamos webUtils.getPathForFile() para obtener la ruta completa del archivo
+	const files = Array.from(e.dataTransfer.files);
+	const allFilePaths = files.map(file => window.electronAPI.getPathForFile(file));
+
+	if (allFilePaths.length === 0) {
+		return;
+	}
+
+	// Filtrar solo archivos de medios (imagen o video) y limitar a los primeros 2
+	const mediaFiles = allFilePaths.filter(isMediaFile).slice(0, 2);
+
+	if (mediaFiles.length > 0) {
+		emit('filesDropped', mediaFiles);
+	}
+};
+
+defineExpose({ isDragging });
+</script>
+
+<template>
+	<div 
+		class="flex-1 flex items-center justify-center"
+		@dragenter="handleDragEnter"
+		@dragover="handleDragOver"
+		@dragleave="handleDragLeave"
+		@drop="handleDrop"
+	>
+		<slot :is-dragging="isDragging"></slot>
+	</div>
+</template>

src/components/FileMenu.vue

@@ -7,6 +7,9 @@ interface Emits {
 
 const emit = defineEmits<Emits>();
 
+/**
+ * Emite el evento para abrir el diálogo de selección de archivos
+ */
 const handleSelectFiles = () => emit('select-files');
 </script>