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

@@ -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;
 }
 

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();
   });
 });