From 30578016b03c080cd1dd337eacea934e2d18abb6 Mon Sep 17 00:00:00 2001
From: onkofonko <ocky852@gmail.com>
Date: Fri, 30 Aug 2024 22:27:31 +0200
Subject: [PATCH 1/7] Introduce custom title bar

---
 common/components/Menubar.svelte | 175 ++++++++++++++++++++++++++-----
 electron/src/main/app.js         |  34 ++++--
 electron/src/preload/preload.js  |   7 +-
 3 files changed, 181 insertions(+), 35 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index de4de31..c4bfb1f 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -1,42 +1,113 @@
 <script>
-  import { persisted } from 'svelte-persisted-store'
-  import { getContext } from 'svelte'
-  import { click } from '@/modules/click.js'
-  import IPC from '@/modules/ipc.js'
+  import { persisted } from "svelte-persisted-store";
+  import { getContext } from "svelte";
+  import { click } from "@/modules/click.js";
+  import IPC from "@/modules/ipc.js";
 
-  export let page
-  const view = getContext('view')
-  function close () {
-    $view = null
-    page = 'home'
+  export let page;
+  const view = getContext("view");
+  function close() {
+    $view = null;
+    page = "home";
   }
 
-  const debug = persisted('debug', '', {
+  const debug = persisted("debug", "", {
     serializer: {
-      parse: e => e,
-      stringify: e => e
-    }
-  })
+      parse: (e) => e,
+      stringify: (e) => e,
+    },
+  });
+
+  function minimize() {
+    window.ipcRenderer.send("minimize");
+  }
+
+  function maximize() {
+    window.ipcRenderer.send("maximize");
+  }
+
+  function closeapp() {
+    window.ipcRenderer.send("closeapp");
+  }
 </script>
 
-<div class='w-full z-101 navbar bg-transparent border-0 p-0 d-flex'>
-  <div class='d-flex h-full draggable align-items-center text-center'>
-    {#if window.version?.platform !== 'darwin'}
-      <img src='./logo_filled.png' class='position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5' alt='ico' use:click={close} />
+<div class="w-full z-101 navbar bg-transparent border-0 p-0 d-flex">
+  <div class="d-flex h-full draggable align-items-center text-center">
+    {#if window.version?.platform !== "darwin"}
+      <img
+        src="./logo_filled.png"
+        class="position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5"
+        alt="ico"
+        use:click={close}
+      />
     {/if}
   </div>
-  <div class='h-full bg-dark flex-grow-1'>
-    {#if window.version?.platform === 'linux'}
-      <div class='d-flex align-items-center close h-full' use:click={() => IPC.emit('close')}>
-        <svg viewBox='0 0 24 24'>
-          <path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' />
+  <div id="window-controls">
+    <button class="button" id="max-button" on:click={minimize}>
+      <svg
+        class="svg-controls"
+        role="img"
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+        ><rect fill="currentColor" width="10" height="1" x="1" y="6"
+        ></rect></svg
+      ></button
+    >
+    <button class="button" id="restore-button" on:click={maximize}
+      ><svg
+        class="svg-controls"
+        role="img"
+        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
+      ></button
+    >
+    <button class="button" id="close-button" on:click={closeapp}>
+      <svg
+        class="svg-controls"
+        role="img"
+        width="12"
+        height="12"
+        viewBox="0 0 12 12"
+      >
+        <polygon
+          fill="currentColor"
+          fill-rule="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
+      ></button
+    >
+  </div>
+  <div class="h-full bg-dark flex-grow-1">
+    {#if window.version?.platform === "linux"}
+      <div
+        class="d-flex align-items-center close h-full"
+        use:click={() => IPC.emit("close")}
+      >
+        <svg viewBox="0 0 24 24">
+          <path
+            d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+          />
         </svg>
       </div>
     {/if}
   </div>
 </div>
 {#if $debug}
-  <div class='ribbon right z-101 text-center position-fixed font-size-16 font-weight-bold'>Debug Mode!</div>
+  <div
+    class="ribbon right z-101 text-center position-fixed font-size-16 font-weight-bold"
+  >
+    Debug Mode!
+  </div>
 {/if}
 
 <style>
@@ -51,10 +122,10 @@
     transform: translate(-29.3%) rotate(-45deg);
   }
   .navbar {
-    --navbar-height: 28px !important;
+    --navbar-height: 32px !important;
   }
   .z-101 {
-    z-index: 101 !important
+    z-index: 101 !important;
   }
   .draggable {
     -webkit-app-region: drag;
@@ -64,7 +135,7 @@
   }
   img {
     top: 0;
-    -webkit-app-region: no-drag
+    -webkit-app-region: no-drag;
   }
   .close {
     width: 40px;
@@ -81,7 +152,7 @@
     fill: currentColor;
   }
   .navbar {
-    left: unset !important
+    left: unset !important;
   }
   @media (pointer: none), (pointer: coarse) {
     .navbar {
@@ -89,4 +160,52 @@
       height: 0;
     }
   }
+  #window-controls {
+    display: grid;
+    grid-template-columns: repeat(3, 46px);
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+  }
+
+  #window-controls {
+    -webkit-app-region: no-drag;
+  }
+
+  #window-controls .button {
+    grid-row: 1 / span 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 46px;
+    height: 32px;
+    background: transparent;
+    border: none;
+    color: #ffffff;
+  }
+
+  #window-controls .button {
+    user-select: none;
+  }
+
+  #window-controls .button:hover {
+    background: rgba(24, 24, 28, 0.2);
+  }
+
+  #window-controls .button:active {
+    background: rgba(24, 24, 28, 0.4);
+  }
+
+  #close-button:hover {
+    background: #e81123 !important;
+  }
+
+  #close-button:active {
+    background: #f1707a !important;
+  }
+  .svg-controls {
+    width: 12px;
+    height: 12px;
+  }
 </style>
