design

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);