diff --git a/README.md b/README.md
index ba0a734..784318f 100644
--- a/README.md
+++ b/README.md
@@ -43,23 +43,10 @@ chmod a+x Imagine-x.y.z-x86_64.AppImage # make executable
  - Batch optimization
  - i18n (English, 简体中文, Nederlands, Español, Français, Italiano, Deutsch)
 
-## 'ImageMagick required'
-
-Since version 0.3.0, you can choose the format that you want to convert to. For example, if you pick a PNG file, you can convert it to JPEG and compress it with MozJPEG optimizer.
-
-But there is an exception: pngquant on windows can't read JPEG files, so if you want to convert JPEG to PNG, you should install ImageMagick firstly, and add it to your PATH environment variable.
-
-Imagine use this command below to check if ImageMagick installed, so make sure it work.
-
-```bash
-magick -version
-```
-
 ## Build and Contribute
 
 ```bash
 git clone https://github.com/meowtec/Imagine.git
-# node 8 is recommended
 npm install
 npm run dev
 ```
diff --git a/index.html b/index.html
index bcda581..93a08b8 100644
--- a/index.html
+++ b/index.html
@@ -8,9 +8,9 @@
 <div id="app"></div>
 <script>
 (() => {
-  const url = process.env.NODE_ENV === 'development'
+  const url = process.env.IMAGINE_ENV === 'development'
     ? 'http://localhost:9999/dist/app.js'
-    : 'dist/app.js'
+    : 'dist/web/app.js'
   const script = `<script src="${url}"><\/script>`
   document.write(script)
 })()
diff --git a/modules/__tests__/backend/optimize.test.ts b/modules/__tests__/backend/optimize.test.ts
index 6b59537..ec76c0a 100644
--- a/modules/__tests__/backend/optimize.test.ts
+++ b/modules/__tests__/backend/optimize.test.ts
@@ -4,7 +4,7 @@ import * as path from 'path'
 import optimize from '../../backend/optimize'
 import { saveFilesTmp, getFilePath } from '../../common/file-utils'
 import { fullDiff } from '../_tools/image-diff'
-import { IImageFile, SupportedExt } from '../../common/constants'
+import { IImageFile, SupportedExt } from '../../common/types'
 
 const relPath = (file: string) => path.resolve(__dirname, file)
 
diff --git a/modules/__tests__/common/file-utils.test.ts b/modules/__tests__/common/file-utils.test.ts
index db02456..1611e07 100644
--- a/modules/__tests__/common/file-utils.test.ts
+++ b/modules/__tests__/common/file-utils.test.ts
@@ -12,7 +12,7 @@ import {
   flattenFiles,
   reext,
 } from '../../common/file-utils'
-import { IImageFile, SupportedExt } from '../../common/constants'
+import { IImageFile, SupportedExt } from '../../common/types'
 
 const relPath = (file: string) => path.resolve(__dirname, file)
 
diff --git a/modules/__tests__/renderer/deamon.test.ts b/modules/__tests__/renderer/job-runner.test.ts
similarity index 86%
rename from modules/__tests__/renderer/deamon.test.ts
rename to modules/__tests__/renderer/job-runner.test.ts
index 1d254c9..3bff9cd 100644
--- a/modules/__tests__/renderer/deamon.test.ts
+++ b/modules/__tests__/renderer/job-runner.test.ts
@@ -2,23 +2,22 @@ import '../_tools/before-test'
 
 import * as path from 'path'
 import { createStore } from '../../renderer/store/store'
-import Daemon from '../../renderer/store/daemon'
+import JobRunner from '../../renderer/store/job-runner'
 import actions from '../../renderer/store/actionCreaters'
-import app from '../../backend/app'
 import { saveFilesTmp } from '../../common/file-utils'
 import { sleep } from '../../common/utils'
 import {
-  IImageFile, IOptimizeOptions, ITaskItem, TaskStatus,
-} from '../../common/constants'
+  IImageFile, TaskStatus,
+} from '../../common/types'
 
 jest.mock('../../renderer/apis/')
 
