From 93cff2c3c40c5a1489161dd2bbeb3fa974b46a17 Mon Sep 17 00:00:00 2001
From: Najam <realnajmiter@gmail.com>
Date: Wed, 1 Oct 2025 15:01:12 +0500
Subject: [PATCH 1/5] ft: compress

---
 package.json                         |   3 +-
 src/App.vue                          | 387 ++----------------------
 src/components/ToolsPanel.vue        |  12 +
 src/components/ui/Slider.vue         | 103 +++++++
 src/components/ui/Switch.vue         |  59 ++++
 src/composables/usePDFCompression.ts | 256 ++++++++++++++++
 src/main.ts                          |   5 +-
 src/pages/CompressPage.vue           | 420 +++++++++++++++++++++++++++
 src/pages/HomePage.vue               | 362 +++++++++++++++++++++++
 src/router/index.ts                  |  21 ++
 src/style.css                        |   5 +-
 11 files changed, 1265 insertions(+), 368 deletions(-)
 create mode 100644 src/components/ui/Slider.vue
 create mode 100644 src/components/ui/Switch.vue
 create mode 100644 src/composables/usePDFCompression.ts
 create mode 100644 src/pages/CompressPage.vue
 create mode 100644 src/pages/HomePage.vue
 create mode 100644 src/router/index.ts

diff --git a/package.json b/package.json
index 0d2200c..9db735b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "pdfjs-dist": "5.4.149",
     "radix-vue": "1.9.17",
     "vue": "3.5.18",
-    "vue-pdf-embed": "2.1.3"
+    "vue-pdf-embed": "2.1.3",
+    "vue-router": "4"
   },
   "devDependencies": {
     "tailwind-merge": "3.3.1",
diff --git a/src/App.vue b/src/App.vue
index 7a1c6b8..05c5a6d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,12 +8,26 @@
             <img src="/icon.svg" width="24" height="24" alt="pdf tools logo" />
             <h1 class="text-2xl font-medium font-main">PdfRizz</h1>
           </div>
+
+          <!-- Navigation -->
+          <nav class="flex items-center gap-2 md:gap-4">
+            <router-link
+              to="/"
+              class="md:px-4 px-2 py-2 rounded-lg text-sm font-medium transition-colors hover:text-primary"
+              :class="$route.name === 'Home' ? 'text-primary' : ''">
+              <Icon icon="lucide:file-text" class="h-4 w-4 inline mr-2" />
+              PDF Tools
+            </router-link>
+            <router-link
+              to="/compress"
+              class="md:px-4 px-2 py-2 rounded-lg text-sm font-medium transition-colors hover:text-primary"
+              :class="$route.name === 'Compress' ? 'text-primary' : ''">
+              <Icon icon="lucide:zap" class="h-4 w-4 inline mr-2" />
+              Compress
+            </router-link>
+          </nav>
+
           <div class="flex items-center space-x-4">
-            <div v-if="files.length > 0" class="text-sm text-muted-foreground">
-              {{ files.length }} file{{ files.length === 1 ? '' : 's' }} • {{ totalPages }} page{{
-                totalPages === 1 ? '' : 's'
-              }}
-            </div>
             <div class="flex gap-2 items-center">
               <a
                 v-if="repoStarsCount"
@@ -37,163 +51,20 @@
       </div>
     </header>
 
-    <div class="flex h-[calc(100vh-73px)]">
-      <!-- Main Content Area -->
-      <main
-        class="flex-1 p-6 overflow-auto"
-        @dragover.prevent="handleDragOver"
-        @dragenter.prevent="handleDragEnter"
-        @dragleave.prevent="handleDragLeave"
-        @drop.prevent="handleDrop">
-        <!-- Drop Zone (shown when no files) -->
-        <div v-if="files.length === 0" class="h-full flex items-center justify-center">
-          <DropZone
-            :isProcessing="isProcessing"
-            @files-selected="handleFilesSelected"
-            class="w-full h-full grid place-content-center" />
-        </div>
-
-        <!-- PDF Pages Grid -->
-        <div v-else class="space-y-6">
-          <!-- File Management -->
-          <div class="flex items-center justify-between">
-            <div class="flex items-center flex-wrap gap-2">
-              <Button variant="soft" type="button" aria-label="add more files" @click="addMoreFiles">
-                <Icon icon="lucide:plus" class="h-4 w-4" />
-                Add More Files
-              </Button>
-              <Button variant="soft" type="button" aria-label="clear all files" @click="clearAllFiles">
-                <Icon icon="lucide:trash-2" class="h-4 w-4" />
-                Clear All
-              </Button>
-              <Button
-                variant="soft"
-                type="button"
-                aria-label="select all pages"
-                @click="selectAllPages"
-                :disabled="files.length === 0">
-                <Icon icon="lucide:mouse-pointer-click" class="h-4 w-4" />
-                Select All Pages
-              </Button>
-              <Button
-                variant="soft"
-                type="button"
-                aria-label="clear page selection"
-                @click="clearPageSelection"
-                :disabled="selectedPages.size === 0">
-                <Icon icon="lucide:x" class="h-4 w-4" />
-                Clear Selection
-              </Button>
-            </div>
-          </div>
-
-          <!-- Pages by File -->
-          <div class="space-y-4">
-            <DraggableFileCard
-              v-for="(file, index) in orderedFiles"
-              :key="file.id"
-              :file="file"
-              :isFirstFile="index === 0"
-              :showPreview="filePreviewStates[file.id]?.showPreview ?? index === 0"
-              :selectedPages="selectedPages"
-              :getGlobalPageIndex="getGlobalPageIndex"
-              @remove="removeFile(file.id)"
-              @select="(pageNum) => togglePageSelection(file.id, pageNum)"
-              @togglePreview="toggleFilePreview(file.id)"
-              @dragStart="handleDragStart"
-              @dragEnd="handleDragEnd"
-              @drop="handleFileDrop"
-              @rangeSelect="handleRangeSelect"
-              @rangeClear="handleRangeClear" />
-          </div>
-        </div>
-      </main>
-
-      <!-- Right Sidebar - Tools Panel -->
-      <ToolsPanel
-        v-if="files.length > 0"
-        :files="files"
-        :isProcessing="isProcessing"
-        :selectedPages="selectedPages"
-        :mergePDFs="mergePDFs"
-        :splitPDF="splitPDF"
-        :removePages="removePages"
-        :insertPDF="insertPDF"
-        :convertToImages="convertToImages"
-        :downloadBlob="downloadBlob"
-        @progress="handleProgress" />
+    <div class="h-[calc(100vh-73px)]">
+      <!-- Router View -->
+      <router-view />
     </div>
-
-    <!-- Hidden file input for adding more files -->
-    <input
-      ref="fileInputRef"
-      type="file"
-      multiple
-      accept=".pdf,application/pdf"
-      class="hidden"
-      @change="handleFileInput" />
   </div>
-
-  <!-- Loading Overlay -->
-  <LoadingOverlay
-    v-if="isProcessing"
-    :title="getLoadingTitle()"
-    :message="getLoadingMessage()"
-    :progress="processingProgress"
-    :currentStep="processingStep"
-    :cancellable="false" />
-
-  <!-- Dragging overlay -->
-  <DraggingOverlay :isVisible="isDragging" />
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch, computed, defineAsyncComponent } from 'vue';
+import { onMounted, ref } from 'vue';
 import { Icon } from '@iconify/vue';
-import { usePDFTools, type PDFFile } from '@/composables/usePDFTools';
 import { useDarkMode } from '@/composables/useDarkMode';
-import { useFilePreviews } from '@/composables/useFilePreviews';
-import DropZone from '@/components/DropZone.vue';
 import Button from '@/components/ui/Button.vue';
