feat(pdf-tools): add bookmark pdf tool and lucide icons integration

- Add 'bookmark-pdf' to singlePdfLoadTools
- Create new lucide-init.ts for icon initialization
- Update HTML files to use local lucide initialization
- Add bookmark.html page with full bookmark editor functionality
- Update tools config to include bookmark tool
- Modify main.ts to handle tool cards with href links

src/js/config/pdf-tools.ts

@@ -40,6 +40,7 @@ export const singlePdfLoadTools = [
   'add-attachments',
   'sanitize-pdf',
   'remove-restrictions',
+  'bookmark-pdf',
 ];
 
 export const simpleTools = [

src/js/config/tools.ts

@@ -76,7 +76,14 @@ export const categories = [
         subtitle:
           'Annotate, highlight, redact, comment, add shapes/images, search, and view PDFs.',
       },
-      // { id: 'crop', name: 'Crop PDF', icon: 'crop', subtitle: 'Trim the margins of every page in your PDF.' },
+      {
+        // id: 'bookmark-pdf',
+        href: '/src/pages/bookmark.html', 
+        name: 'Edit Bookmarks',
+        icon: 'bookmark',
+        subtitle:
+          'Add, edit, import, delete and extract PDF bookmarks.',
+      },
       {
         id: 'add-page-numbers',
         name: 'Page Numbers',

src/js/main.ts

@@ -137,10 +137,19 @@ 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) => {
-      const toolCard = document.createElement('div');
-      toolCard.className =
-        'tool-card bg-gray-800 rounded-xl p-4 cursor-pointer flex flex-col items-center justify-center text-center';
-      toolCard.dataset.toolId = tool.id;
+      let toolCard: HTMLDivElement | HTMLAnchorElement; 
+
+      if (tool.href) {
+        toolCard = document.createElement('a');
+        toolCard.href = tool.href;
+        toolCard.className =
+          'tool-card block bg-gray-800 rounded-xl p-4 cursor-pointer flex flex-col items-center justify-center text-center no-underline hover:shadow-lg transition duration-200';
+      } else {
+        toolCard = document.createElement('div');
+        toolCard.className =
+          'tool-card bg-gray-800 rounded-xl p-4 cursor-pointer flex flex-col items-center justify-center text-center hover:shadow-lg transition duration-200';
+        toolCard.dataset.toolId = tool.id;
+      }
 
       const icon = document.createElement('i');
       icon.className = 'w-10 h-10 mb-3 text-indigo-400';
@@ -253,3 +262,5 @@ const init = () => {
 };
 
 document.addEventListener('DOMContentLoaded', init);
+
+

src/js/utils/helpers.ts

@@ -1,5 +1,6 @@
 import createModule from '@neslinesli93/qpdf-wasm';
 import { showLoader, hideLoader, showAlert } from '../ui';
+import { createIcons } from 'lucide';
 
 const STANDARD_SIZES = {
   A4: { width: 595.28, height: 841.89 },
@@ -177,3 +178,13 @@ export async function initializeQpdf() {
 
   return qpdfInstance;
 }
+
+
+export function initializeIcons(): void {
+    createIcons({
+        attrs: {
+            class: 'bento-icon',
+            'stroke-width': '1.5',
+        },
+    });
+}

src/js/utils/lucide-init.ts

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