✨ Added loading page and title bar

src/main/app.ts

@@ -1,5 +1,5 @@
 /* eslint-disable global-require */
-import { app, BrowserWindow, shell } from 'electron';
+import { app, BrowserWindow, ipcMain, Menu, shell, Tray } from 'electron';
 import fs from 'fs';
 import path from 'path';
 
@@ -13,14 +13,16 @@ export default class WaveCordApp {
 
   public window: BrowserWindow | null = null;
 
+  public tray: Tray | null = null;
+
   public token: string = '';
 
   public constructor() {
     app.setPath('userData', path.join(app.getPath('appData'), 'WaveCord'));
 
     this.resourcesPath = app.isPackaged
       ? path.join(process.resourcesPath, 'assets')
-      : path.join(__dirname, '../../../assets');
+      : path.join(__dirname, '../../assets');
     this.instanceLock = app.requestSingleInstanceLock();
 
     if (!this.instanceLock) {
@@ -69,10 +71,12 @@ export default class WaveCordApp {
       webPreferences: {
         preload: app.isPackaged
           ? path.join(__dirname, 'preload.js')
-          : path.join(__dirname, '../../../.erb/dll/preload.js'),
+          : path.join(__dirname, '../../.erb/dll/preload.js'),
       },
     });
 
+    this.initTray();
+
     this.window.loadURL(WaveCordApp.resolveHtmlPath('index.html'));
 
     this.window.on('ready-to-show', () => {
@@ -93,6 +97,38 @@ export default class WaveCordApp {
       shell.openExternal(edata.url);
       return { action: 'deny' };
     });
+
+    /* Ipc */
+
+    ipcMain.on('WINDOW_MINIMIZE', () => {
+      this.window?.minimize();
+    });
+
+    ipcMain.on('WINDOW_MAXIMIZE', () => {
+      if (this.window === null) return;
+
+      if (this.window.isMaximized()) this.window.unmaximize();
+      else this.window.maximize();
+    });
+
+    ipcMain.on('APP_EXIT', () => {
+      app.exit();
+    });
+  }
+
+  private initTray() {
+    this.tray = new Tray(path.join(this.resourcesPath, 'icon.png'));
+    const contextMenu = Menu.buildFromTemplate([
+      { type: 'separator' },
+      {
+        label: 'Quit',
+        type: 'normal',
+        click: () => {
+          app.quit();
+        },
+      },
+    ]);
+    this.tray.setContextMenu(contextMenu);
   }
 
   private loadUser() {

src/main/preload.ts

@@ -2,7 +2,7 @@
 /* eslint no-unused-vars: off */
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
-export type Channels = 'ipc-example';
+export type Channels = 'WINDOW_MINIMIZE' | 'WINDOW_MAXIMIZE' | 'APP_EXIT';
 
 const electronHandler = {
   ipcRenderer: {

src/renderer/App.tsx

@@ -1,49 +1,15 @@
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
-import icon from '../../assets/icon.svg';
-import './App.css';
-
-function Hello() {
-  return (
-    <div>
-      <div className="Hello">
-        <img width="200" alt="icon" src={icon} />
-      </div>
-      <h1>electron-react-boilerplate</h1>
-      <div className="Hello">
-        <a
-          href="https://electron-react-boilerplate.js.org/"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <button type="button">
-            <span role="img" aria-label="books">
-              📚
-            </span>
-            Read our docs
-          </button>
-        </a>
-        <a
-          href="https://github.com/sponsors/electron-react-boilerplate"
-          target="_blank"
-          rel="noreferrer"
-        >
-          <button type="button">
-            <span role="img" aria-label="folded hands">
-              🙏
-            </span>
-            Donate
-          </button>
-        </a>
-      </div>
-    </div>
-  );
-}
+import LoadingPage from './pages/Loading';
+import './styles/global.css';
+import './styles/vars.css';
+import Topbar from './components/Topbar';
 
 export default function App() {
   return (
     <Router>
+      <Topbar />
       <Routes>
-        <Route path="/" element={<Hello />} />
+        <Route path="/" element={<LoadingPage />} />
       </Routes>
     </Router>
   );

src/renderer/components/Topbar/Topbar.css

@@ -0,0 +1,18 @@
+.topbar__bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--topbar-height);
+  -webkit-app-region: drag;
+  z-index: 100;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 6px;
+}
+
+.topbar__button {
+  -webkit-app-region: no-drag;
+  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(329deg)
+    brightness(104%) contrast(104%);
+}

src/renderer/components/Topbar/index.tsx

@@ -0,0 +1,44 @@
+import MinimizeIcon from '../../../../assets/app/icons/topbar/minimize.svg';
+import MaximizeIcon from '../../../../assets/app/icons/topbar/maximize.svg';
+import CloseIcon from '../../../../assets/app/icons/topbar/x.svg';
+import './Topbar.css';
+
+export default function Topbar() {
+  const handleMinimize = () => {
+    window.electron.ipcRenderer.sendMessage('WINDOW_MINIMIZE');
+  };
+
+  const handleMaximize = () => {
+    window.electron.ipcRenderer.sendMessage('WINDOW_MAXIMIZE');
+  };
+
+  const handleClose = () => {
+    window.electron.ipcRenderer.sendMessage('APP_EXIT');
+  };
+
+  return (
+    <div className="topbar__bar">
+      <img
+        className="topbar__button"
+        src={CloseIcon}
+        alt="Close Button"
+        onClick={handleClose}
+        role="presentation"
+      />
+      <img
+        className="topbar__button"
+        src={MaximizeIcon}
+        alt="Maximize Button"
+        onClick={handleMaximize}
+        role="presentation"
+      />
+      <img
+        className="topbar__button"
+        src={MinimizeIcon}
+        alt="Minimize Button"
+        onClick={handleMinimize}
+        role="presentation"
+      />
+    </div>
+  );
+}

src/renderer/index.ejs

@@ -1,14 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="script-src 'self' 'unsafe-inline'"
+      content="default-src 'self';
+          script-src 'self';
+          font-src 'self' https://fonts.gstatic.com;
+          style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;"
     />
-    <title>Hello Electron React!</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+
+    <title>WaveCord</title>
   </head>
   <body>
-    <div id="root"></div>
+    <div id="root" style="width: 100vw; height: 100vh; margin: 0"></div>
   </body>
 </html>

src/renderer/pages/Loading/Loading.css

@@ -0,0 +1,46 @@
+.loading__container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.loading__title {
+  font-size: xxx-large;
+}
+
+.loading__loader {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  background: linear-gradient(0deg, rgba(255, 61, 0, 0.2) 33%, #ff3d00 100%);
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+.loading__loader::after {
+  content: '';
+  box-sizing: border-box;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: #263238;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/renderer/pages/Loading/index.tsx

@@ -0,0 +1,10 @@
+import './Loading.css';
+
+export default function LoadingPage() {
+  return (
+    <div className="loading__container">
+      <h1 className="loading__title">WaveCord</h1>
+      <span className="loading__loader" />
+    </div>
+  );
+}

src/renderer/styles/global.css

@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  background: var(--background);
+  color: var(--text);
+  font-family: 'Inter', sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+}
+
+a,
+p,
+h1,
+h2,
+h3 {
+  margin: 0;
+}

src/renderer/styles/vars.css

@@ -0,0 +1,16 @@
+:root[data-theme='light'] {
+  --text: #0a101a;
+  --background: #e2e9f4;
+  --primary: #273f63;
+  --secondary: #ce8298;
+  --accent: #b57745;
+}
+:root {
+  --text: #e5ebf5;
+  --background: #0b121c;
+  --primary: #9ab3d8;
+  --secondary: #7c3045;
+  --accent: #ba7d4b;
+
+  --topbar-height: 26px;
+}