feat(ui): add download config toml link, disable copy when clipboard not available (#5035)

ui/src/dialogs/AboutDialog.jsx

@@ -9,6 +9,7 @@ import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import Paper from '@material-ui/core/Paper'
+import CloudDownloadIcon from '@material-ui/icons/CloudDownload'
 import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
 import FileCopyIcon from '@material-ui/icons/FileCopy'
 import Button from '@material-ui/core/Button'
@@ -245,6 +246,21 @@ const ConfigTabContent = ({ configData }) => {
     }
   }
 
+  const handleDownloadToml = () => {
+    const tomlContent = configToToml(configData, translate)
+    const tomlFile = new File([tomlContent], 'navidrome.toml', {
+      type: 'text/plain',
+    })
+
+    const tomlFileLink = document.createElement('a')
+    const tomlFileUrl = URL.createObjectURL(tomlFile)
+    tomlFileLink.href = tomlFileUrl
+    tomlFileLink.download = tomlFile.name
+    tomlFileLink.click()
+
+    URL.revokeObjectURL(tomlFileUrl)
+  }
+
   return (
     <div className={classes.configContainer}>
       <Button
@@ -252,11 +268,23 @@ const ConfigTabContent = ({ configData }) => {
         startIcon={<FileCopyIcon />}
         onClick={handleCopyToml}
         className={classes.copyButton}
-        disabled={!configData}
+        disabled={
+          !configData || !navigator.clipboard || !window.isSecureContext
+        }
         size="small"
       >
         {translate('about.config.exportToml')}
       </Button>
+      <Button
+        variant="outlined"
+        startIcon={<CloudDownloadIcon />}
+        onClick={handleDownloadToml}
+        className={classes.copyButton}
+        disabled={!configData}
+        size="small"
+      >
+        {translate('about.config.downloadToml')}
+      </Button>
       <TableContainer className={classes.tableContainer}>
         <Table size="small" stickyHeader>
           <TableHead>

ui/src/i18n/en.json

@@ -673,6 +673,7 @@
       "currentValue": "Current Value",
       "configurationFile": "Configuration File",
       "exportToml": "Export Configuration (TOML)",
+      "downloadToml": "Download Configuration (TOML)",
       "exportSuccess": "Configuration exported to clipboard in TOML format",
       "exportFailed": "Failed to copy configuration",
       "devFlagsHeader": "Development Flags (subject to change/removal)",