update readme and screenshots.

README.md

@@ -1,3 +1,69 @@
 # SwitchHosts
 
-v4.0
+- [简体中文](README_cn.md)
+
+Homepage: [https://oldj.github.io/SwitchHosts/](https://oldj.github.io/SwitchHosts/)
+
+SwitchHosts is an App for managing hosts file, it is based on [Electron](http://electron.atom.io/)
+, [React](https://facebook.github.io/react/), [UmiJS](https://umijs.org/)
+, [Chakra UI](https://chakra-ui.com/), [CodeMirror](http://codemirror.net/), etc.
+
+## Screenshot
+
+<img src="https://raw.githubusercontent.com/oldj/SwitchHosts/master/screenshots/sh_light.png" alt="Capture" width="960">
+
+## Features
+
+- Switch hosts quickly
+- Syntax highlight
+- Remote hosts
+- Switch from system tray
+
+## Install
+
+### Download
+
+You can download the source code and build it yourself, or download the built version from following
+links:
+
+- [SwitchHosts Download Page (GitHub release)](https://github.com/oldj/SwitchHosts/releases)
+
+## Backup
+
+SwitchHosts stores data at `~/.SwitchHosts` (Or folder `.SwitchHosts` under the current user's home
+path on Windows), the `~/.SwitchHosts/data` folder contains data, while the `~/.SwitchHosts/config`
+folder contains various configuration information.
+
+## Develop and build
+
+### Development
+
+- Install [Node.js](https://nodejs.org/)
+- Change to the folder `./`, run `npm install` to install dependented libraries
+- Run `npm run dev` to start the development server
+- Then run `npm run start` to start the app for developing or debuging
+
+### Build and package
+
+- It is recommended to use [electron-builder](https://github.com/electron-userland/electron-builder)
+  for packaging
+- Go to the `./` folder
+- Run `npm run build`
+- Run `npm run make`, if everything goes well, the packaged files will be in the `./dist` folder.
+- This command may take several minutes to finish when you run it the first time, as it needs time
+  to download dependent files. You can download the dependencies
+  manually [here](https://github.com/electron/electron/releases),
+  or [Taobao mirror](https://npm.taobao.org/mirrors/electron/), then save the files to `~/.electron`
+  . You can check the [Electron Docs](http://electron.atom.io/docs/) for more infomation.
+
+```bash
+# build
+npm run build
+
+# make
+npm run make # the packed files will be in ./dist
+```
+
+## Copyright
+
+SwitchHosts is a free and open source software, it is released under the LGPL license.

README_cn.md

@@ -0,0 +1,64 @@
+# SwitchHosts
+
+- [English](README.md)
+
+项目主页：[https://oldj.github.io/SwitchHosts/](https://oldj.github.io/SwitchHosts/)
+
+SwitchHosts 是一个管理 hosts 文件的应用，基于 [Electron](http://electron.atom.io/)
+、[React](https://facebook.github.io/react/)、[UmiJS](https://umijs.org/)
+、[Chakra UI](https://chakra-ui.com/)、[CodeMirror](http://codemirror.net/) 等技术开发。
+
+## 截图
+
+<img src="https://raw.githubusercontent.com/oldj/SwitchHosts/master/screenshots/sh_light.png" alt="Capture" width="960">
+
+## 功能特性
+
+- 快速切换 hosts 方案
+- hosts 语法高亮
+- 支持从网络加载远程 hosts 配置
+- 可从系统菜单栏图标快速切换 hosts
+
+## 安装
+
+### 下载
+
+你可以下载源码并自行构建，也可以从以下地址下载已构建好的版本：
+
+- [SwitchHosts Download Page (GitHub release)](https://github.com/oldj/SwitchHosts/releases)
+
+## 数据备份
+
+SwitchHosts 的数据文件存储于 `~/.SwitchHosts` (Windows 下存储于用户个人文件夹下的 `.SwitchHosts` 文件夹），
+其中 `~/.SwitchHosts/data` 文件夹包含数据，`~/.SwitchHosts/config` 文件夹包含各项配置信息。
+
+## 开发以及构建
+
+### 开发
+
+- 安装 [Node.js](https://nodejs.org/)
+- 在项目根目录 `./` 下，运行 `npm install` 命令安装依赖
+- 运行 `npm run dev` 命令启动开发服务
+- 运行 `npm run start` 启动 App，即可开始开发及调试
+
+### 构建及打包
+
+- 推荐使用 [electron-builder](https://github.com/electron-userland/electron-builder) 进行打包
+- 转到项目根目录 './'
+- 运行 `npm run build`
+- 运行 `npm run make`，如果一切顺利，可在 `./dist` 目录下找到打包后的文件
+- 首次运行可能需要花费一些时间，因为需要下载相关依赖文件。你也可以从 [这儿](https://github.com/electron/electron/releases)
+  或者 [淘宝镜像](https://npm.taobao.org/mirrors/electron/) 手动下载，并保存到 `~/.electron`
+  目录下。更多信息可访问 [Electron 文档](http://electron.atom.io/docs/)。
+
+```bash
+# build
+npm run build
+
+# make
+npm run make # the packed files will be in ./dist
+```
+
+## 版权
+
+SwitchHosts 是一个免费开源软件，基于 LGPL 协议发布。

src/renderer/components/LeftPanel/index.tsx

@@ -18,11 +18,12 @@ interface Props {
 
 const Index = (props: Props) => {
   const { lang } = useModel('useI18n')
+  const { hosts_data } = useModel('useHostsData')
 
   const menu = new PopupMenu([
     {
       label: lang.hosts_add,
-      click() {
+      click () {
         agent.broadcast('add_new')
       },
     },
@@ -34,7 +35,7 @@ const Index = (props: Props) => {
       onContextMenu={() => menu.show()}
     >
       <List/>
-      <Trashcan/>
+      {hosts_data.trashcan.length > 0 ? <Trashcan/> : null}
     </div>
   )
 }

src/renderer/components/TopBar/index.less

@@ -37,5 +37,8 @@
 
 .read_only {
   color: var(--swh-font-color-weak);
-  font-size: 12px;
+  background-color: var(--swh-top-bar-read-only-bg);
+  border-radius: var(--swh-border-radius);
+  font-size: 10px;
+  padding: 2px 6px;
 }

src/renderer/components/Transfer.tsx

@@ -35,9 +35,9 @@ interface Props {
 const Transfer = (props: Props) => {
   const { dataSource, targetKeys, render, onChange } = props
   const { lang } = useModel('useI18n')
-  const [ right_keys, setRightKeys ] = useState<IdType[]>(targetKeys)
-  const [ left_selectd_keys, setLeftSelectedKeys ] = useState<IdType[]>([])
-  const [ right_selectd_keys, setRightSelectedKeys ] = useState<IdType[]>([])
+  const [right_keys, setRightKeys] = useState<IdType[]>(targetKeys)
+  const [left_selectd_keys, setLeftSelectedKeys] = useState<IdType[]>([])
+  const [right_selectd_keys, setRightSelectedKeys] = useState<IdType[]>([])
 
   const List = (list_props: IListProps) => {
     const { data, selected_keys, setSelectedKeys } = list_props
@@ -46,13 +46,14 @@ const Transfer = (props: Props) => {
       setSelectedKeys(
         selected_keys.includes(id) ?
           selected_keys.filter(i => i != id) :
-          [ ...selected_keys, id ],
+          [...selected_keys, id],
       )
     }
 
     return (
       <div className={styles.list}>
         {data.map(item => {
+          if (!item || !item.id) return null
           const is_selected = selected_keys.includes(item.id)
 
           return (
@@ -76,7 +77,7 @@ const Transfer = (props: Props) => {
   }
 
   const moveLeftToRight = () => {
-    let result = [ ...right_keys, ...left_selectd_keys ]
+    let result = [...right_keys, ...left_selectd_keys]
     setRightKeys(result)
     setLeftSelectedKeys([])
     onChange && onChange(result)

src/renderer/styles/themes/dark.less

@@ -12,6 +12,7 @@
   --swh-top-bar-height: 40px;
   --swh-top-tool-bar-height: 28px;
   --swh-top-bar-bg: #272b34;
+  --swh-top-bar-read-only-bg: #3c434e;
 
   // left
   --swh-left-panel-bg: #1f242a;

src/renderer/styles/themes/light.less

@@ -12,6 +12,7 @@
   --swh-top-bar-height: 40px;
   --swh-top-tool-bar-height: 28px;
   --swh-top-bar-bg: #fff;
+  --swh-top-bar-read-only-bg: #f5f5f5;
 
   // left
   --swh-left-panel-bg: #edebf1;