From 2e9864b5abc8243ae98bd13472accece76fe8ce8 Mon Sep 17 00:00:00 2001
From: Isaac <padspambox@gmail.com>
Date: Sat, 13 Apr 2024 15:31:11 -0400
Subject: [PATCH] fix: remove gaps left over from homepage shelves (#136)

* Target homepage shelves via specific urls, to remove gap
---
 src/app.tsx      | 20 +++++++++-----------
 src/css/app.scss | 40 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index a0e95ba..621d23e 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -95,20 +95,11 @@ async function main() {
   let aggressiveMode = getLocalStorageDataFromKey(AGGRESSIVE_MODE_KEY, false);
   let hideAudioBooks = getLocalStorageDataFromKey(AUDIOBOOKS_KEY, false);
 
-  const hideAudiobooksMenuItem = new Menu.Item(t('menu.hideAudiobooks'), hideAudioBooks, (self) => {
-    hideAudioBooks = !hideAudioBooks;
-    localStorage.setItem(AUDIOBOOKS_KEY, hideAudioBooks);
-    // self.setState(isEnabled && hideAudioBooks);
-    self.setState(hideAudioBooks);
-    apply();
-  });
-
   // Add menu item and menu click handler
   const enabledMenuItem = new Menu.Item(t('menu.enabled'), isEnabled, (self) => {
     isEnabled = !isEnabled;
     localStorage.setItem(SETTINGS_KEY, isEnabled);
     self.setState(isEnabled);
-    // hideAudiobooksMenuItem.setState(isEnabled && hideAudioBooks);
     apply();
   });
 
@@ -119,11 +110,18 @@ async function main() {
     location.reload();
   });
 
-  new Menu.SubMenu(t('menu.title'), Object.values([
+  const hideAudiobooksMenuItem = new Menu.Item(t('menu.hideAudiobooks'), hideAudioBooks, (self) => {
+    hideAudioBooks = !hideAudioBooks;
+    localStorage.setItem(AUDIOBOOKS_KEY, hideAudioBooks);
+    self.setState(hideAudioBooks);
+    apply();
+  });
+
+  new Menu.SubMenu(t('menu.title'), [
     enabledMenuItem,
     aggressiveModeMenuItem,
     hideAudiobooksMenuItem,
-  ])).register();
+  ]).register();
 
   // Run the app logic
   function apply() {
diff --git a/src/css/app.scss b/src/css/app.scss
index f253bf5..687237c 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,6 +1,22 @@
 // TODO: Make a debug switch that just outlines everything it would block in red.
 
-// The nearby shelves seem to freak out and constantly recalculate their positions if I use display: none
+// IDs for audiobooks (href="/section/ID")
+$audiobooksForYou: '0JQ5DAnM3wGh0gz1MXnue2';
+// IDs for podcasts
+$spotifyOriginalPodcasts: '0JQ5DAnM3wGh0gz1MXnu4i';
+$episodesForYou: '0JQ5DAnM3wGh0gz1MXnu9e';
+$geopoliticalAnalysisEpisodesForYou: '0JQ5DAnM3wGh0gz1MXnuk0';
+$mediaScrutinyEpisodesForYou: '0JQ5DAnM3wGh0gz1MXnuk1';
+$UKPoliticsEpisodesForYou: '0JQ5DAnM3wGh0gz1MXnuk2';
+$familyDramaEpisodesForYou: '0JQ5DAnM3wGh0gz1MXnujZ';
+$currentEventsEpisodesForYou: '0JQ5DAnM3wGh0gz1MXnuk3';
+$showsToTry: '0JQ5DAnM3wGh0gz1MXnu3L';
+
+// The nearby shelves seem to freak out and constantly show/hide if I use display:none, since
+// React culls the elements and the :has selector no longer applies,
+// causing the shelves to be visible again. Then it culls them again, and so on.
+// If I use visiblity instead, it does hide them, but since the element is still technically there,
+// it leaves behind the `gap` in the grid.
 @mixin hide-visibility {
   visibility: hidden;
   height: 0;
@@ -23,12 +39,26 @@
     @include hide-display();
   };
 
-  // Shelves that have podcasts in them
+  // Fallback for shelves that have podcasts in them
+  // (These leave behind a gap)
   .main-shelf-shelf:has(a[href^="/episode/"]),
   .main-shelf-shelf:has(a[href^="/show/"]) {
     @include hide-visibility();
   }
 
+  // Specific shelves that have podcasts in them
+  // (These don't leave a gap)
+  .main-shelf-shelf:has(a[href*="#{$spotifyOriginalPodcasts}"]),
+  .main-shelf-shelf:has(a[href*="#{$episodesForYou}"]),
+  .main-shelf-shelf:has(a[href*="#{$geopoliticalAnalysisEpisodesForYou}"]),
+  .main-shelf-shelf:has(a[href*="#{$mediaScrutinyEpisodesForYou}"]),
+  .main-shelf-shelf:has(a[href*="#{$UKPoliticsEpisodesForYou}"]),
+  .main-shelf-shelf:has(a[href*="#{$familyDramaEpisodesForYou}"]),
+  .main-shelf-shelf:has(a[href*="#{$currentEventsEpisodesForYou}"]),
+  .main-shelf-shelf:has(a[href*="#{$showsToTry}"]) {
+    @include hide-display();
+  }
+
   // Podcasts categories on search page
   // Old style
   .x-categoryCard-CategoryCard[href="/genre/podcasts-web"],
@@ -58,6 +88,12 @@
     @include hide-display();
   }
 
+  // Specific shelves that have audiobooks in them
+  // (These don't leave a gap)
+  .main-shelf-shelf:has(a[href*="#{$audiobooksForYou}"]) {
+    @include hide-display();
+  }
+
   // Audiobooks category on search page
   // As of Spotify 1.2.26.1187.g36b715a1
   .x-categoryCard-CategoryCard[href="/genre/0JQ5DAqbMKFETqK4t8f1n3"] {