feat: implementing window component

ailtonloures · Oct 1, 2024 · 2c92ae4 · 2c92ae4
1 parent 8005f8b
commit 2c92ae4
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 36 deletions.
diff --git a/src/main/app/components/tray.js b/src/main/app/components/tray.js
@@ -1,23 +1,35 @@
-import { dialog, Tray as ElectronTray, Menu } from 'electron/main';
+import { dialog, Tray as ElectronTray, Menu, nativeImage } from 'electron/main';
 import { spawn } from 'node:child_process';
-import { basename } from 'node:path';
+import { basename, resolve } from 'node:path';
 
 /**
  * Define Tray application component
  * @param {import('..').Context} context
  */
-export const Tray = ({
-	app,
-	info: { title, icon },
-	store: { bookmarkStore },
-}) => {
+export const Tray = ({ app, store: { bookmarkStore } }) => {
 	/**
 	 * Electron Tray instance
-	 * @type {Electron.Tray|undefined} tray
+	 * @type {Electron.Tray|undefined}
 	 * @private
 	 */
 	let tray = null;
 
+	/**
+	 * Get tray title
+	 * @type {string}
+	 * @private
+	 */
+	const title = `${app.getName()} - v${app.getVersion()}`;
+
+	/**
+	 * Get tray icon
+	 * @type {Electron.NativeImage}
+	 * @private
+	 */
+	const icon = nativeImage.createFromPath(
+		resolve('src', 'resources', 'icons', 'tray-icon.png')
+	);
+
 	/**
 	 * Create a new tray instance
 	 */
@@ -34,6 +46,7 @@ export const Tray = ({
 
 	/**
 	 * Create a new context menu for the tray
+	 * @private
 	 */
 	function createContextMenu() {
 		return Menu.buildFromTemplate([

diff --git a/src/main/app/components/window.js b/src/main/app/components/window.js
@@ -1,5 +1,49 @@
+import { BrowserWindow, nativeImage } from 'electron/main';
+import { resolve } from 'node:path';
+
 /**
  * Define Window application component
  * @param {import('..').Context} context
  */
-export const Window = () => {};
+export const Window = ({ app }) => {
+	/**
+	 * Electron Browser window instance
+	 * @type {Electron.BrowserWindow|undefined}
+	 */
+	let win = null;
+
+	/**
+	 * Get window title
+	 * @type {string}
+	 * @private
+	 */
+	const title = app.getName();
+
+	/**
+	 * Get window icon
+	 * @type {Electron.NativeImage}
+	 * @private
+	 */
+	const icon = nativeImage.createFromPath(
+		resolve('src', 'resources', 'icons', 'tray-icon.png')
+	);
+
+	/**
+	 * Create a new window instance
+	 */
+	function render() {
+		win = new BrowserWindow({
+			icon,
+			title,
+			width: 520,
+			height: 400,
+			webPreferences: {
+				preload: resolve('src', 'main', 'preload.js'),
+			},
+		});
+
+		win.loadFile(resolve('src', 'renderer', 'index.html'));
+	}
+
+	return { render, win };
+};
diff --git a/src/main/app/index.js b/src/main/app/index.js
@@ -1,15 +1,6 @@
-import { nativeImage } from 'electron/main';
-import { resolve } from 'node:path';
-
-import { Tray } from './components/index.js';
+import { Tray, Window } from './components/index.js';
 import { BookmarkStore } from './store/index.js';
 
-/**
- * @typedef Info
- * @property {string} title
- * @property {Electron.NativeImage} icon
- */
-
 /**
  * @typedef Store
  * @property {BookmarkStore} bookmarkStore
@@ -18,7 +9,6 @@ import { BookmarkStore } from './store/index.js';
 /**
  * @typedef Context
  * @property {Electron.App} app
- * @property {Info} info
  * @property {Store} store
  */
 
@@ -27,19 +17,6 @@ import { BookmarkStore } from './store/index.js';
  * @param {Electron.App} app
  */
 export const App = (app) => {
-	/**
-	 * Get application info.
-	 * @return {Info}
-	 */
-	function getInfo() {
-		return {
-			title: `${app.getName()} - ${app.getVersion()}`,
-			icon: nativeImage.createFromPath(
-				resolve('src', 'resources', 'icons', 'main-icon.png')
-			),
-		};
-	}
-
 	/**
 	 * Get store configuration.
 	 * @return {Store}
@@ -51,14 +28,16 @@ export const App = (app) => {
 	function start() {
 		const context = {
 			app,
-			info: getInfo(),
 			store: getStore(),
 		};
 
 		app
 			.whenReady()
 			.then(() => console.log('Application is ready\n'))
-			.then(() => Tray(context).render());
+			.then(() => {
+				Tray(context).render();
+				Window(context).render();
+			});
 	}
 
 	return {

diff --git a/src/main/app/store/config/store.js b/src/main/app/store/config/store.js
@@ -5,6 +5,7 @@ import ElectronStore from 'electron-store';
  */
 export const Store = {
 	/**
+	 * Instance of Store
 	 * @type {ElectronStore|null}
 	 * @private
 	 */

diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -3,7 +3,6 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Document</title>
 	</head>
 
 	<body></body>

diff --git a/src/resources/icons/main-icon.png → src/resources/icons/tray-icon.png b/src/resources/icons/main-icon.png → src/resources/icons/tray-icon.png
diff --git a/src/resources/icons/win-icon.png b/src/resources/icons/win-icon.png