From 702bf0def381f16dec9a2843e7bf2e0f351b9f07 Mon Sep 17 00:00:00 2001
From: Zain <lhlyzh@outlook.com>
Date: Fri, 20 Mar 2026 18:07:00 +0800
Subject: [PATCH] chore: lock preview name structure

---
 .../components/virtual-preview-list.ts        | 10 +++--
 tests/unit/virtual-preview-list.test.ts       | 43 +++++++++++++++++++
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/content/components/virtual-preview-list.ts b/src/content/components/virtual-preview-list.ts
index e505cbc..d5d3e71 100644
--- a/src/content/components/virtual-preview-list.ts
+++ b/src/content/components/virtual-preview-list.ts
@@ -117,17 +117,19 @@ export class VirtualPreviewList extends LitElement {
     const conflictHint = item.conflict
       ? html`<span class="conflict-hint">${I18nService.t('error_api_conflict')}</span>`
       : '';
+    const previewItemClasses = ['preview-item', statusClass].filter(Boolean).join(' ');
+    const newNameClasses = ['new-name', 'new-name-primary', statusClass].filter(Boolean).join(' ');
 
     return html`
-      <div class="preview-item ${statusClass}">
-        <div class="preview-content">
+      <div class="${previewItemClasses}" data-preview-item="true">
+        <div class="preview-content" data-preview-content="true">
           <div class="old-name-row">
-            <div class="old-name" title=${item.file.name}>
+            <div class="old-name old-name-secondary" title=${item.file.name}>
               ${item.file.name}
             </div>
             ${statusBadge}
           </div>
-          <div class="new-name ${statusClass}" title=${item.newName}>
+          <div class="${newNameClasses}" title=${item.newName}>
             <span class="new-name-text">${item.newName}</span>
             ${conflictHint}
           </div>
diff --git a/tests/unit/virtual-preview-list.test.ts b/tests/unit/virtual-preview-list.test.ts
index b917d36..3f73701 100644
--- a/tests/unit/virtual-preview-list.test.ts
+++ b/tests/unit/virtual-preview-list.test.ts
@@ -149,4 +149,47 @@ describe('VirtualPreviewList pending preview mapping', () => {
     warnSpy.mockRestore();
     element.remove();
   });
+
+  it('locks preview-item/preview-content structure with secondary/primary name classes and truncation styles', async () => {
+    const element = new VirtualPreviewList();
+    element.items = [
+      {
+        file: {
+          id: 'file-structure',
+          name: 'old-very-long-name-that-should-truncate.mkv',
+          ext: 'mkv',
+          size: 1,
+          mtime: Date.now(),
+          isDir: false,
+        },
+        newName: 'new-very-long-name-that-should-also-truncate.mkv',
+        conflict: false,
+      },
+    ];
+
+    document.body.appendChild(element);
+    await element.updateComplete;
+
+    const previewItem = element.shadowRoot?.querySelector('.preview-item[data-preview-item="true"]');
+    expect(previewItem).toBeTruthy();
+
+    const previewContent = previewItem?.querySelector('.preview-content[data-preview-content="true"]');
+    expect(previewContent).toBeTruthy();
+
+    const oldName = previewContent?.querySelector('.old-name.old-name-secondary');
+    expect(oldName).toBeTruthy();
+
+    const newName = previewContent?.querySelector('.new-name.new-name-primary');
+    expect(newName).toBeTruthy();
+    const newNameText = newName?.querySelector('.new-name-text');
+    expect(newNameText).toBeTruthy();
+    const styleContent = Array.from(element.shadowRoot?.querySelectorAll('style') ?? [])
+      .map((style) => style.textContent ?? '')
+      .join(' ');
+    expect(styleContent).toContain('overflow: hidden');
+    expect(styleContent).toContain('text-overflow: ellipsis');
+    expect(styleContent).toContain('white-space: nowrap');
+
+    element.remove();
+  });
 });