improve last commands log

src/renderer/src/App.tsx

@@ -2629,6 +2629,7 @@ function App() {
                 visible={lastCommandsVisible}
                 onTogglePress={toggleLastCommands}
                 ffmpegCommandLog={ffmpegCommandLog}
+                setFfmpegCommandLog={setFfmpegCommandLog}
               />
 
               <Sheet visible={settingsVisible} onClosePress={toggleSettings}>

src/renderer/src/LastCommandsSheet.tsx

@@ -1,25 +1,35 @@
-import { memo } from 'react';
+import { Dispatch, memo, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
+import { DateTime } from 'luxon';
+import sortBy from 'lodash/sortBy.js';
 
 import CopyClipboardButton from './components/CopyClipboardButton';
 import Sheet from './components/Sheet';
 import { FfmpegCommandLog } from './types';
+import Button from './components/Button';
 
-function LastCommandsSheet({ visible, onTogglePress, ffmpegCommandLog }: {
-  visible: boolean, onTogglePress: () => void, ffmpegCommandLog: FfmpegCommandLog,
+function LastCommandsSheet({ visible, onTogglePress, ffmpegCommandLog, setFfmpegCommandLog }: {
+  visible: boolean,
+  onTogglePress: () => void,
+  ffmpegCommandLog: FfmpegCommandLog,
+  setFfmpegCommandLog: Dispatch<SetStateAction<FfmpegCommandLog>>,
 }) {
   const { t } = useTranslation();
 
   return (
-    <Sheet visible={visible} onClosePress={onTogglePress} style={{ padding: '0 1em' }}>
+    <Sheet visible={visible} onClosePress={onTogglePress} style={{ padding: '0 1em' }} maxWidth={2000}>
       <h2>{t('Last ffmpeg commands')}</h2>
 
       {ffmpegCommandLog.length > 0 ? (
         <div>
-          {ffmpegCommandLog.reverse().map(({ command }, i) => (
+          <Button onClick={() => setFfmpegCommandLog([])} style={{ fontSize: '1em', marginBottom: '.5em' }}>{t('Clear')}</Button>
+
+          {sortBy(ffmpegCommandLog, (l) => -l.time).map(({ command, time }, i) => (
             // eslint-disable-next-line react/no-array-index-key
-            <div key={i} style={{ whiteSpace: 'pre', margin: '5px 0' }}>
-              <CopyClipboardButton text={command} /> {command}
+            <div key={i} style={{ whiteSpace: 'pre', margin: '5px 0', fontFamily: 'monospace' }}>
+              <CopyClipboardButton text={command} style={{ marginRight: '.5em', verticalAlign: 'middle' }} />
+              <span style={{ opacity: 0.5, marginRight: '.5em' }}>{DateTime.fromJSDate(time).toLocaleString(DateTime.TIME_WITH_SECONDS)}</span>
+              {command}
             </div>
           ))}
         </div>