show number in batch list #2357

src/renderer/src/components/BatchFile.tsx

@@ -5,8 +5,14 @@ import { FaAngleRight, FaFile } from 'react-icons/fa';
 import useContextMenu from '../hooks/useContextMenu';
 import { primaryTextColor } from '../colors';
 
-function BatchFile({ path, isOpen, isSelected, name, onSelect, onDelete }: {
-  path: string, isOpen: boolean, isSelected: boolean, name: string, onSelect: (a: string) => void, onDelete: (a: string) => void
+function BatchFile({ path, index, isOpen, isSelected, name, onSelect, onDelete }: {
+  path: string,
+  index: number,
+  isOpen: boolean,
+  isSelected: boolean,
+  name: string,
+  onSelect: (a: string) => void,
+  onDelete: (a: string) => void,
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -21,7 +27,7 @@ function BatchFile({ path, isOpen, isSelected, name, onSelect, onDelete }: {
     <div ref={ref} role="button" style={{ background: isSelected ? 'var(--gray7)' : undefined, fontSize: 13, padding: '3px 6px', display: 'flex', alignItems: 'center', alignContent: 'flex-start' }} title={path} onClick={() => onSelect(path)}>
       <FaFile size={14} style={{ color: isSelected ? primaryTextColor : undefined, flexShrink: 0 }} />
       <div style={{ flexBasis: 4, flexShrink: 0 }} />
-      <div style={{ whiteSpace: 'nowrap', cursor: 'pointer', overflow: 'hidden' }}>{name}</div>
+      <div style={{ whiteSpace: 'nowrap', cursor: 'pointer', overflow: 'hidden' }}>{index + 1}. {name}</div>
       <div style={{ flexGrow: 1 }} />
       {isOpen && <FaAngleRight size={14} style={{ color: 'var(--gray9)', marginRight: -5, flexShrink: 0 }} />}
     </div>

src/renderer/src/components/BatchFilesList.tsx

@@ -65,7 +65,7 @@ function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBa
       transition={mySpring}
     >
       <div style={{ fontSize: 14, paddingBottom: 3, paddingTop: 0, paddingLeft: 10, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', flexWrap: 'wrap' }}>
-        <div>{t('Batch file list')}</div>
+        <div>{t('Batch file list')}{batchFiles.length > 0 && ` (${batchFiles.length})`}</div>
         <div style={{ flexGrow: 1 }} />
         <FaHatWizard size={17} role="button" title={`${t('Convert to supported format')}...`} style={iconStyle} onClick={onBatchConvertToSupportedFormatClick} />
         <AiOutlineMergeCells size={20} role="button" title={`${t('Merge/concatenate files')}...`} style={iconStyle} onClick={onMergeFilesClick} />
@@ -75,8 +75,8 @@ function BatchFilesList({ selectedBatchFiles, filePath, width, batchFiles, setBa
 
       <div style={{ overflowX: 'hidden', overflowY: 'auto' }}>
         <ReactSortable list={sortableList} setList={setSortableList}>
-          {sortableList.map(({ batchFile: { path, name } }) => (
-            <BatchFile key={path} path={path} name={name} isSelected={selectedBatchFiles.includes(path)} isOpen={filePath === path} onSelect={onBatchFileSelect} onDelete={batchListRemoveFile} />
+          {sortableList.map(({ batchFile: { path, name } }, index) => (
+            <BatchFile key={path} index={index} path={path} name={name} isSelected={selectedBatchFiles.includes(path)} isOpen={filePath === path} onSelect={onBatchFileSelect} onDelete={batchListRemoveFile} />
           ))}
         </ReactSortable>
       </div>