-import DraggingOverlay from './components/DraggingOverlay.vue';
-
-const DraggableFileCard = defineAsyncComponent(() => import('@/components/DraggableFileCard.vue'));
-const ToolsPanel = defineAsyncComponent(() => import('@/components/ToolsPanel.vue'));
-const LoadingOverlay = defineAsyncComponent(() => import('@/components/LoadingOverlay.vue'));
-
-const {
-  files,
-  selectedPages,
-  isProcessing,
-  currentTool,
-  processingProgress,
-  processingStep,
-  totalPages,
-  addFiles,
-  removeFile,
-  mergePDFs,
-  splitPDF,
-  removePages,
-  insertPDF,
-  convertToImages,
-  downloadBlob,
-  cleanup,
-} = usePDFTools();
 
 const { isDark, toggleDarkMode } = useDarkMode();
-const {
-  initializeFilePreview,
-  togglePreview,
-  reorderFiles,
-  removeFile: removeFilePreview,
-  getOrderedFileIds,
-  filePreviewStates,
-} = useFilePreviews();
-
-const fileInputRef = ref<HTMLInputElement>();
-const isDragging = ref(false);
-const isCardReordering = ref(false);
-const dragCounter = ref(0);
 const repoStarsCount = ref<string | null>(null);
 
 onMounted(async () => {
@@ -203,216 +74,4 @@ onMounted(async () => {
     repoStarsCount.value = Intl.NumberFormat('en-us', { notation: 'compact' }).format(data.stargazers_count);
   } catch {}
 });
-
-onUnmounted(() => {
-  cleanup();
-});
-
-watch(
-  files,
-  (newFiles: PDFFile[], oldFiles) => {
-    newFiles.forEach((file: PDFFile, index: number) => {
-      const isNewFile = !oldFiles?.some((oldFile: PDFFile) => oldFile.id === file.id);
-      if (isNewFile) {
-        initializeFilePreview(file.id, index === 0);
-      }
-    });
-
-    oldFiles?.forEach((oldFile: PDFFile) => {
-      const stillExists = newFiles.some((file: PDFFile) => file.id === oldFile.id);
-      if (!stillExists) {
-        removeFilePreview(oldFile.id);
-      }
-    });
-  },
-  { deep: true }
-);
-
-const orderedFiles = computed(() => {
-  const orderedIds = getOrderedFileIds();
-  if (orderedIds.length === 0) {
-    return files.value;
-  }
-  const fileMap = new Map(files.value.map((file) => [file.id, file]));
-  return orderedIds.map((id) => fileMap.get(id)).filter((file): file is PDFFile => Boolean(file));
-});
-
-const handleFilesSelected = async (fileList: FileList | File[]) => {
-  await addFiles(fileList);
-};
-
-const handleDragEnter = (event: DragEvent) => {
-  event.preventDefault();
-
-  if (isCardReordering.value) {
-    return;
-  }
-
-  dragCounter.value++;
-  if (dragCounter.value === 1) {
-    isDragging.value = true;
-  }
-};
-
-const handleDragOver = (event: DragEvent) => {
-  event.preventDefault();
-};
-
-const handleDragLeave = (event: DragEvent) => {
-  event.preventDefault();
-
-  if (isCardReordering.value) {
-    return;
-  }
-
-  if (event.relatedTarget && (event.currentTarget as HTMLElement).contains(event.relatedTarget as Node)) {
-    return;
-  }
-  dragCounter.value = Math.max(0, dragCounter.value - 1);
-  if (dragCounter.value === 0) {
-    isDragging.value = false;
-  }
-};
-
-const handleDrop = async (event: DragEvent) => {
-  if (isCardReordering.value) {
-    return;
-  }
-
-  isDragging.value = false;
-  dragCounter.value = 0;
-  const droppedFiles = Array.from(event.dataTransfer?.files || []);
-  const pdfFiles = droppedFiles.filter((file) => file.type === 'application/pdf');
-  if (pdfFiles.length > 0) {
-    await addFiles(pdfFiles);
-  }
-};
-
-const addMoreFiles = () => {
-  fileInputRef.value?.click();
-};
-
-const handleFileInput = (e: Event) => {
-  const target = e.target as HTMLInputElement;
-  if (target.files) {
-    handleFilesSelected(target.files);
-  }
-};
-
-const clearAllFiles = () => {
-  files.value.forEach((file) => {
-    if (file.url) {
-      URL.revokeObjectURL(file.url);
-    }
-  });
-
-  files.value = [];
-  selectedPages.value.clear();
-};
-
-const getGlobalPageIndex = (fileId: string, pageNumber: number): number => {
-  let globalIndex = 0;
-  for (const file of files.value) {
-    if (file.id === fileId) {
-      return globalIndex + pageNumber;
-    }
-    globalIndex += file.pages;
-  }
-  return globalIndex;
-};
-
-const togglePageSelection = (fileId: string, pageNumber: number) => {
-  const globalIndex = getGlobalPageIndex(fileId, pageNumber);
-
-  if (selectedPages.value.has(globalIndex)) {
-    selectedPages.value.delete(globalIndex);
-  } else {
-    selectedPages.value.add(globalIndex);
-  }
-};
-
-const clearPageSelection = () => {
-  selectedPages.value.clear();
-};
-
-const handleProgress = (progress: number, step: string) => {
-  processingProgress.value = progress;
-  processingStep.value = step;
-};
-
-const selectAllPages = () => {
-  selectedPages.value.clear();
-  let globalIndex = 1;
-
-  for (const file of files.value) {
-    for (let page = 1; page <= file.pages; page++) {
-      selectedPages.value.add(globalIndex);
-      globalIndex++;
-    }
-  }
-};
-
-const getLoadingTitle = () => {
-  switch (currentTool.value) {
-    case 'convert':
-      return 'Converting to Images';
-    case 'merge':
-      return 'Merging PDFs';
-    case 'split':
-      return 'Splitting PDF';
-    case 'remove':
-      return 'Removing Pages';
-    default:
-      return 'Processing...';
-  }
-};
-
-const getLoadingMessage = () => {
-  switch (currentTool.value) {
-    case 'convert':
-      return 'Converting selected pages to high-quality images';
-    case 'merge':
-      return 'Combining all PDF files into one document';
-    case 'split':
-      return 'Extracting selected pages into separate files';
-    case 'remove':
-      return 'Removing selected pages from the document';
-    default:
-      return 'Please wait while we process your files';
-  }
-};
-
-const toggleFilePreview = (fileId: string) => {
-  togglePreview(fileId);
-};
-
-const handleDragStart = () => {
-  isCardReordering.value = true;
-};
-
-const handleDragEnd = () => {
-  isCardReordering.value = false;
-};
-
-const handleFileDrop = (draggedFileId: string, targetFileId: string) => {
-  const draggedIndex = files.value.findIndex((f) => f.id === draggedFileId);
-  const targetIndex = files.value.findIndex((f) => f.id === targetFileId);
-
-  if (draggedIndex !== -1 && targetIndex !== -1) {
-    const newFiles = [...files.value];
-    const [draggedFile] = newFiles.splice(draggedIndex, 1);
-    newFiles.splice(targetIndex, 0, draggedFile);
-    files.value = newFiles;
-
-    reorderFiles(draggedFileId, targetIndex);
-  }
-};
-
-const handleRangeSelect = (pagesToSelect: number[]) => {
-  pagesToSelect.forEach((pageNum) => {
-    selectedPages.value.add(pageNum);
-  });
-};
-
-const handleRangeClear = () => {};
 </script>
diff --git a/src/components/ToolsPanel.vue b/src/components/ToolsPanel.vue
index b708397..11bf02d 100644
--- a/src/components/ToolsPanel.vue
+++ b/src/components/ToolsPanel.vue
@@ -73,6 +73,18 @@
           </div>
         </Button>
 
+        <router-link to="/compress" class="block">
+          <Button type="button" aria-label="Compress PDF" variant="soft" class="w-full justify-start p-3 h-auto">
+            <div class="flex items-center space-x-3">
+              <Icon icon="lucide:zap" class="h-5 w-5 text-primary" />
+              <div class="text-left">
+                <div class="font-medium">Compress PDF</div>
+                <div class="text-xs text-muted-foreground">Reduce PDF file size</div>
+              </div>
+            </div>
+          </Button>
+        </router-link>
+
         <Button
           type="button"
           aria-label="Insert PDF"
diff --git a/src/components/ui/Slider.vue b/src/components/ui/Slider.vue
new file mode 100644
index 0000000..995dad1
--- /dev/null
+++ b/src/components/ui/Slider.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center justify-between">
+      <label v-if="label" :for="id" class="text-sm font-medium text-foreground">
+        {{ label }}
+      </label>
+      <span v-if="showValue" class="text-sm text-muted-foreground">
+        {{ displayValue }}
+      </span>
+    </div>
+    <div class="relative">
+      <input
+        :id="id"
+        type="range"
+        :min="min"
+        :max="max"
+        :step="step"
+        :value="modelValue"
+        @input="handleInput"
+        :class="cn('w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer', 'range-slider')" />
+      <div
+        class="absolute top-2.5 left-0 z-0 h-2 bg-primary rounded-lg pointer-events-none"
+        :style="{ width: `${((modelValue - min) / (max - min)) * 100}%` }"></div>
+    </div>
+    <div v-if="description" class="text-xs text-muted-foreground">
+      {{ description }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+
+interface Props {
+  id?: string;
+  label?: string;
+  description?: string;
+  modelValue: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  showValue?: boolean;
+  valueFormatter?: (value: number) => string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  min: 0,
+  max: 100,
+  step: 1,
+  showValue: true,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number];
+}>();
+
+const displayValue = computed(() => {
+  if (props.valueFormatter) {
+    return props.valueFormatter(props.modelValue);
+  }
+  return props.modelValue.toString();
+});
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit('update:modelValue', Number(target.value));
+};
+</script>
+
+<style scoped>
+.range-slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: oklch(81.329% 0.12994 60.273);
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 2px solid rgb(113, 113, 113);
+  z-index: 5;
+  position: relative;
+}
+
+.range-slider::-moz-range-thumb {
+  height: 10px;
+  width: 20px;
+  border-radius: 50%;
+  background: hsl(var(--primary));
+  cursor: pointer;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border: 2px solid white;
+}
+
+.range-slider::-webkit-slider-track {
+  background: transparent;
+}
+
+.range-slider::-moz-range-track {
+  background: transparent;
+}
+</style>
diff --git a/src/components/ui/Switch.vue b/src/components/ui/Switch.vue
new file mode 100644
index 0000000..e6e93e0
--- /dev/null
+++ b/src/components/ui/Switch.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="flex items-center space-x-2">
+    <button
+      :id="id"
+      role="switch"
+      type="button"
+      :aria-checked="modelValue"
+      :disabled="disabled"
+      @click="toggle"
+      :class="
+        cn(
+          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          modelValue ? 'bg-primary' : 'bg-muted'
+        )
+      ">
+      <span
+        :class="
+          cn(
+            'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
+            modelValue ? 'translate-x-5' : 'translate-x-0'
+          )
+        " />
+    </button>
+    <label
+      v-if="label"
+      :for="id"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/lib/utils';
+
+interface Props {
+  id?: string;
+  label?: string;
+  modelValue: boolean;
+  disabled?: boolean;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+const toggle = () => {
+  if (!props.disabled) {
+    emit('update:modelValue', !props.modelValue);
+  }
+};
+</script>
diff --git a/src/composables/usePDFCompression.ts b/src/composables/usePDFCompression.ts
new file mode 100644
index 0000000..bc6e31b
--- /dev/null
+++ b/src/composables/usePDFCompression.ts
@@ -0,0 +1,256 @@
+import { ref, computed } from 'vue';
+import { PDFDocument } from 'pdf-lib';
+
+export interface CompressionSettings {
+  quality: number; // 0.1 to 1.0
+  removeMetadata: boolean;
+  removeAnnotations: boolean;
+  removeBookmarks: boolean;
+  removeEmbeddedFiles: boolean;
+  optimizeImages: boolean;
+  removeUnusedObjects: boolean;
+  linearize: boolean; // Fast web view
+}
+
+export interface CompressionResult {
+  compressedFile: Blob;
+  originalSize: number;
+  compressedSize: number;
+  compressionRatio: number;
+  filename: string;
+}
+
+class PDFCompressionManager {
+  private static instance: PDFCompressionManager;
+
+  static getInstance(): PDFCompressionManager {
+    if (!PDFCompressionManager.instance) {
+      PDFCompressionManager.instance = new PDFCompressionManager();
+    }
+    return PDFCompressionManager.instance;
+  }
+
+  async compressPDF(
+    file: File,
+    settings: CompressionSettings,
+    onProgress?: (progress: number, step: string) => void
+  ): Promise<CompressionResult> {
+    const originalSize = file.size;
+
+    try {
+      onProgress?.(10, 'Reading PDF file...');
+
+      const arrayBuffer = await file.arrayBuffer();
+
+      onProgress?.(30, 'Analyzing document structure...');
+
+      const pdfDoc = await PDFDocument.load(arrayBuffer);
+
+      onProgress?.(50, 'Applying compression settings...');
+
+      // Apply compression settings
+      if (settings.removeMetadata) {
+        pdfDoc.setTitle('');
+        pdfDoc.setAuthor('');
+        pdfDoc.setSubject('');
+        pdfDoc.setKeywords([]);
+        pdfDoc.setProducer('');
+        pdfDoc.setCreator('');
+        pdfDoc.setCreationDate(new Date(0));
+        pdfDoc.setModificationDate(new Date(0));
+      }
+
+      // Remove bookmarks if requested
+      if (settings.removeBookmarks) {
+        // pdf-lib doesn't have direct bookmark removal API
+        // This would require more advanced PDF manipulation
+      }
+
+      onProgress?.(70, 'Optimizing PDF structure...');
+
+      // Save with compression options
+      const saveOptions: any = {
+        useObjectStreams: settings.removeUnusedObjects,
+        addDefaultPage: false,
+        objectsPerTick: settings.linearize ? 50 : 20,
+      };
+
+      const compressedBytes = await pdfDoc.save(saveOptions);
+
+      onProgress?.(90, 'Finalizing compressed file...');
+
+      const compressedBlob = new Blob([new Uint8Array(compressedBytes)], { type: 'application/pdf' });
+      const compressedSize = compressedBlob.size;
+      const compressionRatio = ((originalSize - compressedSize) / originalSize) * 100;
+
+      onProgress?.(100, 'Compression complete!');
+
+      return {
+        compressedFile: compressedBlob,
+        originalSize,
+        compressedSize,
+        compressionRatio,
+        filename: file.name.replace('.pdf', '_compressed.pdf'),
+      };
+    } catch (error) {
+      console.error('PDF compression failed:', error);
+      throw new Error(`Failed to compress PDF: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    }
+  }
+
+  cleanup(): void {
+    // No cleanup needed for now
+  }
+}
+
+export function usePDFCompression() {
+  const isCompressing = ref(false);
+  const compressionProgress = ref(0);
+  const compressionStep = ref('');
+  const compressionResult = ref<CompressionResult | null>(null);
+  const compressionError = ref<string | null>(null);
+
+  const manager = PDFCompressionManager.getInstance();
+
+  const defaultSettings: CompressionSettings = {
+    quality: 0.85,
+    removeMetadata: true,
+    removeAnnotations: false,
+    removeBookmarks: false,
+    removeEmbeddedFiles: false,
+    optimizeImages: true,
+    removeUnusedObjects: true,
+    linearize: true,
+  };
+
+  const compressedSizeReduction = computed(() => {
+    if (!compressionResult.value) return 0;
+    return compressionResult.value.compressionRatio;
+  });
+
+  const compressedSizeFormatted = computed(() => {
+    if (!compressionResult.value) return '';
+    return formatFileSize(compressionResult.value.compressedSize);
+  });
+
+  const originalSizeFormatted = computed(() => {
+    if (!compressionResult.value) return '';
+    return formatFileSize(compressionResult.value.originalSize);
+  });
+
+  const compressPDF = async (
+    file: File,
+    settings: CompressionSettings = defaultSettings
+  ): Promise<CompressionResult | null> => {
+    try {
+      isCompressing.value = true;
+      compressionProgress.value = 0;
+      compressionStep.value = 'Starting compression...';
+      compressionError.value = null;
+      compressionResult.value = null;
+
+      const result = await manager.compressPDF(file, settings, (progress, step) => {
+        compressionProgress.value = progress;
+        compressionStep.value = step;
+      });
+
+      compressionResult.value = result;
+      return result;
+    } catch (error) {
+      compressionError.value = error instanceof Error ? error.message : 'Compression failed';
+      console.error('Compression error:', error);
+      return null;
+    } finally {
+      isCompressing.value = false;
+    }
+  };
+
+  const downloadCompressedFile = (result: CompressionResult) => {
+    const url = URL.createObjectURL(result.compressedFile);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = result.filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const resetCompression = () => {
+    compressionResult.value = null;
+    compressionError.value = null;
+    compressionProgress.value = 0;
+    compressionStep.value = '';
+  };
+
+  const cleanup = () => {
+    manager.cleanup();
+    resetCompression();
+  };
+
+  const formatFileSize = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const getCompressionPreset = (level: 'light' | 'medium' | 'aggressive'): CompressionSettings => {
+    const baseSettings = { ...defaultSettings };
+
+    switch (level) {
+      case 'light':
+        return {
+          ...baseSettings,
+          quality: 0.9,
+          removeMetadata: false,
+          removeAnnotations: false,
+          optimizeImages: false,
+        };
+      case 'medium':
+        return {
+          ...baseSettings,
+          quality: 0.75,
+          removeMetadata: true,
+          removeAnnotations: false,
+          optimizeImages: true,
+        };
+      case 'aggressive':
+        return {
+          ...baseSettings,
+          quality: 0.6,
+          removeMetadata: true,
+          removeAnnotations: true,
+          removeBookmarks: true,
+          optimizeImages: true,
+        };
+      default:
+        return baseSettings;
+    }
+  };
+
+  return {
+    // State
+    isCompressing,
+    compressionProgress,
+    compressionStep,
+    compressionResult,
+    compressionError,
+
+    // Computed
+    compressedSizeReduction,
+    compressedSizeFormatted,
+    originalSizeFormatted,
+
+    // Actions
+    compressPDF,
+    downloadCompressedFile,
+    resetCompression,
+    cleanup,
+    getCompressionPreset,
+
+    // Constants
+    defaultSettings,
+  };
+}
diff --git a/src/main.ts b/src/main.ts
index a631fed..f6a56ca 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,11 @@
 import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
+import router from './router';
 import { GlobalWorkerOptions } from 'pdfjs-dist';
 
 GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/5.4.149/pdf.worker.min.mjs';
 
-createApp(App).mount('#pdfrizz--main');
+const app = createApp(App);
+app.use(router);
+app.mount('#pdfrizz--main');
diff --git a/src/pages/CompressPage.vue b/src/pages/CompressPage.vue
new file mode 100644
index 0000000..5e70a40
--- /dev/null
+++ b/src/pages/CompressPage.vue
@@ -0,0 +1,420 @@
+<template>
+  <div class="flex h-full">
+    <!-- Main Content Area -->
+    <main
+      class="flex-1 p-6 overflow-auto"
+      @dragover.prevent="handleDragOver"
+      @dragenter.prevent="handleDragEnter"
+      @dragleave.prevent="handleDragLeave"
+      @drop.prevent="handleDrop">
+      <!-- Step 1: File Upload -->
+      <div v-if="!selectedFile && !compressionResult" class="h-full flex items-center justify-center">
+        <DropZone
+          :isProcessing="isCompressing"
+          @files-selected="handleFileSelected"
+          class="w-full h-full grid place-content-center" />
+      </div>
+
+      <!-- Step 2: Compression Settings -->
+      <div v-else-if="selectedFile && !compressionResult" class="max-w-4xl mx-auto space-y-8">
+        <!-- File Info Header -->
+        <div class="border rounded-lg p-6">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-4">
+              <div class="p-3 bg-primary/10 rounded-lg">
+                <Icon icon="lucide:file-text" class="h-8 w-8 text-primary" />
+              </div>
+              <div>
+                <h3 class="text-lg font-semibold">{{ selectedFile.name }}</h3>
+                <p class="text-sm text-muted-foreground">
+                  {{ formatFileSize(selectedFile.size) }} • Ready for compression
+                </p>
+              </div>
+            </div>
+            <Button variant="soft" @click="resetSelection">
+              <Icon icon="lucide:x" class="h-4 w-4" />
+              Change File
+            </Button>
+          </div>
+        </div>
+
+        <!-- Compression Settings -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <!-- Settings Panel -->
+          <div class="space-y-6">
+            <div>
+              <h2 class="text-xl font-semibold mb-4">Compression Settings</h2>
+
+              <!-- Quick Presets -->
+              <div class="space-y-3 mb-6">
+                <label class="text-sm font-medium text-foreground">Quick Presets</label>
+                <div class="grid grid-cols-3 gap-2">
+                  <Button
+                    variant="soft"
+                    size="sm"
+                    :class="currentPreset === 'light' ? 'bg-primary/20 border-primary' : ''"
+                    @click="applyPreset('light')"
+                    >> Light
+                  </Button>
+                  <Button
+                    variant="soft"
+                    size="sm"
+                    :class="currentPreset === 'medium' ? 'bg-primary/20 border-primary' : ''"
+                    @click="applyPreset('medium')"
+                    >> Medium
+                  </Button>
+                  <Button
+                    variant="soft"
+                    size="sm"
+                    :class="currentPreset === 'aggressive' ? 'bg-primary/20 border-primary' : ''"
+                    @click="applyPreset('aggressive')"
+                    >> Aggressive
+                  </Button>
+                </div>
+              </div>
+
+              <!-- Quality Slider -->
+              <Slider
+                v-model="compressionSettings.quality"
+                label="Compression Quality"
+                description="Higher values preserve more quality but result in larger file sizes"
+                :min="0.1"
+                :max="1"
+                :step="0.05"
+                :value-formatter="(value) => `${Math.round(value * 100)}%`"
+                class="mb-6" />
+
+              <!-- Advanced Options -->
+              <div class="space-y-4">
+                <h3 class="text-lg font-medium">Advanced Options</h3>
+
+                <Switch
+                  v-model="compressionSettings.removeMetadata"
+                  label="Remove metadata (author, creation date, etc.)"
+                  id="remove-metadata" />
+
+                <Switch
+                  v-model="compressionSettings.optimizeImages"
+                  label="Optimize embedded images"
+                  id="optimize-images" />
+
+                <Switch
+                  v-model="compressionSettings.removeUnusedObjects"
+                  label="Remove unused objects"
+                  id="remove-unused" />
+
+                <Switch v-model="compressionSettings.linearize" label="Linearize for fast web view" id="linearize" />
+
+                <Switch
+                  v-model="compressionSettings.removeAnnotations"
+                  label="Remove annotations and comments"
+                  id="remove-annotations" />
+
+                <Switch v-model="compressionSettings.removeBookmarks" label="Remove bookmarks" id="remove-bookmarks" />
+              </div>
+            </div>
+          </div>
+
+          <!-- Preview Panel -->
+          <div class="space-y-6">
+            <div>
+              <h2 class="text-xl font-semibold mb-4">Compression Preview</h2>
+
+              <!-- Size Estimation -->
+              <div class="border rounded-lg p-6 space-y-4">
+                <div class="flex items-center justify-between">
+                  <span class="text-sm text-muted-foreground">Original Size</span>
+                  <span class="font-medium">{{ formatFileSize(selectedFile.size) }}</span>
+                </div>
+
+                <div class="flex items-center justify-between">
+                  <span class="text-sm text-muted-foreground">Estimated Size</span>
+                  <span class="font-medium text-green-600">
+                    {{ estimatedSize }}
+                  </span>
+                </div>
+
+                <div class="flex items-center justify-between">
+                  <span class="text-sm text-muted-foreground">Estimated Reduction</span>
+                  <span class="font-medium text-green-600"> ~{{ estimatedReduction }}% </span>
+                </div>
+
+                <!-- Progress Bar for Estimation -->
+                <div class="mt-4">
+                  <div class="flex justify-between text-xs text-muted-foreground mb-1">
+                    <span>Size Reduction</span>
+                    <span>{{ estimatedReduction }}%</span>
+                  </div>
+                  <div class="w-full bg-border rounded-full h-2">
+                    <div
+                      class="bg-green-500 h-2 rounded-full transition-all duration-300"
+                      :style="{ width: `${estimatedReduction}%` }"></div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Compression Quality Warning -->
+              <div
+                v-if="compressionSettings.quality < 0.7"
+                class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+                <div class="flex items-start space-x-2">
+                  <Icon icon="lucide:alert-triangle" class="h-5 w-5 text-yellow-600 dark:text-yellow-400 mt-0.5" />
+                  <div>
+                    <h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">Quality Warning</h4>
+                    <p class="text-sm text-yellow-700 dark:text-yellow-300 mt-1">
+                      Very aggressive compression may significantly reduce image quality and text clarity.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex justify-center space-x-4 pt-6 border-t">
+          <Button variant="soft" @click="resetSelection" :disabled="isCompressing">
+            <Icon icon="lucide:arrow-left" class="h-4 w-4" />
+            Back
+          </Button>
+          <Button @click="startCompression" :disabled="isCompressing" class="min-w-32">
+            <Icon v-if="!isCompressing" icon="lucide:zap" class="h-4 w-4" />
+            <Icon v-else icon="lucide:loader-2" class="h-4 w-4 animate-spin" />
+            {{ isCompressing ? 'Compressing...' : 'Compress PDF' }}
+          </Button>
+        </div>
+      </div>
+
+      <!-- Step 3: Results -->
+      <div v-else-if="compressionResult" class="max-w-2xl mx-auto space-y-8">
+        <!-- Success Header -->
+        <div class="text-center space-y-4">
+          <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-900/20 rounded-full">
+            <Icon icon="lucide:check" class="h-8 w-8 text-green-600 dark:text-green-400" />
+          </div>
+          <div>
+            <h2 class="text-2xl font-bold">Compression Complete!</h2>
+            <p class="text-muted-foreground">Your PDF has been successfully compressed</p>
+          </div>
+        </div>
+
+        <!-- Results Card -->
+        <div class="border rounded-lg p-6 space-y-6">
+          <!-- File Info -->
+          <div class="flex items-center space-x-4">
+            <div class="p-3 bg-primary/10 rounded-lg">
+              <Icon icon="lucide:file-text" class="h-6 w-6 text-primary" />
+            </div>
+            <div class="flex-1">
+              <h3 class="font-semibold">{{ compressionResult.filename }}</h3>
+              <p class="text-sm text-muted-foreground">Ready for download</p>
+            </div>
+          </div>
+
+          <!-- Size Comparison -->
+          <div class="grid grid-cols-2 gap-6 text-center">
+            <div class="space-y-2">
+              <div class="text-2xl font-bold">{{ originalSizeFormatted }}</div>
+              <div class="text-sm text-muted-foreground">Original Size</div>
+            </div>
+            <div class="space-y-2">
+              <div class="text-2xl font-bold text-green-600">{{ compressedSizeFormatted }}</div>
+              <div class="text-sm text-muted-foreground">Compressed Size</div>
+            </div>
+          </div>
+
+          <!-- Reduction Stats -->
+          <div class="bg-green-50 dark:bg-green-900/20 rounded-lg p-4">
+            <div class="flex items-center justify-between mb-2">
+              <span class="text-sm font-medium text-green-800 dark:text-green-200">Size Reduction</span>
+              <span class="text-lg font-bold text-green-600 dark:text-green-400">
+                {{ Math.round(compressedSizeReduction) }}%
+              </span>
+            </div>
+            <div class="w-full bg-green-200 dark:bg-green-800 rounded-full h-2">
+              <div
+                class="bg-green-500 h-2 rounded-full transition-all duration-500"
+                :style="{ width: `${compressedSizeReduction}%` }"></div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex justify-center space-x-4">
+          <Button variant="soft" @click="compressAnother">
+            <Icon icon="lucide:plus" class="h-4 w-4" />
+            Compress Another
+          </Button>
+          <Button @click="downloadFile" class="min-w-32">
+            <Icon icon="lucide:download" class="h-4 w-4" />
+            Download PDF
+          </Button>
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Hidden file input -->
+  <input ref="fileInputRef" type="file" accept=".pdf,application/pdf" class="hidden" @change="handleFileInput" />
+
+  <!-- Loading Overlay -->
+  <LoadingOverlay
+    v-if="isCompressing"
+    :title="'Compressing PDF'"
+    :message="compressionStep"
+    :progress="compressionProgress"
+    :currentStep="compressionStep"
+    :cancellable="false" />
+
+  <!-- Dragging overlay -->
+  <DraggingOverlay :isVisible="isDragging" />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, defineAsyncComponent } from 'vue';
+import { Icon } from '@iconify/vue';
+import { usePDFCompression, type CompressionSettings } from '@/composables/usePDFCompression';
+import DropZone from '@/components/DropZone.vue';
+import Button from '@/components/ui/Button.vue';
+import Slider from '@/components/ui/Slider.vue';
+import Switch from '@/components/ui/Switch.vue';
+import DraggingOverlay from '@/components/DraggingOverlay.vue';
+
+const LoadingOverlay = defineAsyncComponent(() => import('@/components/LoadingOverlay.vue'));
+
+const {
+  isCompressing,
+  compressionProgress,
+  compressionStep,
+  compressionResult,
+  compressedSizeReduction,
+  compressedSizeFormatted,
+  originalSizeFormatted,
+  compressPDF,
+  downloadCompressedFile,
+  resetCompression,
+  getCompressionPreset,
+  defaultSettings,
+} = usePDFCompression();
+
+const selectedFile = ref<File | null>(null);
+const fileInputRef = ref<HTMLInputElement>();
+const isDragging = ref(false);
+const dragCounter = ref(0);
+const currentPreset = ref<'light' | 'medium' | 'aggressive' | 'custom'>('medium');
+
+const compressionSettings = ref<CompressionSettings>({ ...defaultSettings });
+
+// File size formatting
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+// Estimated compression calculations
+const estimatedSize = computed(() => {
+  if (!selectedFile.value) return '0 KB';
+  const estimatedBytes = selectedFile.value.size * (1 - estimatedReduction.value / 100);
+  return formatFileSize(Math.round(estimatedBytes));
+});
+
+const estimatedReduction = computed(() => {
+  const qualityFactor = (1 - compressionSettings.value.quality) * 50; // Up to 50% reduction from quality
+  const metadataFactor = compressionSettings.value.removeMetadata ? 5 : 0;
+  const imageFactor = compressionSettings.value.optimizeImages ? 15 : 0;
+  const objectFactor = compressionSettings.value.removeUnusedObjects ? 10 : 0;
+  const annotationFactor = compressionSettings.value.removeAnnotations ? 5 : 0;
+
+  return Math.min(80, Math.round(qualityFactor + metadataFactor + imageFactor + objectFactor + annotationFactor));
+});
+
+// Drag and drop handlers
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault();
+  dragCounter.value++;
+  if (dragCounter.value === 1) {
+    isDragging.value = true;
+  }
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault();
+  if (event.relatedTarget && (event.currentTarget as HTMLElement).contains(event.relatedTarget as Node)) {
+    return;
+  }
+  dragCounter.value = Math.max(0, dragCounter.value - 1);
+  if (dragCounter.value === 0) {
+    isDragging.value = false;
+  }
+};
+
+const handleDrop = async (event: DragEvent) => {
+  isDragging.value = false;
+  dragCounter.value = 0;
+  const droppedFiles = Array.from(event.dataTransfer?.files || []);
+  const pdfFiles = droppedFiles.filter((file) => file.type === 'application/pdf');
+  if (pdfFiles.length > 0) {
+    selectedFile.value = pdfFiles[0]; // Take only the first PDF
+  }
+};
+
+// File selection handlers
+const handleFileSelected = (fileList: FileList | File[]) => {
+  const files = Array.from(fileList);
+  const pdfFiles = files.filter((file) => file.type === 'application/pdf');
+  if (pdfFiles.length > 0) {
+    selectedFile.value = pdfFiles[0]; // Take only the first PDF
+  }
+};
+
+const handleFileInput = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  if (target.files && target.files.length > 0) {
+    selectedFile.value = target.files[0];
+  }
+};
+
+// Preset handling
+const applyPreset = (preset: 'light' | 'medium' | 'aggressive') => {
+  currentPreset.value = preset;
+  compressionSettings.value = { ...getCompressionPreset(preset) };
+};
+
+// Actions
+const resetSelection = () => {
+  selectedFile.value = null;
+  resetCompression();
+  currentPreset.value = 'medium';
+  compressionSettings.value = { ...defaultSettings };
+};
+
+const startCompression = async () => {
+  if (!selectedFile.value) return;
+
+  try {
+    await compressPDF(selectedFile.value, compressionSettings.value);
+  } catch (error) {
+    console.error('Compression failed:', error);
+  }
+};
+
+const downloadFile = () => {
+  if (compressionResult.value) {
+    downloadCompressedFile(compressionResult.value);
+  }
+};
+
+const compressAnother = () => {
+  resetSelection();
+};
+
+// Initialize with medium preset
+applyPreset('medium');
+</script>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
new file mode 100644
index 0000000..8cb005a
--- /dev/null
+++ b/src/pages/HomePage.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="flex h-full">
+    <!-- Main Content Area -->
+    <main
+      class="flex-1 p-6 overflow-auto"
+      @dragover.prevent="handleDragOver"
+      @dragenter.prevent="handleDragEnter"
+      @dragleave.prevent="handleDragLeave"
+      @drop.prevent="handleDrop">
+      <!-- Drop Zone (shown when no files) -->
+      <div v-if="files.length === 0" class="h-full flex items-center justify-center">
+        <DropZone
+          :isProcessing="isProcessing"
+          @files-selected="handleFilesSelected"
+          class="w-full h-full grid place-content-center" />
+      </div>
+
+      <!-- PDF Pages Grid -->
+      <div v-else class="space-y-6">
+        <!-- File Management -->
+        <div class="flex items-center justify-between">
+          <div class="flex items-center flex-wrap gap-2">
+            <Button variant="soft" type="button" aria-label="add more files" @click="addMoreFiles">
+              <Icon icon="lucide:plus" class="h-4 w-4" />
+              Add More Files
+            </Button>
+            <Button variant="soft" type="button" aria-label="clear all files" @click="clearAllFiles">
+              <Icon icon="lucide:trash-2" class="h-4 w-4" />
+              Clear All
+            </Button>
+            <Button
+              variant="soft"
+              type="button"
+              aria-label="select all pages"
+              @click="selectAllPages"
+              :disabled="files.length === 0">
+              <Icon icon="lucide:mouse-pointer-click" class="h-4 w-4" />
+              Select All Pages
+            </Button>
+            <Button
+              variant="soft"
+              type="button"
+              aria-label="clear page selection"
+              @click="clearPageSelection"
+              :disabled="selectedPages.size === 0">
+              <Icon icon="lucide:x" class="h-4 w-4" />
+              Clear Selection
+            </Button>
+          </div>
+        </div>
+
+        <!-- Pages by File -->
+        <div class="space-y-4">
+          <DraggableFileCard
+            v-for="(file, index) in orderedFiles"
+            :key="file.id"
+            :file="file"
+            :isFirstFile="index === 0"
+            :showPreview="filePreviewStates[file.id]?.showPreview ?? index === 0"
+            :selectedPages="selectedPages"
+            :getGlobalPageIndex="getGlobalPageIndex"
+            @remove="removeFile(file.id)"
+            @select="(pageNum) => togglePageSelection(file.id, pageNum)"
+            @togglePreview="toggleFilePreview(file.id)"
+            @dragStart="handleDragStart"
+            @dragEnd="handleDragEnd"
+            @drop="handleFileDrop"
+            @rangeSelect="handleRangeSelect"
+            @rangeClear="handleRangeClear" />
+        </div>
+      </div>
+    </main>
+
+    <!-- Right Sidebar - Tools Panel -->
+    <ToolsPanel
+      v-if="files.length > 0"
+      :files="files"
+      :isProcessing="isProcessing"
+      :selectedPages="selectedPages"
+      :mergePDFs="mergePDFs"
+      :splitPDF="splitPDF"
+      :removePages="removePages"
+      :insertPDF="insertPDF"
+      :convertToImages="convertToImages"
+      :downloadBlob="downloadBlob"
+      @progress="handleProgress" />
+  </div>
+
+  <!-- Hidden file input for adding more files -->
+  <input
+    ref="fileInputRef"
+    type="file"
+    multiple
+    accept=".pdf,application/pdf"
+    class="hidden"
+    @change="handleFileInput" />
+
+  <!-- Loading Overlay -->
+  <LoadingOverlay
+    v-if="isProcessing"
+    :title="getLoadingTitle()"
+    :message="getLoadingMessage()"
+    :progress="processingProgress"
+    :currentStep="processingStep"
+    :cancellable="false" />
+
+  <!-- Dragging overlay -->
+  <DraggingOverlay :isVisible="isDragging" />
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, defineAsyncComponent } from 'vue';
+import { Icon } from '@iconify/vue';
+import { usePDFTools, type PDFFile } from '@/composables/usePDFTools';
+import { useFilePreviews } from '@/composables/useFilePreviews';
+import DropZone from '@/components/DropZone.vue';
+import Button from '@/components/ui/Button.vue';
+import DraggingOverlay from '@/components/DraggingOverlay.vue';
+
+const DraggableFileCard = defineAsyncComponent(() => import('@/components/DraggableFileCard.vue'));
+const ToolsPanel = defineAsyncComponent(() => import('@/components/ToolsPanel.vue'));
+const LoadingOverlay = defineAsyncComponent(() => import('@/components/LoadingOverlay.vue'));
+
+const {
+  files,
+  selectedPages,
+  isProcessing,
+  currentTool,
+  processingProgress,
+  processingStep,
+  addFiles,
+  removeFile,
+  mergePDFs,
+  splitPDF,
+  removePages,
+  insertPDF,
+  convertToImages,
+  downloadBlob,
+} = usePDFTools();
+
+const {
+  initializeFilePreview,
+  togglePreview,
+  reorderFiles,
+  removeFile: removeFilePreview,
+  getOrderedFileIds,
+  filePreviewStates,
+} = useFilePreviews();
+
+const fileInputRef = ref<HTMLInputElement>();
+const isDragging = ref(false);
+const isCardReordering = ref(false);
+const dragCounter = ref(0);
+
+watch(
+  files,
+  (newFiles: PDFFile[], oldFiles) => {
+    newFiles.forEach((file: PDFFile, index: number) => {
+      const isNewFile = !oldFiles?.some((oldFile: PDFFile) => oldFile.id === file.id);
+      if (isNewFile) {
+        initializeFilePreview(file.id, index === 0);
+      }
+    });
+
+    oldFiles?.forEach((oldFile: PDFFile) => {
+      const stillExists = newFiles.some((file: PDFFile) => file.id === oldFile.id);
+      if (!stillExists) {
+        removeFilePreview(oldFile.id);
+      }
+    });
+  },
+  { deep: true }
+);
+
+const orderedFiles = computed(() => {
+  const orderedIds = getOrderedFileIds();
+  if (orderedIds.length === 0) {
+    return files.value;
+  }
+  const fileMap = new Map(files.value.map((file) => [file.id, file]));
+  return orderedIds.map((id) => fileMap.get(id)).filter((file): file is PDFFile => Boolean(file));
+});
+
+const handleFilesSelected = async (fileList: FileList | File[]) => {
+  await addFiles(fileList);
+};
+
+const handleDragEnter = (event: DragEvent) => {
+  event.preventDefault();
+
+  if (isCardReordering.value) {
+    return;
+  }
+
+  dragCounter.value++;
+  if (dragCounter.value === 1) {
+    isDragging.value = true;
+  }
+};
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault();
+};
+
+const handleDragLeave = (event: DragEvent) => {
+  event.preventDefault();
+
+  if (isCardReordering.value) {
+    return;
+  }
+
+  if (event.relatedTarget && (event.currentTarget as HTMLElement).contains(event.relatedTarget as Node)) {
+    return;
+  }
+  dragCounter.value = Math.max(0, dragCounter.value - 1);
+  if (dragCounter.value === 0) {
+    isDragging.value = false;
+  }
+};
+
+const handleDrop = async (event: DragEvent) => {
+  if (isCardReordering.value) {
+    return;
+  }
+
+  isDragging.value = false;
+  dragCounter.value = 0;
+  const droppedFiles = Array.from(event.dataTransfer?.files || []);
+  const pdfFiles = droppedFiles.filter((file) => file.type === 'application/pdf');
+  if (pdfFiles.length > 0) {
+    await addFiles(pdfFiles);
+  }
+};
+
+const addMoreFiles = () => {
+  fileInputRef.value?.click();
+};
+
+const handleFileInput = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  if (target.files) {
+    handleFilesSelected(target.files);
+  }
+};
+
+const clearAllFiles = () => {
+  files.value.forEach((file) => {
+    if (file.url) {
+      URL.revokeObjectURL(file.url);
+    }
+  });
+
+  files.value = [];
+  selectedPages.value.clear();
+};
+
+const getGlobalPageIndex = (fileId: string, pageNumber: number): number => {
+  let globalIndex = 0;
+  for (const file of files.value) {
+    if (file.id === fileId) {
+      return globalIndex + pageNumber;
+    }
+    globalIndex += file.pages;
+  }
+  return globalIndex;
+};
+
+const togglePageSelection = (fileId: string, pageNumber: number) => {
+  const globalIndex = getGlobalPageIndex(fileId, pageNumber);
+
+  if (selectedPages.value.has(globalIndex)) {
+    selectedPages.value.delete(globalIndex);
+  } else {
+    selectedPages.value.add(globalIndex);
+  }
+};
+
+const clearPageSelection = () => {
+  selectedPages.value.clear();
+};
+
+const handleProgress = (progress: number, step: string) => {
+  processingProgress.value = progress;
+  processingStep.value = step;
+};
+
+const selectAllPages = () => {
+  selectedPages.value.clear();
+  let globalIndex = 1;
+
+  for (const file of files.value) {
+    for (let page = 1; page <= file.pages; page++) {
+      selectedPages.value.add(globalIndex);
+      globalIndex++;
+    }
+  }
+};
+
+const getLoadingTitle = () => {
+  switch (currentTool.value) {
+    case 'convert':
+      return 'Converting to Images';
+    case 'merge':
+      return 'Merging PDFs';
+    case 'split':
+      return 'Splitting PDF';
+    case 'remove':
+      return 'Removing Pages';
+    default:
+      return 'Processing...';
+  }
+};
+
+const getLoadingMessage = () => {
+  switch (currentTool.value) {
+    case 'convert':
+      return 'Converting selected pages to high-quality images';
+    case 'merge':
+      return 'Combining all PDF files into one document';
+    case 'split':
+      return 'Extracting selected pages into separate files';
+    case 'remove':
+      return 'Removing selected pages from the document';
+    default:
+      return 'Please wait while we process your files';
+  }
+};
+
+const toggleFilePreview = (fileId: string) => {
+  togglePreview(fileId);
+};
+
+const handleDragStart = () => {
+  isCardReordering.value = true;
+};
+
+const handleDragEnd = () => {
+  isCardReordering.value = false;
+};
+
+const handleFileDrop = (draggedFileId: string, targetFileId: string) => {
+  const draggedIndex = files.value.findIndex((f) => f.id === draggedFileId);
+  const targetIndex = files.value.findIndex((f) => f.id === targetFileId);
+
+  if (draggedIndex !== -1 && targetIndex !== -1) {
+    const newFiles = [...files.value];
+    const [draggedFile] = newFiles.splice(draggedIndex, 1);
+    newFiles.splice(targetIndex, 0, draggedFile);
+    files.value = newFiles;
+
+    reorderFiles(draggedFileId, targetIndex);
+  }
+};
+
+const handleRangeSelect = (pagesToSelect: number[]) => {
+  pagesToSelect.forEach((pageNum) => {
+    selectedPages.value.add(pageNum);
+  });
+};
+
+const handleRangeClear = () => {};
+</script>
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000..c441b75
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,21 @@
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('@/pages/HomePage.vue'),
+  },
+  {
+    path: '/compress',
+    name: 'Compress',
+    component: () => import('@/pages/CompressPage.vue'),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
+export default router;
diff --git a/src/style.css b/src/style.css
index dd9a3b9..1bbf02c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -60,7 +60,7 @@
   --accent: oklch(60.825% 0.20898 27.013);
   --accent-foreground: oklch(81.329% 0.12994 60.273);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(81.329% 0.12994 60.273);
+  --border: oklch(1 0 0 / 10%);
   --input: oklch(81.329% 0.12994 60.273);
   --ring: oklch(0.708 0 0);
   --chart-1: oklch(0.646 0.222 41.116);
@@ -116,6 +116,7 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
     font-family: 'Geist', sans-serif;
@@ -127,4 +128,4 @@
     font-family: 'Jersey 10 Charted', sans-serif;
     font-style: normal;
   }
-}
+}
\ No newline at end of file

From 1a562a070680c9f09fb3751f9e6382d97d263b88 Mon Sep 17 00:00:00 2001
From: Najam <realnajmiter@gmail.com>
Date: Wed, 1 Oct 2025 15:12:17 +0500
Subject: [PATCH 2/5] chore: metadata

---
 src/App.vue                          |  9 ++++-----
 src/composables/usePDFCompression.ts |  2 ++
 src/pages/CompressPage.vue           | 18 ++++++++++--------
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 05c5a6d..a71dd2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,15 +14,13 @@
             <router-link
               to="/"
               class="md:px-4 px-2 py-2 rounded-lg text-sm font-medium transition-colors hover:text-primary"
-              :class="$route.name === 'Home' ? 'text-primary' : ''">
-              <Icon icon="lucide:file-text" class="h-4 w-4 inline mr-2" />
-              PDF Tools
+              :class="$route.name === 'Home' ? 'text-primary font-bold' : ''">
+              Home
             </router-link>
             <router-link
               to="/compress"
               class="md:px-4 px-2 py-2 rounded-lg text-sm font-medium transition-colors hover:text-primary"
-              :class="$route.name === 'Compress' ? 'text-primary' : ''">
-              <Icon icon="lucide:zap" class="h-4 w-4 inline mr-2" />
+              :class="$route.name === 'Compress' ? 'text-primary font-bold' : ''">
               Compress
             </router-link>
           </nav>
@@ -31,6 +29,7 @@
             <div class="flex gap-2 items-center">
               <a
                 v-if="repoStarsCount"
+                class="hidden sm:inline-block"
                 title="Star this project on GitHub"
                 href="https://github.com/najmiter/pdf"
                 target="_blank">
diff --git a/src/composables/usePDFCompression.ts b/src/composables/usePDFCompression.ts
index bc6e31b..9d94601 100644
--- a/src/composables/usePDFCompression.ts
+++ b/src/composables/usePDFCompression.ts
@@ -10,6 +10,7 @@ export interface CompressionSettings {
   optimizeImages: boolean;
   removeUnusedObjects: boolean;
   linearize: boolean; // Fast web view
+  useObjectStreams: boolean;
 }
 
 export interface CompressionResult {
@@ -121,6 +122,7 @@ export function usePDFCompression() {
     optimizeImages: true,
     removeUnusedObjects: true,
     linearize: true,
+    useObjectStreams: true,
   };
 
   const compressedSizeReduction = computed(() => {
diff --git a/src/pages/CompressPage.vue b/src/pages/CompressPage.vue
index 5e70a40..90766f0 100644
--- a/src/pages/CompressPage.vue
+++ b/src/pages/CompressPage.vue
@@ -271,7 +271,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent } from 'vue';
+import { ref, computed, defineAsyncComponent, onMounted, onUnmounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import { usePDFCompression, type CompressionSettings } from '@/composables/usePDFCompression';
 import DropZone from '@/components/DropZone.vue';
@@ -305,7 +305,6 @@ const currentPreset = ref<'light' | 'medium' | 'aggressive' | 'custom'>('medium'
 
 const compressionSettings = ref<CompressionSettings>({ ...defaultSettings });
 
-// File size formatting
 const formatFileSize = (bytes: number): string => {
   if (bytes === 0) return '0 Bytes';
   const k = 1024;
@@ -314,7 +313,6 @@ const formatFileSize = (bytes: number): string => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 };
 
-// Estimated compression calculations
 const estimatedSize = computed(() => {
   if (!selectedFile.value) return '0 KB';
   const estimatedBytes = selectedFile.value.size * (1 - estimatedReduction.value / 100);
@@ -331,7 +329,6 @@ const estimatedReduction = computed(() => {
   return Math.min(80, Math.round(qualityFactor + metadataFactor + imageFactor + objectFactor + annotationFactor));
 });
 
-// Drag and drop handlers
 const handleDragEnter = (event: DragEvent) => {
   event.preventDefault();
   dragCounter.value++;
@@ -365,7 +362,6 @@ const handleDrop = async (event: DragEvent) => {
   }
 };
 
-// File selection handlers
 const handleFileSelected = (fileList: FileList | File[]) => {
   const files = Array.from(fileList);
   const pdfFiles = files.filter((file) => file.type === 'application/pdf');
@@ -381,13 +377,11 @@ const handleFileInput = (e: Event) => {
   }
 };
 
-// Preset handling
 const applyPreset = (preset: 'light' | 'medium' | 'aggressive') => {
   currentPreset.value = preset;
   compressionSettings.value = { ...getCompressionPreset(preset) };
 };
 
-// Actions
 const resetSelection = () => {
   selectedFile.value = null;
   resetCompression();
@@ -415,6 +409,14 @@ const compressAnother = () => {
   resetSelection();
 };
 
-// Initialize with medium preset
+const originalTitle = document.title;
+onMounted(() => {
+  document.title = 'Compress PDF – PdfRizz';
+});
+
+onUnmounted(() => {
+  document.title = originalTitle;
+});
+
 applyPreset('medium');
 </script>

From fff27894afdf09900d6ab2e005229a7edb2db46e Mon Sep 17 00:00:00 2001
From: Najam <realnajmiter@gmail.com>
Date: Wed, 1 Oct 2025 15:17:10 +0500
Subject: [PATCH 3/5] fix: vercel routing

---
 src/router/index.ts |  4 ++++
 vercel.json         | 28 ++++++++++++++++++++++++++++
 vite.config.ts      |  1 +
 3 files changed, 33 insertions(+)
 create mode 100644 vercel.json

diff --git a/src/router/index.ts b/src/router/index.ts
index c441b75..f6d5e01 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,6 +11,10 @@ const routes = [
     name: 'Compress',
     component: () => import('@/pages/CompressPage.vue'),
   },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/',
+  },
 ];
 
 const router = createRouter({
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..cdff1dd
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,28 @@
+{
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ],
+  "headers": [
+    {
+      "source": "/(.*)\\.(js|css|svg|png|jpg|jpeg|gif|ico|woff|woff2|ttf|eot)",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=31536000, immutable"
+        }
+      ]
+    },
+    {
+      "source": "/index.html",
+      "headers": [
+        {
+          "key": "Cache-Control",
+          "value": "public, max-age=0, must-revalidate"
+        }
+      ]
+    }
+  ]
+}
diff --git a/vite.config.ts b/vite.config.ts
index cafd906..56b46c8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,7 @@ import { fileURLToPath, URL } from 'node:url';
 import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
+  base: '/',
   plugins: [
     tailwindcss(),
     vue(),

From 8d1a4a33cfa736615262807bad5c149dfbd7aeef Mon Sep 17 00:00:00 2001
From: Najam <realnajmiter@gmail.com>
Date: Wed, 1 Oct 2025 15:19:27 +0500
Subject: [PATCH 4/5] chore: update sitemap

---
 public/sitemap.xml | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/public/sitemap.xml b/public/sitemap.xml
index ef47af0..28fce65 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -4,11 +4,17 @@
   xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
   <url>
     <loc>https://pdfrizz.knoctal.com/</loc>
-    <lastmod>2025-09-01T09:21:30.585Z</lastmod>
+    <lastmod>2025-10-01T09:21:30.585Z</lastmod>
     <changefreq>weekly</changefreq>
     <priority>1.0</priority>
     <image:image>
       <image:loc>https://pdfrizz.knoctal.com/icon.png</image:loc>
     </image:image>
   </url>
+  <url>
+    <loc>https://pdfrizz.knoctal.com/compress</loc>
+    <lastmod>2025-10-01T09:21:30.585Z</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>0.9</priority>
+  </url>
 </urlset>

From b521a3b7e04497038856ef40d6be56e3a3042352 Mon Sep 17 00:00:00 2001
From: Najam <realnajmiter@gmail.com>
Date: Wed, 1 Oct 2025 15:30:01 +0500
Subject: [PATCH 5/5] fix: template and pkgs

---
 package.json               | 2 +-
 src/pages/CompressPage.vue | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 9db735b..b9d8a5b 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "radix-vue": "1.9.17",
     "vue": "3.5.18",
     "vue-pdf-embed": "2.1.3",
-    "vue-router": "4"
+    "vue-router": "4.5.1"
   },
   "devDependencies": {
     "tailwind-merge": "3.3.1",
diff --git a/src/pages/CompressPage.vue b/src/pages/CompressPage.vue
index 90766f0..9363c4d 100644
--- a/src/pages/CompressPage.vue
+++ b/src/pages/CompressPage.vue
@@ -54,21 +54,21 @@
                     size="sm"
                     :class="currentPreset === 'light' ? 'bg-primary/20 border-primary' : ''"
                     @click="applyPreset('light')"
-                    >> Light
+                    >&gt; Light
                   </Button>
                   <Button
                     variant="soft"
                     size="sm"
                     :class="currentPreset === 'medium' ? 'bg-primary/20 border-primary' : ''"
                     @click="applyPreset('medium')"
-                    >> Medium
+                    >&gt; Medium
                   </Button>
                   <Button
                     variant="soft"
                     size="sm"
                     :class="currentPreset === 'aggressive' ? 'bg-primary/20 border-primary' : ''"
                     @click="applyPreset('aggressive')"
-                    >> Aggressive
+                    >&gt; Aggressive
                   </Button>
                 </div>
               </div>