improve segment list

src/renderer/src/SegmentList.tsx

@@ -368,11 +368,20 @@ function SegmentList({
 
   const sortableList = useMemo(() => segmentsOrInverse.map((seg) => ({ id: seg.segId, seg })), [segmentsOrInverse]);
 
-  let header: ReactNode = t('Segments to export:');
-  if (segmentsOrInverse.length === 0) {
-    header = invertCutSegments ? (
-      <Trans>You have enabled the &quot;invert segments&quot; mode <FaYinYang style={{ verticalAlign: 'middle' }} /> which will cut away selected segments instead of keeping them. But there is no space between any segments, or at least two segments are overlapping. This would not produce any output. Either make room between segments or click the Yinyang <FaYinYang style={{ verticalAlign: 'middle', color: primaryTextColor }} /> symbol below to disable this mode. Alternatively you may combine overlapping segments from the menu.</Trans>
-    ) : t('No segments to export.');
+  function getHeader() {
+    if (segmentsOrInverse.length === 0) {
+      if (invertCutSegments) {
+        return (
+          <Trans>You have enabled the &quot;invert segments&quot; mode <FaYinYang style={{ verticalAlign: 'middle' }} /> which will cut away selected segments instead of keeping them. But there is no space between any segments, or at least two segments are overlapping. This would not produce any output. Either make room between segments or click the Yinyang <FaYinYang style={{ verticalAlign: 'middle', color: primaryTextColor }} /> symbol below to disable this mode. Alternatively you may combine overlapping segments from the menu.</Trans>
+        );
+      }
+      return t('No segments to export.');
+    }
+
+    if (segmentsOrInverse.every((s) => s.end == null)) {
+      return t('Markers:');
+    }
+    return t('Segments to export:');
   }
 
   const onReorderSegs = useCallback(async (index: number) => {
@@ -608,7 +617,7 @@ function SegmentList({
             onClick={toggleSegmentsList}
           />
 
-          {header}
+          {getHeader()}
         </div>
 
         <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd} onDragStart={handleDragStart} modifiers={[restrictToVerticalAxis]}>

src/renderer/src/components/FileNameTemplateEditor.tsx

@@ -14,7 +14,7 @@ import Select from './Select';
 import TextInput from './TextInput';
 import Button from './Button';
 import * as Dialog from './Dialog';
-import { dangerColor } from '../colors';
+import { dangerColor, saveColor } from '../colors';
 
 const electron = window.require('electron');
 
@@ -207,7 +207,7 @@ function FileNameTemplateEditor(opts: {
 
                 <Button title={t('Reset')} onClick={reset} style={{ marginLeft: '.3em' }}><FaUndo style={{ fontSize: '.8em', color: dangerColor }} /></Button>
                 {!haveImportantMessage && (
-                  <Button title={t('Close')} onClick={onHideClick} style={{ marginLeft: '.3em' }}><FaCheck style={{ fontSize: '.8em' }} /></Button>
+                  <Button title={t('Close')} onClick={onHideClick} style={{ marginLeft: '.3em', color: saveColor }}><FaCheck style={{ fontSize: '.8em' }} /></Button>
                 )}
               </div>