Add clear working dir button

fixes #805

src/App.jsx

@@ -467,13 +467,13 @@ const App = memo(() => {
 
   const changeOutDir = useCallback(async () => {
     const newOutDir = await askForOutDir(outputDir);
-    // We cannot allow exporting to a directory which has not yet been confirmed by an open dialog
-    // because of sandox restrictions
-    if (isMasBuild && !newOutDir) return;
-    // Else it's OK, we allow clearing the dir too
-    setCustomOutDir(newOutDir);
+    if (newOutDir) setCustomOutDir(newOutDir);
   }, [outputDir, setCustomOutDir]);
 
+  const clearOutDir = useCallback(() => {
+    setCustomOutDir();
+  }, [setCustomOutDir]);
+
   const effectiveFilePath = previewFilePath || filePath;
   const fileUri = effectiveFilePath ? filePathToUrl(effectiveFilePath) : '';
 
@@ -2047,6 +2047,7 @@ const App = memo(() => {
           toggleStripAudio={toggleStripAudio}
           customOutDir={customOutDir}
           changeOutDir={changeOutDir}
+          clearOutDir={clearOutDir}
           isCustomFormatSelected={isCustomFormatSelected}
           renderOutFmt={renderOutFmt}
           toggleHelp={toggleHelp}

src/TopMenu.jsx

@@ -1,22 +1,25 @@
 import React, { memo } from 'react';
 import { IoIosHelpCircle, IoIosSettings } from 'react-icons/io';
 import { FaLock, FaUnlock } from 'react-icons/fa';
-import { Button } from 'evergreen-ui';
+import { IconButton, Button, CrossIcon } from 'evergreen-ui';
 import { useTranslation } from 'react-i18next';
 
 import MergeExportButton from './components/MergeExportButton';
 
-import { withBlur } from './util';
+import { withBlur, isMasBuild } from './util';
 import { primaryTextColor } from './colors';
 
 
 const TopMenu = memo(({
   filePath, copyAnyAudioTrack, toggleStripAudio, customOutDir, changeOutDir,
   renderOutFmt, toggleHelp, numStreamsToCopy, numStreamsTotal, setStreamsSelectorShown, toggleSettings,
-  enabledOutSegments, autoMerge, setAutoMerge, autoDeleteMergedSegments, setAutoDeleteMergedSegments, isCustomFormatSelected, onOutFormatLockedClick, simpleMode, outFormatLocked,
+  enabledOutSegments, autoMerge, setAutoMerge, autoDeleteMergedSegments, setAutoDeleteMergedSegments, isCustomFormatSelected, onOutFormatLockedClick, simpleMode, outFormatLocked, clearOutDir,
 }) => {
   const { t } = useTranslation();
 
+  // We cannot allow exporting to a directory which has not yet been confirmed by an open dialog because of sandox restrictions
+  const showClearWorkingDirButton = customOutDir && !isMasBuild;
+
   function renderFormatLock() {
     const Icon = outFormatLocked ? FaLock : FaUnlock;
     return <Icon onClick={onOutFormatLockedClick} title={t('Lock/unlock output format')} size={14} style={{ marginRight: 7, marginLeft: 2, color: outFormatLocked ? primaryTextColor : undefined }} />;
@@ -43,11 +46,21 @@ const TopMenu = memo(({
 
       <div style={{ flexGrow: 1 }} />
 
+      {showClearWorkingDirButton && (
+        <IconButton
+          intent="danger"
+          icon={CrossIcon}
+          height={20}
+          onClick={withBlur(clearOutDir)}
+          title={t('Clear working directory')}
+        />
+      )}
+
       <Button
-        iconBefore={customOutDir ? 'folder-open' : undefined}
         height={20}
         onClick={withBlur(changeOutDir)}
         title={customOutDir}
+        paddingLeft={showClearWorkingDirButton ? 4 : undefined}
       >
         {customOutDir ? t('Working dir set') : t('Working dir unset')}
       </Button>