From 2f1178ddd0d236d3b2ac144f8e2848089c5ef812 Mon Sep 17 00:00:00 2001
From: Atharva Bedekar <atharvabedekar527@gmail.com>
Date: Sun, 25 Oct 2026 22:24:06 +0530
Subject: [PATCH] refactor: use Phosphor icon for file list drag handle

Replace the Lucide grip-vertical icon with Phosphor's dots-six-vertical, in line with the project-wide move to Phosphor.
---
 src/js/utils/sortable-file-list.ts   | 4 +++-
 src/tests/sortable-file-list.test.ts | 4 +---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/js/utils/sortable-file-list.ts b/src/js/utils/sortable-file-list.ts
index b8cd54dc..2fcbbbd5 100644
--- a/src/js/utils/sortable-file-list.ts
+++ b/src/js/utils/sortable-file-list.ts
@@ -32,7 +32,9 @@ export function createDragHandle(): HTMLElement {
   const label = trText('Drag to reorder');
   handle.title = label;
   handle.setAttribute('aria-label', label);
-  handle.innerHTML = '<i data-lucide="grip-vertical" class="w-4 h-4"></i>';
+  const icon = document.createElement('i');
+  icon.className = 'ph ph-dots-six-vertical text-base';
+  handle.appendChild(icon);
   return handle;
 }
 
diff --git a/src/tests/sortable-file-list.test.ts b/src/tests/sortable-file-list.test.ts
index e70a6efb..6de68aff 100644
--- a/src/tests/sortable-file-list.test.ts
+++ b/src/tests/sortable-file-list.test.ts
@@ -47,9 +47,7 @@ describe('createDragHandle', () => {
     const handle = createDragHandle();
     expect(handle.classList.contains('drag-handle')).toBe(true);
     expect(handle.getAttribute('aria-label')).toBe('Drag to reorder');
-    expect(
-      handle.querySelector('[data-lucide="grip-vertical"]')
-    ).not.toBeNull();
+    expect(handle.querySelector('i.ph.ph-dots-six-vertical')).not.toBeNull();
   });
 });