added bootstrap-vue

src/main/base/store.ts

@@ -15,7 +15,15 @@ export class Store {
             "update_branch": "main",
             "resumeOnStartupBehavior": "local",
             "privateEnabled": false,
-            "themeUpdateNotification": true
+            "themeUpdateNotification": true,
+            "sidebarItems": {
+                "recentlyAdded": true,
+                "songs": true,
+                "albums": true,
+                "artists": true,
+                "videos": true,
+                "podcasts": true
+            }
         },
         "home": {
             "followedArtists": [],

src/renderer/main/vueapp.js

@@ -2,6 +2,7 @@ import {store} from './vuex-store.js';
 
 Vue.use(VueHorizontal);
 Vue.use(VueObserveVisibility);
+Vue.use(BootstrapVue)
 
 const app = new Vue({
     store: store,
@@ -552,6 +553,7 @@ const app = new Vue({
             if (this.cfg.visual.theme != "default.less" && this.cfg.visual.theme != "") {
                 this.setTheme(this.cfg.visual.theme)
             }
+            
             this.setLz(this.cfg.general.language)
             this.setLzManual()
             clearTimeout(this.hangtimer)

src/renderer/style.less

@@ -4,6 +4,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
+@import url("less/bootstrap-vue.min.css");
 @import url("less/ameframework.less");
 @import url("less/codicon.css");
 @import url("less/bootstrap.less");
@@ -2669,22 +2670,15 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       padding: 0px;
       margin: 0px;
       overflow: hidden;
+      filter: drop-shadow(0px 4px 6px rgb(0 0 0 / 70%));
 
       .lyric-line {
         pointer-events: none;
-        font-weight: 500;
+        font-weight: 600;
         font-size: 2em;
         transform-origin: center;
         animation: fsLyricIn var(--appleEase) .2s;
         opacity: 0.9;
-        text-shadow: -1px -1px 0 #000,
-          0   -1px 0 #000,
-          1px -1px 0 #000,
-        1px 0 0 #000,
-        1px 1px 0 #000,
-        0 1px 0 #000,
-        -1px 1px 0 #000,
-        -1px 0 0 #000;
 
         &:not(.active) {
           display: none;

src/renderer/views/components/menu-panel.ejs

@@ -11,7 +11,7 @@
             </div>
             <div class="menu-header-body" v-if="Object.keys(content.headerItems).length != 0">
                 <template v-for="item in content.headerItems">
-                    <button class="menu-option-header" :class="getClasses(item)" :title="item.name"
+                    <button class="menu-option-header" :class="getClasses(item)" v-b-tooltip.hover :title="item.name"
                             v-if="canDisplay(item)" :style="getItemStyle(item)" @click="action(item)">
                         <div class="sidebar-icon" style="margin: 0;" v-if="item.icon">
                             <div class="svg-icon" :style="{'--url': 'url(' + item.icon + ')'}"></div>

src/renderer/views/main.ejs

@@ -30,6 +30,7 @@
     <script src="hlscider.js"></script>
     <script src="./lib/jquery-3.2.1.slim.min.js"></script>
     <script src="./lib/popper.min.js"></script>
+    <script src="./lib/bootstrap-vue.min.js"></script>
     <script src="./lib/bootstrap.min.js"></script>
     <script src="./lib/bootbox.min.js"></script>
     <script src="./lib/notyf.min.js"></script>