From 090146c6009b1b0320742ceb3f3b2d476b40fe15 Mon Sep 17 00:00:00 2001 From: abdullahalam123 Date: Mon, 27 Oct 2025 22:35:49 +0530 Subject: [PATCH] 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 --- about.html | 1 - src/js/config/tools.ts | 5 +- src/js/logic/bookmark-pdf.ts | 2 + src/js/main.ts | 4 +- src/js/utils/helpers.ts | 15 +++-- src/js/utils/lucide-init.ts | 2 +- src/pages/bookmark.html | 109 ++++++++++++++++++++++++++--------- 7 files changed, 95 insertions(+), 43 deletions(-) diff --git a/about.html b/about.html index 961cc59..03abade 100644 --- a/about.html +++ b/about.html @@ -339,7 +339,6 @@ - diff --git a/src/js/config/tools.ts b/src/js/config/tools.ts index 0341d85..e70b9f9 100644 --- a/src/js/config/tools.ts +++ b/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', diff --git a/src/js/logic/bookmark-pdf.ts b/src/js/logic/bookmark-pdf.ts index 3a41854..1b59b81 100644 --- a/src/js/logic/bookmark-pdf.ts +++ b/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'; diff --git a/src/js/main.ts b/src/js/main.ts index 0c436d9..2026e2f 100644 --- a/src/js/main.ts +++ b/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); - - diff --git a/src/js/utils/helpers.ts b/src/js/utils/helpers.ts index 8fbacdd..bf92f66 100644 --- a/src/js/utils/helpers.ts +++ b/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', - }, - }); -} \ No newline at end of file + createIcons({ + attrs: { + class: 'bento-icon', + 'stroke-width': '1.5', + }, + }); +} diff --git a/src/js/utils/lucide-init.ts b/src/js/utils/lucide-init.ts index c9c2067..2959664 100644 --- a/src/js/utils/lucide-init.ts +++ b/src/js/utils/lucide-init.ts @@ -2,4 +2,4 @@ import { createIcons, icons } from 'lucide'; document.addEventListener('DOMContentLoaded', () => { createIcons({ icons }); -}); \ No newline at end of file +}); diff --git a/src/pages/bookmark.html b/src/pages/bookmark.html index 6e87deb..bed80f4 100644 --- a/src/pages/bookmark.html +++ b/src/pages/bookmark.html @@ -10,7 +10,7 @@ - +