diff --git a/electron/src/main/app.js b/electron/src/main/app.js
index 2252770..e3ffbdc 100644
--- a/electron/src/main/app.js
+++ b/electron/src/main/app.js
@@ -29,11 +29,6 @@ export default class App {
     height: 900,
     frame: process.platform === 'darwin', // Only keep the native frame on Mac
     titleBarStyle: 'hidden',
-    titleBarOverlay: {
-      color: '#17191c',
-      symbolColor: '#eee',
-      height: 28
-    },
     backgroundColor: '#17191c',
     autoHideMenuBar: true,
     webPreferences: {
@@ -41,7 +36,9 @@ export default class App {
       allowRunningInsecureContent: false,
       enableBlinkFeatures: 'FontAccess, AudioVideoTracks',
       backgroundThrottling: false,
-      preload: join(__dirname, '/preload.js')
+      preload: join(__dirname, '/preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false
     },
     icon: join(__dirname, '/logo_filled.png'),
     show: false
@@ -159,3 +156,28 @@ export default class App {
     if (!this.updater.install(forceRunAfter)) app.quit()
   }
 }
+
+ipcMain.on('minimize', (event) => {
+  const focusedWindow = BrowserWindow.getFocusedWindow();
+  if (focusedWindow) {
+    focusedWindow.minimize();
+  }
+});
+
+ipcMain.on('maximize', (event) => {
+  const focusedWindow = BrowserWindow.getFocusedWindow();
+  if (focusedWindow) {
+    if (focusedWindow.isMaximized()) {
+      focusedWindow.unmaximize();
+    } else {
+      focusedWindow.maximize();
+    }
+  }
+});
+
+ipcMain.on('closeapp', (event) => {
+  const focusedWindow = BrowserWindow.getFocusedWindow();
+  if (focusedWindow) {
+    focusedWindow.close();
+  }
+});
\ No newline at end of file
diff --git a/electron/src/preload/preload.js b/electron/src/preload/preload.js
index ba05348..65840db 100644
--- a/electron/src/preload/preload.js
+++ b/electron/src/preload/preload.js
@@ -29,4 +29,9 @@ ipcRenderer.once('port', ({ ports }) => {
       ports[0].postMessage(a, b)
     }
   })
-})
+}) 
+
+contextBridge.exposeInMainWorld('ipcRenderer', {
+  send: (channel, data) => ipcRenderer.send(channel, data),
+  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args)),
+});
\ No newline at end of file

