Merge branch 'main' into enhancement/search-bar

src/main/base/browserwindow.ts

@@ -123,6 +123,7 @@ export class BrowserWindow {
                 "components/artist-chip",
                 "components/hello-world",
                 "components/inline-collection-list",
+                "components/settings-window",
             ],
             appRoutes: [
                 {
@@ -550,8 +551,10 @@ export class BrowserWindow {
         app.get("/ciderlocal/:songs", (req, res) => {
             const audio = atob(req.params.songs.replace(/_/g, '/').replace(/-/g, '+'));
             console.log('auss', audio)
-            let data = {data: 
+            let data = {
-             this.localSongs.filter((f: any) => audio.split(',').includes(f.id))};
+                data:
+                    this.localSongs.filter((f: any) => audio.split(',').includes(f.id))
+            };
             res.send(data);
         });
 
@@ -1273,7 +1276,8 @@ export class BrowserWindow {
                         // "name": metadata.common.title,
                         // "albumName": metadata.common.album,
                         // "artistName": metadata.common.artist}}
-                        metadatalist.push(form)}
+                        metadatalist.push(form)
+                    }
                 } catch (e) { }
             }
             // console.log('metadatalist', metadatalist);
@@ -1502,7 +1506,6 @@ export class BrowserWindow {
         /* *********************************************************************************************
          * Window Events
          * **********************************************************************************************/
-        if (process.platform === "win32") {
         let WND_STATE = {
             MINIMIZED: 0,
             NORMAL: 1,
@@ -1518,19 +1521,23 @@ export class BrowserWindow {
             const state = wndState;
             if (isMinimized && state !== WND_STATE.MINIMIZED) {
                 wndState = WND_STATE.MINIMIZED;
+                BrowserWindow.win.webContents.send('window-state-changed', 'minimized');
             } else if (isFullScreen && state !== WND_STATE.FULL_SCREEN) {
                 wndState = WND_STATE.FULL_SCREEN;
+                BrowserWindow.win.webContents.send('window-state-changed', 'fullscreen')
             } else if (isMaximized && state !== WND_STATE.MAXIMIZED) {
                 wndState = WND_STATE.MAXIMIZED;
+                BrowserWindow.win.webContents.send('window-state-changed', 'maximized')
                 BrowserWindow.win.webContents.executeJavaScript(`app.chrome.maximized = true`);
             } else if (state !== WND_STATE.NORMAL) {
                 wndState = WND_STATE.NORMAL;
+                BrowserWindow.win.webContents.send('window-state-changed', 'normal')
                 BrowserWindow.win.webContents.executeJavaScript(
                     `app.chrome.maximized = false`
                 );
             }
         });
-        }
+
 
         let isQuiting = false
 

src/main/plugins/menubar.ts

@@ -37,7 +37,7 @@ export default class Thumbar {
                 {
                     label: utils.getLocale(utils.getStoreValue('general.language'), 'term.settings'),
                     accelerator: utils.getStoreValue("general.keybindings.settings").join('+'),
-                    click: () => utils.getWindow().webContents.executeJavaScript(`app.appRoute('settings')`)
+                    click: () => utils.getWindow().webContents.executeJavaScript(`app.openSettingsPage()`)
                 },
                 ...(this.isMac ? [
                     {type: 'separator'},

src/renderer/assets/feather/hard-drive.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-hard-drive">
+  <path d="M22 12H2m3.45-6.89L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11zM6 16h.01M10 16h.01"/>
+</svg>

src/renderer/assets/feather/headphones.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-headphones">
+  <path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
+  <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
+</svg>

src/renderer/assets/feather/pen-tool.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pen-tool" width="20" height="20">
+  <path d="m12 19 7-7 3 3-7 7-3-3z"/>
+  <path d="m18 13-1.5-7.5L2 2l3.5 14.5L13 18l5-5zM2 2l7.586 7.586"/>
+  <circle cx="11" cy="11" r="2"/>
+</svg>

src/renderer/assets/feather/zap.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap" width="20" height="20">
+  <path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>
+</svg>

src/renderer/assets/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>

src/renderer/index.js

@@ -81,7 +81,7 @@ Vue.component("sidebar-library-item", {
   },
   async mounted() {
     if (this.svgIcon) {
-      this.svgIconData = await this.app.getSvgIcon(this.svgIcon);
+      this.svgIconData = this.svgIcon;
     }
   },
   methods: {},

src/renderer/less/bootstrap.less

@@ -2432,10 +2432,9 @@ fieldset:disabled .btn {
 .nav-pills .nav-link {
   background-color: transparent;
   border: 0;
-  border-radius: 50px;
+  border-radius: 6px;
   color: #eee;
   -webkit-user-drag: none;
-  // transition: transform .35s var(--appleEase), background-color .35s var(--appleEase);
   font-weight: 500;
   margin: 0px 4px;
   &:hover {
@@ -2447,7 +2446,7 @@ fieldset:disabled .btn {
 .nav-pills .show > .nav-link {
   color: #fff;
   background-color: var(--selected);
-  outline:2px solid var(--keyColor);
+  // outline:2px solid var(--keyColor);
 }
 
 .nav-fill > .nav-link,

src/renderer/less/directives.less

@@ -338,7 +338,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 110px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;
@@ -353,7 +355,9 @@
 
   #app.twopanel .app-chrome:not(.chrome-bottom) .app-chrome--center .top-nav-group .app-sidebar-item {
     min-width: 60px;
-    font-size: 0em;
+    .sidebar-item-text {
+      display: none;
+    }
 
     .sidebar-icon {
       margin: 0px;

src/renderer/less/elements.less

@@ -2168,12 +2168,20 @@ input[type=checkbox][switch]:checked:active::before {
 }
 
 // fancy pills
+.fancy-pills {
   .nav-pills {
     position: relative;
   
     .nav-link {
       transition: transform .3s var(--appleEase);
       position: relative;
+      background-color: transparent;
+      border: 0;
+      border-radius: 50px;
+      color: #eee;
+      -webkit-user-drag: none;
+      font-weight: 500;
+      margin: 0px 4px;
   
   
       &:after {
@@ -2271,6 +2279,7 @@ input[type=checkbox][switch]:checked:active::before {
       pointer-events: none;
     }
   }
+}
 
 .grouping-container {
   display: grid;

src/renderer/less/helpers.less

@@ -64,7 +64,8 @@
       overflow-y: overlay;
     }
 
-    .modal-footer {}
+    .modal-footer {
+    }
   }
 }
 
@@ -74,7 +75,9 @@
       height: 700px;
       max-height: 700px;
       width: 800px;
-    max-width : 800px;}
+      max-width: 800px;
+    }
+
     overflow: hidden;
 
     .info-header {
@@ -481,6 +484,7 @@
       z-index: -1;
       filter: blur(32px) brightness(50%) saturate(280%);
     }
+
     .popover-artwork {
       width: 200px;
       height: 200px;
@@ -491,6 +495,7 @@
     .song-name {
       font-weight: 600;
     }
+
     .song-artist, .song-album {
       opacity: 0.75;
       cursor: pointer;
@@ -501,3 +506,19 @@
     }
   }
 }
+
+._svg-icon {
+  --icon: url("./assets/chevron-left.svg");
+  --size: 1em;
+  width: var(--size);
+  height: var(--size);
+  -webkit-mask-image: var(--icon);
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  background: rgb(255 255 255 / 76%);
+  -webkit-mask-repeat: no-repeat;
+
+  &.md {
+    --size: 1.2em;
+  }
+}

src/renderer/less/macos.less

@@ -6,6 +6,7 @@ body[platform="darwin"] {
     &.notransparency::before {
         display: none;
     }
+
     #app {
         &.simplebg {
             background: transparent;
@@ -33,6 +34,16 @@ body[platform="darwin"] {
                 background-color: var(--macOSChromeColor);
             }
         }
+
+        // &::after {
+        //     position: fixed;
+        //     top:0;left:0;right:0;bottom:0;
+        //     box-shadow: inset 0px 0px .5px 1px rgb(200 200 200 / 40%);
+        //     border-radius: 10px;
+        //     content: " ";
+        //     z-index: 999999;
+        //     pointer-events: none;
+        // }
     }
 
     #app-main {

src/renderer/less/pages.less

@@ -684,6 +684,7 @@
           -webkit-mask-image: -webkit-radial-gradient(center, circle cover, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 75%);
           border-radius: 0px;
         }
+
         .hero-tint {
           position: absolute;
           top: 0;
@@ -941,7 +942,8 @@
       transition: min-height 0.5s ease-in-out;
       min-height: 200px;
 
-      .playlistInfo {}
+      .playlistInfo {
+      }
 
       .mediaContainer {
         transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
@@ -1366,23 +1368,6 @@
     margin: 16px auto 0px;
   }
 
-  .md-option-header {
-    padding      : 0px 26px;
-    border-bottom: unset;
-    border-top   : unset;
-    font-weight  : 600;
-    background   : rgb(255 255 255 / 0%);
-    font-size    : 2em;
-  }
-
-  .settings-option-body-webview {
-    height: 100%;
-    width : 100%;
-  }
-
-  .settings-option-body {
-    margin: 16px;
-  }
 }
 
 // AudioLabs page
@@ -1847,7 +1832,6 @@
           }
 
 
-
           &:hover {
             transform: scale(1.10) translateZ(-1px) translateY(10px);
             z-index: 1;
@@ -1914,6 +1898,7 @@
 
         &.close {
           background-color: #fc3c44aa;
+
           &:hover {
             background-color: #fc3c44;
           }
@@ -1921,6 +1906,7 @@
 
         &.min {
           background-color: rgb(200 200 200 / 5%);
+
           &:hover {
             background-color: rgb(200 200 200 / 10%);
           }
@@ -1971,3 +1957,156 @@
     }
   }
 }
+
+.settings-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgb(0 0 0 / 0);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 16;
+
+  .settings-window {
+    background: var(--baseColorMix);
+    max-width: 80%;
+    max-height: 90%;
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    box-shadow: var(--ciderShadow-Generic);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    flex: 1;
+    backdrop-filter: var(--glassFilterHeavy);
+    transition: width 0.25s ease-in-out, height 0.25s ease-in-out, max-width 0.25s ease-in-out, max-height 0.25s ease-in-out;
+
+    .header-text {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      opacity: 0.9;
+    }
+
+    .nav-pills {
+      gap: 6px;
+
+    }
+
+    .nav-pills .nav-link {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+
+    .md-option-header {
+      padding: 0px 26px;
+      border-bottom: unset;
+      border-top: unset;
+      font-weight: 600;
+      background: rgb(255 255 255 / 0%);
+      font-size: 2em;
+    }
+
+    .settings-option-body-webview {
+      height: 100%;
+      width: 100%;
+    }
+
+    .settings-option-body {
+      margin: 16px;
+    }
+
+    &.maxed {
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      max-width: 100%;
+      border-radius: 0px;
+      box-shadow: unset;
+    }
+
+    .close-btn {
+      width: 36px;
+      height: 36px;
+      background-position: center;
+      background-repeat: no-repeat;
+      -webkit-app-region: no-drag;
+      appearance: none;
+      border: 0;
+      background-color: transparent;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      border-radius: 50px;
+      display: grid;
+      align-content: center;
+      z-index: 9;
+
+      &:before {
+        content: "";
+        font-family: "codicon";
+        color: var(--textColor);
+        font-size: 20px;
+      }
+
+      &:hover {
+        background-color: rgb(196, 43, 28)
+      }
+
+      &.minmax-btn {
+        right: 52px;
+
+        &:before {
+          content: "";
+        }
+
+        &.min {
+          &:before {
+            content: "";
+          }
+        }
+
+        &:hover {
+          background-color: var(--selected);
+        }
+      }
+    }
+
+    .tabs {
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+
+      > .col-auto {
+        width: 230px;
+      }
+
+      .tab-content {
+        margin: 0 !important;
+      }
+    }
+
+    .tab-content {
+      overflow-y: overlay;
+      height: 100%;
+      background-color: var(--panelColor2);
+      padding-top: 48px;
+      border-left: 1px solid var(--borderColor);
+    }
+  }
+}

src/renderer/main/app.js

@@ -7,6 +7,7 @@ import {Events} from './events.js'
 import { wsapi } from "./wsapi_interop.js"
 import { MusicKitTools } from "./musickittools.js"
 import { spawnMica } from "./mica.js"
+import { svgIcon } from './components/svg-icon.js'
 
 
 // Define window objects

src/renderer/main/components/svg-icon.js

@@ -0,0 +1,20 @@
+export const svgIcon = Vue.component("svg-icon", {
+    template: `
+        <div class="_svg-icon" :class="classes" :svg-name="name" :style="{'--icon': 'url(' + url + ')'}"></div>
+    `,
+    props: {
+        name: {
+            type: String,
+            required: false
+        },
+        classes: {
+            type: String,
+            required: false
+        },
+        url: {
+            type: String,
+            required: true,
+            default: "./assets/repeat.svg"
+        }
+    }
+})

src/renderer/main/vueapp.js

@@ -168,6 +168,7 @@ const app = new Vue({
                 location: "",
                 info: {}
             },
+            windowState: "normal",
             desiredPageTransition: "wpfade_transform",
             hideUserInfo: ipcRenderer.sendSync("is-dev") || false,
             artworkReady: false,
@@ -217,6 +218,7 @@ const app = new Vue({
             castMenu: false,
             moreInfo: false,
             airplayPW: false,
+            settings: false
         },
         socialBadges: {
             badgeMap: {},
@@ -243,6 +245,7 @@ const app = new Vue({
         notyf: notyf,
         idleTimer: null,
         idleState: false,
+        appVisible: true
     },
     watch: {
         cfg: {
@@ -274,6 +277,12 @@ const app = new Vue({
         }, false)
     },
     methods: {
+        hotReload() {
+            this.appVisible = false
+            setTimeout(() => {
+                this.appVisible = true
+            }, 1000)
+        },
         setWindowHash(route = "") {
             window.location.hash = `#${route}`;
         },
@@ -849,6 +858,10 @@ const app = new Vue({
                 this.library.localsongs = data;
             })
 
+            ipcRenderer.on('window-state-changed', (event, data) => {
+                this.chrome.windowState = data
+            })
+
             ipcRenderer.on('SoundCheckTag', (event, tag) => {
                 // let replaygain = self.parseSCTagToRG(tag)
                 try {
@@ -4325,7 +4338,7 @@ const app = new Vue({
                             "name": app.getLz('settings.option.audio.audioLab'),
                             "hidden": true,
                             "action": function () {
-                                app.appRoute('audiolabs')
+                                app.openSettingsPage('audiolabs')
                             }
                         },
                     ]
@@ -4384,6 +4397,32 @@ const app = new Vue({
 
             }
         },
+        openSettingsPage(page) {
+            switch (page) {
+                case "general":
+                    this.$store.state.pageState.settings.currentTabIndex = 0
+                    break;
+                case "audio":
+                    this.$store.state.pageState.settings.currentTabIndex = 1
+                    break;
+                case "audiolabs":
+                    this.$store.state.pageState.settings.currentTabIndex = 2
+                    break;
+                case "visual":
+                    this.$store.state.pageState.settings.currentTabIndex = 3
+                    break;
+                case "lyrics":
+                    this.$store.state.pageState.settings.currentTabIndex = 4
+                    break;
+                case "connectivity":
+                    this.$store.state.pageState.settings.currentTabIndex = 5
+                    break;
+                case "advanced":
+                    this.$store.state.pageState.settings.currentTabIndex = 6
+                    break;
+            }
+            app.modals.settings = true
+        },
         LastFMDeauthorize() {
             ipcRenderer.invoke('setStoreValue', 'lastfm.enabled', false).catch((e) => console.error(e));
             ipcRenderer.invoke('setStoreValue', 'lastfm.auth_token', '').catch((e) => console.error(e));

src/renderer/main/vuex-store.js

@@ -12,6 +12,10 @@ const store = new Vuex.Store({
                 nextUrl: null,
                 items: [],
                 size: "normal"
+            },
+            settings: {
+                currentTabIndex: 0,
+                fullscreen: false
             }
         },
         artwork: {

src/renderer/style.less

@@ -15,6 +15,7 @@
 
 :root {
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
+  --borderColor: rgb(200 200 200 / 16%);
   --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
   --mediaItemShadow-Shadow: 0 8px 40px rgb(0 0 0 / 0.55);
   --mediaItemShadow-ShadowSubtle: 0 4px 14px rgb(0 0 0 / 10%);
@@ -50,6 +51,7 @@
   --textColor: #eee;
   --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
   --glassFilter: blur(16px) saturate(180%); 
+  --glassFilterHeavy: blur(64px) saturate(280%);
   --sidebarWidth: 260px;
 }
 
@@ -856,6 +858,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-sidebar-item {
+  --iconSize: 18px;
   display: flex;
   width: 100%;
   padding: 8px 12px;
@@ -870,6 +873,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   transition: transform 0.1s;
   text-align: left;
   align-items: center;
+  gap: 12px;
 
   &.app-sidebar-item-playlist {
     -webkit-user-drag: element;
@@ -885,6 +889,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     }
   }
 
+  >._svg-icon {
+    --size: var(--iconSize);
+  }
+
 }
 
 .app-sidebar-item:hover {

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

@@ -105,7 +105,7 @@
               $root.getLz("term.about")
             }}</span>
           </button>
-          <button class="usermenu-item" @click="appRoute('settings')">
+          <button class="usermenu-item" @click="modals.settings = true">
             <span class="usermenu-item-icon">
               <%- include("../svg/settings.svg") %>
             </span>

src/renderer/views/app/panels.ejs

@@ -31,6 +31,9 @@
 <transition name="modal">
     <plugin-menu v-if="modals.pluginMenu"></plugin-menu>
 </transition>
+<transition name="modal">
+    <settings-window v-if="modals.settings"></settings-window>
+</transition>
 <transition name="modal">
     <eq-view v-if="modals.equalizer"></eq-view>
 </transition>

src/renderer/views/app/sidebar.ejs

@@ -158,23 +158,10 @@
       </div>
       <template v-if="!cfg.general.sidebarCollapsed.playlists">
         <button class="app-sidebar-item" @click="playlistHeaderContextMenu">
-          <div class="sidebar-icon">
+          <svg-icon url="./assets/feather/plus.svg"></svg-icon>
-            <svg
+          <div class="sidebar-item-text">
-              width="46"
-              height="46"
-              fill="none"
-              stroke="currentColor"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M12 5v14"></path>
-              <path d="M5 12h14"></path>
-            </svg>
-          </div>
             {{ getLz("action.createNew") }}
+          </div>
         </button>
         <sidebar-playlist
           v-for="item in getPlaylistFolderChildren('p.playlistsroot')"

src/renderer/views/components/audio-controls.ejs

@@ -1,10 +1,10 @@
 <script type="text/x-template" id="audio-controls">
-    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
+    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioControls = false"
-         @contextmenu.self="app.resetState()">
+         @contextmenu.self="app.modals.audioControls = false">
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{app.getLz('term.audioControls')}}</div>
-                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
+                <button class="close-btn" @click="app.modals.audioControls = false" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="md-option-line">

src/renderer/views/components/audio-playbackrate.ejs

@@ -1,10 +1,10 @@
 <script type="text/x-template" id="audio-playbackrate">
-    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()"
+    <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioPlaybackRate = false"
-         @contextmenu.self="app.resetState()">
+         @contextmenu.self="app.modals.audioPlaybackRate = false">
         <div class="modal-window">
             <div class="modal-header">
                 <div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
-                <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
+                <button class="close-btn" @click="app.modals.audioPlaybackRate = false" :aria-label="app.getLz('action.close')"></button>
             </div>
             <div class="modal-content">
                 <div class="md-option-line">

src/renderer/views/components/audio-settings.ejs

@@ -1,10 +1,10 @@
 <script type="text/x-template" id="audio-settings">
     <template>
-        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
+        <div class="modal-fullscreen addtoplaylist-panel" @click.self="app.modals.audioSettings = false" @contextmenu.self="app.modals.audioSettings = false">
             <div class="modal-window">
                 <div class="modal-header">
                     <div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
-                    <button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
+                    <button class="close-btn" @click="app.modals.audioSettings = false" :aria-label="app.getLz('action.close')"></button>
                 </div>
                 <div class="modal-content">
                     <button class="playlist-item"
@@ -23,7 +23,7 @@
                         <div class="name">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
                     </button>
                     <button class="playlist-item"
-                            @click="$root.appRoute('audiolabs')" style="width:100%;">
+                            @click="$root.openSettingsPage('audiolabs')" style="width:100%;">
                         <div class="icon"><%- include("../svg/speaker.svg") %></div>
                         <div class="name">{{app.getLz('settings.option.audio.audioLab')}}</div>
                     </button>

src/renderer/views/components/equalizer.ejs

@@ -291,7 +291,7 @@
                 })
             },
             close() {
-                app.resetState()
+                app.modals.equalizer = false
             },
             changeVibrantBass() {
                 if (app.cfg.audio.equalizer.vibrantBass !== '0') {

src/renderer/views/components/sidebar-playlist.ejs

@@ -9,7 +9,7 @@
                 :href="item.href"
                 @click='clickEvent()'>
             <template v-if="!renaming">
-                <div class="sidebar-icon" :key="item.id" v-html="icon"></div> {{ item.attributes.name }}
+                <svg-icon :url="icon"/> {{ item.attributes.name }}
                 <small class="presentNotice" v-if="hasRelatedMediaItems">(Track present)</small>
             </template>
             <input type="text" v-model="item.attributes.name" class="pl-rename-field" @blur="rename()" @keydown.enter="rename()" v-else>
@@ -57,9 +57,9 @@
         },
         async mounted() {
             if (this.item.type !== "library-playlist-folders") {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/list.svg")
+                this.icon = ("./assets/feather/list.svg")
             } else {
-                this.icon = await this.$root.getSvgIcon("./assets/feather/folder.svg")
+                this.icon = ("./assets/feather/folder.svg")
             }
             let playlistMap = this.$root.playlists.trackMapping
             if (this.relateMediaItems.length != 0) {

src/renderer/views/main.ejs

@@ -67,11 +67,16 @@
     </style>
 </head>
 
-<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>" platform="<%= env.platform %>">
+<body class="notransparency" oncontextmenu="return false;" loading="1" os-release="<%= parseInt(env.osRelease) %>"
+      platform="<%= env.platform %>">
 <div id="LOADER">
     <%- include("../assets/cider-round.svg") %>
 </div>
-    <div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
+<div id="app" :class="getAppClasses()"
+     v-if="appVisible"
+     :window-state="chrome.windowState"
+     :style="getAppStyle()" :library-visible="(chrome.sidebarCollapsed ? 0 : 1)"
+     :window-style="cfg.visual.directives.windowLayout">
     <transition name="fsModeSwitch">
         <div id="app-main" v-show="appMode == 'player'">
             <%- include('app/chrome-top'); %>
@@ -104,8 +109,9 @@
     <%- include(env.components[i]); %>
 <% } %>
 
-
+<script async
-                <script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
+        src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js") %>"
+        data-web-components>
 </script>
 <script src="index.js?v=1"></script>
 
@@ -117,8 +123,8 @@
 <script type="text/x-template" id="sidebar-library-item">
     <button class="app-sidebar-item"
             :class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
-        <div class="sidebar-icon" v-html="svgIconData" v-if="svgIconData != ''"></div>
+        <svg-icon :url="svgIconData" v-if="svgIconData != ''" />
-        {{ name }}
+        <span class="sidebar-item-text">{{ name }}</span>
     </button>
 </script>
 

src/renderer/views/pages/audiolabs.ejs

@@ -1,5 +1,5 @@
 <script type="text/x-template" id="audiolabs-page">
-    <div class="content-inner audiolabs-page ">
+    <div class="audiolabs-page">
         <div class="md-option-container">
             <div class="settings-option-body">
                 <div class="md-option-line">
@@ -120,7 +120,7 @@
                         </select>
                     </div>
                 </div>
-                <div style="opacity: 0.5; pointer-events: none">
+                <div style="opacity: 0.5; pointer-events: none" v-if="false">
                     <div class="md-option-header">
                         <span>{{$root.getLz('settings.header.unfinished')}}</span>
                     </div>

src/renderer/views/pages/cider-playlist.ejs

@@ -172,7 +172,7 @@
                 </div>
             </div>
             <div class="playlist-body scrollbody">
-                <b-tabs pills class="track-pills pilldim" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
+                <b-tabs pills class="track-pills pilldim fancy-pills" align="center" content-class="mt-3" :nav-wrapper-class="navClass(data)">
                     <b-tab :title="$root.getLz('term.tracks')">
                         <div @wheel="minClass(true)" @scroll="minClass(true)">
                         <div class="">

src/renderer/views/pages/zoo.ejs

@@ -1,5 +1,6 @@
 <script type="text/x-template" id="cider-zoo">
     <div class="content-inner">
+        <svg-icon/>
         <h3>Welcome to element park. *BERR NERR NERR NERR NERRRRR BERR NER NER NER NERRR BERRR NR NR NRRRR*</h3>
         <button @click="app.playMediaItemById('1592151778', 'album')">Play Test Album</button>
         {{ $store.state.test }}