From 8e54f7b80135768a33934bc9336239dee38401a5 Mon Sep 17 00:00:00 2001
From: fabio286 <fabio286@gmail.com>
Date: Thu, 30 Jan 2025 18:01:56 +0100
Subject: [PATCH] feat(Linux): update title bar for better Linux experience

---
 src/main/main.ts                        |  3 +-
 src/renderer/components/TheTitleBar.vue | 48 ++++++++++++++++++++-----
 src/renderer/scss/_variables.scss       |  8 +----
 src/renderer/scss/main.scss             |  1 +
 4 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/src/main/main.ts b/src/main/main.ts
index 56778f3b..03a77d73 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -43,7 +43,8 @@ async function createMainWindow () {
          spellcheck: false
       },
       autoHideMenuBar: true,
-      titleBarStyle: isLinux ? 'default' :'hidden',
+      frame: !isLinux,
+      titleBarStyle: 'hidden',
       titleBarOverlay: isWindows
          ? {
             color: appTheme === 'dark' ? '#3f3f3f' : '#fff',
diff --git a/src/renderer/components/TheTitleBar.vue b/src/renderer/components/TheTitleBar.vue
index 0c01a756..a99c1a29 100644
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@@ -1,6 +1,5 @@
 <template>
    <div
-      v-if="!isLinux"
       id="titlebar"
       @dblclick="toggleFullScreen"
    >
@@ -21,16 +20,39 @@
             class="titlebar-element"
             @click="openDevTools"
          >
-            <BaseIcon icon-name="mdiBugPlayOutline" :size="24" />
+            <BaseIcon icon-name="mdiBugPlayOutline" :size="18" />
          </div>
          <div
             v-if="isDevelopment"
             class="titlebar-element"
             @click="reload"
          >
-            <BaseIcon icon-name="mdiRefresh" :size="24" />
+            <BaseIcon icon-name="mdiRefresh" :size="18" />
          </div>
          <div v-if="isWindows" :style="'width: 140px;'" />
+         <div v-if="isLinux" class="d-flex">
+            <div
+               v-if="isDevelopment"
+               class="titlebar-element"
+               @click="minimize"
+            >
+               <BaseIcon icon-name="mdiWindowMinimize" :size="18" />
+            </div>
+            <div
+               v-if="isDevelopment"
+               class="titlebar-element"
+               @click="toggleFullScreen"
+            >
+               <BaseIcon :icon-name="isMaximized ? 'mdiWindowRestore' : 'mdiWindowMaximize'" :size="18" />
+            </div>
+            <div
+               v-if="isDevelopment"
+               class="titlebar-element"
+               @click="closeApp"
+            >
+               <BaseIcon icon-name="mdiClose" :size="18" />
+            </div>
+         </div>
       </div>
    </div>
 </template>
@@ -74,6 +96,18 @@ const windowTitle = computed(() => {
    return [connectionName, ...breadcrumbs].join(' • ');
 });
 
+const openDevTools = () => {
+   w.value.webContents.openDevTools();
+};
+
+const reload = () => {
+   w.value.reload();
+};
+
+const minimize = () => {
+   w.value.minimize();
+};
+
 const toggleFullScreen = () => {
    if (isMaximized.value)
       w.value.unmaximize();
@@ -81,12 +115,8 @@ const toggleFullScreen = () => {
       w.value.maximize();
 };
 
-const openDevTools = () => {
-   w.value.webContents.openDevTools();
-};
-
-const reload = () => {
-   w.value.reload();
+const closeApp = () => {
+   ipcRenderer.send('close-app');
 };
 
 const onResize = () => {
diff --git a/src/renderer/scss/_variables.scss b/src/renderer/scss/_variables.scss
index 9e6ba963..d57c599c 100644
--- a/src/renderer/scss/_variables.scss
+++ b/src/renderer/scss/_variables.scss
@@ -29,13 +29,7 @@ $explorebar-width: 14rem;
 $footer-height: 1.5rem;
 
 @function get-excluding-size() {
-  @if $platform == linux {
-    @return $footer-height;
-  }
-
-  @else {
-    @return $footer-height + $titlebar-height;
-  }
+  @return $footer-height + $titlebar-height;
 }
 
 /* stylelint-disable-next-line function-no-unknown */
diff --git a/src/renderer/scss/main.scss b/src/renderer/scss/main.scss
index 308ad595..6e983677 100644
--- a/src/renderer/scss/main.scss
+++ b/src/renderer/scss/main.scss
@@ -20,6 +20,7 @@
 
 body {
   user-select: none;
+  background-color: #000;
 }
 
 a {