-test('optimize daemon', async () => {
+test('optimize JobRunner', async () => {
   const images = await saveFilesTmp(
     ['600_600.png', 'qr.png'].map((x) => path.resolve(__dirname, '../_files', x)),
   )
   const store = createStore()
-  new Daemon().watch(store)
+  new JobRunner().watch(store)
   let state
 
   store.dispatch(actions.taskAdd(images as IImageFile[]))
diff --git a/modules/__tests__/renderer/store.test.ts b/modules/__tests__/renderer/store.test.ts
index af0cef9..53a2d76 100644
--- a/modules/__tests__/renderer/store.test.ts
+++ b/modules/__tests__/renderer/store.test.ts
@@ -10,7 +10,7 @@ import {
   ITaskItem,
   TaskStatus,
   SupportedExt,
-} from '../../common/constants'
+} from '../../common/types'
 
 const image1: IImageFile = {
   id: '01',
diff --git a/modules/backend/app.ts b/modules/backend/app.ts
index b1ff4a0..a0245ab 100644
--- a/modules/backend/app.ts
+++ b/modules/backend/app.ts
@@ -10,22 +10,20 @@ import {
   IpcChannel,
   SaveType,
   IBackendState,
-} from '../common/constants'
+} from '../common/types'
 import * as fu from '../common/file-utils'
 import { listenIpc } from '../ipc-bridge/backend'
 import optimize from './optimize'
 import { saveFiles, saveFile } from './save'
 import Menu from './menu'
-import { detectImageMagick } from './imagemagick'
-import __ from '../locales'
-import { isDev } from '../common/env'
+import { IS_DEV } from '../common/env'
 
-if (isDev) {
+if (IS_DEV) {
   // eslint-disable-next-line global-require
   require('./dev')
 }
 
-const url = `file://${path.resolve('index.html')}`
+const url = `file://${path.resolve(app.getAppPath(), 'index.html')}`
 
 class App {
   private windows: number[] = []
@@ -173,8 +171,6 @@ class App {
   listenIpc() {
     listenIpc<IOptimizeRequest, IImageFile>(IpcChannel.OPTIMIZE, ({ image, exportExt, options }) => optimize(image, options))
 
-    listenIpc<void, boolean>(IpcChannel.DETECT_IMAGEMAGICK, detectImageMagick)
-
     ipcMain.on(IpcChannel.FILE_SELECT, () => {
       this.menu.open()
     })
diff --git a/modules/backend/convert.ts b/modules/backend/convert.ts
new file mode 100644
index 0000000..2b08244
--- /dev/null
+++ b/modules/backend/convert.ts
@@ -0,0 +1,5 @@
+import Jimp from 'jimp'
+
+export default function imageConvert(sourceFile: string, targetFile: string) {
+  return Jimp.read(sourceFile).then((image) => image.write(targetFile))
+}
diff --git a/modules/backend/imagemagick.ts b/modules/backend/imagemagick.ts
deleted file mode 100644
index 6169c29..0000000
--- a/modules/backend/imagemagick.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Readable } from 'stream'
-import { spawn, exec } from 'child-process-promise'
-import log from 'electron-log'
-
-/**
- * detect whether ImageMagick installed
- */
-export const detectImageMagick = async () => {
-  try {
-    const { stdout } = await exec('magick -version')
-
-    if (stdout.indexOf('ImageMagick') === -1) {
-      log.warn('magick detect error, stdout is:', stdout)
-      return false
-    }
-
-    return true
-  } catch (err) {
-    log.warn('magick detect error', err)
-    return false
-  }
-}
-
-export const convert = (input: string, output: string) => spawn('magick',
-  [input, output],
-  {
-    capture: ['stdout', 'stderr'],
-  }).catch((e) => {
-  throw new Error(`${e.message}\n${e.stderr}`)
-})
diff --git a/modules/backend/menu.ts b/modules/backend/menu.ts
index c7632cb..119537a 100644
--- a/modules/backend/menu.ts
+++ b/modules/backend/menu.ts
@@ -1,8 +1,8 @@
 import * as os from 'os'
 import { EventEmitter } from 'events'
 import { dialog, Menu, shell } from 'electron'
-import { SaveType } from '../common/constants'
-import { isDev } from '../common/env'
+import { SaveType } from '../common/types'
+import { IS_DEV } from '../common/env'
 import __ from '../locales'
 import pkg from '../../package.json'
 
@@ -125,7 +125,7 @@ class AppMenu extends EventEmitter {
       },
     ]
 
-    if (isDev) {
+    if (IS_DEV) {
       menuTemplates.push({
         label: 'Debug',
         submenu: [
diff --git a/modules/backend/optimize.ts b/modules/backend/optimize.ts
index d8fc391..5912b65 100644
--- a/modules/backend/optimize.ts
+++ b/modules/backend/optimize.ts
@@ -1,14 +1,13 @@
 import * as os from 'os'
-import * as path from 'path'
 import * as fs from 'fs-extra'
 import log from 'electron-log'
-import { IImageFile, IOptimizeOptions, SupportedExt } from '../common/constants'
+import { IImageFile, IOptimizeOptions, SupportedExt } from '../common/types'
 import * as fu from '../common/file-utils'
 import {
   pngquant, mozjpeg, cwebp, IOptimizeMethod,
 } from '../optimizers'
-import { convert } from './imagemagick'
 import { getFileUrl } from '../common/file-utils'
+import convert from './convert'
 
 const platform = os.platform()
 
diff --git a/modules/backend/save.ts b/modules/backend/save.ts
index f2ed311..d77e210 100644
--- a/modules/backend/save.ts
+++ b/modules/backend/save.ts
@@ -2,7 +2,7 @@ import * as path from 'path'
 import * as fs from 'fs-extra'
 import { noop } from '../common/utils'
 import * as fu from '../common/file-utils'
-import { SaveType, IImageFile } from '../common/constants'
+import { SaveType, IImageFile } from '../common/types'
 
 export async function saveFiles(images: IImageFile[], type: SaveType, dirname?: string) {
   if (type === SaveType.NEW_DIR && !dirname) return
diff --git a/modules/backend/updater.ts b/modules/backend/updater.ts
index b1f4cde..596bda5 100644
--- a/modules/backend/updater.ts
+++ b/modules/backend/updater.ts
@@ -4,7 +4,7 @@ import log from 'electron-log'
 import {
   IpcChannel,
   IUpdateInfo,
-} from '../common/constants'
+} from '../common/types'
 import __ from '../locales'
 import app from './app'
 
diff --git a/modules/common/env.ts b/modules/common/env.ts
index 0a346c5..cf27496 100644
--- a/modules/common/env.ts
+++ b/modules/common/env.ts
@@ -1 +1 @@
-export const isDev = process.env.NODE_ENV === 'development'
+export const IS_DEV = process.env.IMAGINE_ENV === 'development'
diff --git a/modules/common/file-utils.ts b/modules/common/file-utils.ts
index 0c52e61..9921b05 100644
--- a/modules/common/file-utils.ts
+++ b/modules/common/file-utils.ts
@@ -5,8 +5,7 @@ import * as crypto from 'crypto'
 import FileType from 'file-type'
 import rawBody from 'raw-body'
 import log from 'electron-log'
-import { IImageFile, IOptimizeOptions, SupportedExt } from './constants'
-import { isDev } from './env'
+import { IImageFile, SupportedExt, SupportedExtAlias } from './types'
 
 export const tmpdir = path.resolve(os.tmpdir(), 'imageOptimizer')
 
@@ -14,8 +13,6 @@ export const isSupportedExt = (type: string): type is SupportedExt => type in Su
 
 export const cleanTmpdir = () => fs.emptyDirSync(tmpdir)
 
-const takeSubHash = (hash: string) => hash.replace(/[/+=]/g, '').slice(0, 32)
-
 export function md5(text: string) {
   return crypto.createHash('md5').update(text).digest('hex')
 }
@@ -116,7 +113,7 @@ export const reext = (filename: string, ext: SupportedExt) => filename.replace(/
   $1 = $1.toLowerCase()
 
   // make sure `x.PNG` not be transformed to `x.png`
-  if ($1 === ext) {
+  if ($1 === ext || SupportedExtAlias[$1] === ext) {
     return $0
   }
 
diff --git a/modules/common/task.ts b/modules/common/task.ts
new file mode 100644
index 0000000..e5fff8a
--- /dev/null
+++ b/modules/common/task.ts
@@ -0,0 +1,5 @@
+import { ITaskItem } from './types'
+
+export const isTaskSizeIncreased = ({ image, optimized }: ITaskItem) => (
+  optimized && optimized.size >= image.size
+)
diff --git a/modules/common/constants.ts b/modules/common/types.ts
similarity index 78%
rename from modules/common/constants.ts
rename to modules/common/types.ts
index 337b0ba..03ab17a 100644
--- a/modules/common/constants.ts
+++ b/modules/common/types.ts
@@ -4,6 +4,10 @@ export enum SupportedExt {
   webp = 'webp',
 }
 
+export const SupportedExtAlias: Record<string, SupportedExt> = {
+  jpeg: SupportedExt.jpg,
+}
+
 export const enum TaskStatus {
   PENDING = 'PENDING',
   PROCESSING = 'PROCESSING',
@@ -21,7 +25,6 @@ export const enum IpcChannel {
   SYNC = 'SYNC',
   APP_UPDATE = 'APP_UPDATE',
   READY = 'READY',
-  DETECT_IMAGEMAGICK = 'DETECT_IMAGEMAGICK',
 }
 
 export const enum SaveType {
@@ -88,3 +91,21 @@ export interface IUpdateInfo {
   stagingPercentage: number
   version: string
 }
+
+export interface IDefaultOptions {
+  jpg: IOptimizeOptions
+  png: IOptimizeOptions
+  webp: IOptimizeOptions
+}
+
+export interface IGlobals {
+  activeId?: string
+  updateInfo?: IUpdateInfo
+  optionsVisible: boolean
+  defaultOptions: IDefaultOptions
+}
+
+export interface IState {
+  tasks: ITaskItem[]
+  globals: IGlobals
+}
diff --git a/modules/ipc-bridge/backend.ts b/modules/ipc-bridge/backend.ts
index 5b45927..107ed7c 100644
--- a/modules/ipc-bridge/backend.ts
+++ b/modules/ipc-bridge/backend.ts
@@ -1,6 +1,6 @@
 import { ipcMain } from 'electron'
 import log from 'electron-log'
-import { IElectronResponse, IpcChannel } from '../common/constants'
+import { IElectronResponse, IpcChannel } from '../common/types'
 
 /**
  * make cross process method call easier.
diff --git a/modules/ipc-bridge/renderer.ts b/modules/ipc-bridge/renderer.ts
index 99667b1..91ffca7 100644
--- a/modules/ipc-bridge/renderer.ts
+++ b/modules/ipc-bridge/renderer.ts
@@ -1,6 +1,6 @@
 import { ipcRenderer } from 'electron'
 import { randomId } from '../common/utils'
-import { IElectronResponse, IpcChannel } from '../common/constants'
+import { IElectronResponse, IpcChannel } from '../common/types'
 
 /**
  * make cross process method call easier.
diff --git a/modules/locales/ar-SA.ts b/modules/locales/ar-SA.ts
index d9d8813..6eaa2ab 100644
--- a/modules/locales/ar-SA.ts
+++ b/modules/locales/ar-SA.ts
@@ -20,5 +20,4 @@ export default {
   after_optimized: 'بعد',
   new_version: 'تحديث',
   apply_now: 'تطبيق التغييرات',
-  imagemagick_required: 'ImageMagick مطلوب',
 }
diff --git a/modules/locales/de-DE.ts b/modules/locales/de-DE.ts
index 7b49bf5..ec53736 100644
--- a/modules/locales/de-DE.ts
+++ b/modules/locales/de-DE.ts
@@ -20,5 +20,4 @@ export default {
   after_optimized: 'Nachher',
   new_version: 'Aktualisieren',
   apply_now: 'Anwenden',
-  imagemagick_required: 'ImageMagick benötigt',
 }
diff --git a/modules/locales/en-US.ts b/modules/locales/en-US.ts
index b1c2739..34c9150 100644
--- a/modules/locales/en-US.ts
+++ b/modules/locales/en-US.ts
@@ -10,6 +10,7 @@ export default {
   save_as: 'Save as',
   save_success: 'Save successfully',
   clear: 'Clear all',
+  clear_increased: 'Clear increased files',
   choose_images: 'Choose images',
   drag_files: 'Drag pictures here from the local folder',
   colors: 'Colors',
@@ -20,5 +21,4 @@ export default {
   after_optimized: 'After',
   new_version: 'Upgrade',
   apply_now: 'Apply now',
-  imagemagick_required: 'ImageMagick required',
 }
diff --git a/modules/locales/es-ES.ts b/modules/locales/es-ES.ts
index 6d37bfc..48f5aa6 100644
--- a/modules/locales/es-ES.ts
+++ b/modules/locales/es-ES.ts
@@ -20,5 +20,4 @@ export default {
   after_optimized: 'Después',
   new_version: 'Actualizar',
   apply_now: 'Apply now', // TODO: translate
-  imagemagick_required: 'ImageMagick required', // TODO: translate
 }
diff --git a/modules/locales/fr-FR.ts b/modules/locales/fr-FR.ts
index cb977f0..7b7f3db 100644
--- a/modules/locales/fr-FR.ts
+++ b/modules/locales/fr-FR.ts
@@ -20,5 +20,4 @@ export default {
   after_optimized: 'optimisé',
   new_version: 'Mettre à jour',
   apply_now: 'Appliquer maintenant',
-  imagemagick_required: 'ImageMagick requis',
 }
diff --git a/modules/locales/it-IT.ts b/modules/locales/it-IT.ts
index b8a0b23..9355168 100644
--- a/modules/locales/it-IT.ts
+++ b/modules/locales/it-IT.ts
@@ -20,5 +20,4 @@ export default {
   after_optimized: 'Dopo',
   new_version: 'Aggiorna',
   apply_now: 'Applica',
-  imagemagick_required: 'ImageMagick richiesto',
 }
diff --git a/modules/locales/nl-NL.ts b/modules/locales/nl-NL.ts
index 986612b..be0593e 100644
--- a/modules/locales/nl-NL.ts
+++ b/modules/locales/nl-NL.ts
@@ -20,5 +20,4 @@ export default {
   after_optimized: 'na',
   new_version: 'Nieuwe versie beschikbaar!', // TODO: shorter || Note: In Dutch, this can't be shorter :(
   apply_now: 'Meld je nu aan!', // TODO: translate
-  imagemagick_required: 'ImageMagick is verplicht', // TODO: translate
 }
diff --git a/modules/locales/zh-CN.ts b/modules/locales/zh-CN.ts
index aaa3f0b..731051a 100644
--- a/modules/locales/zh-CN.ts
+++ b/modules/locales/zh-CN.ts
@@ -10,6 +10,7 @@ export default {
   save_as: '另存为',
   save_success: '保存成功',
   clear: '清空',
+  clear_increased: '清空增大的文件',
   choose_images: '选择图片文件',
   drag_files: '从本地文件夹拖动图片到这里',
   colors: '色彩',
@@ -20,5 +21,4 @@ export default {
   after_optimized: '优化后',
   new_version: '有新版本',
   apply_now: '立即应用',
-  imagemagick_required: '需要安装 ImageMagick',
 }
diff --git a/modules/optimizers/index.ts b/modules/optimizers/index.ts
index 69739fb..648fe56 100644
--- a/modules/optimizers/index.ts
+++ b/modules/optimizers/index.ts
@@ -1,7 +1,7 @@
 import { spawn } from 'child-process-promise'
 import log from 'electron-log'
 import * as bins from './bin'
-import { IOptimizeOptions, SupportedExt } from '../common/constants'
+import { IOptimizeOptions, SupportedExt } from '../common/types'
 
 const createEnv = () => ({
   ...process.env,
diff --git a/modules/renderer/App.less b/modules/renderer/App.less
index 634c3d0..4d9d013 100644
--- a/modules/renderer/App.less
+++ b/modules/renderer/App.less
@@ -4,6 +4,8 @@
   position: absolute;
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   &.-drag::after {
     content: '';
diff --git a/modules/renderer/App.tsx b/modules/renderer/App.tsx
index f325619..6784cb7 100644
--- a/modules/renderer/App.tsx
+++ b/modules/renderer/App.tsx
@@ -1,9 +1,6 @@
 import React, { PureComponent, DragEvent } from 'react'
-import ReactDOM from 'react-dom'
 import classnames from 'classnames'
 import { Provider } from 'react-redux'
-import { IState } from './store/reducer'
-import Modal from './components/Modal'
 import List from './containers/List'
 import ActionBar from './containers/ActionBar'
 import Alone from './containers/Alone'
@@ -14,21 +11,25 @@ import * as apis from './apis'
 import './components/Icon'
 import './App.less'
 
-class App extends PureComponent<{}, {}> {
-  state = {
-    onion: 0,
+class App extends PureComponent<Record<string, never>, { onion: number }> {
+  constructor(props: Record<string, never>) {
+    super(props)
+
+    this.state = {
+      onion: 0,
+    }
   }
 
   handleDragEnter = () => {
-    this.setState({
-      onion: this.state.onion + 1,
-    })
+    this.setState((state) => ({
+      onion: state.onion + 1,
+    }))
   }
 
   handleDragLeave = () => {
-    this.setState({
-      onion: this.state.onion - 1,
-    })
+    this.setState((state) => ({
+      onion: state.onion - 1,
+    }))
   }
 
   handleDragDrop = (e: DragEvent<HTMLDivElement>) => {
@@ -44,11 +45,13 @@ class App extends PureComponent<{}, {}> {
   }
 
   render() {
+    const { onion } = this.state
+
     return (
       <Provider store={store}>
         <div
           className={classnames('layout', {
-            '-drag': !!this.state.onion,
+            '-drag': !!onion,
           })}
           onDragOver={prevent}
           onDragEnter={this.handleDragEnter}
@@ -57,8 +60,8 @@ class App extends PureComponent<{}, {}> {
         >
           <ActionBar />
           <List />
-          <Alone />
         </div>
+        <Alone />
       </Provider>
     )
   }
diff --git a/modules/renderer/Index.tsx b/modules/renderer/Index.tsx
index a5fe99b..b3f1357 100644
--- a/modules/renderer/Index.tsx
+++ b/modules/renderer/Index.tsx
@@ -1,15 +1,15 @@
 import { ipcRenderer } from 'electron'
-import React, { PureComponent } from 'react'
+import React from 'react'
 import ReactDOM from 'react-dom'
 import store from './store/store'
 import App from './App'
-import { IpcChannel } from '../common/constants'
-import Daemon from './store/daemon'
+import { IpcChannel } from '../common/types'
+import JobRunner from './store/job-runner'
 import subscribe from './store/subscribe'
 import listenIpc from './ipc/listen'
 
-const daemon = new Daemon()
-daemon.watch(store)
+const runner = new JobRunner()
+runner.watch(store)
 subscribe(store)
 listenIpc()
 
diff --git a/modules/renderer/apis/__mocks__/index.ts b/modules/renderer/apis/__mocks__/index.ts
index 99c6411..75c023a 100644
--- a/modules/renderer/apis/__mocks__/index.ts
+++ b/modules/renderer/apis/__mocks__/index.ts
@@ -1,5 +1,5 @@
 import { sleep } from '../../../common/utils'
-import { IImageFile, IOptimizeOptions, IOptimizeRequest } from '../../../common/constants'
+import { IImageFile, IOptimizeOptions, IOptimizeRequest } from '../../../common/types'
 
 export const optimize = async ({ image, options }: IOptimizeRequest) => {
   await sleep(100)
diff --git a/modules/renderer/apis/index.ts b/modules/renderer/apis/index.ts
index afcfda1..d482cf8 100644
--- a/modules/renderer/apis/index.ts
+++ b/modules/renderer/apis/index.ts
@@ -6,7 +6,7 @@ import {
   SaveType,
   IOptimizeRequest,
   ITaskItem,
-} from '../../common/constants'
+} from '../../common/types'
 import { requestCreater } from '../../ipc-bridge/renderer'
 import { cleanupArray } from '../../common/utils'
 
@@ -27,5 +27,3 @@ export const fileSaveAll = (type: SaveType) => {
 }
 
 export const optimize = requestCreater<IOptimizeRequest, IImageFile>(IpcChannel.OPTIMIZE)
-
-export const detectImageMagick = requestCreater<void, boolean>(IpcChannel.DETECT_IMAGEMAGICK)
diff --git a/modules/renderer/components/ImageOptions.tsx b/modules/renderer/components/ImageOptions.tsx
index e3049b8..7a3f3d6 100644
--- a/modules/renderer/components/ImageOptions.tsx
+++ b/modules/renderer/components/ImageOptions.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react'
 import { shallowCompare } from '../../common/utils'
-import { SupportedExt, IOptimizeOptions } from '../../common/constants'
+import { SupportedExt, IOptimizeOptions } from '../../common/types'
 import ColorNumber from './ColorNumber'
 import Quality from './Quality'
 import __ from '../../locales'
diff --git a/modules/renderer/components/Popper.less b/modules/renderer/components/Popper.less
index 9f77d12..6680faa 100644
--- a/modules/renderer/components/Popper.less
+++ b/modules/renderer/components/Popper.less
@@ -37,13 +37,19 @@
 .popper-menu {
   padding: 10px 0;
 
-  > a {
+  > a,
+  > button {
     display: block;
     padding: 4px 15px;
-    min-width: 60px;
+    min-width: 100px;
     text-align: center;
     text-decoration: none;
     color: #333;
+    background: none;
+    border: 0;
+    width: 100%;
+    font-size: inherit;
+    cursor: pointer;
 
     &:hover {
       background: #669;
diff --git a/modules/renderer/components/SizeReduce.tsx b/modules/renderer/components/SizeReduce.tsx
index e62992d..ff976e8 100644
--- a/modules/renderer/components/SizeReduce.tsx
+++ b/modules/renderer/components/SizeReduce.tsx
@@ -1,5 +1,6 @@
-import React, { PureComponent } from 'react'
-import { ITaskItem } from '../../common/constants'
+import classNames from 'classnames'
+import React from 'react'
+import { ITaskItem } from '../../common/types'
 import * as _ from '../../common/utils'
 
 export default function SizeReduce({ task }: { task: ITaskItem }) {
@@ -17,12 +18,10 @@ export default function SizeReduce({ task }: { task: ITaskItem }) {
         <span className="size-sep"> / </span>
         <span className="size-number">{beforeSize[0]}</span>
         <span className="size-unit">{beforeSize[1]}</span>
-        <span className="size-less">
-          <span className="size-q"> (</span>
+        <span className={classNames('size-less', percent > 0 ? '-decreased' : '-increased')}>
           { percent >= 0 ? '-' : '+' }
           <span className="size-number">{ Math.abs(percent) }</span>
           <span className="size-unit">%</span>
-          <span className="size-q">)</span>
         </span>
       </div>
     )
diff --git a/modules/renderer/components/TargetTypeSelect.tsx b/modules/renderer/components/TargetTypeSelect.tsx
index ed46672..6971473 100644
--- a/modules/renderer/components/TargetTypeSelect.tsx
+++ b/modules/renderer/components/TargetTypeSelect.tsx
@@ -1,11 +1,7 @@
-import * as os from 'os'
 import React, { PureComponent, ChangeEvent } from 'react'
 import classnames from 'classnames'
-import { connect } from 'react-redux'
-import { IState } from '../store/reducer'
-import { SupportedExt } from '../../common/constants'
+import { SupportedExt } from '../../common/types'
 import Select from './Select'
-import __ from '../../locales'
 
 import './TargetTypeSelect.less'
 
@@ -13,7 +9,6 @@ interface ITargetTypeSelectProps {
   className?: string
   sourceExt: SupportedExt
   targetExt: SupportedExt
-  imageMagickInstalled: boolean
   onChange: (ext: SupportedExt) => void
 }
 
@@ -24,27 +19,17 @@ class TargetTypeSelect extends PureComponent<ITargetTypeSelectProps, {}> {
 
   render() {
     const {
-      className, sourceExt, targetExt, imageMagickInstalled,
+      className, targetExt,
     } = this.props
 
-    /**
-     * on the Mac, pngquant can read JPEG, so we don't need ImageMagick
-     * on other systems, ImageMagick should be installed independently
-     */
-    const PNGDisabled = os.platform() !== 'darwin'
-      && sourceExt === SupportedExt.jpg
-      && !imageMagickInstalled
-
     return (
       <Select
         className={classnames('select-ext-type', className)}
         value={targetExt}
         onChange={this.handleChange}
       >
-        <option value={SupportedExt.png} disabled={PNGDisabled}>
+        <option value={SupportedExt.png}>
           To PNG
-          {' '}
-          { PNGDisabled ? ` (${__('imagemagick_required')})` : ''}
         </option>
         <option value={SupportedExt.jpg}>To JPG</option>
         <option value={SupportedExt.webp}>To WebP</option>
@@ -53,6 +38,4 @@ class TargetTypeSelect extends PureComponent<ITargetTypeSelectProps, {}> {
   }
 }
 
-export default connect((state: IState) => ({
-  imageMagickInstalled: state.globals.imageMagickInstalled,
-}))(TargetTypeSelect)
+export default TargetTypeSelect
diff --git a/modules/renderer/components/TaskList.less b/modules/renderer/components/TaskList.less
index d60ce94..3cf134a 100644
--- a/modules/renderer/components/TaskList.less
+++ b/modules/renderer/components/TaskList.less
@@ -9,16 +9,17 @@
   }
 }
 
-.task-list {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 10px;
-  margin-top: 60px;
+.task-list-container {
+  position: relative;
+  flex: 1;
+  height: 0;
+}
 
-  .task-view {
-    flex-basis: 240px;
-    margin: 10px;
-  }
+.task-list > div {
+  position: relative;
+  top: 10px;
+  left: 10px;
+  padding-bottom: 10px;
 }
 
 .task-empty {
@@ -34,26 +35,3 @@
     display: inline-block;
   }
 }
-
-.task-enter {
-  opacity: 0.01;
-  transform: scale(1.05);
-}
-
-.task-enter.task-enter-active {
-  opacity: 1;
-  transform: scale(1);
-  transition: .3s;
-  transition-property: opacity, transform;
-}
-
-.task-exit {
-  opacity: 1;
-}
-
-.task-exit.task-exit-active {
-  opacity: 0.01;
-  transform: scale(1.05);
-  transition: .1s;
-  transition-property: opacity, transform;
-}
diff --git a/modules/renderer/components/TaskList.tsx b/modules/renderer/components/TaskList.tsx
index 7dbeb27..5be5cd4 100644
--- a/modules/renderer/components/TaskList.tsx
+++ b/modules/renderer/components/TaskList.tsx
@@ -1,13 +1,10 @@
-import React, { PureComponent } from 'react'
-import CSSTransition from 'react-transition-group/CSSTransition'
-import TransitionGroup from 'react-transition-group/TransitionGroup'
+import React, { useCallback } from 'react'
+import { useMeasure } from 'react-use'
+import { FixedSizeGrid, GridChildComponentProps, GridItemKeySelector } from 'react-window'
 import {
   ITaskItem,
-  IOptimizeOptions,
-  SaveType,
-  SupportedExt,
-} from '../../common/constants'
-import Item from './TaskView'
+} from '../../common/types'
+import Item from '../containers/Task'
 import __ from '../../locales'
 
 import './TaskList.less'
@@ -16,41 +13,65 @@ export interface ITaskListProps {
   tasks: ITaskItem[]
 }
 
-export interface ITaskListDispatchProps {
-  onRemove(task: ITaskItem): void
-  onClick(task: ITaskItem): void
-  onSave(task: ITaskItem, type: SaveType): void
-  onOptionsChange(id: string, options: IOptimizeOptions): void
-  onExportChange(id: string, ext: SupportedExt): void
-}
+const LIST_MARGIN = 10
+
+export default function TaskList({
+  tasks,
+}: ITaskListProps) {
+  const [ref, { width, height }] = useMeasure<HTMLDivElement>()
+  const columnWidth = 260
+  const rowHeight = columnWidth + 60
+  const columnCount = Math.floor((width - LIST_MARGIN * 2) / columnWidth)
+  const rowCount = Math.ceil(tasks.length / columnCount)
+  const taskCount = tasks.length
 
-export default class TaskList extends PureComponent<ITaskListProps & ITaskListDispatchProps, {}> {
-  render() {
-    if (this.props.tasks.length) {
-      return (
-        <TransitionGroup
-          className="task-list"
-        >
-          {this.props.tasks.map((task) => (
-            <CSSTransition classNames="task" timeout={200} key={task.id}>
-              <Item
-                onRemove={this.props.onRemove}
-                onClick={this.props.onClick}
-                onOptionsChange={this.props.onOptionsChange}
-                onExportChange={this.props.onExportChange}
-                onSave={this.props.onSave}
-                task={task}
-              />
-            </CSSTransition>
-          ))}
-        </TransitionGroup>
-      )
-    }
+  const getItemIndex = useCallback((rowIndex: number, columnIndex: number) => rowIndex * columnCount + columnIndex, [columnCount])
+
+  const gridItemKeySelector: GridItemKeySelector = ({ rowIndex, columnIndex }) => {
+    const index = getItemIndex(rowIndex, columnIndex)
+    return tasks[index]?.id
+  }
+
+  const renderItem = useCallback(({ rowIndex, columnIndex, style }: GridChildComponentProps) => {
+    const index = getItemIndex(rowIndex, columnIndex)
+    if (index >= taskCount) return null
 
     return (
-      <div className="task-list task-empty">
-        <span>{__('drag_files')}</span>
+      <div
+        style={style}
+      >
+        <Item
+          index={index}
+        />
       </div>
     )
-  }
+  }, [getItemIndex, taskCount])
+
+  return (
+    <div
+      ref={ref}
+      className="task-list-container"
+    >
+      {
+        tasks.length ? (
+          <FixedSizeGrid
+            className="task-list"
+            columnWidth={columnWidth}
+            columnCount={columnCount}
+            rowHeight={rowHeight}
+            rowCount={rowCount}
+            width={width}
+            height={height}
+            itemKey={gridItemKeySelector}
+          >
+            {renderItem}
+          </FixedSizeGrid>
+        ) : (
+          <div className="task-list task-empty">
+            <span>{__('drag_files')}</span>
+          </div>
+        )
+      }
+    </div>
+  )
 }
diff --git a/modules/renderer/components/TaskView.less b/modules/renderer/components/TaskView.less
index da88b10..f5e03bc 100644
--- a/modules/renderer/components/TaskView.less
+++ b/modules/renderer/components/TaskView.less
@@ -8,6 +8,7 @@
   overflow: hidden;
   border-radius: 5px;
   transition: box-shadow .4s;
+  margin: 10px;
 
   &:hover {
     box-shadow: 0 0 10px rgba(0, 0, 0, .2);
@@ -69,6 +70,15 @@
   .size-reduce {
     flex: 1;
     text-align: right;
+
+    .size-less {
+      color: #0c0;
+      margin-left: 10px;
+
+      &.-increased {
+        color: #f60;
+      }
+    }
   }
 
   &.-PENDING {
@@ -117,8 +127,16 @@
   transition: background .4s;
   font-size: 18px;
 
+  button {
+    background: none;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font-size: inherit;
+  }
+
   > span,
-  > a {
+  > button {
     width: 30px;
     display: flex;
     justify-content: center;
diff --git a/modules/renderer/components/TaskView.tsx b/modules/renderer/components/TaskView.tsx
index 402e74b..fb3ad83 100644
--- a/modules/renderer/components/TaskView.tsx
+++ b/modules/renderer/components/TaskView.tsx
@@ -1,7 +1,6 @@
 import React, { PureComponent, MouseEvent } from 'react'
 import classnames from 'classnames'
 import Popper from './Popper'
-import Select from './Select'
 import Icon from './Icon'
 import ImageOptions from './ImageOptions'
 import SizeReduce from './SizeReduce'
@@ -12,14 +11,21 @@ import {
   IOptimizeOptions,
   SaveType,
   SupportedExt,
-} from '../../common/constants'
+} from '../../common/types'
 import * as _ from '../../common/utils'
 import __ from '../../locales'
 
 import './TaskView.less'
 
-interface ITaskViewProps {
+export interface ITaskProps {
   task: ITaskItem
+}
+
+export interface ITaskOwnProps {
+  index: number
+}
+
+export interface ITaskDispatchProps {
   onRemove(task: ITaskItem): void
   onClick(task: ITaskItem): void
   onSave(task: ITaskItem, type: SaveType): void
@@ -27,39 +33,45 @@ interface ITaskViewProps {
   onExportChange(id: string, ext: SupportedExt): void
 }
 
-class TaskView extends PureComponent<ITaskViewProps, {}> {
-  handleClear = (e: MouseEvent<HTMLAnchorElement>) => {
+class TaskView extends PureComponent<ITaskProps & ITaskDispatchProps, {}> {
+  handleClear = (e: MouseEvent<HTMLElement>) => {
     this.stopEvent(e)
 
-    this.props.onRemove(this.props.task)
+    const { task, onRemove } = this.props
+    onRemove(task)
   }
 
-  handleClick = (e: MouseEvent<HTMLDivElement>) => {
-    if (this.props.task.status === 'FAIL') return
+  handleClick = () => {
+    const { task, onClick } = this.props
 
-    this.props.onClick(this.props.task)
+    if (task.status === 'FAIL') return
+
+    onClick(task)
   }
 
   handleOptionsChange = (options: IOptimizeOptions) => {
-    this.props.onOptionsChange(this.props.task.id, options)
+    const { task, onOptionsChange } = this.props
+
+    onOptionsChange(task.id, options)
   }
 
   handleExtChange = (ext: SupportedExt) => {
-    const { task } = this.props
-    this.props.onExportChange(task.id, ext)
+    const { task, onExportChange } = this.props
+    onExportChange(task.id, ext)
   }
 
   handleSave = (e: MouseEvent<Element>, type: SaveType) => {
     this.stopEvent(e)
 
-    this.props.onSave(this.props.task, type)
+    const { task, onSave } = this.props
+    onSave(task, type)
   }
 
   handleRefreah = (e: MouseEvent<Element>) => {
     this.stopEvent(e)
 
-    const { task } = this.props
-    this.props.onOptionsChange(task.id, task.options)
+    const { task, onOptionsChange } = this.props
+    onOptionsChange(task.id, task.options)
   }
 
   stopEvent = (e: MouseEvent<Element>) => {
@@ -68,8 +80,8 @@ class TaskView extends PureComponent<ITaskViewProps, {}> {
   }
 
   render() {
-    const { task, onOptionsChange } = this.props
-    const { image, optimized, options } = task
+    const { task } = this.props
+    const { image, options } = task
     const destImage = task.optimized || task.image
     const isProcessing = task.status === TaskStatus.PROCESSING
     const exportExt = options.exportExt || image.ext
@@ -77,7 +89,11 @@ class TaskView extends PureComponent<ITaskViewProps, {}> {
     return (
       <div className={classnames('task-view', `-${task.status}`)}>
         <div className="image-view" onClick={this.handleClick}>
-          <img src={destImage.url} alt="task-cover" />
+          <img
+            src={destImage.url}
+            loading="lazy"
+            alt="task-cover"
+          />
           <div className="image-view-menu">
             <Popper
               hoverMode
@@ -95,9 +111,9 @@ class TaskView extends PureComponent<ITaskViewProps, {}> {
 
             {
               task.status === TaskStatus.FAIL ? (
-                <a href="#" onClick={this.handleRefreah}>
+                <button type="button" onClick={this.handleRefreah}>
                   <Icon name="refresh" />
-                </a>
+                </button>
               ) : null
             }
 
@@ -105,31 +121,31 @@ class TaskView extends PureComponent<ITaskViewProps, {}> {
               hoverMode
               popper={(
                 <div className="popper-menu">
-                  <a
-                    href="#"
+                  <button
+                    type="button"
                     onClick={(e) => this.handleSave(e, SaveType.OVER)}
                   >
                     {__('save')}
-                  </a>
-                  <a
-                    href="#"
+                  </button>
+                  <button
+                    type="button"
                     onClick={(e) => this.handleSave(e, SaveType.SAVE_AS)}
                   >
                     {__('save_as')}
-                  </a>
+                  </button>
                 </div>
               )}
             >
-              <a href="#" onClick={this.stopEvent}>
+              <button type="button" onClick={this.stopEvent}>
                 <Icon name="down" />
-              </a>
+              </button>
             </Popper>
 
             <span className="blank" />
 
-            <a className="close" href="#" onClick={this.handleClear}>
+            <button type="button" className="close" onClick={this.handleClear}>
               <Icon name="clear" />
-            </a>
+            </button>
           </div>
         </div>
         <div className="image-profile">
diff --git a/modules/renderer/containers/ActionBar.less b/modules/renderer/containers/ActionBar.less
index b4a71b9..d7c5bc6 100644
--- a/modules/renderer/containers/ActionBar.less
+++ b/modules/renderer/containers/ActionBar.less
@@ -1,20 +1,19 @@
 .action-bar {
-  position: fixed;
+  flex-shrink: 0;
   display: flex;
   height: 60px;
-  top: 0;
-  left: 0;
-  right: 0;
   padding-left: 10px;
   background: #fff;
   box-shadow: 0 0 4px rgba(0, 0, 0, .2);
-  z-index: 100;
+  position: relative;
+  z-index: 1;
 
   > .blank {
     flex: 1;
   }
 
   > button {
+    position: relative;
     background: none;
     border: 0;
     outline: none;
@@ -53,6 +52,22 @@
       color: #666;
     }
 
+    .dot {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 8px;
+      background: #fa0;
+      right: 5px;
+      top: 15px;
+    }
+
+    .expand {
+      position: absolute;
+      right: 0;
+      bottom: 4px;
+    }
+
     span {
       display: block;
       color: #888;
diff --git a/modules/renderer/containers/ActionBar.tsx b/modules/renderer/containers/ActionBar.tsx
index 06dc42d..e57018b 100644
--- a/modules/renderer/containers/ActionBar.tsx
+++ b/modules/renderer/containers/ActionBar.tsx
@@ -1,126 +1,162 @@
 import { shell } from 'electron'
-import React, { PureComponent, MouseEvent } from 'react'
+import React, { useCallback } from 'react'
 import { connect } from 'react-redux'
 import classnames from 'classnames'
 import Icon from '../components/Icon'
 import Popper from '../components/Popper'
 import OptionsPanel from './OptionsPanel'
 import actions from '../store/actionCreaters'
-import { IState } from '../store/reducer'
-import { SaveType, IUpdateInfo } from '../../common/constants'
+import { SaveType, IUpdateInfo, IState } from '../../common/types'
 import * as apis from '../apis'
 import __ from '../../locales'
 import pkg from '../../../package.json'
+import { isTaskSizeIncreased } from '../../common/task'
 
 import './ActionBar.less'
 
 interface IActionBarStateProps {
   count: number
+  sizeIncreaseCount: number
   updateInfo: IUpdateInfo | undefined
   optionsVisible: boolean
 }
 
 interface IActionBarDispatchProps {
   onRemoveAll(): void
+  onRemoveIncreased(): void
   onSave(type: SaveType): void
   onAdd(): void
   onUpdateClick(): void
   onOptionsVisibleToggle(visible: boolean): void
 }
 
-class ActionBar extends PureComponent<IActionBarStateProps & IActionBarDispatchProps> {
-  handleSaveClick(e: MouseEvent<HTMLElement>, type: SaveType) {
-    e.preventDefault()
-    this.props.onSave(type)
+function ActionBar({
+  count,
+  sizeIncreaseCount,
+  updateInfo,
+  optionsVisible,
+  onAdd,
+  onSave,
+  onRemoveAll,
+  onRemoveIncreased,
+  onUpdateClick,
+  onOptionsVisibleToggle,
+}: IActionBarStateProps & IActionBarDispatchProps) {
+  const handleOptionsVisibleClick = () => {
+    onOptionsVisibleToggle(!optionsVisible)
   }
 
-  onOptionsVisibleClick = () => {
-    this.props.onOptionsVisibleToggle(!this.props.optionsVisible)
-  }
-
-  onOptionsHide = () => {
-    this.props.onOptionsVisibleToggle(false)
-  }
-
-  render() {
-    const { count, updateInfo } = this.props
-
-    return (
-      <div className="action-bar">
-        <button onClick={this.props.onAdd}>
-          <Icon name="add" />
-          <span className="ellipsis">{__('add')}</span>
-        </button>
-
-        <Popper
-          hoverMode
-          popper={(
-            <div className="popper-menu">
-              <a href="#" onClick={(e) => this.handleSaveClick(e, SaveType.OVER)}>
-                {__('save_cover')}
-              </a>
-              <a href="#" onClick={(e) => this.handleSaveClick(e, SaveType.NEW_NAME)}>
-                {__('save_new')}
-              </a>
-              <a href="#" onClick={(e) => this.handleSaveClick(e, SaveType.NEW_DIR)}>
-                {__('save_dir')}
-              </a>
-            </div>
-          )}
-        >
-          <button className="tooltip-hover" disabled={!count}>
+  const handleOptionsHide = useCallback(() => {
+    onOptionsVisibleToggle(false)
+  }, [onOptionsVisibleToggle])
+
+  return (
+    <div className="action-bar">
+      <button type="button" onClick={onAdd}>
+        <Icon name="add" />
+        <span className="ellipsis">{__('add')}</span>
+      </button>
+
+      <Popper
+        hoverMode
+        popper={(
+          <div className="popper-menu">
+            <button type="button" onClick={() => onSave(SaveType.OVER)}>
+              {__('save_cover')}
+            </button>
+            <button type="button" onClick={() => onSave(SaveType.NEW_NAME)}>
+              {__('save_new')}
+            </button>
+            <button type="button" onClick={() => onSave(SaveType.NEW_DIR)}>
+              {__('save_dir')}
+            </button>
+          </div>
+        )}
+      >
+        <button type="button" disabled={!count}>
+          <div>
             <Icon name="down" />
             <span className="ellipsis">{__('save')}</span>
-          </button>
-        </Popper>
-
-        <button onClick={this.props.onRemoveAll} disabled={!count}>
-          <Icon name="delete" />
-          <span className="ellipsis">{__('clear')}</span>
+          </div>
+          <Icon name="expand-more" className="expand" />
         </button>
-
-        {
-          updateInfo ? (
-            <button onClick={this.props.onUpdateClick} className="has-update">
-              <Icon name="up" />
-              <span className="ellipsis">{__('new_version')}</span>
+      </Popper>
+
+      <Popper
+        hoverMode
+        popper={(
+          <div className="popper-menu">
+            <button type="button" onClick={onRemoveAll}>
+              {__('clear')}
             </button>
-          ) : null
-        }
-
-        <div className="blank" />
-
-        <Popper
-          className="options-popper"
-          visible={this.props.optionsVisible}
-          popper={(
-            <OptionsPanel onApplyClick={this.onOptionsHide} />
-          )}
-        >
-          <button
-            className={classnames({
-              '-active': this.props.optionsVisible,
-            })}
-            onClick={this.onOptionsVisibleClick}
-          >
-            <Icon name="tune" />
+            <button type="button" onClick={onRemoveIncreased} disabled={!sizeIncreaseCount}>
+              {__('clear_increased')}
+              {' ('}
+              {sizeIncreaseCount}
+              )
+            </button>
+          </div>
+        )}
+      >
+        <button type="button" disabled={!count}>
+          <div>
+            <Icon name="delete" />
+            <span className="ellipsis">{__('clear')}</span>
+          </div>
+          <Icon name="expand-more" className="expand" />
+          {sizeIncreaseCount ? <i className="dot" /> : null}
+        </button>
+      </Popper>
+      {
+        updateInfo ? (
+          <button type="button" onClick={onUpdateClick} className="has-update">
+            <Icon name="up" />
+            <span className="ellipsis">{__('new_version')}</span>
           </button>
-        </Popper>
-      </div>
-    )
-  }
+        ) : null
+      }
+
+      <div className="blank" />
+
+      <Popper
+        className="options-popper"
+        visible={optionsVisible}
+        popper={(
+          <OptionsPanel onApplyClick={handleOptionsHide} />
+        )}
+      >
+        <button
+          type="button"
+          className={classnames({
+            '-active': optionsVisible,
+          })}
+          onClick={handleOptionsVisibleClick}
+        >
+          <Icon name="tune" />
+        </button>
+      </Popper>
+    </div>
+  )
 }
 
-export default connect<IActionBarStateProps, IActionBarDispatchProps, {}, IState>(
+export default connect<IActionBarStateProps, IActionBarDispatchProps, Record<string, never>, IState>(
   (state) => ({
     count: state.tasks.length,
     updateInfo: state.globals.updateInfo,
     optionsVisible: state.globals.optionsVisible,
+    sizeIncreaseCount: state.tasks.reduce(
+      (count, item) => (count + (isTaskSizeIncreased(item) ? 1 : 0)),
+      0,
+    ),
   }), (dispatch) => ({
     onRemoveAll() {
       dispatch(actions.taskClear())
     },
 
+    onRemoveIncreased() {
+      dispatch(actions.taskClearIncreased())
+    },
+
     onOptionsVisibleToggle(visible: boolean) {
       dispatch(actions.optionsVisible(visible))
     },
diff --git a/modules/renderer/containers/Alone.tsx b/modules/renderer/containers/Alone.tsx
index 56adb3d..545a8fa 100644
--- a/modules/renderer/containers/Alone.tsx
+++ b/modules/renderer/containers/Alone.tsx
@@ -8,15 +8,15 @@ import SizeReduce from '../components/SizeReduce'
 import RadioGroup from '../components/RadioGroup'
 import TargetTypeSelect from '../components/TargetTypeSelect'
 import actions from '../store/actionCreaters'
-import { IState } from '../store/reducer'
 import { getActiveTask } from '../store/selectors'
 import {
   ITaskItem,
   IOptimizeOptions,
   TaskStatus,
   IImageFile,
+  IState,
   SupportedExt,
-} from '../../common/constants'
+} from '../../common/types'
 import __ from '../../locales'
 
 import './Alone.less'
@@ -51,16 +51,6 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
     }
   }
 
-  handleOptionsChange = (options: IOptimizeOptions) => {
-    this.props.onOptionsChange(this.props.task!.id, options)
-  }
-
-  handleKeyPress = (e: KeyboardEvent) => {
-    if (e.keyCode === 27) {
-      this.props.onClose()
-    }
-  }
-
   componentDidMount() {
     window.addEventListener('keyup', this.handleKeyPress)
   }
@@ -69,6 +59,20 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
     window.removeEventListener('keyup', this.handleKeyPress)
   }
 
+  handleOptionsChange = (options: IOptimizeOptions) => {
+    const { onOptionsChange, task } = this.props
+    if (task) {
+      onOptionsChange(task.id, options)
+    }
+  }
+
+  handleKeyPress = (e: KeyboardEvent) => {
+    const { onClose } = this.props
+    if (e.keyCode === 27) {
+      onClose()
+    }
+  }
+
   handleImageStageChange = (value: ImageStage) => {
     this.setState({
       imageStage: value,
@@ -76,14 +80,18 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
   }
 
   handleExtChange = (ext: SupportedExt) => {
-    const task = this.props.task!
-    this.props.onExportChange(task.id, ext)
+    const { task, onExportChange } = this.props
+    if (task) {
+      onExportChange(task.id, ext)
+    }
   }
 
   renderControllers() {
-    const task = this.props.task!
+    const { imageStage } = this.state
+    const { task } = this.props
+    if (!task) return null
     const {
-      image, optimized, options, status,
+      image, options, status,
     } = task
     const exportExt = options.exportExt || image.ext
 
@@ -109,7 +117,7 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
         <RadioGroup
           className="original-check -standard"
           data={imageStageList}
-          value={this.state.imageStage}
+          value={imageStage}
           renderItem={__}
           onChange={this.handleImageStageChange}
         />
@@ -118,7 +126,7 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
   }
 
   render() {
-    const { task } = this.props
+    const { task, onClose } = this.props
     const { imageStage } = this.state
 
     /**
@@ -132,7 +140,7 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
     }
 
     return (
-      <Modal className="alone-modal" visible={!!task} onClose={this.props.onClose}>
+      <Modal className="alone-modal" visible={!!task} onClose={onClose}>
         <ImageViewer src={image && image.url} />
         {
           task && this.renderControllers()
@@ -142,7 +150,7 @@ class Alone extends PureComponent<IAloneProps & IAloneDispatchProps, IAloneState
   }
 }
 
-export default connect<IAloneProps, IAloneDispatchProps, {}, IState>(
+export default connect<IAloneProps, IAloneDispatchProps, Record<string, never>, IState>(
   (state) => ({
     task: getActiveTask(state),
   }), (dispatch) => ({
diff --git a/modules/renderer/containers/List.tsx b/modules/renderer/containers/List.tsx
index 92446da..8165c99 100644
--- a/modules/renderer/containers/List.tsx
+++ b/modules/renderer/containers/List.tsx
@@ -1,35 +1,9 @@
 import { connect } from 'react-redux'
-import actions from '../store/actionCreaters'
-import { IState } from '../store/reducer'
-import TaskList, { ITaskListProps, ITaskListDispatchProps } from '../components/TaskList'
-import {
-  ITaskItem,
-  IOptimizeOptions,
-  SaveType,
-  IpcChannel,
-  SupportedExt,
-} from '../../common/constants'
-import * as apis from '../apis'
+import { IState } from '../../common/types'
+import TaskList, { ITaskListProps } from '../components/TaskList'
 
-export default connect<ITaskListProps, ITaskListDispatchProps, {}, IState>(
+export default connect<ITaskListProps, Record<string, never>, Record<string, never>, IState>(
   (state) => ({
     tasks: state.tasks,
   }),
-  (dispatch) => ({
-    onRemove(task: ITaskItem) {
-      dispatch(actions.taskDelete([task.id]))
-    },
-    onOptionsChange(id: string, options: IOptimizeOptions) {
-      dispatch(actions.taskUpdateOptions(id, options))
-    },
-    onExportChange(id: string, ext: SupportedExt) {
-      dispatch(actions.taskUpdateExport(id, ext))
-    },
-    onClick(task: ITaskItem) {
-      dispatch(actions.taskDetail(task.id))
-    },
-    onSave(task: ITaskItem, type: SaveType) {
-      task.optimized && apis.fileSave([task.optimized], type)
-    },
-  }),
 )(TaskList)
diff --git a/modules/renderer/containers/OptionsPanel.tsx b/modules/renderer/containers/OptionsPanel.tsx
index 7e9ec87..b2a6690 100644
--- a/modules/renderer/containers/OptionsPanel.tsx
+++ b/modules/renderer/containers/OptionsPanel.tsx
@@ -1,11 +1,15 @@
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
-import { SupportedExt, IOptimizeOptions } from '../../common/constants'
+import {
+  SupportedExt,
+  IOptimizeOptions,
+  IDefaultOptions,
+  IState,
+} from '../../common/types'
 import Icon from '../components/Icon'
 import Collapse from '../components/Collapse'
 import ImageOptions from '../components/ImageOptions'
 import TargetTypeSelect from '../components/TargetTypeSelect'
-import { IDefaultOptions, IState } from '../store/reducer'
 import actions from '../store/actionCreaters'
 import __ from '../../locales'
 
@@ -25,18 +29,28 @@ interface IOwnProps {
   onApplyClick?(): void
 }
 
-class OptionsPanel extends PureComponent<IProps & IDispatchProps, {}> {
-  onOptionsChanges = {
-    png: this.props.onOptionsChange.bind(null, SupportedExt.png),
-    jpg: this.props.onOptionsChange.bind(null, SupportedExt.jpg),
-    webp: this.props.onOptionsChange.bind(null, SupportedExt.webp),
-  } as { [ext: string]: (options: IOptimizeOptions) => void }
+class OptionsPanel extends PureComponent<IProps & IDispatchProps> {
+  onOptionsChanges = (() => {
+    const createOptionsChangeHandler = (ext: SupportedExt) => (options: IOptimizeOptions) => {
+      const { onOptionsChange } = this.props
+      onOptionsChange(ext, options)
+    }
+
+    return {
+      png: createOptionsChangeHandler(SupportedExt.png),
+      jpg: createOptionsChangeHandler(SupportedExt.jpg),
+      webp: createOptionsChangeHandler(SupportedExt.webp),
+    }
+  })()
 
   onExtChanges = (() => {
-    const createExtChangeHandler = (ext: SupportedExt) => (exportExt: SupportedExt) => this.props.onOptionsChange(ext, {
-      ...this.props.optionsMap[ext],
-      exportExt,
-    })
+    const createExtChangeHandler = (ext: SupportedExt) => (exportExt: SupportedExt) => {
+      const { onOptionsChange, optionsMap } = this.props
+      onOptionsChange(ext, {
+        ...optionsMap[ext],
+        exportExt,
+      })
+    }
 
     return {
       png: createExtChangeHandler(SupportedExt.png),
@@ -45,7 +59,7 @@ class OptionsPanel extends PureComponent<IProps & IDispatchProps, {}> {
   })()
 
   render() {
-    const { optionsMap } = this.props
+    const { optionsMap, onApplyClick, onClose } = this.props
 
     return (
       <div className="options">
@@ -100,12 +114,12 @@ class OptionsPanel extends PureComponent<IProps & IDispatchProps, {}> {
           </Collapse>
         </div>
         <footer className="clearfix">
-          <button onClick={this.props.onApplyClick}>
+          <button type="button" onClick={onApplyClick}>
             <Icon name="doneall" />
             {__('apply_now')}
           </button>
           <div className="blank" />
-          <button onClick={this.props.onClose}>
+          <button type="button" onClick={onClose}>
             <Icon name="close" />
           </button>
         </footer>
@@ -129,7 +143,7 @@ export default connect<IProps, IDispatchProps, IOwnProps, IState>(
 
     onApplyClick() {
       dispatch(actions.optionsApply())
-      ownProps && ownProps.onApplyClick && ownProps.onApplyClick()
+      ownProps.onApplyClick?.()
     },
 
     onClose() {
diff --git a/modules/renderer/containers/Task.tsx b/modules/renderer/containers/Task.tsx
new file mode 100644
index 0000000..1b97313
--- /dev/null
+++ b/modules/renderer/containers/Task.tsx
@@ -0,0 +1,36 @@
+import { connect } from 'react-redux'
+import actions from '../store/actionCreaters'
+import {
+  ITaskItem,
+  IOptimizeOptions,
+  IState,
+  SaveType,
+  SupportedExt,
+} from '../../common/types'
+import * as apis from '../apis'
+import TaskView, { ITaskProps, ITaskDispatchProps, ITaskOwnProps } from '../components/TaskView'
+
+export default connect<ITaskProps, ITaskDispatchProps, ITaskOwnProps, IState>(
+  (state, ownProps) => ({
+    task: state.tasks[ownProps.index],
+  }),
+  (dispatch) => ({
+    onRemove(task: ITaskItem) {
+      dispatch(actions.taskDelete([task.id]))
+    },
+    onOptionsChange(id: string, options: IOptimizeOptions) {
+      dispatch(actions.taskUpdateOptions(id, options))
+    },
+    onExportChange(id: string, ext: SupportedExt) {
+      dispatch(actions.taskUpdateExport(id, ext))
+    },
+    onClick(task: ITaskItem) {
+      dispatch(actions.taskDetail(task.id))
+    },
+    onSave(task: ITaskItem, type: SaveType) {
+      if (task.optimized) {
+        apis.fileSave([task.optimized], type)
+      }
+    },
+  }),
+)(TaskView)
diff --git a/modules/renderer/images/symbols/expand-more.svg b/modules/renderer/images/symbols/expand-more.svg
new file mode 100644
index 0000000..c55bd7f
--- /dev/null
+++ b/modules/renderer/images/symbols/expand-more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>
\ No newline at end of file
diff --git a/modules/renderer/ipc/listen.ts b/modules/renderer/ipc/listen.ts
index 528916d..3974426 100644
--- a/modules/renderer/ipc/listen.ts
+++ b/modules/renderer/ipc/listen.ts
@@ -1,12 +1,10 @@
 import { ipcRenderer } from 'electron'
-import { Store } from 'redux'
 import actions from '../store/actionCreaters'
 import { getActiveTask } from '../store/selectors'
 import store from '../store/store'
-import { shallowCompare } from '../../common/utils'
 import {
   IpcChannel, IImageFile, SaveType, ITaskItem, IUpdateInfo,
-} from '../../common/constants'
+} from '../../common/types'
 import { showMessage } from '../components/Messager'
 import * as apis from '../apis'
 import __ from '../../locales'
@@ -40,8 +38,4 @@ export default function listenIpc() {
   ipcRenderer.on(IpcChannel.APP_UPDATE, (event: any, data: IUpdateInfo) => {
     store.dispatch(actions.appUpdateInfo(data))
   })
-
-  apis.detectImageMagick().then((installed) => {
-    store.dispatch(actions.imageMagickInstalled(installed))
-  })
 }
diff --git a/modules/renderer/store/actionCreaters.ts b/modules/renderer/store/actionCreaters.ts
index b7cfd25..390fc5b 100644
--- a/modules/renderer/store/actionCreaters.ts
+++ b/modules/renderer/store/actionCreaters.ts
@@ -1,19 +1,14 @@
-import { Store } from 'redux'
-import { createAction, Action } from 'redux-actions'
-import { IState, createOptimizeOptions } from './reducer'
+import { createAction } from 'redux-actions'
 import {
   ACTIONS,
-  ITaskAddPayloadItem,
   IDefaultOptionsPayload,
 } from './actions'
 import {
   IImageFile,
   IOptimizeOptions,
-  ITaskItem,
-  TaskStatus,
   IUpdateInfo,
   SupportedExt,
-} from '../../common/constants'
+} from '../../common/types'
 
 export default {
   taskAdd: createAction<IImageFile[]>(ACTIONS.TASK_ADD),
@@ -22,6 +17,8 @@ export default {
 
   taskClear: createAction(ACTIONS.TASK_CLEAR),
 
+  taskClearIncreased: createAction(ACTIONS.TASK_CLEAR_INCREASED),
+
   taskUpdateOptions: createAction<{
     id: string
     options: IOptimizeOptions
@@ -53,6 +50,4 @@ export default {
   defaultOptions: createAction<IDefaultOptionsPayload>(ACTIONS.DEFAULT_OPTIONS_UPDATE),
 
   optionsApply: createAction(ACTIONS.OPTIONS_APPLY),
-
-  imageMagickInstalled: createAction<boolean>(ACTIONS.IMAGEMAGICK_CHECKED_UPDATE),
 }
diff --git a/modules/renderer/store/actions.ts b/modules/renderer/store/actions.ts
index 43cc00d..728f05d 100644
--- a/modules/renderer/store/actions.ts
+++ b/modules/renderer/store/actions.ts
@@ -1,13 +1,8 @@
-import { createAction, Action } from 'redux-actions'
-import store from './store'
 import {
   IImageFile,
   IOptimizeOptions,
-  ITaskItem,
-  TaskStatus,
-  IUpdateInfo,
   SupportedExt,
-} from '../../common/constants'
+} from '../../common/types'
 
 export interface ITaskAddPayloadItem {
   image: IImageFile
@@ -23,6 +18,7 @@ export const enum ACTIONS {
   TASK_ADD = 'TASK_ADD',
   TASK_DELETE = 'TASK_DELETE',
   TASK_CLEAR = 'TASK_CLEAR',
+  TASK_CLEAR_INCREASED = 'TASK_CLEAR_INCREASED',
   TASK_UPDATE_OPTIONS = 'TASK_UPDATE_OPTIONS',
   TASK_UPDATE_EXPORT = 'TASK_UPDATE_EXPORT',
   TASK_OPTIMIZE_START = 'TASK_OPTIMIZE_START',
@@ -33,5 +29,4 @@ export const enum ACTIONS {
   OPTIONS_VISIBLE_UPDATE = 'OPTIONS_VISIBLE_UPDATE',
   DEFAULT_OPTIONS_UPDATE = 'DEFAULT_OPTIONS_UPDATE',
   OPTIONS_APPLY = 'OPTIONS_APPLY',
-  IMAGEMAGICK_CHECKED_UPDATE = 'IMAGEMAGICK_CHECKED_UPDATE',
 }
diff --git a/modules/renderer/store/daemon.ts b/modules/renderer/store/job-runner.ts
similarity index 68%
rename from modules/renderer/store/daemon.ts
rename to modules/renderer/store/job-runner.ts
index 311fac4..3aaf42c 100644
--- a/modules/renderer/store/daemon.ts
+++ b/modules/renderer/store/job-runner.ts
@@ -1,18 +1,20 @@
+import os from 'os'
 import { Store } from 'redux'
 import { debounce } from 'lodash'
 import log from 'electron-log'
 import { optimize } from '../apis'
-import { TaskStatus } from '../../common/constants'
+import { TaskStatus, IState } from '../../common/types'
 import actions from './actionCreaters'
-import { IState } from './reducer'
 
-export default class Daemon {
-  private running = false
+const maxRunningNum = os.cpus().length - 1
+
+export default class JobRunner {
+  private runningNum = 0
 
   private store?: Store<IState>
 
   trigger = debounce(() => {
-    if (this.running) return
+    if (this.runningNum >= maxRunningNum) return
     this.start()
   }, 100)
 
@@ -22,13 +24,16 @@ export default class Daemon {
   }
 
   private pickPendingTask() {
-    const state = this.store!.getState()
+    const { store } = this
+    if (!store) return null
+    const state = store.getState()
     return state.tasks.find((task) => task.status === TaskStatus.PENDING)
   }
 
   private async start() {
-    this.running = true
-    const store = this.store!
+    this.runningNum += 1
+    const { store } = this
+    if (!store) return
 
     while (true) {
       const task = this.pickPendingTask()
@@ -45,6 +50,6 @@ export default class Daemon {
       }
     }
 
-    this.running = false
+    this.runningNum -= 1
   }
 }
diff --git a/modules/renderer/store/reducer.ts b/modules/renderer/store/reducer.ts
index 5a9eedc..670856b 100644
--- a/modules/renderer/store/reducer.ts
+++ b/modules/renderer/store/reducer.ts
@@ -1,4 +1,4 @@
-import { Reducer, combineReducers } from 'redux'
+import { Reducer } from 'redux'
 import { handleActions, Action } from 'redux-actions'
 import * as storage from './storage'
 import {
@@ -8,36 +8,18 @@ import {
   TaskStatus,
   IUpdateInfo,
   SupportedExt,
-} from '../../common/constants'
+  IState,
+  IGlobals,
+  IDefaultOptions,
+} from '../../common/types'
 import {
   ACTIONS,
-  ITaskAddPayloadItem,
   IDefaultOptionsPayload,
 } from './actions'
+import { isTaskSizeIncreased } from '../../common/task'
 
 type Tasks = ITaskItem[]
 
-export interface IDefaultOptions {
-  // TODO: if possible, change `string` to `SupportedExt`
-  [key: string]: IOptimizeOptions
-  jpg: IOptimizeOptions
-  png: IOptimizeOptions
-  webp: IOptimizeOptions
-}
-
-interface IGlobals {
-  activeId?: string
-  updateInfo?: IUpdateInfo
-  imageMagickInstalled: boolean
-  optionsVisible: boolean
-  defaultOptions: IDefaultOptions
-}
-
-export interface IState {
-  tasks: ITaskItem[]
-  globals: IGlobals
-}
-
 export const createOptimizeOptions = (ext: SupportedExt) => {
   const optimizeOptions: IOptimizeOptions = {
     exportExt: ext,
@@ -56,6 +38,8 @@ export const createOptimizeOptions = (ext: SupportedExt) => {
         color: 128,
       })
       break
+
+    default:
   }
 
   return optimizeOptions
@@ -63,6 +47,13 @@ export const createOptimizeOptions = (ext: SupportedExt) => {
 
 const savedOptions = storage.getOptions()
 
+function updateTaskList(state: IState, updater: (task: Tasks) => Tasks): IState {
+  return {
+    ...state,
+    tasks: updater(state.tasks),
+  }
+}
+
 function updateTaskItem(state: IState, id: string, partial: Partial<ITaskItem>): IState {
   return updateTaskList(state, (tasks) => {
     const index = tasks.findIndex((task) => task.id === id)
@@ -78,13 +69,6 @@ function updateTaskItem(state: IState, id: string, partial: Partial<ITaskItem>):
   })
 }
 
-function updateTaskList(state: IState, updater: (task: Tasks) => Tasks): IState {
-  return {
-    ...state,
-    tasks: updater(state.tasks),
-  }
-}
-
 function updateGlobals(state: IState, updater: (globals: IGlobals) => IGlobals): IState {
   return {
     ...state,
@@ -112,13 +96,14 @@ export default handleActions<IState, any>({
 
     return updateTaskList(state, (tasks) => [
       ...tasks,
-      ...action.payload!
+      ...action.payload
         .filter((image) => !tasks.some((task) => task.id === image.id))
         .map<ITaskItem>((image) => {
         const exportExt = (
-          defaultOptions[image.ext]
+          (
+            defaultOptions[image.ext]
             && defaultOptions[image.ext].exportExt
-            || image.ext
+          ) || image.ext
         )
 
         return {
@@ -132,15 +117,19 @@ export default handleActions<IState, any>({
   },
 
   [ACTIONS.TASK_DELETE](state, action: Action<string[]>) {
-    return updateTaskList(state, (tasks) => tasks.filter((task) => !action.payload!.some((id) => id === task.id)))
+    return updateTaskList(state, (tasks) => tasks.filter((task) => !action.payload.some((id) => id === task.id)))
   },
 
-  [ACTIONS.TASK_CLEAR](state, action: Action<void>) {
+  [ACTIONS.TASK_CLEAR](state) {
     return updateTaskList(state, () => [])
   },
 
+  [ACTIONS.TASK_CLEAR_INCREASED](state) {
+    return updateTaskList(state, (tasks) => tasks.filter((task) => !isTaskSizeIncreased(task)))
+  },
+
   [ACTIONS.TASK_UPDATE_OPTIONS](state, action: Action<{ id: string, options: IOptimizeOptions }>) {
-    const { id, options } = action.payload!
+    const { id, options } = action.payload
 
     return updateTaskItem(state, id, {
       options,
@@ -149,7 +138,7 @@ export default handleActions<IState, any>({
   },
 
   [ACTIONS.TASK_UPDATE_EXPORT](state, action: Action<{ id: string, exportExt: SupportedExt }>) {
-    const { id, exportExt } = action.payload!
+    const { id, exportExt } = action.payload
     const { defaultOptions } = state.globals
 
     return updateTaskItem(state, id, {
@@ -159,14 +148,14 @@ export default handleActions<IState, any>({
   },
 
   [ACTIONS.TASK_OPTIMIZE_START](state, action: Action<string>) {
-    const id = action.payload!
+    const id = action.payload
     return updateTaskItem(state, id, {
       status: TaskStatus.PROCESSING,
     })
   },
 
   [ACTIONS.TASK_OPTIMIZE_SUCCESS](state, action: Action<{ id: string, optimized: IImageFile }>) {
-    const { id, optimized } = action.payload!
+    const { id, optimized } = action.payload
     return updateTaskItem(state, id, {
       optimized,
       status: TaskStatus.DONE,
@@ -174,7 +163,7 @@ export default handleActions<IState, any>({
   },
 
   [ACTIONS.TASK_OPTIMIZE_FAIL](state, action: Action<string>) {
-    const id = action.payload!
+    const id = action.payload
     return updateTaskItem(state, id, {
       status: TaskStatus.FAIL,
     })
@@ -184,10 +173,10 @@ export default handleActions<IState, any>({
     const { defaultOptions } = state.globals
 
     return updateTaskList(state, (list) => list.map((item) => {
-      const exportExt = defaultOptions[item.image.ext].exportExt!
+      const { exportExt } = defaultOptions[item.image.ext]
       return {
         ...item,
-        options: getInitialTaskOptions(exportExt, defaultOptions),
+        options: getInitialTaskOptions(exportExt ?? item.image.ext, defaultOptions),
         status: TaskStatus.PENDING,
       }
     }))
@@ -207,12 +196,12 @@ export default handleActions<IState, any>({
 
   [ACTIONS.OPTIONS_VISIBLE_UPDATE](state, action: Action<boolean>) {
     return updateGlobalsPartial(state, {
-      optionsVisible: action.payload!,
+      optionsVisible: action.payload,
     })
   },
 
   [ACTIONS.DEFAULT_OPTIONS_UPDATE](state, action: Action<IDefaultOptionsPayload>) {
-    const { ext, options } = action.payload!
+    const { ext, options } = action.payload
     const defaultOptions = {
       ...state.globals.defaultOptions,
       [ext]: options,
@@ -227,17 +216,10 @@ export default handleActions<IState, any>({
       defaultOptions,
     })
   },
-
-  [ACTIONS.IMAGEMAGICK_CHECKED_UPDATE](state, action: Action<boolean>) {
-    return updateGlobalsPartial(state, {
-      imageMagickInstalled: action.payload!,
-    })
-  },
 }, {
   tasks: [],
   globals: {
     optionsVisible: false,
-    imageMagickInstalled: false,
     defaultOptions: {
       png: createOptimizeOptions(SupportedExt.png),
       jpg: createOptimizeOptions(SupportedExt.jpg),
diff --git a/modules/renderer/store/selectors.ts b/modules/renderer/store/selectors.ts
index 1e77ad9..c36bcf8 100644
--- a/modules/renderer/store/selectors.ts
+++ b/modules/renderer/store/selectors.ts
@@ -1,6 +1,5 @@
 import { createSelector } from 'reselect'
-import { ITaskItem } from '../../common/constants'
-import { IState } from './reducer'
+import { IState } from '../../common/types'
 
 export const getTasks = (state: IState) => state.tasks
 export const getActiveId = (state: IState) => state.globals.activeId
diff --git a/modules/renderer/store/storage.ts b/modules/renderer/store/storage.ts
index d5c2cfa..19d252d 100644
--- a/modules/renderer/store/storage.ts
+++ b/modules/renderer/store/storage.ts
@@ -3,7 +3,7 @@
  */
 
 import log from 'electron-log'
-import { IDefaultOptions } from './reducer'
+import { IDefaultOptions } from '../../common/types'
 
 interface IStorageContent {
   defaultOptions: IDefaultOptions,
@@ -14,12 +14,13 @@ const key = 'options-v3'
 const hasLocalStorage = !(typeof localStorage === 'undefined')
 
 export const getOptions = () => {
-  if (!hasLocalStorage) return
+  if (!hasLocalStorage) return null
 
   try {
-    return JSON.parse(localStorage.getItem(key)!) as IStorageContent
+    return JSON.parse(localStorage.getItem(key) ?? '') as IStorageContent
   } catch (e) {
     log.error(`Failed to get options from localStorage, ${e}`)
+    return null
   }
 }
 
diff --git a/modules/renderer/store/subscribe.ts b/modules/renderer/store/subscribe.ts
index e4c5e06..3b81277 100644
--- a/modules/renderer/store/subscribe.ts
+++ b/modules/renderer/store/subscribe.ts
@@ -1,16 +1,15 @@
 import { ipcRenderer } from 'electron'
 import { Store } from 'redux'
-import { IState } from './reducer'
 import { shallowCompare } from '../../common/utils'
-import { IpcChannel, IBackendState } from '../../common/constants'
+import { IpcChannel, IBackendState, IState } from '../../common/types'
 
-export default function (store: Store<IState>) {
+export default function subscribe(store: Store<IState>) {
   let backendState: IBackendState
 
   /**
    * When `IBackendState` changed, sync to backend
    */
-  store.subscribe(() => {
+  return store.subscribe(() => {
     const state = store.getState()
     const nextBackendState: IBackendState = {
       taskCount: state.tasks.length,
diff --git a/modules/renderer/styles/base.less b/modules/renderer/styles/base.less
index 2c9d5a4..4a2cb60 100644
--- a/modules/renderer/styles/base.less
+++ b/modules/renderer/styles/base.less
@@ -25,3 +25,7 @@ body {
   content: '';
   clear: both;
 }
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
diff --git a/modules/webpack.config.ts b/modules/webpack.config.ts
index f8071af..016dd6a 100644
--- a/modules/webpack.config.ts
+++ b/modules/webpack.config.ts
@@ -4,30 +4,20 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
 
 const rel = (filename: string) => path.resolve(__dirname, filename)
 
-const NODE_ENV = process.env.NODE_ENV as 'development' | 'production'
-const isDev = NODE_ENV === 'development'
-
-const addHotEntry = (entry: string | string[]) => {
-  if (isDev) {
-    return [
-      'webpack-dev-server/client?http://localhost:9999/',
-      'webpack/hot/only-dev-server',
-    ].concat(entry)
-  }
-  return entry
-}
+const IMAGINE_ENV = process.env.IMAGINE_ENV as 'development' | 'production'
+const isDev = IMAGINE_ENV === 'development'
 
 const entries: Entry = {
-  app: addHotEntry('./modules/renderer/Index'),
+  app: './modules/renderer/Index',
 }
 
 const config: Configuration = {
-  mode: NODE_ENV,
+  mode: IMAGINE_ENV,
 
   entry: entries,
 
   output: {
-    path: rel('../dist'),
+    path: rel('../dist/web'),
     filename: '[name].js',
   },
 
@@ -65,7 +55,7 @@ const config: Configuration = {
       },
       {
         test: /\.(png|jpg)$/,
-        type: 'asset/resource',
+        type: 'asset/inline',
       },
       {
         test: /\.svg$/,
@@ -85,7 +75,7 @@ const config: Configuration = {
     new webpack.HotModuleReplacementPlugin(),
     new webpack.DefinePlugin({
       'process.env': {
-        NODE_ENV: JSON.stringify(NODE_ENV),
+        IMAGINE_ENV: JSON.stringify(IMAGINE_ENV),
       },
     }),
     new ReactRefreshWebpackPlugin(),
diff --git a/package-lock.json b/package-lock.json
index 6cd6806..591d6e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "Imagine",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -465,7 +465,6 @@
       "version": "7.13.7",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.7.tgz",
       "integrity": "sha512-h+ilqoX998mRVM5FtB5ijRuHUDVt5l3yfoOi2uh18Z/O3hvyaHQ39NpxVkCIG5yFs+mLq/ewFp8Bss6zmWv6ZA==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.4"
       },
@@ -473,8 +472,7 @@
         "regenerator-runtime": {
           "version": "0.13.7",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-          "dev": true
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
         }
       }
     },
@@ -965,7 +963,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.16.1.tgz",
       "integrity": "sha512-iwyNYQeBawrdg/f24x3pQ5rEx+/GwjZcCXd3Kgc+ZUd+Ivia7sIqBsOnDaMZdKCBPlfW364ekexnlOqyVa0NWg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -976,7 +973,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/core/-/core-0.16.1.tgz",
       "integrity": "sha512-la7kQia31V6kQ4q1kI/uLimu8FXx7imWVajDGtwUG8fzePLWDFJyZl0fdIXVCL1JW2nBcRHidUot6jvlRDi2+g==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -994,14 +990,12 @@
         "file-type": {
           "version": "9.0.0",
           "resolved": "https://registry.npmjs.org/file-type/-/file-type-9.0.0.tgz",
-          "integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw==",
-          "dev": true
+          "integrity": "sha512-Qe/5NJrgIOlwijpq3B7BEpzPFcgzggOTagZmkXQY4LA6bsXKTUstK7Wp12lEJ/mLKTpvIZxmIuRcLYWT6ov9lw=="
         },
         "pixelmatch": {
           "version": "4.0.2",
           "resolved": "https://registry.npmjs.org/pixelmatch/-/pixelmatch-4.0.2.tgz",
           "integrity": "sha1-j0fc7FARtHe2fbA8JDvB8wheiFQ=",
-          "dev": true,
           "requires": {
             "pngjs": "^3.0.0"
           }
@@ -1012,7 +1006,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/custom/-/custom-0.16.1.tgz",
       "integrity": "sha512-DNUAHNSiUI/j9hmbatD6WN/EBIyeq4AO0frl5ETtt51VN1SvE4t4v83ZA/V6ikxEf3hxLju4tQ5Pc3zmZkN/3A==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/core": "^0.16.1"
@@ -1022,7 +1015,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/gif/-/gif-0.16.1.tgz",
       "integrity": "sha512-r/1+GzIW1D5zrP4tNrfW+3y4vqD935WBXSc8X/wm23QTY9aJO9Lw6PEdzpYCEY+SOklIFKaJYUAq/Nvgm/9ryw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -1034,7 +1026,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/jpeg/-/jpeg-0.16.1.tgz",
       "integrity": "sha512-8352zrdlCCLFdZ/J+JjBslDvml+fS3Z8gttdml0We759PnnZGqrnPRhkOEOJbNUlE+dD4ckLeIe6NPxlS/7U+w==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -1045,7 +1036,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-blit/-/plugin-blit-0.16.1.tgz",
       "integrity": "sha512-fKFNARm32RoLSokJ8WZXHHH2CGzz6ire2n1Jh6u+XQLhk9TweT1DcLHIXwQMh8oR12KgjbgsMGvrMVlVknmOAg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1055,7 +1045,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-blur/-/plugin-blur-0.16.1.tgz",
       "integrity": "sha512-1WhuLGGj9MypFKRcPvmW45ht7nXkOKu+lg3n2VBzIB7r4kKNVchuI59bXaCYQumOLEqVK7JdB4glaDAbCQCLyw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1065,7 +1054,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-circle/-/plugin-circle-0.16.1.tgz",
       "integrity": "sha512-JK7yi1CIU7/XL8hdahjcbGA3V7c+F+Iw+mhMQhLEi7Q0tCnZ69YJBTamMiNg3fWPVfMuvWJJKOBRVpwNTuaZRg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1075,7 +1063,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-color/-/plugin-color-0.16.1.tgz",
       "integrity": "sha512-9yQttBAO5SEFj7S6nJK54f+1BnuBG4c28q+iyzm1JjtnehjqMg6Ljw4gCSDCvoCQ3jBSYHN66pmwTV74SU1B7A==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -1086,7 +1073,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-contain/-/plugin-contain-0.16.1.tgz",
       "integrity": "sha512-44F3dUIjBDHN+Ym/vEfg+jtjMjAqd2uw9nssN67/n4FdpuZUVs7E7wadKY1RRNuJO+WgcD5aDQcsvurXMETQTg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1096,7 +1082,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-cover/-/plugin-cover-0.16.1.tgz",
       "integrity": "sha512-YztWCIldBAVo0zxcQXR+a/uk3/TtYnpKU2CanOPJ7baIuDlWPsG+YE4xTsswZZc12H9Kl7CiziEbDtvF9kwA/Q==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1106,7 +1091,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-crop/-/plugin-crop-0.16.1.tgz",
       "integrity": "sha512-UQdva9oQzCVadkyo3T5Tv2CUZbf0klm2cD4cWMlASuTOYgaGaFHhT9st+kmfvXjKL8q3STkBu/zUPV6PbuV3ew==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1116,7 +1100,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-displace/-/plugin-displace-0.16.1.tgz",
       "integrity": "sha512-iVAWuz2+G6Heu8gVZksUz+4hQYpR4R0R/RtBzpWEl8ItBe7O6QjORAkhxzg+WdYLL2A/Yd4ekTpvK0/qW8hTVw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1126,7 +1109,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-dither/-/plugin-dither-0.16.1.tgz",
       "integrity": "sha512-tADKVd+HDC9EhJRUDwMvzBXPz4GLoU6s5P7xkVq46tskExYSptgj5713J5Thj3NMgH9Rsqu22jNg1H/7tr3V9Q==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1136,7 +1118,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-fisheye/-/plugin-fisheye-0.16.1.tgz",
       "integrity": "sha512-BWHnc5hVobviTyIRHhIy9VxI1ACf4CeSuCfURB6JZm87YuyvgQh5aX5UDKtOz/3haMHXBLP61ZBxlNpMD8CG4A==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1146,7 +1127,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-flip/-/plugin-flip-0.16.1.tgz",
       "integrity": "sha512-KdxTf0zErfZ8DyHkImDTnQBuHby+a5YFdoKI/G3GpBl3qxLBvC+PWkS2F/iN3H7wszP7/TKxTEvWL927pypT0w==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1156,7 +1136,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-gaussian/-/plugin-gaussian-0.16.1.tgz",
       "integrity": "sha512-u9n4wjskh3N1mSqketbL6tVcLU2S5TEaFPR40K6TDv4phPLZALi1Of7reUmYpVm8mBDHt1I6kGhuCJiWvzfGyg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1166,7 +1145,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-invert/-/plugin-invert-0.16.1.tgz",
       "integrity": "sha512-2DKuyVXANH8WDpW9NG+PYFbehzJfweZszFYyxcaewaPLN0GxvxVLOGOPP1NuUTcHkOdMFbE0nHDuB7f+sYF/2w==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1176,7 +1154,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-mask/-/plugin-mask-0.16.1.tgz",
       "integrity": "sha512-snfiqHlVuj4bSFS0v96vo2PpqCDMe4JB+O++sMo5jF5mvGcGL6AIeLo8cYqPNpdO6BZpBJ8MY5El0Veckhr39Q==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1186,7 +1163,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-normalize/-/plugin-normalize-0.16.1.tgz",
       "integrity": "sha512-dOQfIOvGLKDKXPU8xXWzaUeB0nvkosHw6Xg1WhS1Z5Q0PazByhaxOQkSKgUryNN/H+X7UdbDvlyh/yHf3ITRaw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1196,7 +1172,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-print/-/plugin-print-0.16.1.tgz",
       "integrity": "sha512-ceWgYN40jbN4cWRxixym+csyVymvrryuKBQ+zoIvN5iE6OyS+2d7Mn4zlNgumSczb9GGyZZESIgVcBDA1ezq0Q==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -1207,7 +1182,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-resize/-/plugin-resize-0.16.1.tgz",
       "integrity": "sha512-u4JBLdRI7dargC04p2Ha24kofQBk3vhaf0q8FwSYgnCRwxfvh2RxvhJZk9H7Q91JZp6wgjz/SjvEAYjGCEgAwQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1217,7 +1191,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-rotate/-/plugin-rotate-0.16.1.tgz",
       "integrity": "sha512-ZUU415gDQ0VjYutmVgAYYxC9Og9ixu2jAGMCU54mSMfuIlmohYfwARQmI7h4QB84M76c9hVLdONWjuo+rip/zg==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1227,7 +1200,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-scale/-/plugin-scale-0.16.1.tgz",
       "integrity": "sha512-jM2QlgThIDIc4rcyughD5O7sOYezxdafg/2Xtd1csfK3z6fba3asxDwthqPZAgitrLgiKBDp6XfzC07Y/CefUw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1237,7 +1209,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-shadow/-/plugin-shadow-0.16.1.tgz",
       "integrity": "sha512-MeD2Is17oKzXLnsphAa1sDstTu6nxscugxAEk3ji0GV1FohCvpHBcec0nAq6/czg4WzqfDts+fcPfC79qWmqrA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1247,7 +1218,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugin-threshold/-/plugin-threshold-0.16.1.tgz",
       "integrity": "sha512-iGW8U/wiCSR0+6syrPioVGoSzQFt4Z91SsCRbgNKTAk7D+XQv6OI78jvvYg4o0c2FOlwGhqz147HZV5utoSLxA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1"
@@ -1257,7 +1227,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/plugins/-/plugins-0.16.1.tgz",
       "integrity": "sha512-c+lCqa25b+4q6mJZSetlxhMoYuiltyS+ValLzdwK/47+aYsq+kcJNl+TuxIEKf59yr9+5rkbpsPkZHLF/V7FFA==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/plugin-blit": "^0.16.1",
@@ -1288,7 +1257,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/png/-/png-0.16.1.tgz",
       "integrity": "sha512-iyWoCxEBTW0OUWWn6SveD4LePW89kO7ZOy5sCfYeDM/oTPLpR8iMIGvZpZUz1b8kvzFr27vPst4E5rJhGjwsdw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/utils": "^0.16.1",
@@ -1299,7 +1267,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/tiff/-/tiff-0.16.1.tgz",
       "integrity": "sha512-3K3+xpJS79RmSkAvFMgqY5dhSB+/sxhwTFA9f4AVHUK0oKW+u6r52Z1L0tMXHnpbAdR9EJ+xaAl2D4x19XShkQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "utif": "^2.0.1"
@@ -1309,7 +1276,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/types/-/types-0.16.1.tgz",
       "integrity": "sha512-g1w/+NfWqiVW4CaXSJyD28JQqZtm2eyKMWPhBBDCJN9nLCN12/Az0WFF3JUAktzdsEC2KRN2AqB1a2oMZBNgSQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/bmp": "^0.16.1",
@@ -1324,7 +1290,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/utils/-/utils-0.16.1.tgz",
       "integrity": "sha512-8fULQjB0x4LzUSiSYG6ZtQl355sZjxbv8r9PPAuYHzS9sGiSHJQavNqK/nKnpDsVkU88/vRGcE7t3nMU0dEnVw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "regenerator-runtime": "^0.13.3"
@@ -1333,8 +1298,7 @@
         "regenerator-runtime": {
           "version": "0.13.7",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-          "dev": true
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
         }
       }
     },
@@ -1650,6 +1614,12 @@
         "pretty-format": "^26.0.0"
       }
     },
+    "@types/js-cookie": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.6.tgz",
+      "integrity": "sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.7",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
@@ -1764,6 +1734,15 @@
         "@types/react": "*"
       }
     },
+    "@types/react-window": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.2.tgz",
+      "integrity": "sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/readable-stream": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-2.3.9.tgz",
@@ -2146,6 +2125,12 @@
       "integrity": "sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==",
       "dev": true
     },
+    "@xobotyi/scrollbar-width": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz",
+      "integrity": "sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==",
+      "dev": true
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -2310,8 +2295,7 @@
     "any-base": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/any-base/-/any-base-1.1.0.tgz",
-      "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==",
-      "dev": true
+      "integrity": "sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg=="
     },
     "anymatch": {
       "version": "3.1.1",
@@ -2939,8 +2923,7 @@
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
-      "dev": true
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
     },
     "batch": {
       "version": "0.6.1",
@@ -2997,8 +2980,7 @@
     "bmp-js": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/bmp-js/-/bmp-js-0.1.0.tgz",
-      "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM=",
-      "dev": true
+      "integrity": "sha1-4Fpj95amwf8l9Hcex62twUjAcjM="
     },
     "body-parser": {
       "version": "1.19.0",
@@ -3087,9 +3069,9 @@
       }
     },
     "boolean": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.2.tgz",
-      "integrity": "sha512-RwywHlpCRc3/Wh81MiCKun4ydaIFyW5Ea6JbL6sRCVx5q5irDw7pMXBUFYF/jArQ6YrG36q0kpovc9P/Kd3I4g==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.0.3.tgz",
+      "integrity": "sha512-EqrTKXQX6Z3A2nRmMEIlAIfjQOgFnVO2nqZGpbcsPnYGWBwpFqzlrozU1dy+S2iqfYDLh26ef4KrgTxu9xQrxA==",
       "dev": true,
       "optional": true
     },
@@ -3193,7 +3175,6 @@
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
       "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
-      "dev": true,
       "requires": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.1.13"
@@ -3208,8 +3189,7 @@
     "buffer-equal": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal/-/buffer-equal-0.0.1.tgz",
-      "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs=",
-      "dev": true
+      "integrity": "sha1-kbx0sR6kBbyRa8aqkI+q+ltKrEs="
     },
     "buffer-from": {
       "version": "1.1.1",
@@ -3989,6 +3969,15 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "dev": true,
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "copy-webpack-plugin": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-7.0.0.tgz",
@@ -4117,6 +4106,16 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "dev": true
     },
+    "css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "dev": true,
+      "requires": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "css-loader": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-5.0.2.tgz",
@@ -4170,6 +4169,24 @@
         }
       }
     },
+    "css-tree": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
+      "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4581,8 +4598,7 @@
     "dom-walk": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
-      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==",
-      "dev": true
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
     },
     "domelementtype": {
       "version": "1.3.1",
@@ -4685,9 +4701,9 @@
       }
     },
     "electron": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-11.3.0.tgz",
-      "integrity": "sha512-MhdS0gok3wZBTscLBbYrOhLaQybCSAfkupazbK1dMP5c+84eVMxJE/QGohiWQkzs0tVFIJsAHyN19YKPbelNrQ==",
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-11.4.4.tgz",
+      "integrity": "sha512-m52nF85VADCmL9DpzJfgmkvc9fNiGZPYwptv/4fTYrYhAMiO+hmClGMXncCoSAzoULQjl+f+0b9CY4yd6nRFlQ==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",
@@ -4696,9 +4712,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "12.20.4",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.4.tgz",
-          "integrity": "sha512-xRCgeE0Q4pT5UZ189TJ3SpYuX/QGl6QIAOAIeDSbAVAd2gX1NxSZup4jNVK7cxIeP8KDSbJgcckun495isP1jQ==",
+          "version": "12.20.11",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-12.20.11.tgz",
+          "integrity": "sha512-gema+apZ6qLQK7k7F0dGkGCWQYsL0qqKORWOQO6tq46q+x+1C0vbOiOqOwRVlh4RAdbQwV/j/ryr3u5NOG1fPQ==",
           "dev": true
         }
       }
@@ -4837,9 +4853,9 @@
       "dev": true
     },
     "env-paths": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.0.tgz",
-      "integrity": "sha512-6u0VYSCo/OW6IoD5WCLLy9JUGARbamfSavcNXry/eu8aHVFei6CD3Sw+VGX5alea1i9pgPHW0mbu6Xj0uBh7gA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+      "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
       "dev": true
     },
     "envinfo": {
@@ -5656,8 +5672,7 @@
     "exif-parser": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/exif-parser/-/exif-parser-0.1.12.tgz",
-      "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI=",
-      "dev": true
+      "integrity": "sha1-WKnS1ywCwfbwKg70qRZicrd2CSI="
     },
     "exit": {
       "version": "0.1.2",
@@ -5961,12 +5976,24 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
       "dev": true
     },
+    "fast-shallow-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
+      "integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==",
+      "dev": true
+    },
     "fastest-levenshtein": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
       "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
       "dev": true
     },
+    "fastest-stable-stringify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-2.0.2.tgz",
+      "integrity": "sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==",
+      "dev": true
+    },
     "fastq": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
@@ -6260,7 +6287,6 @@
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/gifwrap/-/gifwrap-0.9.2.tgz",
       "integrity": "sha512-fcIswrPaiCDAyO8xnWvHSZdWChjKXUanKKpAiWWJ/UTkEi/aYKn5+90e7DE820zbEaVR9CE2y4z9bzhQijZ0BA==",
-      "dev": true,
       "requires": {
         "image-q": "^1.1.1",
         "omggif": "^1.0.10"
@@ -6299,16 +6325,15 @@
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
       "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
-      "dev": true,
       "requires": {
         "min-document": "^2.19.0",
         "process": "^0.11.10"
       }
     },
     "global-agent": {
-      "version": "2.1.12",
-      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-2.1.12.tgz",
-      "integrity": "sha512-caAljRMS/qcDo69X9BfkgrihGUgGx44Fb4QQToNQjsiWh+YlQ66uqYVAdA8Olqit+5Ng0nkz09je3ZzANMZcjg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-2.2.0.tgz",
+      "integrity": "sha512-+20KpaW6DDLqhG7JDiJpD1JvNvb8ts+TNl7BPOYcURqCrXqnN1Vf+XVOrkKJAFPqfX+oEhsdzOj1hLWkBTdNJg==",
       "dev": true,
       "optional": true,
       "requires": {
@@ -6322,9 +6347,9 @@
       },
       "dependencies": {
         "core-js": {
-          "version": "3.9.0",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.9.0.tgz",
-          "integrity": "sha512-PyFBJaLq93FlyYdsndE5VaueA9K5cNB7CGzeCj191YYLhkQM0gdZR2SKihM70oF0wdqKSKClv/tEBOpoRmdOVQ==",
+          "version": "3.11.1",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.11.1.tgz",
+          "integrity": "sha512-k93Isqg7e4txZWMGNYwevZL9MiogLk8pd1PtwrmFmi8IBq4GXqUaVW/a33Llt6amSI36uSjd0GWwc9pTT9ALlQ==",
           "dev": true,
           "optional": true
         }
@@ -6852,6 +6877,12 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==",
+      "dev": true
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6880,8 +6911,7 @@
     "image-q": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/image-q/-/image-q-1.1.1.tgz",
-      "integrity": "sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY=",
-      "dev": true
+      "integrity": "sha1-/IQJlmRGC5DKhi2TALa/u7+/gFY="
     },
     "image-size": {
       "version": "0.5.5",
@@ -6960,6 +6990,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
+    "inline-style-prefixer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-6.0.0.tgz",
+      "integrity": "sha512-XTHvRUS4ZJNzC1GixJRmOlWSS45fSt+DJoyQC9ytj0WxQfcgofQtDtyKKYxHUqEsWCs+LIWftPF1ie7+i012Fg==",
+      "dev": true,
+      "requires": {
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -7173,8 +7212,7 @@
     "is-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
-      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
-      "dev": true
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
     },
     "is-generator-fn": {
       "version": "2.1.0",
@@ -8216,7 +8254,6 @@
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/jimp/-/jimp-0.16.1.tgz",
       "integrity": "sha512-+EKVxbR36Td7Hfd23wKGIeEyHbxShZDX6L8uJkgVW3ESA9GiTEPK08tG1XI2r/0w5Ch0HyJF5kPqF9K7EmGjaw==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.7.2",
         "@jimp/custom": "^0.16.1",
@@ -8228,16 +8265,14 @@
         "regenerator-runtime": {
           "version": "0.13.7",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==",
-          "dev": true
+          "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
         }
       }
     },
     "jpeg-js": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/jpeg-js/-/jpeg-js-0.4.2.tgz",
-      "integrity": "sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==",
-      "dev": true
+      "integrity": "sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw=="
     },
     "js-base64": {
       "version": "2.6.4",
@@ -8245,6 +8280,12 @@
       "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==",
+      "dev": true
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8612,7 +8653,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz",
       "integrity": "sha512-8UyQoYmdRDy81Brz6aLAUhfZLwr5zV0L3taTQ4hju7m6biuwiWiJXjPhBJxbUQJA8PrkvJ/7Enqmwk2sM14soA==",
-      "dev": true,
       "requires": {
         "buffer-equal": "0.0.1",
         "mime": "^1.3.4",
@@ -8627,8 +8667,7 @@
         "mime": {
           "version": "1.6.0",
           "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
-          "dev": true
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
         }
       }
     },
@@ -8813,12 +8852,24 @@
         }
       }
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
+    "memoize-one": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+      "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==",
+      "dev": true
+    },
     "memory-fs": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
@@ -8941,7 +8992,6 @@
       "version": "2.19.0",
       "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
       "integrity": "sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=",
-      "dev": true,
       "requires": {
         "dom-walk": "^0.1.0"
       }
@@ -8964,8 +9014,7 @@
     "minimist": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
     "mitt": {
       "version": "1.1.2",
@@ -8998,7 +9047,6 @@
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
       "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
-      "dev": true,
       "requires": {
         "minimist": "^1.2.5"
       }
@@ -9037,6 +9085,22 @@
       "dev": true,
       "optional": true
     },
+    "nano-css": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.1.tgz",
+      "integrity": "sha512-ENPIyNzANQRyYVvb62ajDd7PAyIgS2LIUnT9ewih4yrXSZX4hKoUwssy8WjUH++kEOA5wUTMgNnV7ko5n34kUA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2",
+        "csstype": "^3.0.6",
+        "fastest-stable-stringify": "^2.0.2",
+        "inline-style-prefixer": "^6.0.0",
+        "rtl-css-js": "^1.14.0",
+        "sourcemap-codec": "^1.4.8",
+        "stacktrace-js": "^2.0.2",
+        "stylis": "^4.0.6"
+      }
+    },
     "nanoid": {
       "version": "3.1.20",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz",
@@ -9387,8 +9451,7 @@
     "omggif": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.10.tgz",
-      "integrity": "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw==",
-      "dev": true
+      "integrity": "sha512-LMJTtvgc/nugXj0Vcrrs68Mn2D1r0zf630VNtqtpI1FEO7e+O9FP4gqs9AcnBaSEeoHIPm28u6qgPR0oyEpGSw=="
     },
     "on-finished": {
       "version": "2.3.0",
@@ -9555,8 +9618,7 @@
     "pako": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
-      "dev": true
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
     },
     "parent-module": {
       "version": "1.0.1",
@@ -9570,20 +9632,17 @@
     "parse-bmfont-ascii": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/parse-bmfont-ascii/-/parse-bmfont-ascii-1.0.6.tgz",
-      "integrity": "sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU=",
-      "dev": true
+      "integrity": "sha1-Eaw8P/WPfCAgqyJ2kHkQjU36AoU="
     },
     "parse-bmfont-binary": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/parse-bmfont-binary/-/parse-bmfont-binary-1.0.6.tgz",
-      "integrity": "sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY=",
-      "dev": true
+      "integrity": "sha1-0Di0dtPp3Z2x4RoLDlOiJ5K2kAY="
     },
     "parse-bmfont-xml": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/parse-bmfont-xml/-/parse-bmfont-xml-1.1.4.tgz",
       "integrity": "sha512-bjnliEOmGv3y1aMEfREMBJ9tfL3WR0i0CKPj61DnSLaoxWR3nLrsQrEbCId/8rF4NyRF0cCqisSVXyQYWM+mCQ==",
-      "dev": true,
       "requires": {
         "xml-parse-from-string": "^1.0.0",
         "xml2js": "^0.4.5"
@@ -9592,8 +9651,7 @@
     "parse-headers": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.3.tgz",
-      "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA==",
-      "dev": true
+      "integrity": "sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA=="
     },
     "parse-json": {
       "version": "2.2.0",
@@ -9696,8 +9754,7 @@
     "phin": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
-      "integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==",
-      "dev": true
+      "integrity": "sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA=="
     },
     "picomatch": {
       "version": "2.2.2",
@@ -9771,8 +9828,7 @@
     "pngjs": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz",
-      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==",
-      "dev": true
+      "integrity": "sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w=="
     },
     "popper.js": {
       "version": "1.16.1",
@@ -10069,8 +10125,7 @@
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
-      "dev": true
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
       "version": "2.0.1",
@@ -10315,6 +10370,44 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-universal-interface": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/react-universal-interface/-/react-universal-interface-0.6.2.tgz",
+      "integrity": "sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==",
+      "dev": true
+    },
+    "react-use": {
+      "version": "17.2.1",
+      "resolved": "https://registry.npmjs.org/react-use/-/react-use-17.2.1.tgz",
+      "integrity": "sha512-9r51/at7/Nr/nEP4CsHz+pl800EAqhIY9R6O68m68kaWc8slDAfx1UrIedQqpsb4ImddFYb+6hF1i5Vj4u4Cnw==",
+      "dev": true,
+      "requires": {
+        "@types/js-cookie": "^2.2.6",
+        "@xobotyi/scrollbar-width": "^1.9.5",
+        "copy-to-clipboard": "^3.3.1",
+        "fast-deep-equal": "^3.1.3",
+        "fast-shallow-equal": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "nano-css": "^5.3.1",
+        "react-universal-interface": "^0.6.2",
+        "resize-observer-polyfill": "^1.5.1",
+        "screenfull": "^5.1.0",
+        "set-harmonic-interval": "^1.0.1",
+        "throttle-debounce": "^3.0.1",
+        "ts-easing": "^0.2.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "react-window": {
+      "version": "1.8.6",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz",
+      "integrity": "sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      }
+    },
     "read-config-file": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.0.0.tgz",
@@ -10839,6 +10932,12 @@
       "integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -10944,6 +11043,15 @@
       "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
       "dev": true
     },
+    "rtl-css-js": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.0.tgz",
+      "integrity": "sha512-Dl5xDTeN3e7scU1cWX8c9b6/Nqz3u/HgR4gePc1kWXYiQWVQbKCEyK6+Hxve9LbcJ5EieHy1J9nJCN3grTtGwg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -11157,6 +11265,12 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "screenfull": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.1.0.tgz",
+      "integrity": "sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==",
+      "dev": true
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -11364,6 +11478,12 @@
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
       "dev": true
     },
+    "set-harmonic-interval": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
+      "integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==",
+      "dev": true
+    },
     "set-immediate-shim": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
@@ -11697,6 +11817,12 @@
       "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
       "dev": true
     },
+    "sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
+    },
     "spdx-correct": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
@@ -11787,6 +11913,15 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "stack-generator": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
+      "integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
+      "dev": true,
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
     "stack-utils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.3.tgz",
@@ -11810,6 +11945,35 @@
       "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
       "dev": true
     },
+    "stacktrace-gps": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
+      "integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
+      "dev": true,
+      "requires": {
+        "source-map": "0.5.6",
+        "stackframe": "^1.1.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+          "dev": true
+        }
+      }
+    },
+    "stacktrace-js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
+      "integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
+      "dev": true,
+      "requires": {
+        "error-stack-parser": "^2.0.6",
+        "stack-generator": "^2.0.5",
+        "stacktrace-gps": "^3.0.4"
+      }
+    },
     "stat-mode": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-1.0.0.tgz",
@@ -12046,6 +12210,12 @@
         }
       }
     },
+    "stylis": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.7.tgz",
+      "integrity": "sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA==",
+      "dev": true
+    },
     "sumchecker": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
@@ -12558,6 +12728,12 @@
       "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz",
+      "integrity": "sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==",
+      "dev": true
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -12567,14 +12743,12 @@
     "timm": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/timm/-/timm-1.7.1.tgz",
-      "integrity": "sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw==",
-      "dev": true
+      "integrity": "sha512-IjZc9KIotudix8bMaBW6QvMuq64BrJWFs1+4V0lXwWGQZwH+LnX87doAYhem4caOEusRP9/g6jVDQmZ8XOk1nw=="
     },
     "tinycolor2": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.2.tgz",