From ba3f6f87f545b980bf4b203cdcf658f6c490c4fe Mon Sep 17 00:00:00 2001
From: onkofonko <ocky852@gmail.com>
Date: Sat, 31 Aug 2024 19:12:07 +0200
Subject: [PATCH 2/7] Fix lint issues

---
 common/components/Menubar.svelte | 120 +++++++++----------------------
 electron/src/main/app.js         |  20 +++---
 electron/src/preload/preload.js  |   6 +-
 3 files changed, 46 insertions(+), 100 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index c4bfb1f..00cc4ee 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -1,113 +1,59 @@
 <script>
-  import { persisted } from "svelte-persisted-store";
-  import { getContext } from "svelte";
-  import { click } from "@/modules/click.js";
-  import IPC from "@/modules/ipc.js";
+  import { persisted } from 'svelte-persisted-store'
+  import { getContext } from 'svelte'
+  import { click } from '@/modules/click.js'
+  import IPC from '@/modules/ipc.js'
 
-  export let page;
-  const view = getContext("view");
-  function close() {
-    $view = null;
-    page = "home";
+  export let page
+  const view = getContext('view')
+  function close () {
+    $view = null
+    page = 'home'
   }
 
-  const debug = persisted("debug", "", {
+  const debug = persisted('debug', '', {
     serializer: {
       parse: (e) => e,
-      stringify: (e) => e,
-    },
-  });
+      stringify: (e) => e
+    }
+  })
 
