Tray icon (#15)

* Make focus keep the same layout

* Change issue template

* Tray icon

* Release 0.0.4

Author: manhtai

.github/ISSUE_TEMPLATE/1-Bug_report.md

@@ -51,17 +51,7 @@ labels: 'bug'
 
 <!--- Include as many relevant details about the environment you experienced the bug in -->
 
-- Node version :
-- electron-react-boilerplate version or branch :
-- Operating System and version :
-- Link to your project :
-
-<!---
-❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
-
-Donations will ensure the following:
-
-🔨 Long term maintenance of the project
-🛣 Progress on the roadmap
-🐛 Quick responses to bug reports and help requests
- -->
+- Node version:
+- PlainBelt version or branch:
+- Operating System and version:
+- Link to your project:

.github/ISSUE_TEMPLATE/2-Question.md

@@ -7,13 +7,3 @@ labels: 'question'
 ## Summary
 
 <!-- What do you need help with? -->
-
-<!---
-❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
-
-Donations will ensure the following:
-
-🔨 Long term maintenance of the project
-🛣 Progress on the roadmap
-🐛 Quick responses to bug reports and help requests
- -->

.github/ISSUE_TEMPLATE/3-Feature_request.md

@@ -1,15 +1,5 @@
 ---
 name: Feature request
-about: You want something added to the boilerplate. 🎉
+about: You want something added to PlainBelt. 🎉
 labels: 'enhancement'
 ---
-
-<!---
-❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️
-
-Donations will ensure the following:
-
-🔨 Long term maintenance of the project
-🛣 Progress on the roadmap
-🐛 Quick responses to bug reports and help requests
- -->

README.md

@@ -7,8 +7,9 @@
 ## Features
 
 - [x] Multiple plain text tools
+- [x] Tray icon
 - [ ] Clipboard auto detection
-- [ ] Tray icon for quick action
+- [ ] Global hotkey
 
 ## Tools list
 

src/App.global.css

@@ -8,10 +8,10 @@
   }
 
   input {
-    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2;
+    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset;
   }
 
   textarea {
-    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2;
+    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2 focus:ring-inset;
   }
 }

src/components/Main.tsx

@@ -101,7 +101,7 @@ const Main = () => {
         {/* Left sidebar */}
         <nav className="flex flex-col w-1/4 overflow-x-hidden overflow-y-auto bg-gray-300">
           {/* Search */}
-          <div className="flex items-center px-3 mx-3 mt-6 space-x-1 text-gray-400 bg-gray-200 rounded-md focus-within:text-gray-600 focus-within:ring-2 focus-within:ring-blue-500">
+          <div className="flex items-center px-2 mx-3 mt-6 space-x-1 text-gray-400 bg-gray-200 rounded-md focus-within:text-gray-600 focus-within:ring-2 focus-within:ring-blue-500">
             <FontAwesomeIcon icon="search" />
             <input
               type="text"

src/main.dev.ts

@@ -11,7 +11,15 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import path from 'path';
-import { app, BrowserWindow, dialog, ipcMain, shell } from 'electron';
+import {
+  app,
+  BrowserWindow,
+  dialog,
+  ipcMain,
+  nativeTheme,
+  shell,
+  Tray,
+} from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import { FileFilter, IpcMainInvokeEvent } from 'electron/main';
@@ -29,6 +37,7 @@ export default class AppUpdater {
 }
 
 let mainWindow: BrowserWindow | null = null;
+let tray = null;
 
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
@@ -115,6 +124,25 @@ const createWindow = async () => {
   new AppUpdater();
 };
 
+const getIcon = () => {
+  if (process.platform === 'win32') return '16x16.png';
+  if (nativeTheme.shouldUseDarkColors) return '16x16.png';
+  return '16x16.png';
+};
+
+const createTray = async () => {
+  tray = new Tray(path.join(__dirname, '../assets/icons', getIcon()));
+
+  tray.on('click', async () => {
+    if (mainWindow == null) {
+      await createWindow();
+    }
+    mainWindow?.show();
+  });
+
+  tray.setToolTip('PlainBelt');
+};
+
 /**
  * Handlers events from React
  */
@@ -179,7 +207,7 @@ app.on('window-all-closed', () => {
   }
 });
 
-app.whenReady().then(createWindow).catch(console.log);
+app.whenReady().then(createWindow).then(createTray).catch(console.log);
 
 app.on('activate', () => {
   // On macOS it's common to re-create a window in the app when the

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plainbelt",
   "productName": "plainbelt",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A toolbelt for all your plain text",
   "main": "./main.prod.js",
   "author": {