design

.erb/configs/.eslintrc

@@ -4,5 +4,6 @@
     "global-require": "off",
     "import/no-dynamic-require": "off",
     "prettier/prettier": 0,
+    "import/prefer-default-export": "off"
   }
 }

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     // Since React 17 and typescript 4.1 you can safely disable the rule
     'react/react-in-jsx-scope': 'off',
     'prettier/prettier': 0,
+    "import/prefer-default-export": "off"
   },
   parserOptions: {
     ecmaVersion: 2020,

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx lint-staged

package-lock.json

@@ -14,7 +14,9 @@
         "history": "^5.3.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
-        "react-router-dom": "^6.3.0"
+        "react-icons": "^4.3.1",
+        "react-router-dom": "^6.3.0",
+        "tailwind-scrollbar-hide": "^1.1.7"
       },
       "devDependencies": {
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
@@ -14536,6 +14538,15 @@
         "react": "^18.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://npm.zone51.tf/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -16071,6 +16082,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/tailwind-scrollbar-hide": {
+      "version": "1.1.7",
+      "resolved": "https://npm.zone51.tf/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz",
+      "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==",
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.0.24",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
@@ -27992,6 +28009,12 @@
         "scheduler": "^0.21.0"
       }
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://npm.zone51.tf/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -29081,6 +29104,11 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
+    "tailwind-scrollbar-hide": {
+      "version": "1.1.7",
+      "resolved": "https://npm.zone51.tf/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz",
+      "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA=="
+    },
     "tailwindcss": {
       "version": "3.0.24",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",

package.json

@@ -32,13 +32,7 @@
   },
   "build": {
     "extraResources": [
-      {
-        "from": "./src/extraResources/",
-        "to": "extraResources",
-        "filter": [
-          "**/*"
-        ]
-      }
+      "./assets/**"
     ],
     "productName": "ElectronReact",
     "appId": "org.erb.ElectronReact",
@@ -94,9 +88,6 @@
       "buildResources": "assets",
       "output": "release/build"
     },
-    "extraResources": [
-      "./assets/**"
-    ],
     "publish": {
       "provider": "github",
       "owner": "electron-react-boilerplate",
@@ -248,7 +239,9 @@
     "history": "^5.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-router-dom": "^6.3.0"
+    "react-icons": "^4.3.1",
+    "react-router-dom": "^6.3.0",
+    "tailwind-scrollbar-hide": "^1.1.7"
   },
   "devEngines": {
     "node": ">=14.x",

src/main/ipcs/bs-download-ipcs.ts

@@ -42,8 +42,10 @@ ipcMain.on('bs-download.start', async (event, args: InitDownloadInfoInterface) =
     console.log(out);
 
     if(out[0] === "[Progress]"){ event.reply('bs-download.progress', out[1]); }
-    else if(out[0] === "[Password]" || out[0].includes('[Password]')){ event.reply('bs-download.ask-password'); }
-    else if(out[0] === "[any]"){ event.reply('bs-download.progress', out); }
+    else if(out[0] === "[Password]"){ event.reply('bs-download.ask-password'); }
+    else if(out[0] === "[2FA]"){ event.reply('bs-download.ask-2fa'); }
+    else if(out[0] === "[Guard]"){ event.reply('bs-download.ask-guard'); }
+    else if(out[0] === "[Error]"){ event.reply('bs-download.error', out); }
 
   });
 

src/main/ipcs/custom-ipcs.ts

@@ -1 +1,2 @@
-import './bs-download-ipcs';
+import './bs-download-ipcs';
+import './window-controls-ipcs';

src/main/ipcs/window-controls-ipcs.ts

@@ -0,0 +1,19 @@
+import { ipcMain } from 'electron';
+import { getMainWindow } from '../main';
+
+ipcMain.on('window.close', () => {
+  getMainWindow()?.close();
+});
+
+ipcMain.on('window.maximize', () => {
+  getMainWindow()?.maximize();
+});
+
+ipcMain.on('window.minimize', () => {
+  getMainWindow()?.minimize();
+});
+
+ipcMain.on('window.reset', () => {
+  console.log('aaaaaa');
+  getMainWindow()?.restore();
+});

src/main/main.ts

@@ -26,6 +26,10 @@ export default class AppUpdater {
 
 let mainWindow: BrowserWindow | null = null;
 
+export function getMainWindow(): BrowserWindow | null{
+  return mainWindow;
+}
+
 ipcMain.on('ipc-example', async (event, arg) => {
   const msgTemplate = (pingPong: string) => `IPC test: ${pingPong}`;
   console.log(msgTemplate(arg));
@@ -74,6 +78,10 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
+    minWidth: 800,
+    minHeight: 500,
+    frame: false,
+    titleBarOverlay: false,
     icon: getAssetPath('icon.png'),
     webPreferences: {
       preload: app.isPackaged
@@ -82,6 +90,8 @@ const createWindow = async () => {
     },
   });
 
+
+
   mainWindow.loadURL(resolveHtmlPath('index.html'));
 
   mainWindow.on('ready-to-show', () => {

src/main/preload.ts

@@ -1,6 +1,6 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron';
 
-export type Channels = 'bs-download.start'|'bs-download.send-input';
+export type Channels = 'bs-download.start'|'bs-download.send-input'|'window.close'|'window.maximize'|'window.minimize'|'window.reset';
 
 export type ReplyChannels = 'bs-download.ask-password';
 

src/renderer/App.tsx

@@ -1,8 +1,17 @@
-import 'tailwindcss/tailwind.css';
+import { NavBar } from "./components/nav-bar/nav-bar.component";
+import TitleBar from "./components/title-bar/title-bar.component";
+
 export default function App() {
+
   return (
-    <div className="bg-red-300 text-center">
-      coucou
+    <div className="w-screen h-screen overflow-hidden flex dark:bg-[#202225]">
+      <NavBar/>
+      <div className="flex flex-col grow">
+        <TitleBar/>
+        <div className="bg-[#2C2F33] rounded-tl-lg grow">
+          a
+        </div>
+      </div>
     </div>
   );
 }

src/renderer/components/nav-bar/nav-bar.component.css

@@ -0,0 +1,23 @@
+#logo-bottom{
+  position: absolute;
+  /* width: 200px; height: 200px; */
+  display: block;
+  background-image: url('../../../../assets/logo1.png');
+  -webkit-mask-image: url('../../../../assets/logo1.png');
+  -webkit-mask-size: cover;
+  -webkit-mask-mode: alpha;
+  background-blend-mode: luminosity;
+  background-size: 100%;
+}
+
+#logo-top{
+  position: absolute;
+  /* width: 200px; height: 200px; */
+  display: block;
+  background-image: url('../../../../assets/logo2.png');
+  -webkit-mask-image: url('../../../../assets/logo2.png');
+  -webkit-mask-size: cover;
+  -webkit-mask-mode: alpha;
+  background-blend-mode: luminosity;
+  background-size: 100%;
+}

src/renderer/components/nav-bar/nav-bar.component.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { FaPlus, } from 'react-icons/fa';
+import { AiFillSetting } from 'react-icons/ai'
+import './nav-bar.component.css'
+
+export function NavBar() {
+  return (
+    <div className='flex flex-col items-center w-fit h-full max-h-full p-2 bg-gray-200 dark:bg-[#202225]'>
+      <div className='w-full flex items-start content-start justify-center relative mb-3'>
+        <div className='relative aspect-square w-16'>
+          <span id='logo-bottom' className='bg-green-400 aspect-square w-16'> </span>
+          <span id='logo-top' className='bg-purple-500 aspect-square w-16'> </span>
+        </div>
+      </div>
+      <div className='grow overflow-y-scroll scrollbar-hide'>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div><div className='grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+        <div className='cursor-pointer grow relative pr-4 pl-4 w-full h-fit flex justify-center items-center content-center pt-2 pb-2 text-center rounded-full overflow-hidden hover:bg-[#2C2F33]'>
+          <span className='font-bold text-gray-200'>1.19.0</span>
+        </div>
+
+      </div>
+      <div className='w-full p-2 flex flex-col items-center content-center justify-start'>
+        <span className='cursor-pointer mb-3'>
+          <FaPlus className='text-2xl text-blue-500 drop-shadow-lg'/>
+        </span>
+        <span className='cursor-pointer'>
+          <AiFillSetting className='text-2xl text-blue-500 drop-shadow-lg'/>
+        </span>
+
+      </div>
+    </div>
+  )
+}

src/renderer/components/title-bar/title-bar.component.css

@@ -0,0 +1,34 @@
+#titlebar {
+  height: 30px;
+  width: 100%;
+}
+
+#titlebar #drag-region {
+  -webkit-app-region: drag;
+}
+
+#window-title{
+  height: 100%;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+
+#window-controls {
+  display: grid;
+  grid-template-columns: repeat(3, 46px);
+  height: 100%;
+}
+
+#window-controls .button {
+  grid-row: 1 / span 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+#close-button:hover {
+  background: #E81123 !important;
+}

