add seperate display settings, fix collaped mode2.0

4 files changed, 65 insertions, 12 deletions

diff --git a/CustomApps/betterLibrary/betterlibrary.js b/CustomApps/betterLibrary/betterlibrary.js
index 7650f29..dbb13b3 100644
--- a/CustomApps/betterLibrary/betterlibrary.js
+++ b/CustomApps/betterLibrary/betterlibrary.js
@@ -3,8 +3,10 @@ var sidebar;
 var text;
 var center;
 var betterLibIsEnabled;
-var lastSidebarSize;
-var lastSidebarMode; // 1=collapsed, 0=normal, 2=expanded
+var lastSidebarSize; //
+var lastSidebarMode; //ylx-sidebar-state 1=collapsed, 0=normal, 2=expanded
+var lastViewIcons; //items-view 1=icons 2=list
+var lastViewCompact; //library-row-mode 1=compact 2=normal
 
 // Disables betterlibrary when the pages is left
 function startListener() {
@@ -18,30 +20,71 @@ function enableBetterLib() {
     waitForElm('.betterLibBox').then((elm) => {
         if (!betterLibIsEnabled)
         {
+            //swap elements
             library = document.getElementsByClassName("main-yourLibraryX-libraryContainer")[0];
             text = document.getElementsByClassName("betterLibText")[0];
             sidebar = document.getElementsByClassName("main-yourLibraryX-library")[0];
             center = document.getElementsByClassName("betterLibBox")[0];
             center.appendChild(library);
             sidebar.appendChild(text);
-            if (Spicetify.Platform.History)
+
+            //store last mode and size
             lastSidebarMode = Spicetify.Platform.LocalStorageAPI.getItem("ylx-sidebar-state");
-            lastSidebarSize = document.documentElement.style.getPropertyValue("--left-sidebar-width");
+            lastSidebarSize = Spicetify.Platform.LocalStorageAPI.getItem("ylx-expanded-state-nav-bar-width");
+
+            //set new mode and size
+            currentSidebarSize = document.documentElement.style.getPropertyValue("--left-sidebar-width");
+            currentSidebarSize = parseInt(currentSidebarSize, 10);
+            Spicetify.Platform.LocalStorageAPI.setItem("ylx-expanded-state-nav-bar-width",currentSidebarSize);
             Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",2);
-            if (lastSidebarMode != 1) //uncollapes sidebar temporarily while in betterlibrary
-                document.documentElement.style.setProperty("--left-sidebar-width", lastSidebarSize);
-            else
-                document.documentElement.style.setProperty("--left-sidebar-width", "280px");
+
+            //fix collaped library buttons
+            if (lastSidebarMode == 1) {
+                document.documentElement.style.setProperty("--betterlib-fix-collaped-view","none");
+                document.documentElement.style.setProperty("--betterlib-show-placeholder-text","none");
+            }
+
+            //store last icons mode and compact mode
+            lastViewIcons = Spicetify.Platform.LocalStorageAPI.getItem("items-view")
+            lastViewCompact = Spicetify.Platform.LocalStorageAPI.getItem("library-row-mode")
+
+            //get betterlib icons mode and compact mode from storage
+            newViewIcons = Spicetify.Platform.LocalStorageAPI.getItem("betterlib-items-view")
+            newViewCompact = Spicetify.Platform.LocalStorageAPI.getItem("betterlib-library-row-mode")
+
+            //apply betterlib icons mode and compact mode
+            Spicetify.Platform.LocalStorageAPI.setItem("items-view", newViewIcons);
+            Spicetify.Platform.LocalStorageAPI.setItem("library-row-mode", newViewCompact);
+
+
             betterLibIsEnabled = true;
         }
     });
 }
 
 function disableBetterLib() {
+    //undo fix for collaped library buttons
+    if (lastSidebarMode == 1) {
+        document.documentElement.style.setProperty("--betterlib-fix-collaped-view","inherit");
+        document.documentElement.style.setProperty("--betterlib-show-placeholder-text","flex");
+    }
+
+    //revert swap
     sidebar.appendChild(library);
     center.appendChild(text);
+
+    //reset mode and size to last
+    Spicetify.Platform.LocalStorageAPI.setItem("lx-expanded-state-nav-bar-width",lastSidebarSize);
     Spicetify.Platform.LocalStorageAPI.setItem("ylx-sidebar-state",lastSidebarMode);
-    document.documentElement.style.setProperty("--left-sidebar-width", lastSidebarSize);
+
+    //save betterlib icons mode and compact mode to storage
+    Spicetify.Platform.LocalStorageAPI.setItem("betterlib-items-view", Spicetify.Platform.LocalStorageAPI.getItem("items-view"));
+    Spicetify.Platform.LocalStorageAPI.setItem("betterlib-library-row-mode", Spicetify.Platform.LocalStorageAPI.getItem("library-row-mode"));
+
+    //revert icons and compact mode to last
+    Spicetify.Platform.LocalStorageAPI.setItem("items-view", lastViewIcons);
+    Spicetify.Platform.LocalStorageAPI.setItem("library-row-mode", lastViewCompact);
+
     betterLibIsEnabled = false;
 }
 
diff --git a/CustomApps/betterLibrary/index.js b/CustomApps/betterLibrary/index.js
index 4b09a88..7d0001b 100644
--- a/CustomApps/betterLibrary/index.js
+++ b/CustomApps/betterLibrary/index.js
@@ -13,7 +13,7 @@ const {
 function render() {
     startListener(); //I added this
     enableBetterLib(); //And this
-    return react.createElement(Grid, { title: "Opened in the center pane" });
+    return react.createElement(Grid, { title: "Open in the main view" });
 }
 
 //builds components of the page
diff --git a/CustomApps/betterLibrary/loadcss.js b/CustomApps/betterLibrary/loadcss.js
index 77c0c9d..43cde6c 100644
--- a/CustomApps/betterLibrary/loadcss.js
+++ b/CustomApps/betterLibrary/loadcss.js
@@ -3,7 +3,7 @@
         'beforeend',
         // '<link rel="stylesheet" href="spicetify-routes-betterlibrary.css" />');
         // the line above is not working. directly add css instead
-        '<style>.Root__top-container:has(.betterLibBox) .LayoutResizer__resize-bar{visibility:hidden}.betterLibText{display:none;justify-content:center;align-items:center;height:100%}.main-yourLibraryX-library .betterLibText{display:flex}.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base,.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-artist.main-useDropTarget-playlistV2.main-useDropTarget-show.main-useDropTarget-episode{pointer-events:none;font-size:x-large;color:#fff}.main-yourLibraryX-library .main-yourLibraryX-header{display:none}.main-yourLibraryX-library .main-yourLibraryX-header:has(.WYU7SXdABSulyirnmIYb){display:flex}.IconWrapper__Wrapper-sc-16usrgb-0.Wrapper-md-leading{display:none} .Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base{display:none}button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base{display:none}button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-createButton.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-playlistV2{display:inherit}span button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base{display:inherit}.main-yourLibraryX-library{padding-top:5px}</style>');
+        '<style>.Root__top-container:has(.betterLibBox) .LayoutResizer__resize-bar{visibility:hidden}.betterLibText{display:none;justify-content:center;align-items:center;height:100%}.main-yourLibraryX-library .betterLibText{display:var(--betterlib-show-placeholder-text)}.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base,.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconLeading-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-artist.main-useDropTarget-playlistV2.main-useDropTarget-show.main-useDropTarget-episode{pointer-events:none;font-size:x-large;color:white}.main-yourLibraryX-library .main-yourLibraryX-header{display:none}.main-yourLibraryX-library .main-yourLibraryX-header:has(.WYU7SXdABSulyirnmIYb){display:flex}.IconWrapper__Wrapper-sc-16usrgb-0.Wrapper-md-leading{display:none}.Button-sc-1dqy6lx-0.Button-md-24-buttonTertiary-iconOnly-condensed-useBrowserDefaultFocusStyle.main-yourLibraryX-collapseButtonWrapper.main-yourLibraryX-button.main-useDropTarget-base{display:none}button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base{display:none}button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-createButton.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base.main-useDropTarget-track.main-useDropTarget-album.main-useDropTarget-playlistV2{display:inherit}span button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserDefaultFocusStyle.main-yourLibraryX-button.main-yourLibraryX-iconOnly.main-useDropTarget-base{display:inherit}.main-yourLibraryX-library{padding-top:5px}span.Type__TypeElement-sc-goli3j-0.TypeElement-balladBold-type{display:var(--betterlib-fix-collaped-view,inherit)}.main-yourLibraryX-entryPoints.main-yourLibraryX-library{display:var(--betterlib-hide-sidebar-library,inherit)}');
     // disable after window is closed to prevent an expanded sidebar on opening
     window.addEventListener(
         'beforeunload',
diff --git a/CustomApps/betterLibrary/style.css b/CustomApps/betterLibrary/style.css
index 69f1b25..9b0c188 100644
--- a/CustomApps/betterLibrary/style.css
+++ b/CustomApps/betterLibrary/style.css
@@ -13,7 +13,7 @@
 
 /* makes the text visible only when it is in the sidebar */
 .main-yourLibraryX-library .betterLibText {
-    display: flex;
+    display: var(--betterlib-show-placeholder-text);
 }
 
 /* makes the "your library" text not clickable */
@@ -64,4 +64,14 @@ span button.Button-sc-1dqy6lx-0.Button-sm-16-buttonTertiary-iconOnly-useBrowserD
 /* add more padding to the sidebar */
 .main-yourLibraryX-library {
     padding-top: 5px;
+}
+
+/* fixes icons on collapsed betterlibrary */
+span.Type__TypeElement-sc-goli3j-0.TypeElement-balladBold-type {
+    display: var(--betterlib-fix-collaped-view,inherit);
+}
+
+/* for future setting */
+.main-yourLibraryX-entryPoints.main-yourLibraryX-library {
+    display: var(--betterlib-hide-sidebar-library,inherit);
 }
\ No newline at end of file