Add some new functionality

app/src/components/Sidebar/HistoryDrawer.tsx

@@ -20,6 +20,20 @@ interface Props {
   children?: any
 }
 
+function dowloadHistoryAsFile(props: Props) {
+  var filename = "save.txt"
+  const elementsText = props.items.map((element) => (
+    '"' + element.key + '";"' + element.value + '";\r\n'
+  ))
+  var element = document.createElement('a')
+  element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(elementsText.join('')))
+  element.setAttribute('download', filename)
+  element.style.display = 'none'
+  document.body.appendChild(element)
+  element.click()
+  document.body.removeChild(element)
+}
+
 function HistoryDrawer(props: Props) {
   const handleCtrlA = selectTextWithCtrlA({ targetSelector: 'pre' })
   const [expanded, setExpanded] = useState<boolean | undefined>(undefined)
@@ -40,6 +54,10 @@ function HistoryDrawer(props: Props) {
     event.stopPropagation()
   }
 
+  const saveHistory = (() => {
+    dowloadHistoryAsFile(props);
+  })
+
   function renderHistory() {
     const style = (element: HistoryItem) => ({
       backgroundColor: element.selected
@@ -98,6 +116,24 @@ function HistoryDrawer(props: Props) {
           {expanded ? props.children : null}
           {expanded ? elements : null}
         </div>
+        <div
+          style={{
+            backgroundColor: emphasize(props.theme.palette.background.default, 0.15),
+          }}
+        >
+          <Typography component={'span'} onClick={saveHistory} style={{ cursor: 'pointer', display: 'flex' }}>
+            <span style={{ flexGrow: 1 }}>
+              <Badge
+                classes={{ badge: props.classes.badge }}
+                invisible={true}
+                badgeContent={props.items.length}
+                color="primary"
+              >
+                Save history
+              </Badge>
+            </span>
+          </Typography>
+        </div>
       </div>
     )
   }

src/MenuTemplate.ts

@@ -20,6 +20,12 @@ const applicationMenu: MenuItemConstructorOptions = {
     {
       type: 'separator' as 'separator',
     },
+    {
+      label: 'Minimize to tray',
+      click: () => {
+        BrowserWindow.getFocusedWindow()?.hide()
+      }
+    },
     {
       label: 'Dev Tools',
       accelerator: 'CmdOrCtrl+Alt+I',

src/electron.ts

@@ -1,7 +1,7 @@
 import * as log from 'electron-log'
 import * as path from 'path'
 import ConfigStorage from '../backend/src/ConfigStorage'
-import { app, BrowserWindow, Menu, dialog } from 'electron'
+import { app, BrowserWindow, Tray, Menu, dialog } from 'electron'
 import { autoUpdater } from 'electron-updater'
 import { ConnectionManager } from '../backend/src/index'
 import { promises as fsPromise } from 'fs'
@@ -54,6 +54,7 @@ configStorage.init()
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow: BrowserWindow | undefined
+let tray: Tray | undefined
 
 async function createWindow() {
   if (isDev()) {
@@ -104,6 +105,22 @@ async function createWindow() {
     mainWindow = undefined
     app.quit()
   })
+
+  mainWindow.on('hide', () => {
+    tray = new Tray(path.join(__dirname, '..', '..', 'icon.png'));
+    tray.setContextMenu(Menu.buildFromTemplate([
+      {
+        label: 'Show App', click: function () {
+          mainWindow?.show();
+        }
+      },
+    ]));
+  })
+
+  mainWindow.on('show', () => {
+    tray?.removeBalloon()
+    tray?.destroy()
+  })
 }
 
 // This method will be called when Electron has finished