oobe improvemnets

- added close and minimize buttons (windows/linux only)
- added drag region to top
- optimized for smaller window sizes

src/ciderkit/public.js

@@ -18,7 +18,7 @@ const CiderKit = {
                     body: body,
                     options: options
                 })
-                let response = await fetch("http://localhost:9000/api/musickit/v3", opts);
+                let response = await fetch("./api/musickit/v3", opts);
                 return response.json()
             }
         }

src/renderer/less/pages.less

@@ -1700,6 +1700,10 @@
       overflow-y   : scroll;
       overflow-x   : hidden;
 
+      @media screen and (max-width: 1161px) {
+        font-size: 13px;
+      }
+
       &.text {
         white-space: pre-wrap;
       }
@@ -1758,6 +1762,10 @@
             z-index   : 1;
             box-shadow: 0px 12px 16px rgb(0 0 0 / 25%);
           }
+
+          @media screen and (max-height: 688px) {
+            width: 270px;
+          }
         }
       }
     }
@@ -1775,6 +1783,71 @@
         text-align: center;
       }
     }
+
+  }
+
+
+  .oobe-titlebar {
+    position          : absolute;
+    top               : 0;
+    left              : 0;
+    height            : 46px;
+    width             : 100%;
+    align-items       : center;
+    justify-content   : right;
+    display           : flex;
+    -webkit-app-region: drag;
+
+    .button-group {
+      -webkit-app-region: no-drag;
+      display           : flex;
+      flex-direction    : row;
+      width             : 100px;
+      height            : 100%;
+      justify-content   : center;
+      align-items       : center;
+      gap               : 16px;
+
+      >button {
+        height         : 32px;
+        width          : 32px;
+        font-size      : 16px;
+        border-radius  : 0px;
+        border         : 0;
+        appearance     : none;
+        position       : relative;
+        display        : flex;
+        justify-content: center;
+        align-items    : center;
+        border-radius  : 100%;
+
+        &.close {
+          background-color: #fc3c44aa;
+          &:hover {
+            background-color: #fc3c44;
+          }
+        }
+
+        &.min {
+          background-color: rgb(200 200 200 / 5%);
+          &:hover {
+            background-color: rgb(200 200 200 / 10%);
+          }
+        }
+
+        &.close::before {
+          font-family: "codicon";
+          content    : "";
+          color      : white;
+        }
+
+        &.min::before {
+          font-family: "codicon";
+          content    : "";
+          color      : white;
+        }
+      }
+    }
   }
 }
 

src/renderer/views/app/app-navigation.ejs

@@ -10,7 +10,7 @@
             <img
               class="sidebar-user-icon"
               loading="lazy"
-              :src="getMediaItemArtwork(chrome.hideUserInfo ? 'http://localhost:9000/assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
+              :src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
             />
 
             <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">

src/renderer/views/pages/oobe.ejs

@@ -143,6 +143,12 @@
 
             </div>
         </div>
+        <div class="oobe-titlebar">
+            <div class="button-group" v-if="$root.platform !== 'darwin'">
+                <button class="min" @click="$root.ipcRenderer.send('minimize')"></button>
+                <button class="close" @click="$root.ipcRenderer.send('close')"></button>
+            </div>
+        </div>
     </div>
 </script>
 <script>