-      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==",
-      "dev": true
+      "integrity": "sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA=="
     },
     "tmpl": {
       "version": "1.0.4",
@@ -12670,6 +12844,12 @@
         "to-no-case": "^1.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI=",
+      "dev": true
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -12725,6 +12905,12 @@
         "utf8-byte-length": "^1.0.1"
       }
     },
+    "ts-easing": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
+      "integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==",
+      "dev": true
+    },
     "ts-jest": {
       "version": "26.5.2",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-26.5.2.tgz",
@@ -12854,8 +13040,7 @@
     "tslib": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
-      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
-      "dev": true
+      "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
     },
     "tslint": {
       "version": "6.1.3",
@@ -13258,7 +13443,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/utif/-/utif-2.0.1.tgz",
       "integrity": "sha512-Z/S1fNKCicQTf375lIP9G8Sa1H/phcysstNrrSdZKj1f9g58J4NMgb5IgiEZN9/nLMPDwF0W7hdOe9Qq2IYoLg==",
-      "dev": true,
       "requires": {
         "pako": "^1.0.5"
       }
@@ -14066,7 +14250,6 @@
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.6.0.tgz",
       "integrity": "sha512-/eCGLb5rxjx5e3mF1A7s+pLlR6CGyqWN91fv1JgER5mVWg1MZmlhBvy9kjcsOdRk8RrIujotWyJamfyrp+WIcA==",
-      "dev": true,
       "requires": {
         "global": "~4.4.0",
         "is-function": "^1.0.1",
@@ -14083,14 +14266,12 @@
     "xml-parse-from-string": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/xml-parse-from-string/-/xml-parse-from-string-1.0.1.tgz",
-      "integrity": "sha1-qQKekp09vN7RafPG4oI42VpdWig=",
-      "dev": true
+      "integrity": "sha1-qQKekp09vN7RafPG4oI42VpdWig="
     },
     "xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
       "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
-      "dev": true,
       "requires": {
         "sax": ">=0.6.0",
         "xmlbuilder": "~11.0.0"
@@ -14099,8 +14280,7 @@
     "xmlbuilder": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
-      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==",
-      "dev": true
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
     },
     "xmlchars": {
       "version": "2.2.0",
@@ -14111,8 +14291,7 @@
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "dev": true
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
     },
     "y18n": {
       "version": "5.0.5",
diff --git a/package.json b/package.json
index 810a447..ff1c518 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,8 @@
   "scripts": {
     "lint": "tsc --noEmit && eslint --ext .js,.jsx,.ts,.tsx modules",
     "tscw": "tsc -w",
-    "dev": "tsc && cross-env NODE_ENV=development electron .",
-    "build": "rimraf lib dist dist && tsc && cross-env NODE_ENV=production webpack --mode=production --config lib/webpack.config.js",
+    "dev": "tsc && cross-env IMAGINE_ENV=development electron .",
+    "build": "rimraf lib dist dist && tsc && cross-env IMAGINE_ENV=production webpack --mode=production --config lib/webpack.config.js",
     "start": "npm run build && electron .",
     "pack": "npm run build && electron-builder --dir",
     "release": "npm run build && electron-builder --publish always",
@@ -33,6 +33,7 @@
     "@types/react-dom": "^17.0.1",
     "@types/react-redux": "^7.1.16",
     "@types/react-transition-group": "^4.4.1",
+    "@types/react-window": "^1.8.2",
     "@types/redux-actions": "^2.6.1",
     "@types/semver": "^7.3.4",
     "@types/uuid": "^8.3.0",
@@ -44,7 +45,7 @@
     "copy-webpack-plugin": "^7.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.0.2",
-    "electron": "^11.3.0",
+    "electron": "^11.4.4",
     "electron-builder": "^22.9.1",
     "electron-devtools-installer": "^3.1.1",
     "eslint": "^7.19.0",
@@ -55,7 +56,6 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-unicorn": "^24.0.0",
     "jest": "^26.6.3",
-    "jimp": "^0.16.1",
     "less": "^4.1.1",
     "less-loader": "^8.0.0",
     "pixelmatch": "^5.2.1",
@@ -65,6 +65,8 @@
     "react-redux": "^7.2.2",
     "react-refresh": "^0.9.0",
     "react-transition-group": "^4.4.1",
+    "react-use": "^17.2.1",
+    "react-window": "^1.8.6",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
     "reselect": "^4.0.0",
@@ -74,7 +76,6 @@
     "ts-jest": "^26.5.2",
     "ts-loader": "^8.0.17",
     "ts-node": "^9.1.1",
-    "tslib": "^2.1.0",
     "tslint": "^6.1.3",
     "typescript": "^4.2.2",
     "webpack": "^5.24.1",
@@ -88,13 +89,16 @@
     "electron-updater": "^4.3.5",
     "file-type": "^16.2.0",
     "fs-extra": "^9.1.0",
+    "jimp": "^0.16.1",
     "lodash": "^4.17.21",
-    "raw-body": "^2.4.1"
+    "raw-body": "^2.4.1",
+    "tslib": "^2.1.0"
   },
   "build": {
     "files": [
+      "index.html",
       "lib",
-      "dist",
+      "dist/web",
       "bin/${os}/**/*"
     ],
     "asarUnpack": [
diff --git a/tsconfig.json b/tsconfig.json
index 401b28b..d73db27 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -56,5 +56,5 @@
     // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
     // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
   },
-  "include": ["modules", "types"]
+  "include": ["modules", "typings"]
 }
diff --git a/types/child-process-promise.d.ts b/typings/child-process-promise.d.ts
similarity index 100%
rename from types/child-process-promise.d.ts
rename to typings/child-process-promise.d.ts
diff --git a/types/file-loader.d.ts b/typings/file-loader.d.ts
similarity index 100%
rename from types/file-loader.d.ts
rename to typings/file-loader.d.ts
diff --git a/types/global.d.ts b/typings/global.d.ts
similarity index 100%
rename from types/global.d.ts
rename to typings/global.d.ts