feat(Linux): update title bar for better Linux experience

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',

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 = () => {
+const closeApp = () => {
-   w.value.webContents.openDevTools();
+   ipcRenderer.send('close-app');
-};
-
-const reload = () => {
-   w.value.reload();
 };
 
 const onResize = () => {

src/renderer/scss/_variables.scss

@@ -29,14 +29,8 @@ $explorebar-width: 14rem;
 $footer-height: 1.5rem;
 
 @function get-excluding-size() {
-  @if $platform == linux {
-    @return $footer-height;
-  }
-
-  @else {
   @return $footer-height + $titlebar-height;
 }
-}
 
 /* stylelint-disable-next-line function-no-unknown */
 $excluding-size: get-excluding-size();

src/renderer/scss/main.scss

@@ -20,6 +20,7 @@
 
 body {
   user-select: none;
+  background-color: #000;
 }
 
 a {