-  function minimize() {
-    window.ipcRenderer.send("minimize");
+  function minimize () {
+    window.ipcRenderer.send('minimize')
   }
 
-  function maximize() {
-    window.ipcRenderer.send("maximize");
+  function maximize () {
+    window.ipcRenderer.send('maximize')
   }
 
-  function closeapp() {
-    window.ipcRenderer.send("closeapp");
+  function closeapp () {
+    window.ipcRenderer.send('closeapp')
   }
 </script>
 
-<div class="w-full z-101 navbar bg-transparent border-0 p-0 d-flex">
-  <div class="d-flex h-full draggable align-items-center text-center">
-    {#if window.version?.platform !== "darwin"}
-      <img
-        src="./logo_filled.png"
-        class="position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5"
-        alt="ico"
-        use:click={close}
-      />
+<div class='w-full z-101 navbar bg-transparent border-0 p-0 d-flex'>
+  <div class='d-flex h-full draggable align-items-center text-center'>
+    {#if window.version?.platform !== 'darwin'}
+      <img src='./logo_filled.png' class='position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5' alt='ico' use:click={close} />
     {/if}
   </div>
-  <div id="window-controls">
-    <button class="button" id="max-button" on:click={minimize}>
-      <svg
-        class="svg-controls"
-        role="img"
-        width="12"
-        height="12"
-        viewBox="0 0 12 12"
-        ><rect fill="currentColor" width="10" height="1" x="1" y="6"
-        ></rect></svg
-      ></button
-    >
-    <button class="button" id="restore-button" on:click={maximize}
-      ><svg
-        class="svg-controls"
-        role="img"
-        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
-      ></button
-    >
-    <button class="button" id="close-button" on:click={closeapp}>
-      <svg
-        class="svg-controls"
-        role="img"
-        width="12"
-        height="12"
-        viewBox="0 0 12 12"
-      >
-        <polygon
-          fill="currentColor"
-          fill-rule="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
-      ></button
-    >
+  <div id='window-controls'>
+    <button class='button' id='max-button' on:click={minimize}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
+    <button class='button' id='restore-button' on:click={maximize}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
+    <button class='button' id='close-button' on:click={closeapp}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
   </div>
-  <div class="h-full bg-dark flex-grow-1">
-    {#if window.version?.platform === "linux"}
-      <div
-        class="d-flex align-items-center close h-full"
-        use:click={() => IPC.emit("close")}
-      >
-        <svg viewBox="0 0 24 24">
-          <path
-            d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
-          />
+  <div class='h-full bg-dark flex-grow-1'>
+    {#if window.version?.platform === 'linux'}
+      <div class='d-flex align-items-center close h-full' use:click={() => IPC.emit('close')}>
+        <svg viewBox='0 0 24 24'>
+          <path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' />
         </svg>
       </div>
     {/if}
   </div>
 </div>
 {#if $debug}
-  <div
-    class="ribbon right z-101 text-center position-fixed font-size-16 font-weight-bold"
-  >
-    Debug Mode!
-  </div>
+  <div class='ribbon right z-101 text-center position-fixed font-size-16 font-weight-bold'>Debug Mode!</div>
 {/if}
 
 <style>
diff --git a/electron/src/main/app.js b/electron/src/main/app.js
index e3ffbdc..9646f82 100644
--- a/electron/src/main/app.js
+++ b/electron/src/main/app.js
@@ -158,26 +158,26 @@ export default class App {
 }
 
 ipcMain.on('minimize', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow();
+  const focusedWindow = BrowserWindow.getFocusedWindow()
   if (focusedWindow) {
-    focusedWindow.minimize();
+    focusedWindow.minimize()
   }
-});
+})
 
 ipcMain.on('maximize', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow();
+  const focusedWindow = BrowserWindow.getFocusedWindow()
   if (focusedWindow) {
     if (focusedWindow.isMaximized()) {
-      focusedWindow.unmaximize();
+      focusedWindow.unmaximize()
     } else {
-      focusedWindow.maximize();
+      focusedWindow.maximize()
     }
   }
-});
+})
 
 ipcMain.on('closeapp', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow();
+  const focusedWindow = BrowserWindow.getFocusedWindow()
   if (focusedWindow) {
-    focusedWindow.close();
+    focusedWindow.close()
   }
-});
\ No newline at end of file
+})
diff --git a/electron/src/preload/preload.js b/electron/src/preload/preload.js
index 65840db..8c439ef 100644
--- a/electron/src/preload/preload.js
+++ b/electron/src/preload/preload.js
@@ -29,9 +29,9 @@ ipcRenderer.once('port', ({ ports }) => {
       ports[0].postMessage(a, b)
     }
   })
-}) 
+})
 
 contextBridge.exposeInMainWorld('ipcRenderer', {
   send: (channel, data) => ipcRenderer.send(channel, data),
-  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args)),
-});
\ No newline at end of file
+  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
+})

From e09dcd1d9d161ed1614f1eb3807c394e48f81ee3 Mon Sep 17 00:00:00 2001
From: onkofonko <ocky852@gmail.com>
Date: Sun, 1 Sep 2024 01:20:14 +0200
Subject: [PATCH 3/7] Remove linux only close button

---
 common/components/Menubar.svelte | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index 00cc4ee..84671af 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -43,13 +43,6 @@
     <button class='button' id='close-button' on:click={closeapp}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
   </div>
   <div class='h-full bg-dark flex-grow-1'>
