add localization to drag/ctx preview

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",

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>
+                        <Text className={styles.name} isNoSelect>
-                        {isMultiple && <div className={styles.count}>+{itemCount - 1} more</div>}
+                            {itemName}
+                        </Text>
+                        {isMultiple && (
+                            <Text className={styles.count} isNoSelect>
+                                +{t('common.itemsMore', { count: itemCount - 1 })}
+                            </Text>
+                        )}
                     </div>
                 </div>
             </div>

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 {

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>