src/renderer/components/title-bar/title-bar.component.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import './title-bar.component.css'
+
+export default function TitleBar() {
+
+  const [maximized, setMaximized] = useState(false);
+
+  const closeWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.close', null);
+  }
+
+  const maximizeWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.maximize', null);
+  }
+
+  const minimizeWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.minimize', null);
+  }
+
+  const resetWindow = () => {
+    window.electron.ipcRenderer.sendMessage('window.reset', null);
+  }
+
+  const toogleMaximize = () => {
+    if(maximized){ resetWindow(); }
+    else{ maximizeWindow(); }
+    setMaximized(!maximized);
+  }
+
+  return (
+    <header id="titlebar" className="dark:bg-[#202225] w-screen flex content-center items-center justify-start">
+      <div id="drag-region" className='grow basis-0'>
+        <div id="window-title" className='pl-1'>
+          <span className='text-gray-100 font-bold text-sm'>BSManager</span>
+        </div>
+      </div>
+      <div id="window-controls" className=''>
+          <div onClick={minimizeWindow} className="button button text-gray-200 hover:bg-[#4F545C]" id="min-button" >
+            <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"> </rect></svg>
+          </div>
+          <div onClick={toogleMaximize} className="button text-gray-200 hover:bg-[#4F545C]" id="max-button">
+          <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"> </rect></svg>
+          </div>
+          <div onClick={closeWindow} className="button text-gray-200 cursor-pointer" id="close-button" draggable="false">
+            <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><polygon fill="currentColor" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"> </polygon></svg>
+          </div>
+        </div>
+    </header>
+  )
+}

src/renderer/index.ejs

@@ -1,14 +1,15 @@
 <!DOCTYPE html>
 <html>
   <head>
+
     <meta charset="utf-8" />
     <meta
       http-equiv="Content-Security-Policy"
       content="script-src 'self' 'unsafe-inline'"
     />
-    <title>Hello Electron React!</title>
   </head>
   <body>
+
     <div id="root"></div>
   </body>
 </html>

src/renderer/index.tsx

@@ -1,6 +1,7 @@
 import { createRoot } from 'react-dom/client';
-import App from './App';
 import { InitDownloadInfoInterface } from 'main/ipcs/bs-download-ipcs';
+import App from './App';
+import 'tailwindcss/tailwind.css';
 
 const container = document.getElementById('root')!;
 const root = createRoot(container);

tailwind.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   content: ['./src/renderer/**/*.tsx'],
   mode: 'jit',
-  plugins: [],
-};
+  plugins: [require('tailwind-scrollbar-hide')],
+};