feat(bookmark): improve pdf bookmark tool ui with dark mode and drag-drop

- Add dark mode styling to the bookmark tool page
- Implement drag-and-drop file upload zones for PDF, CSV and JSON
- Enhance file input UI with icons and better visual feedback
- Fix formatting and whitespace issues in multiple files

src/js/config/tools.ts

@@ -78,11 +78,10 @@ export const categories = [
       },
       {
         // id: 'bookmark-pdf',
-        href: '/src/pages/bookmark.html', 
+        href: '/src/pages/bookmark.html',
         name: 'Edit Bookmarks',
         icon: 'bookmark',
-        subtitle:
-          'Add, edit, import, delete and extract PDF bookmarks.',
+        subtitle: 'Add, edit, import, delete and extract PDF bookmarks.',
       },
       {
         id: 'add-page-numbers',

src/js/logic/bookmark-pdf.ts

@@ -1,4 +1,6 @@
 // @ts-nocheck
+// TODO: @ALAM - remove ts-nocheck and fix types later, possibly convert this into an npm package
+
 import { PDFDocument, PDFName, PDFString, PDFNumber, PDFArray } from 'pdf-lib';
 import * as pdfjsLib from 'pdfjs-dist';
 import Sortable from 'sortablejs';

src/js/main.ts

@@ -137,7 +137,7 @@ const init = () => {
       'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6';
 
     category.tools.forEach((tool) => {
-      let toolCard: HTMLDivElement | HTMLAnchorElement; 
+      let toolCard: HTMLDivElement | HTMLAnchorElement;
 
       if (tool.href) {
         toolCard = document.createElement('a');
@@ -262,5 +262,3 @@ const init = () => {
 };
 
 document.addEventListener('DOMContentLoaded', init);
-
-

src/js/utils/helpers.ts

@@ -179,12 +179,11 @@ export async function initializeQpdf() {
   return qpdfInstance;
 }
 
-
 export function initializeIcons(): void {
-    createIcons({
-        attrs: {
-            class: 'bento-icon',
-            'stroke-width': '1.5',
-        },
-    });
-}
+  createIcons({
+    attrs: {
+      class: 'bento-icon',
+      'stroke-width': '1.5',
+    },
+  });
+}

src/js/utils/lucide-init.ts

@@ -2,4 +2,4 @@ import { createIcons, icons } from 'lucide';
 
 document.addEventListener('DOMContentLoaded', () => {
   createIcons({ icons });
-});
+});