-    {#if window.version?.platform === 'linux'}
-      <div class='d-flex align-items-center close h-full' use:click={() => IPC.emit('close')}>
-        <svg viewBox='0 0 24 24'>
-          <path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z' />
-        </svg>
-      </div>
-    {/if}
   </div>
 </div>
 {#if $debug}
@@ -83,20 +76,11 @@
     top: 0;
     -webkit-app-region: no-drag;
   }
-  .close {
-    width: 40px;
-  }
-  .close:hover {
-    background-color: #e81123 !important;
-  }
   svg {
     width: 18px;
     height: 18px;
     width: 100%;
   }
-  path {
-    fill: currentColor;
-  }
   .navbar {
     left: unset !important;
   }

From a3efe63b59a1dabd60cfc3c63d8be4c7e6017d09 Mon Sep 17 00:00:00 2001
From: onkofonko <ocky852@gmail.com>
Date: Thu, 5 Sep 2024 02:09:53 +0200
Subject: [PATCH 4/7] Address feedback

---
 common/components/Menubar.svelte | 51 ++++++++++----------------------
 electron/src/main/app.js         | 36 +++++-----------------
 electron/src/preload/preload.js  |  7 +----
 3 files changed, 24 insertions(+), 70 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index 84671af..f148a1a 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -13,22 +13,10 @@
 
   const debug = persisted('debug', '', {
     serializer: {
-      parse: (e) => e,
-      stringify: (e) => e
+      parse: e => e,
+      stringify: e => e
     }
   })
-
-  function minimize () {
-    window.ipcRenderer.send('minimize')
-  }
-
-  function maximize () {
-    window.ipcRenderer.send('maximize')
-  }
-
-  function closeapp () {
-    window.ipcRenderer.send('closeapp')
-  }
 </script>
 
 <div class='w-full z-101 navbar bg-transparent border-0 p-0 d-flex'>
@@ -37,10 +25,10 @@
       <img src='./logo_filled.png' class='position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5' alt='ico' use:click={close} />
     {/if}
   </div>
-  <div id='window-controls'>
-    <button class='button' id='max-button' on:click={minimize}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
-    <button class='button' id='restore-button' on:click={maximize}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
-    <button class='button' id='close-button' on:click={closeapp}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
+  <div class='window-controls'>
+    <button class='button max-button'  on:click={() => IPC.emit('minimize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
+    <button class='button restore-button'  on:click={() => IPC.emit('maximize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
+    <button class='button close-button' on:click={() => IPC.emit('close')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
   </div>
   <div class='h-full bg-dark flex-grow-1'>
   </div>
@@ -64,7 +52,7 @@
     --navbar-height: 32px !important;
   }
   .z-101 {
-    z-index: 101 !important;
+    z-index: 101 !important
   }
   .draggable {
     -webkit-app-region: drag;
@@ -74,7 +62,7 @@
   }
   img {
     top: 0;
-    -webkit-app-region: no-drag;
+    -webkit-app-region: no-drag
   }
   svg {
     width: 18px;
@@ -90,7 +78,7 @@
       height: 0;
     }
   }
-  #window-controls {
+  .window-controls {
     display: grid;
     grid-template-columns: repeat(3, 46px);
     position: absolute;
@@ -98,12 +86,10 @@
     right: 0;
     height: 100%;
   }
-
-  #window-controls {
+  .window-controls {
     -webkit-app-region: no-drag;
   }
-
-  #window-controls .button {
+  .window-controls .button {
     grid-row: 1 / span 1;
     display: flex;
     justify-content: center;
@@ -114,24 +100,19 @@
     border: none;
     color: #ffffff;
   }
-
-  #window-controls .button {
+  .window-controls .button {
     user-select: none;
   }
-
-  #window-controls .button:hover {
+  .window-controls .button:hover {
     background: rgba(24, 24, 28, 0.2);
   }
-
-  #window-controls .button:active {
+  .window-controls .button:active {
     background: rgba(24, 24, 28, 0.4);
   }
-
-  #close-button:hover {
+  .close-button:hover {
     background: #e81123 !important;
   }
-
-  #close-button:active {
+  .close-button:active {
     background: #f1707a !important;
   }
   .svg-controls {
diff --git a/electron/src/main/app.js b/electron/src/main/app.js
index 9646f82..31b7dc0 100644
--- a/electron/src/main/app.js
+++ b/electron/src/main/app.js
@@ -36,9 +36,7 @@ export default class App {
       allowRunningInsecureContent: false,
       enableBlinkFeatures: 'FontAccess, AudioVideoTracks',
       backgroundThrottling: false,
-      preload: join(__dirname, '/preload.js'),
-      contextIsolation: true,
-      nodeIntegration: false
+      preload: join(__dirname, '/preload.js')
     },
     icon: join(__dirname, '/logo_filled.png'),
     show: false
@@ -62,6 +60,11 @@ export default class App {
     this.mainWindow.on('closed', () => this.destroy())
     this.webtorrentWindow.on('closed', () => this.destroy())
     ipcMain.on('close', () => this.destroy())
+    ipcMain.on('minimize', () => BrowserWindow.getFocusedWindow()?.minimize())
+    ipcMain.on('maximize', () => {
+      const focusedWindow = BrowserWindow.getFocusedWindow()
+      focusedWindow?.isMaximized() ? focusedWindow.unmaximize() : focusedWindow.maximize()
+});
     app.on('before-quit', e => {
       if (this.destroyed) return
       e.preventDefault()
@@ -155,29 +158,4 @@ export default class App {
     this.destroyed = true
     if (!this.updater.install(forceRunAfter)) app.quit()
   }
-}
-
-ipcMain.on('minimize', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (focusedWindow) {
-    focusedWindow.minimize()
-  }
-})
-
-ipcMain.on('maximize', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (focusedWindow) {
-    if (focusedWindow.isMaximized()) {
-      focusedWindow.unmaximize()
-    } else {
-      focusedWindow.maximize()
-    }
-  }
-})
-
-ipcMain.on('closeapp', (event) => {
-  const focusedWindow = BrowserWindow.getFocusedWindow()
-  if (focusedWindow) {
-    focusedWindow.close()
-  }
-})
+}
\ No newline at end of file
diff --git a/electron/src/preload/preload.js b/electron/src/preload/preload.js
index 8c439ef..17f795c 100644
--- a/electron/src/preload/preload.js
+++ b/electron/src/preload/preload.js
@@ -29,9 +29,4 @@ ipcRenderer.once('port', ({ ports }) => {
       ports[0].postMessage(a, b)
     }
   })
-})
-
-contextBridge.exposeInMainWorld('ipcRenderer', {
-  send: (channel, data) => ipcRenderer.send(channel, data),
-  on: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args))
-})
+})
\ No newline at end of file

