added cooler title bar, added performance fixes

src/App.vue

 <template>
     <div id="app" :class="platform != 'darwin' ? 'app' : 'app-darwin'" tabindex="-1" v-on:keydown.esc="closeOverlays()">
-        <WindowTitleBar />
+        <!-- <WindowTitleBar /> -->
 
         <main>
             <Navigation v-bind:downloadQueueCount="downloadQueue.length" v-bind:downloadOverlayShown="showDownloadOverlay" />
@@ -81,6 +81,7 @@
             });
 
             this.$root.$on('download', (url) => {
+                this.$data.showDownloadOverlay = true;
                 this.addToQueue(url);
             });
             this.$root.$on('showDownloadOverlay', () => {
@@ -222,7 +223,7 @@
     }
     ::-webkit-scrollbar {
         background: #212529;
-        width: 5px;
+        width: 8px;
     }
     ::-webkit-scrollbar-thumb {
         background: #fff;
@@ -233,9 +234,8 @@
     }
     main {
         display: grid;
-        margin-left: 60px;
         position: absolute;
-        top: 30px;
+        top: 60px;
         bottom: 0px;
         left: 0px;
         right: 0px;
@@ -325,7 +325,7 @@
         transition: transform .5s;
     }
     .slideDownloadOverlay-enter, .slideDownloadOverlay-leave-to {
-        transform: translateX(-400px);
+        transform: translateX(400px);
     }
     .tooltip {
         background: #000000;
@@ -335,40 +335,14 @@
 
         &[x-placement='top'] {
             margin-bottom: 5px;
-
-            &:after {
-                top: 100%;
-                left: 50%;
-                border: solid transparent;
-                content: " ";
-                height: 0;
-                width: 0;
-                position: absolute;
-                pointer-events: none;
-                border-color: rgba(0, 0, 0, 0);
-                border-top-color: #000000;
-                border-width: 8px;
-                margin-left: -8px;
-            }
         }
 
         &[x-placement='right'] {
             margin-left: 5px;
+        }
 
-            &:after {
-                right: 100%;
-                top: 50%;
-                border: solid transparent;
-                content: " ";
-                height: 0;
-                width: 0;
-                position: absolute;
-                pointer-events: none;
-                border-color: rgba(0, 0, 0, 0);
-                border-right-color: #000000;
-                border-width: 8px;
-                margin-top: -8px;
-            }
+        &[x-placement='down'] {
+            margin-bottom: 5px;
         }
     }
 </style>

src/background.js

@@ -62,13 +62,11 @@ app.setAsDefaultProtocolClient("spinshare-user");
 function createWindow () {
   win = new BrowserWindow({
     title: "SpinSha.re",
-    width: 1350,
-    height: 740,
-    minHeight: 740,
-    minWidth: 1350,
-    frame: false,
+    width: 1300,
+    height: 800,
+    minHeight: 800,
+    minWidth: 1300,
     backgroundColor: '#212629',
-    titleBarStyle: 'hiddenInset',
     webPreferences: {
       nodeIntegration: true
     }

src/components/Overlays/DownloadOverlay.vue

@@ -62,9 +62,9 @@
     .download-overlay {
         position: fixed;
         z-index: 10;
-        top: 30px;
+        top: 60px;
         bottom: 0px;
-        left: 60px;
+        right: 0px;
         width: 400px;
         background: #383C3F;
         display: grid;
@@ -151,6 +151,6 @@
         }
     }
     .app-darwin .download-overlay {
-        top: 40px;
+        top: 100px;
     }
 </style>

src/components/Song/SongItem.vue

@@ -86,7 +86,7 @@
 <style scoped lang="less">
     .song-item {
         background: rgba(255,255,255,0.1);
-        transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+        transition: 0.2s ease-in-out transform, 0.2s ease-in-out background, 0.2s ease-in-out box-shadow;
         overflow: hidden;
         border-radius: 6px;
 
@@ -168,8 +168,8 @@
         }
 
         &:hover {
-            transform: scale(1.1);
             cursor: pointer;
+            background: rgba(255,255,255,0.2);
             box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
 
             & .song-cover {

src/components/Song/SongLocalItem.vue

@@ -82,7 +82,7 @@
 <style scoped lang="less">
     .song-item-local {
         background: rgba(255,255,255,0.1);
-        transition: 0.2s ease-in-out transform, 0.2s ease-in-out box-shadow;
+        transition: 0.2s ease-in-out transform, 0.2s ease-in-out background, 0.2s ease-in-out box-shadow;
         overflow: hidden;
         border-radius: 6px;
 
@@ -145,8 +145,8 @@
         }
 
         &:not(.song-item-onlylocal):hover {
-            transform: scale(1.1);
             cursor: pointer;
+            background: rgba(255,255,255,0.2);
             box-shadow: 0px 4px 20px 5px rgba(0, 0, 0, 0.4);
 
             & .song-cover {