From c376f3add35e99d5e925fbcb96dbdc764d733d21 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 28 Nov 2025 19:33:37 -0800
Subject: [PATCH] add localization to drag/ctx preview

---
 src/i18n/locales/en.json                            |  3 ++-
 .../context-menu/context-menu-preview.tsx           | 13 +++++++++++--
 .../components/drag-preview/drag-preview.module.css |  1 +
 src/shared/components/drag-preview/drag-preview.tsx |  8 +++++++-
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3550cbf89..db85ba820 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -137,7 +137,8 @@
         "explicit": "explicit",
         "clean": "clean",
         "gridRows": "grid rows",
-        "tableColumns": "table columns"
+        "tableColumns": "table columns",
+        "itemsMore": "{{count}} more"
     },
     "entity": {
         "album_one": "album",
diff --git a/src/shared/components/context-menu/context-menu-preview.tsx b/src/shared/components/context-menu/context-menu-preview.tsx
index 1434f1544..ad4fec319 100644
--- a/src/shared/components/context-menu/context-menu-preview.tsx
+++ b/src/shared/components/context-menu/context-menu-preview.tsx
@@ -1,8 +1,10 @@
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import styles from './context-menu-preview.module.css';
 
 import { Icon } from '/@/shared/components/icon/icon';
+import { Text } from '/@/shared/components/text/text';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface ContextMenuPreviewProps {
@@ -32,6 +34,7 @@ const getItemImage = (item: unknown): null | string => {
 };
 
 export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewProps) => {
+    const { t } = useTranslation();
     const itemCount = items.length;
     const firstItem = items[0];
     const itemName = firstItem ? getItemName(firstItem) : 'Item';
@@ -68,8 +71,14 @@ export const ContextMenuPreview = memo(({ items, itemType }: ContextMenuPreviewP
                         </div>
                     )}
                     <div className={styles.textContainer}>
-                        <div className={styles.name}>{itemName}</div>
-                        {isMultiple && <div className={styles.count}>+{itemCount - 1} more</div>}
+                        <Text className={styles.name} isNoSelect>
+                            {itemName}
+                        </Text>
+                        {isMultiple && (
+                            <Text className={styles.count} isNoSelect>
+                                +{t('common.itemsMore', { count: itemCount - 1 })}
+                            </Text>
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/src/shared/components/drag-preview/drag-preview.module.css b/src/shared/components/drag-preview/drag-preview.module.css
index 1d2151751..9e8ac055d 100644
--- a/src/shared/components/drag-preview/drag-preview.module.css
+++ b/src/shared/components/drag-preview/drag-preview.module.css
@@ -101,6 +101,7 @@
     flex-direction: column;
     gap: var(--theme-spacing-xs);
     min-width: 0;
+    user-select: none;
 }
 
 .name {
diff --git a/src/shared/components/drag-preview/drag-preview.tsx b/src/shared/components/drag-preview/drag-preview.tsx
index f0fd3b475..30a623ada 100644
--- a/src/shared/components/drag-preview/drag-preview.tsx
+++ b/src/shared/components/drag-preview/drag-preview.tsx
@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import styles from './drag-preview.module.css';
 
@@ -33,6 +34,7 @@ const getItemImage = (item: unknown): null | string => {
 
 export const DragPreview = memo(({ data }: DragPreviewProps) => {
     const items = data.item || [];
+    const { t } = useTranslation();
     const itemCount = items.length;
     const firstItem = items[0];
     const itemName = firstItem ? getItemName(firstItem) : 'Item';
@@ -66,7 +68,11 @@ export const DragPreview = memo(({ data }: DragPreviewProps) => {
                     )}
                     <div className={styles['text-container']}>
                         <div className={styles.name}>{itemName}</div>
-                        {isMultiple && <div className={styles.count}>+{itemCount - 1} more</div>}
+                        {isMultiple && (
+                            <div className={styles.count}>
+                                +{t('common.itemsMore', { count: itemCount - 1 })}
+                            </div>
+                        )}
                     </div>
                 </div>
             </div>