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