From 7323c9ee2d37b4a842f2cf5e24d5d56b7f698118 Mon Sep 17 00:00:00 2001
From: onkofonko <ocky852@gmail.com>
Date: Thu, 5 Sep 2024 19:18:50 +0200
Subject: [PATCH 5/7] Address feedback

---
 common/components/Menubar.svelte | 7 +++----
 electron/src/main/app.js         | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index f148a1a..fbf0351 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -79,8 +79,7 @@
     }
   }
   .window-controls {
-    display: grid;
-    grid-template-columns: repeat(3, 46px);
+    display: flex;
     position: absolute;
     top: 0;
     right: 0;
@@ -104,10 +103,10 @@
     user-select: none;
   }
   .window-controls .button:hover {
-    background: rgba(24, 24, 28, 0.2);
+    background: rgba(128, 128, 128, 0.2);
   }
   .window-controls .button:active {
-    background: rgba(24, 24, 28, 0.4);
+    background: rgba(128, 128, 128, 0.4);
   }
   .close-button:hover {
     background: #e81123 !important;
diff --git a/electron/src/main/app.js b/electron/src/main/app.js
index 31b7dc0..135896b 100644
--- a/electron/src/main/app.js
+++ b/electron/src/main/app.js
@@ -60,9 +60,9 @@ export default class App {
     this.mainWindow.on('closed', () => this.destroy())
     this.webtorrentWindow.on('closed', () => this.destroy())
     ipcMain.on('close', () => this.destroy())
-    ipcMain.on('minimize', () => BrowserWindow.getFocusedWindow()?.minimize())
+    ipcMain.on('minimize', () => this.mainWindow?.minimize())
     ipcMain.on('maximize', () => {
-      const focusedWindow = BrowserWindow.getFocusedWindow()
+      const focusedWindow = this.mainWindow
       focusedWindow?.isMaximized() ? focusedWindow.unmaximize() : focusedWindow.maximize()
 });
     app.on('before-quit', e => {

From c94b34c563630ced8f591960909257168deccf8d Mon Sep 17 00:00:00 2001
From: onkofonko <ocky852@gmail.com>
Date: Thu, 5 Sep 2024 20:08:01 +0200
Subject: [PATCH 6/7] Address feedback

---
 common/components/Menubar.svelte | 27 +++++----------------------
 1 file changed, 5 insertions(+), 22 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index fbf0351..4657eaf 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -25,12 +25,10 @@
       <img src='./logo_filled.png' class='position-absolute w-50 h-50 m-10 pointer d-md-block d-none p-5' alt='ico' use:click={close} />
     {/if}
   </div>
-  <div class='window-controls'>
-    <button class='button max-button'  on:click={() => IPC.emit('minimize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
-    <button class='button restore-button'  on:click={() => IPC.emit('maximize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
-    <button class='button close-button' on:click={() => IPC.emit('close')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
-  </div>
-  <div class='h-full bg-dark flex-grow-1'>
+  <div class='window-controls d-flex position-absolute top-0 right-0 height-full'>
+    <button class='button max-button d-flex border-0 color-white align-items-center justify-content-center'  on:click={() => IPC.emit('minimize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
+    <button class='button restore-button d-flex border-0 color-white align-items-center justify-content-center'  on:click={() => IPC.emit('maximize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
+    <button class='button close-button d-flex border-0 color-white align-items-center justify-content-center' on:click={() => IPC.emit('close')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
   </div>
 </div>
 {#if $debug}
@@ -78,28 +76,13 @@
       height: 0;
     }
   }
-  .window-controls {
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100%;
-  }
   .window-controls {
     -webkit-app-region: no-drag;
   }
   .window-controls .button {
-    grid-row: 1 / span 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    background: transparent;
     width: 46px;
     height: 32px;
-    background: transparent;
-    border: none;
-    color: #ffffff;
-  }
-  .window-controls .button {
     user-select: none;
   }
   .window-controls .button:hover {

From adeb19c2b2f4990ae24103d5659a067ae80c47d3 Mon Sep 17 00:00:00 2001
From: ThaUnknown <6506529+ThaUnknown@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:01:43 +0200
Subject: [PATCH 7/7] fix: blur edges

---
 common/components/Menubar.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/common/components/Menubar.svelte b/common/components/Menubar.svelte
index 4657eaf..02e9725 100644
--- a/common/components/Menubar.svelte
+++ b/common/components/Menubar.svelte
@@ -26,8 +26,8 @@
     {/if}
   </div>
   <div class='window-controls d-flex position-absolute top-0 right-0 height-full'>
-    <button class='button max-button d-flex border-0 color-white align-items-center justify-content-center'  on:click={() => IPC.emit('minimize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
-    <button class='button restore-button d-flex border-0 color-white align-items-center justify-content-center'  on:click={() => IPC.emit('maximize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
+    <button class='button max-button d-flex border-0 color-white align-items-center justify-content-center' on:click={() => IPC.emit('minimize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='currentColor' height='1' width='10' x='1' y='6' /></svg></button>
+    <button class='button restore-button d-flex border-0 color-white align-items-center justify-content-center' on:click={() => IPC.emit('maximize')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><rect fill='none' height='9' stroke='currentColor' width='9' x='1.5' y='1.5' /></svg></button>
     <button class='button close-button d-flex border-0 color-white align-items-center justify-content-center' on:click={() => IPC.emit('close')}><svg class='svg-controls' height='12' role='img' viewBox='0 0 12 12'width='12'><polygon fill='currentColor' fill-rule='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' /></svg></button>
   </div>
 </div>
@@ -78,6 +78,8 @@
   }
   .window-controls {
     -webkit-app-region: no-drag;
+    backdrop-filter: blur(8px);
+    background: rgba(24, 24, 24, 0.1);
   }
   .window-controls .button {
     background: transparent;