setup i18n and ported all tools to standalone pages

src/js/logic/edit-pdf-page.ts

@@ -1,6 +1,7 @@
 // Logic for PDF Editor Page
 import { createIcons, icons } from 'lucide';
 import { showAlert, showLoader, hideLoader } from '../ui.js';
+import { formatBytes } from '../utils/helpers.js';
 
 let currentPdfUrl: string | null = null;
 
@@ -39,8 +40,9 @@ function initializePage() {
             }
         });
 
-        dropZone.addEventListener('click', () => {
-            fileInput?.click();
+        // Clear value on click to allow re-selecting the same file
+        fileInput?.addEventListener('click', () => {
+            if (fileInput) fileInput.value = '';
         });
     }
 
@@ -54,7 +56,6 @@ async function handleFileUpload(e: Event) {
     if (input.files && input.files.length > 0) {
         await handleFiles(input.files);
     }
-    input.value = '';
 }
 
 async function handleFiles(files: FileList) {
@@ -71,11 +72,51 @@ async function handleFiles(files: FileList) {
         const pdfContainer = document.getElementById('embed-pdf-container');
         const uploader = document.getElementById('tool-uploader');
         const dropZone = document.getElementById('drop-zone');
+        const fileDisplayArea = document.getElementById('file-display-area');
 
-        if (!pdfWrapper || !pdfContainer || !uploader || !dropZone) return;
+        if (!pdfWrapper || !pdfContainer || !uploader || !dropZone || !fileDisplayArea) return;
 
         // Hide uploader elements but keep the container
-        dropZone.classList.add('hidden');
+        // Hide uploader elements but keep the container
+        // dropZone.classList.add('hidden');
+
+        // Show file display
+        fileDisplayArea.innerHTML = '';
+        const fileDiv = document.createElement('div');
+        fileDiv.className = 'flex items-center justify-between bg-gray-700 p-3 rounded-lg';
+
+        const infoContainer = document.createElement('div');
+        infoContainer.className = 'flex flex-col flex-1 min-w-0';
+
+        const nameSpan = document.createElement('div');
+        nameSpan.className = 'truncate font-medium text-gray-200 text-sm mb-1';
+        nameSpan.textContent = file.name;
+
+        const metaSpan = document.createElement('div');
+        metaSpan.className = 'text-xs text-gray-400';
+        metaSpan.textContent = formatBytes(file.size);
+
+        infoContainer.append(nameSpan, metaSpan);
+
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'ml-4 text-red-400 hover:text-red-300 flex-shrink-0';
+        removeBtn.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
+        removeBtn.onclick = () => {
+            if (currentPdfUrl) {
+                URL.revokeObjectURL(currentPdfUrl);
+                currentPdfUrl = null;
+            }
+            pdfContainer.textContent = '';
+            pdfWrapper.classList.add('hidden');
+            fileDisplayArea.innerHTML = '';
+            // dropZone.classList.remove('hidden');
+            const fileInput = document.getElementById('file-input') as HTMLInputElement;
+            if (fileInput) fileInput.value = '';
+        };
+
+        fileDiv.append(infoContainer, removeBtn);
+        fileDisplayArea.appendChild(fileDiv);
+        createIcons({ icons });
 
         // Clear previous content
         pdfContainer.textContent = '';