1 files changed, 19 insertions, 31 deletions

diff --git a/app/index.js b/app/index.js
index b6f1a9b..4b09a88 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,3 +1,5 @@
+// this part was mostly copied from an example
+
 // Grab any variables you need
 const react = Spicetify.React;
 const reactDOM = Spicetify.ReactDOM;
@@ -7,51 +9,37 @@ const {
     Platform: { History },
 } = Spicetify;
 
-// The main custom app render function. The component returned is what is rendered in Spotify.
+// this is called when the page is open
 function render() {
-    betterlibrary();
-    return react.createElement(Grid, { title: "loading..." });
+    startListener(); //I added this
+    enableBetterLib(); //And this
+    return react.createElement(Grid, { title: "Opened in the center pane" });
 }
 
-// Our main component
+//builds components of the page
 class Grid extends react.Component {
     constructor(props) {
         super(props);
         Object.assign(this, props);
         this.state = {
-            foo: "bar",
+            foo: "bar", //dont know what these do but its working so ill leave them be
             data: "etc"
         };
-        // console.log("test");
     }
 
     render() {
         return react.createElement("section", {
-            className: "contentSpacing",
-        },
-        react.createElement("div", {
-            className: "betterlibheader",
-        }, react.createElement("h1", null, this.props.title),
-        ),
+            className: "betterLibSection",
+            },
+            react.createElement("div",{
+                className: "betterLibBox"
+            },
+            react.createElement("div", {
+                className: "betterLibText",
+                },  
+                react.createElement("h4", null, this.props.title),
+            ),
+            )
         );
-        // ), react.createElement("div", {
-        //     id: "marketplace-grid",
-        //     className: "main-gridContainer-gridContainer",
-        //     "data-tab": CONFIG.activeTab,
-        //     style: {
-        //         "--minimumColumnWidth": "180px",
-        //     },
-        // }, [...cardList]),
-        // react.createElement("footer", {
-        //     style: {
-        //         margin: "auto",
-        //         textAlign: "center",
-        //     },
-        // }, !this.state.endOfList && (this.state.rest ? react.createElement(LoadMoreIcon, { onClick: this.loadMore.bind(this) }) : react.createElement(LoadingIcon)),
-        // ), react.createElement(TopBarContent, {
-        //     switchCallback: this.switchTo.bind(this),
-        //     links: CONFIG.tabs,
-        //     activeLink: CONFIG.activeTab,
-        // });
     }
 }
\ No newline at end of file